Dower Design System

Get DESIGN.md Download View template Works with

Dower is a bright, playful design-studio site on white. Its personality is typographic mischief: one headline uses five typefaces, jumping from bold Inter to rounded Fredoka One caps, to a chunky 8-bit pixel font, to light Inter, with a pale khaki serif ampersand tucked between two words. Around that the layout is calm and gallery-like, with large saturated 3D project art in a staggered two-column grid, black text and soft greys.

Four signatures make it recognisable:

Mixed-type headlines. We're a DESIGN studio focused on creating innovative digital products & branding.: DESIGN in Fredoka One caps, creating in Press Start 2P pixels, innovative digital in Inter 400, the rest Inter 700, and & in khaki Playfair Display. Section titles repeat the trick: That's our work. and What they think. end on a pixel word.
Pixel accents. Press Start 2P appears as single words in titles, as a vertical rotated name beside the testimonial photo (DEMI MASON), and as a big white-outlined marquee tilted −9°.
Khaki as the only colour. #F6E97A fills the main button, the tags, the ampersand and the hover fill of the grey pill buttons.
Staggered gallery. Project images in two bottom-aligned columns with an 80px gap, a 3:4 and a 1:1 image per row so the shorter one starts lower (alternating sides), each with a Fredoka One caps title and grey meta beside it.

Colors

Surfaces

canvas#FFFFFF

Page, menu panel, cart

surface-1#E7E7E7

Grey pill buttons (--gainsboro), the round theme toggle

Ink

on-primary#000000

Text on primary

on-secondary#62636B

Text on secondary

ink#000000

Headlines, nav, project titles, testimonial text

ink-muted#62636B

Paragraphs, list items, project meta, inputs (--dim-grey-2)

ink-subtle#75767E

New York next to the logo

ink-faint#A5A7B6

The vertical Scroll Top label and its line (--dark-grey)

on-media#FFFFFF

Blog titles and text over images; the marquee fill

on-media-muted#FFFFFF · 70%

Muted text on media

Action

primary#F6E97A

Main button (Contact Us), tags (--khaki)

primary-hover#FFEA00

Main button hover

secondary#E7E7E7

Grey pill button (View on Webflow)

link-dim#696969

.dark-link text links

accent#F6E97A

The & in the hero, the hover fill of grey pills, the 4px blockquote rule

Lines & effects

price#494949

Product prices in the shop

line#A5A7B6 · 38%

Logo divider, feature-grid top and bottom rules, menu and cart borders

line-strong#000000

1px black rules (8 on the home page)

media-shade#000000 · 30%

Bottom of the card fade: linear-gradient(transparent 64%, #0000004D)

Typography

Inter · display-hero

The quick brown fox jumps

Hero sentence (We're a, studio focused on, products, branding.). 90px · 700 · 1.0

Inter · headline-xl

The quick brown fox jumps

That's our work., What they. 60px · 700 · 1.0

Fredoka One · title-project

The quick brown fox jumps

MERCURY HAND, APPLE GRAPHIC. 26px · 400 · 1.15

Inter · body-quote

The quick brown fox jumps

Testimonial quote. 19px · 600 · 1.2

Inter · label-button

The quick brown fox jumps

Overline text links. 17px · 600 · 1.18

Inter · caption

The quick brown fox jumps

New York, tags, Scroll Top. 13px · 600 · 1.54

Spacing & shape

Purpose	Value
Container	max 1200px
Section rhythm	100px top and bottom with 5% sides (.section, .section-cta); the marquee section and the footer use 120px
Breakpoints	991px, 767px and 479px (Webflow defaults)

Spacing scale

Token	Value	Preview
`hair`	3px
`xs`	10px
`sm`	16px
`md`	30px
`lg`	40px
`xl`	80px
`2xl`	100px

Layout spacing

Token	Value	Preview
`nav-height`	75px
`section`	100px
`hero-top`	110px
`section-lg`	120px
`hero-bottom`	190px

Border radius

sm9px

pill30px

pill-lg100px

full9999px

Surfaces

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

Level 1canvas

Level 2surface-1

Motion

Theme switch	The moon toggle changes filter, background and text colours instantly (0ms) to a dark theme
Pill fill	A khaki square slides into the grey pill and its corners round, border-radius over 975ms ease-out
Hover bump	scale 1 → 1.1 and a small rotation, 100ms ease, following the mouse
Custom cursor	Over project cards: scale 0 → 1 in 500–1000ms outExpo, with opacity 0 → 1
Link roll and line	Size changes at 300ms ease, 400ms outCubic and 500ms
Fade-up	opacity 0 → 1, y 20px → 0, 500ms ease
Float	y −5px ↔ 5px, 500ms, on small decorative items
Page load	opacity 0 → 1, 1000ms outQuart
Scroll drift	The marquee and the clients row move sideways with page scroll
Button hover	all 0.2s

Do’s and don’ts

Keep the canvas #FFFFFF and text #000000, with paragraphs in #62636B at 16px.
Change typeface word by word in big headlines: Inter 700, Fredoka One caps, Press Start 2P, Inter 400, and a khaki Playfair &, all at the same size.
End section titles on a Press Start 2P word with a full stop.
Use khaki #F6E97A for the one main action, tags and the ampersand, always with black text.
Lay projects in two bottom-aligned columns with an 80px gap, pairing a 3:4 and a 1:1 image per row, with Fredoka One caps titles.
Keep images square-cornered and buttons fully rounded.
Add a second accent colour. #FE7C00, #DFE5F0 and #FBFD54 are unused variables.
Use Press Start 2P or Fredoka One for body text or whole paragraphs. They are single-word accents.
Put white text on khaki or khaki text on white.
Add shadows or round the images.
Use ink-faint #A5A7B6 for anything but the 13px Scroll Top label; it is far below 4.5:1 on white, so keep it for decorative meta only.
Mix typefaces line by line or at different sizes in one headline.
Put ink-subtle #75767E on the #E7E7E7 pill or toggle (3.65:1). It is for 13px meta on white only.

Example prompt

Any page in the Dower style

Prompt

Build your page in the Dower style. Use a white (#FFFFFF) page, Inter 500 body text at 16px with line height 1.5 in #62636B, and black headlines. Big headlines switch typeface word by word at one size: Inter 700, Inter 400, Fredoka One uppercase (3px tracking), Press Start 2P, and a Playfair Display "&" in khaki #F6E97A. Hero at 90px, line height 1.0, centred in a 940px column; section titles at 60px Inter 700 ending in a 50px Press Start 2P word and a full stop. Sections have 100px vertical padding and 5% sides; content sits at 85% of a 1200px container. Main button: khaki #F6E97A pill (30px radius, 56px tall, padding 18px 28px) with black Inter 16px weight 600, hover #FFEA00. Secondary: #E7E7E7 pill (100px radius, 60px tall) with #62636B text that fills with khaki on hover. Projects: two bottom-aligned columns with an 80px gap, pairing a 3:4 and a 1:1 image per row (alternating sides), square-cornered saturated 3D art with a bottom fade to rgba(0,0,0,0.3), Fredoka One 26px uppercase titles. No shadows.

# Dower Design System

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

## Overview

Dower is a bright, playful design-studio site on white.
Its personality is typographic mischief: one headline
uses five typefaces, jumping from bold Inter to rounded
Fredoka One caps, to a chunky 8-bit pixel font, to light
Inter, with a pale khaki serif ampersand tucked between

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page, menu panel, cart   |
| surface-1    | #E7E7E7     | Grey pill buttons (--ga… |
| field        | #000000 0%  |                          |
| on-primary   | #000000     | Text on primary          |
| on-secondary | #62636B     | Text on secondary        |
| ink          | #000000     | Headlines, nav, project… |
| ink-muted    | #62636B     | Paragraphs, list items,… |
| ink-subtle   | #75767E     | New York next to the lo… |
| ink-faint    | #A5A7B6     | The vertical Scroll Top… |
| on-media     | #FFFFFF     | Blog titles and text ov… |
| on-media-mu… | #FFFFFF 70% | Muted text on media      |
| primary      | #F6E97A     | Main button (Contact Us… |
| primary-hov… | #FFEA00     | Main button hover        |
| secondary    | #E7E7E7     | Grey pill button (View … |

## Typography

- display-hero: Inter 90px / 700
- display-hero-light: Inter 90px / 400
- display-hero-caps: Fredoka One 90px / 400
- display-hero-pixel: Press Start 2P 90px / 400

{
  "$description": "Dower design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#F6E97A",
      "$description": "Main button (Contact Us), tags (--khaki)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#FFEA00",
      "$description": "Main button hover"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#E7E7E7",
      "$description": "Grey pill button (View on Webflow)"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#62636B",
      "$description": "Text on secondary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page, menu panel, cart"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#E7E7E7",
      "$description": "Grey pill buttons (--gainsboro), the round theme toggle"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Headlines, nav, project titles, testimonial text"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#62636B",

/* Dower 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-body, rounded-sm, p-lg */

@theme {
  /* Colors */
  --color-primary: #F6E97A;
  --color-primary-hover: #FFEA00;
  --color-on-primary: #000000;
  --color-secondary: #E7E7E7;
  --color-on-secondary: #62636B;
  --color-canvas: #FFFFFF;
  --color-surface-1: #E7E7E7;
  --color-ink: #000000;
  --color-ink-muted: #62636B;
  --color-ink-subtle: #75767E;
  --color-ink-faint: #A5A7B6;
  --color-link-dim: #696969;
  --color-price: #494949;
  --color-accent: #F6E97A;
  --color-line: #A5A7B661;
  --color-line-strong: #000000;
  --color-field: #00000000;
  --color-media-shade: #0000004D;
  --color-on-media: #FFFFFF;
  --color-on-media-muted: #FFFFFFB3;

  /* Fonts */
  --font-sans: "Inter", sans-serif;
  --font-inter: "Inter", sans-serif;
  --font-press-start-2p: "Press Start 2P", sans-serif;
  --font-fredoka-one: "Fredoka One", sans-serif;
  --font-playfair-display: "Playfair Display", serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 90px;
  --text-display-hero--line-height: 1.0;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 700;
  --text-display-hero-light: 90px;
  --text-display-hero-light--line-height: 1.0;
  --text-display-hero-light--letter-spacing: 0px;
  --text-display-hero-light--font-weight: 400;
  --text-display-hero-caps: 90px;
  --text-display-hero-caps--line-height: 1.0;
  --text-display-hero-caps--letter-spacing: 3px;

/* Dower 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: #F6E97A; /* Main button (Contact Us), tags (--khaki) */
  --color-primary-hover: #FFEA00; /* Main button hover */
  --color-on-primary: #000000; /* Text on primary */
  --color-secondary: #E7E7E7; /* Grey pill button (View on Webflow) */
  --color-on-secondary: #62636B; /* Text on secondary */
  --color-canvas: #FFFFFF; /* Page, menu panel, cart */
  --color-surface-1: #E7E7E7; /* Grey pill buttons (--gainsboro), the round theme toggle */
  --color-ink: #000000; /* Headlines, nav, project titles, testimonial text */
  --color-ink-muted: #62636B; /* Paragraphs, list items, project meta, inputs (--dim-grey-2) */
  --color-ink-subtle: #75767E; /* New York next to the logo */
  --color-ink-faint: #A5A7B6; /* The vertical Scroll Top label and its line (--dark-grey) */
  --color-link-dim: #696969; /* .dark-link text links */
  --color-price: #494949; /* Product prices in the shop */
  --color-accent: #F6E97A; /* The & in the hero, the hover fill of grey pills, the 4px blockquote rule */
  --color-line: #A5A7B661; /* Logo divider, feature-grid top and bottom rules, menu and cart borders */
  --color-line-strong: #000000; /* 1px black rules (8 on the home page) */
  --color-field: #00000000;
  --color-media-shade: #0000004D; /* Bottom of the card fade: linear-gradient(transparent 64%, #0000004D) */
  --color-on-media: #FFFFFF; /* Blog titles and text over images; the marquee fill */
  --color-on-media-muted: #FFFFFFB3; /* Muted text on media */

  /* Fonts */
  --font-inter: "Inter", sans-serif;
  --font-press-start-2p: "Press Start 2P", sans-serif;
  --font-fredoka-one: "Fredoka One", sans-serif;
  --font-playfair-display: "Playfair Display", serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 90px;
  --text-display-hero-font: var(--font-inter);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 1.0;
  --text-display-hero-tracking: 0px;
  --text-display-hero-light: 90px;
  --text-display-hero-light-font: var(--font-inter);
  --text-display-hero-light-weight: 400;
  --text-display-hero-light-line-height: 1.0;
  --text-display-hero-light-tracking: 0px;
  --text-display-hero-caps: 90px;
  --text-display-hero-caps-font: var(--font-fredoka-one);
  --text-display-hero-caps-weight: 400;

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

Inter · display-hero

Inter · headline-xl

Fredoka One · title-project

Inter · body-quote

Inter · label-button

Inter · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Dower style

More design systems like this

BigStudio

Bogota

Brün

Creativë

Bring any of them to your AI tool