Ping Design System

Get DESIGN.md Download View template Works with

Ping is a bold, high-contrast SaaS landing page. It is black, white and one loud yellow: a black hero with a large white Lato headline, a full-width #FFF200 band right under it, then calm white sections with heavy black headings. All the illustration is black-and-white line art of people at work, so the page feels like a printed comic rather than a glossy product site.

Three signatures make it recognisable:

The yellow band. A full-bleed accent #FFF200 section sits directly under the black hero. The hero illustration hangs over its top edge (the band has 250px top padding to make room), so black, white and yellow meet in one frame.
The leaf corner. Black cards and the big photo use an asymmetric radius: 10px on two corners and 100px (cards) or 120px (photo) on the other two (10px 100px, 10px 120px). The result is one sweeping curve on the bottom-left and the top-right of each block.
Line-art people. Flat monochrome illustrations (black fills, thin outlines, small four-point sparkles) stand in for product screenshots in the hero, the "What we do" split and the FAQ.

The page is light overall, with black used as a band colour (hero, nav, blog band, stat cards).

Colors

Surfaces

canvas#FFFFFF

Page background for the white content sections

surface-1#FFFFFF

Same as canvas

inverse-canvas#000000

Nav, hero, stat cards, the blog band

footer-ink#686868

Footer links, which turn #000000 on hover

field#FFFFFF

field-ink#222222

Ink

on-primary#000000

Text on primary

on-secondary#FFFFFF

Text on secondary

on-accent#000000

Text on accent

inverse-ink#FFFFFF

Text on black: hero title, nav links, stat numbers

inverse-ink-muted#FFFFFF · 60%

The hero lead paragraph

ink#000000

Headlines and labels

ink-muted#000000

Body copy

ink-subtle#696773

Eyebrows (What we do, The process)

ink-faint#6E6E6E

Address lines, dropdown links, placeholders, Ping Client

Action

primary#FFFFFF

The main button, a white box on black bands

primary-hover#FFF200

Button background on hover

secondary#000000

The dark submit button used on white pages

accent#FFF200

The feature band under the hero, and the hover fill of every button

link-dark#434945

Underlined inline links and the blog-title hover

Lines & effects

nav-link-hover#F6F7F9 · 70%

Nav link colour on hover

line#000000 · 15%

The 1px rule between the logo grid and the step columns

line-strong#CCCCCC

1px solid borders (cart and checkout boxes)

line-field#6E6E6E · 20%

Input borders

line-on-dark#FFFFFF · 9%

The 1px rule under the black nav

overlay#000000 · 50%

Dark scrim on the full-width photo and the lightbox

Typography

Lato · display-hero

The quick brown fox jumps

Hero H1 A truly Innovative way to build great designs, centred, white. 70px · 700 · 1.03

Lato · headline-lg

The quick brown fox jumps

Section titles Improve your brand with a great design., Set to work better. 44px · 700 · 1.0

Lato · title-lg

The quick brown fox jumps

Blog post titles. 25px · 700 · 1.2

Lato · body-quote

The quick brown fox jumps

The testimonial line. 22px · 400 · 1.18

Lato · eyebrow

The quick brown fox jumps

What we do, The process in ink-subtle. 17px · 700 · 1.18

Lato · label-nav

The quick brown fox jumps

Nav links. 17px · 700 · 1.0

Spacing & shape

Purpose	Value
Container	max 1140px, centred
Section rhythm	120px top and bottom, with 5% side padding (72px at 1440px); 80px at ≤991 and 60px at ≤479
Breakpoints	991px, 767px and 479px (Webflow defaults)

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	20px
`md`	30px
`lg`	50px
`xl`	60px
`2xl`	80px
`3xl`	100px

Layout spacing

Token	Value	Preview
`section-side`	72px
`nav-height`	80px
`section`	120px
`section-overlap`	250px

Border radius

xs5px

sm10px

pill60px

leaf100px

leaf-xl120px

full9999px

Motion

Scroll fade-up	opacity 0 → 1 and y → 0px, 1000ms outQuart on scroll into view
Button hover	Background to #FFF200, transition: all 0.3s (submit: 0.4s)
Nav link hover	Colour to #F6F7F9 at 70%, opacity 0.2s
Blog title hover	Opacity to 80% and colour to #434945, 0.2s
FAQ accordion	Height 400ms outCubic; the + rotates 200ms easeInOut
Dropdown open	Fade 300ms ease

Do’s and don’ts

Open the page with a black hero and follow it with the full-bleed #FFF200 band.
Keep body copy at 17px Lato 400 in pure #000000 on #FFFFFF.
Use weight 700 for every heading, label, nav link and FAQ question.
Use the leaf corners (10px 100px or 10px 120px) on black cards and big photos.
Make every button hover to #FFF200, 300ms.
Use monochrome line-art illustration instead of product screenshots.
Add a second accent colour or tint the yellow; #FFF200 is the only colour.
Use Caveat or DM Sans. They load but the design doesn't use them.
Put the leaf corner on small UI (buttons, inputs, tags). Those stay at 5px.
Add drop shadows to cards. The only shadow belongs to the sticky nav.
Set paragraphs in grey. Grey #696773 and #6E6E6E are for eyebrows and meta only.
Use yellow as a card fill inside white sections or as text colour.

Example prompt

Any page in the Ping style

Prompt

Build your page in the Ping style. Use Lato only. Start with a sticky black nav (80px, white 17px bold links, 1px white-9% rule below) and a black hero: a centred 70px bold white title (line height 1.03), a 21px lead in white at 60%, and a white button (#FFFFFF, black 16px bold text, 5px radius, 56px tall, padding 18px 30px) that turns #FFF200 on hover in 300ms. Follow the hero with a full-bleed #FFF200 band of three features (20px bold titles, 17px regular black text). Content sections are white with 120px vertical padding, a 1140px container, a grey #696773 17px bold eyebrow and a 44px bold black title. Black stat cards use border-radius 10px 100px. Use black-and-white line-art illustrations of people, no colour photos, no shadows on cards.

# Ping Design System

> Measured from the Ping template. Drop it into Claude,
> ChatGPT, Gemini, Cursor or v0.

## Overview

Ping is a bold, high-contrast SaaS landing page. It is
black, white and one loud yellow: a black hero with a
large white Lato headline, a full-width #FFF200 band
right under it, then calm white sections with heavy
black headings. All the illustration is black-and-white

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background for the… |
| surface-1    | #FFFFFF     | Same as canvas           |
| inverse-can… | #000000     | Nav, hero, stat cards, … |
| footer-ink   | #686868     | Footer links, which tur… |
| field        | #FFFFFF     |                          |
| field-ink    | #222222     |                          |
| on-primary   | #000000     | Text on primary          |
| on-secondary | #FFFFFF     | Text on secondary        |
| on-accent    | #000000     | Text on accent           |
| inverse-ink  | #FFFFFF     | Text on black: hero tit… |
| inverse-ink… | #FFFFFF 60% | The hero lead paragraph  |
| ink          | #000000     | Headlines and labels     |
| ink-muted    | #000000     | Body copy                |
| ink-subtle   | #696773     | Eyebrows (What we do, T… |

## Typography

- display-hero: Lato 70px / 700
- display-metric: Lato 45px / 700
- headline-lg: Lato 44px / 700
- headline-md: Lato 32px / 700

{
  "$description": "Ping design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "The main button, a white box on black bands"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#FFF200",
      "$description": "Button background on hover"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "The dark submit button used on white pages"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on secondary"
    },
    "accent": {
      "$type": "color",
      "$value": "#FFF200",
      "$description": "The feature band under the hero, and the hover fill of every button"
    },
    "on-accent": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on accent"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background for the white content sections"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FFFFFF",

/* Ping theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-headline-lg, rounded-sm, p-lg */

@theme {
  /* Colors */
  --color-primary: #FFFFFF;
  --color-primary-hover: #FFF200;
  --color-on-primary: #000000;
  --color-secondary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-accent: #FFF200;
  --color-on-accent: #000000;
  --color-canvas: #FFFFFF;
  --color-surface-1: #FFFFFF;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-ink-muted: #FFFFFF99;
  --color-nav-link-hover: #F6F7F9B3;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-ink-subtle: #696773;
  --color-ink-faint: #6E6E6E;
  --color-footer-ink: #686868;
  --color-link-dark: #434945;
  --color-line: #00000026;
  --color-line-strong: #CCCCCC;
  --color-line-field: #6E6E6E33;
  --color-line-on-dark: #FFFFFF17;
  --color-field: #FFFFFF;
  --color-field-ink: #222222;
  --color-overlay: #00000080;

  /* Fonts */
  --font-sans: "Lato", sans-serif;
  --font-lato: "Lato", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 70px;
  --text-display-hero--line-height: 1.03;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 700;
  --text-display-metric: 45px;
  --text-display-metric--line-height: 1.07;
  --text-display-metric--letter-spacing: 0px;
  --text-display-metric--font-weight: 700;

/* Ping design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #FFFFFF; /* The main button, a white box on black bands */
  --color-primary-hover: #FFF200; /* Button background on hover */
  --color-on-primary: #000000; /* Text on primary */
  --color-secondary: #000000; /* The dark submit button used on white pages */
  --color-on-secondary: #FFFFFF; /* Text on secondary */
  --color-accent: #FFF200; /* The feature band under the hero, and the hover fill of every button */
  --color-on-accent: #000000; /* Text on accent */
  --color-canvas: #FFFFFF; /* Page background for the white content sections */
  --color-surface-1: #FFFFFF; /* Same as canvas */
  --color-inverse-canvas: #000000; /* Nav, hero, stat cards, the blog band */
  --color-inverse-ink: #FFFFFF; /* Text on black: hero title, nav links, stat numbers */
  --color-inverse-ink-muted: #FFFFFF99; /* The hero lead paragraph */
  --color-nav-link-hover: #F6F7F9B3; /* Nav link colour on hover */
  --color-ink: #000000; /* Headlines and labels */
  --color-ink-muted: #000000; /* Body copy */
  --color-ink-subtle: #696773; /* Eyebrows (What we do, The process) */
  --color-ink-faint: #6E6E6E; /* Address lines, dropdown links, placeholders, Ping Client */
  --color-footer-ink: #686868; /* Footer links, which turn #000000 on hover */
  --color-link-dark: #434945; /* Underlined inline links and the blog-title hover */
  --color-line: #00000026; /* The 1px rule between the logo grid and the step columns */
  --color-line-strong: #CCCCCC; /* 1px solid borders (cart and checkout boxes) */
  --color-line-field: #6E6E6E33; /* Input borders */
  --color-line-on-dark: #FFFFFF17; /* The 1px rule under the black nav */
  --color-field: #FFFFFF;
  --color-field-ink: #222222;
  --color-overlay: #00000080; /* Dark scrim on the full-width photo and the lightbox */

  /* Fonts */
  --font-lato: "Lato", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 70px;
  --text-display-hero-font: var(--font-lato);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 1.03;
  --text-display-hero-tracking: 0px;
  --text-display-metric: 45px;
  --text-display-metric-font: var(--font-lato);
  --text-display-metric-weight: 700;
  --text-display-metric-line-height: 1.07;
  --text-display-metric-tracking: 0px;

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

SaaS design systems, the same colors first.

Browse all 398

Bring any of them to your AI tool

All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.

Get All Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

Lato · display-hero

Lato · headline-lg

Lato · title-lg

Lato · body-quote

Lato · eyebrow

Lato · label-nav

Spacing & shape

Spacing scale

Layout spacing

Border radius

Motion

Do’s and don’ts

Example prompt

Any page in the Ping style

More design systems like this

Startui

Tessel

Juno

Autona

Bring any of them to your AI tool