Zephyr Design System

Get DESIGN.md Download View template Works with

Zephyr website template preview detail 2

Zephyr website template preview detail 3

Zephyr is a bright, friendly agency and business template. It reads like a clean Swiss poster lit with one highlighter: a white page, black Pretendard set large at weight 500 with no tracking, and a single saturated gold (#FFD333) that marks the hero, the pill buttons and the looping title strips. Product photography in loud flat colours (red, green, purple, orange) supplies everything else.

The published home page is a layout showcase: a centred display-hero headline, then groups (Home, Work, Blog, Company) of three page previews, each sitting on a gold marquee strip that loops its name. The real page layouts inside the previews (Home 1–3, Work 1–3, Blog 1–3, About, Contact, Pricing) carry the same system.

Four signatures make it recognisable:

Gold as a highlighter. primary #FFD333 is the only interface colour. It fills the full-height hero band on Home 1, every pill button and every marquee strip. Everything else is black on white.
Looping title strips. A 62px-tall gold strip under each preview card repeats its name (Home 1 Home 1 Home 1) in 40px Pretendard 500, capitalised, with +1px tracking, sliding sideways and cropped at the card edge.
Big, plain headlines. Headlines run 60–105px at weight 500 and line height 1.1, centred on the presentation page and left-aligned in most layouts, often split with an em dash: The Ultimate Multi — Layout Webflow Template., Next — Generation Webflow Template.
Split navigation with a centred wordmark. Three links left (Home About Work), the Zephyr logo centred, three right (News Contact Cart), 17px weight 600 (Cart 18px), floating over the page with no bar.

Colors

Surfaces

canvas#FFFFFF

Page background

surface-1#F3F3F3

Light grey panel step (--white-smoke-2)

surface-2#E9E9E9

A second grey step (--white-smoke)

inverse-canvas#000000

Footer, cart drawer, the "Have a project in mind?" band

Ink

on-primary#111111

Text on primary

ink#000000

Headlines, nav, labels (--black, the body colour)

ink-muted#666666

Paragraphs and list items (--dim-grey, the base p and li colour)

ink-strong#111111

Text on gold buttons (--black-3)

on-secondary#FFFFFF

Text on secondary

on-accent#FFFFFF

Text on accent

inverse-ink#FFFFFF

Text on inverse-canvas

inverse-ink-muted#FFFFFF · 80%

Footer paragraph

Action

primary#FFD333

Pill buttons, the Home 1 hero band, marquee strips, the blockquote rule

primary-hover#FFD333

secondary#000000

Hover state of the .button pill

accent#2E5CFF

Only the cross-sell band on the presentation page, with white-to-blue gradients at its edges

Lines & effects

line#E7E7E7

Hairlines and card outlines (--gainsboro, --silver)

line-strong#BCBCB5

With line: Hairlines and card outlines (--gainsboro, --silver)

inverse-line#FFFFFF · 15%

Rules inside the black cart drawer

inverse-surface#222222

Small round buttons on black (--black-2)

promo-button#222327

tag-red#F64D52

Small category pills on blog layouts

tag-blue#548BF4

Small category pills on blog layouts

tag-orange#FFC569

Small category pills on blog layouts

tag-pink#FFAAC3

Small category pills on blog layouts

Typography

Pretendard · display-title · shown in Inter (fallback)

The quick brown fox jumps

.title-1, the Home 1 hero headline on gold. 105px · 500 · 1.1

Pretendard · headline-xl · shown in Inter (fallback)

The quick brown fox jumps

Footer title on black. 70px · 500 · 1.1

Pretendard · quote · shown in Inter (fallback)

The quick brown fox jumps

Blockquotes, with a 2px gold left rule and 25px left padding. 34px · 400 · 1.12

Pretendard · title-lg · shown in Inter (fallback)

The quick brown fox jumps

Group labels (Home, Work, Blog, Company), h3. 24px · 600 · 1.25

Pretendard · body-lg · shown in Inter (fallback)

The quick brown fox jumps

Paragraphs (base p) in ink-muted. 19px · 500 · 1.37

Pretendard · label-lg · shown in Inter (fallback)

The quick brown fox jumps

Text inside the gold pill (.button-text), Cart. 18px · 600 · 1.39

Spacing & shape

Purpose	Value
Container	.container max 1440px, centred; the hero's bottom row and other narrow groups use 1200px
Section rhythm	.section is 150px top and bottom (the first presentation section is 50px top, 150px bottom)
Breakpoints	991px, 767px and 479px (Webflow defaults)

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	16px
`md`	30px
`lg`	40px

Layout spacing

Token	Value	Preview
`section-bottom-footer`	30px
`column-gap`	30px
`nav-y`	35px
`footer-top`	120px
`section`	150px
`hero-top`	220px

Border radius

sm10px

pill30px

pill-hover40px

full9999px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-1

Level 3surface-2

Motion

Scroll reveal	opacity 0 → 1 and y 40px → 0, 1000ms outQuart, triggered on scroll into view
Nav and link text roll	Two stacked copies in a 23px overflow-hidden box; the label moves y 0 → −100% while the copy moves in, 300–400ms outExpo
Button radius wobble	border-radius 30px → 40px, 450ms cubic-bezier(0, -0.935, 1, 2.141)
Button arrow	scale 0 → 1 on mouse over and back on mouse out, 300ms ease
Solid button colour	Gold → black, text black → white, 300ms (transition: all .3s)
Marquee strips	The repeated title slides sideways while the strip is in view
Rotate	Rotations of 300–500ms ease (the hero badge and arrow chips)
Scale in	scale 0.8 → 1 and scale 0 → 1, 500ms, on elements as they enter
Nav hide and show	Moves up on scroll down, back down on scroll up
Menu icon	rotate, 400ms swingTo when the mobile menu opens

Do’s and don’ts

Keep the page white (#FFFFFF) and put the gold #FFD333 only on buttons, the hero band and marquee strips.
Set headlines in Pretendard 500 at line height 1.1 with no tracking, and labels in 600.
Use #666666 (ink-muted) for paragraphs at 17–19px and #000000 for headlines.
Make filled buttons full pills (30px radius) with #111111 text on gold.
Keep images square-cornered and edge to edge, with flat saturated backgrounds.
Break long headlines around a spaced em dash and end them with a full stop.
Add shadows, gradients or blur to cards and buttons. Zephyr is flat.
Use gold for text or 1px lines; it is about 1.4:1 on white.
Introduce a second typeface. The Arial in the cross-sell band is not part of the system.
Use the blue #2E5CFF or the tag colours for buttons or headlines.
Round image corners or add coloured overlays to photos.
Put the #666666 legal line on black at body sizes; it is about 3.7:1 there. Keep it to the 16px footer credit only.
Let the button hover change colour on button-primary; it only wobbles its radius.

Example prompt

Any page in the Zephyr style

Prompt

Build your page in the Zephyr style. White #FFFFFF page, Pretendard everywhere with no letter spacing. Headlines in weight 500, line height 1.1, black #000000, 60–105px, sentence case ending in a full stop, split with a spaced em dash ("Next — Generation Webflow Template."). Paragraphs 19px weight 500, line height 1.37, #666666. Nav: transparent and fixed, three 17px weight-600 links left, the wordmark centred, three right, padding 35px 5%. Main button: a gold #FFD333 pill, #111111 18px weight-600 text, 210×60px, 30px radius, radius wobbling to 40px on hover (450ms cubic-bezier(0, -0.935, 1, 2.141)). Sections pad 150px top and bottom and 5% sides, max width 1440px, three-column grids with 30px gaps. Square-cornered, flat-colour product photography edge to edge. Black #000000 footer with white 70px headline. No shadows, no gradients. Reveal blocks on scroll with opacity 0→1 and y 40px→0 over 1000ms outQuart.

# Zephyr Design System

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

## Overview

Zephyr is a bright, friendly agency and business
template. It reads like a clean Swiss poster lit with
one highlighter: a white page, black Pretendard set
large at weight 500 with no tracking, and a single
saturated gold (#FFD333) that marks the hero, the pill

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background          |
| surface-1    | #F3F3F3     | Light grey panel step (… |
| surface-2    | #E9E9E9     | A second grey step (--w… |
| inverse-can… | #000000     | Footer, cart drawer, th… |
| on-primary   | #111111     | Text on primary          |
| ink          | #000000     | Headlines, nav, labels … |
| ink-muted    | #666666     | Paragraphs and list ite… |
| ink-strong   | #111111     | Text on gold buttons (-… |
| on-secondary | #FFFFFF     | Text on secondary        |
| on-accent    | #FFFFFF     | Text on accent           |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| inverse-ink… | #FFFFFF 80% | Footer paragraph         |
| primary      | #FFD333     | Pill buttons, the Home … |
| primary-hov… | #FFD333     |                          |

## Typography

- display-title: Pretendard 105px / 500
- display-hero: Pretendard 84px / 500
- display-hero-light: Pretendard 84px / 300
- headline-xl: Pretendard 70px / 500

{
  "$description": "Zephyr design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#FFD333",
      "$description": "Pill buttons, the Home 1 hero band, marquee strips, the blockquote rule"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#FFD333"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#111111",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F3F3F3",
      "$description": "Light grey panel step (--white-smoke-2)"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#E9E9E9",
      "$description": "A second grey step (--white-smoke)"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Headlines, nav, labels (--black, the body colour)"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#666666",
      "$description": "Paragraphs and list items (--dim-grey, the base p and li colour)"
    },
    "ink-strong": {
      "$type": "color",
      "$value": "#111111",
      "$description": "Text on gold buttons (--black-3)"

/* Zephyr 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: #FFD333;
  --color-primary-hover: #FFD333;
  --color-on-primary: #111111;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F3F3F3;
  --color-surface-2: #E9E9E9;
  --color-ink: #000000;
  --color-ink-muted: #666666;
  --color-ink-strong: #111111;
  --color-line: #E7E7E7;
  --color-line-strong: #BCBCB5;
  --color-secondary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-accent: #2E5CFF;
  --color-on-accent: #FFFFFF;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-ink-muted: #FFFFFFCC;
  --color-inverse-line: #FFFFFF26;
  --color-inverse-surface: #222222;
  --color-promo-button: #222327;
  --color-tag-red: #F64D52;
  --color-tag-blue: #548BF4;
  --color-tag-orange: #FFC569;
  --color-tag-pink: #FFAAC3;

  /* Fonts */
  --font-sans: "Pretendard", "Inter", sans-serif;
  --font-pretendard: "Pretendard", "Inter", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-title: 105px;
  --text-display-title--line-height: 1.1;
  --text-display-title--letter-spacing: 0px;
  --text-display-title--font-weight: 500;
  --text-display-hero: 84px;
  --text-display-hero--line-height: 1.1;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 500;
  --text-display-hero-light: 84px;

/* Zephyr 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: #FFD333; /* Pill buttons, the Home 1 hero band, marquee strips, the blockquote rule */
  --color-primary-hover: #FFD333;
  --color-on-primary: #111111; /* Text on primary */
  --color-canvas: #FFFFFF; /* Page background */
  --color-surface-1: #F3F3F3; /* Light grey panel step (--white-smoke-2) */
  --color-surface-2: #E9E9E9; /* A second grey step (--white-smoke) */
  --color-ink: #000000; /* Headlines, nav, labels (--black, the body colour) */
  --color-ink-muted: #666666; /* Paragraphs and list items (--dim-grey, the base p and li colour) */
  --color-ink-strong: #111111; /* Text on gold buttons (--black-3) */
  --color-line: #E7E7E7; /* Hairlines and card outlines (--gainsboro, --silver) */
  --color-line-strong: #BCBCB5; /* With line: Hairlines and card outlines (--gainsboro, --silver) */
  --color-secondary: #000000; /* Hover state of the .button pill */
  --color-on-secondary: #FFFFFF; /* Text on secondary */
  --color-accent: #2E5CFF; /* Only the cross-sell band on the presentation page, with white-to-blue gradients at its edges */
  --color-on-accent: #FFFFFF; /* Text on accent */
  --color-inverse-canvas: #000000; /* Footer, cart drawer, the "Have a project in mind?" band */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */
  --color-inverse-ink-muted: #FFFFFFCC; /* Footer paragraph */
  --color-inverse-line: #FFFFFF26; /* Rules inside the black cart drawer */
  --color-inverse-surface: #222222; /* Small round buttons on black (--black-2) */
  --color-promo-button: #222327;
  --color-tag-red: #F64D52; /* Small category pills on blog layouts */
  --color-tag-blue: #548BF4; /* Small category pills on blog layouts */
  --color-tag-orange: #FFC569; /* Small category pills on blog layouts */
  --color-tag-pink: #FFAAC3; /* Small category pills on blog layouts */

  /* Fonts */
  --font-pretendard: "Pretendard", "Inter", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-title: 105px;
  --text-display-title-font: var(--font-pretendard);
  --text-display-title-weight: 500;
  --text-display-title-line-height: 1.1;
  --text-display-title-tracking: 0px;
  --text-display-hero: 84px;
  --text-display-hero-font: var(--font-pretendard);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 1.1;
  --text-display-hero-tracking: 0px;
  --text-display-hero-light: 84px;

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

Agency 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

Pretendard · display-title · shown in Inter (fallback)

Pretendard · headline-xl · shown in Inter (fallback)

Pretendard · quote · shown in Inter (fallback)

Pretendard · title-lg · shown in Inter (fallback)

Pretendard · body-lg · shown in Inter (fallback)

Pretendard · label-lg · shown in Inter (fallback)

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Zephyr style

More design systems like this

BigStudio

Bogota

Brün

Creativë

Bring any of them to your AI tool