Ødger Design System

Get DESIGN.md Download View template Works with

Ødger is a bright, calm agency template. It is almost all white space: a white canvas, black type in the wide geometric Clash Display, and soft pastel blocks (peach, mint, pink) that hold the content. The only saturated colour in the interface is a fresh green, used for the small uppercase eyebrow, the button text and hover states. Imagery is cheerful: 3D characters, pastel product photography and people on mint backgrounds.

The published preview opens on a presentation page (MULTI-LAYOUT WEBFLOW TEMPLATE, Introducing / Ødger Template, then Home, Work, Blog and Pages rows of page thumbnails). Those thumbnails, the CSS and the presentation page together define the system below.

Four signatures make it recognisable:

The Ø. The brand mark is a single slashed Ø (30px wide in the footer), and the name keeps it in copy: Ødger Template.
Pastel card rotation. Cards cycle through three tints in order: peach #FFF8F2, mint #EEFCF4, pink #FFF7FE. Each row of three uses all three.
Mint pill plus underlined link. The main action is a mint #E4FEEF pill with green #5BB381 text (Preview in Designer), set next to an uppercase, widely tracked black text link with a thin underline (PURCHASE NOW), 25px apart.
The quiet header. Ø on the left, a globe icon and Based in Tokyo in grey in the centre, a solid black dot on the right that opens the menu, and a hairline rule under all three.

Ødger is a light-only design.

Colors

Surfaces

canvas#FFFFFF

Page background

surface-1#FFF8F2

Peach card tint (first in each row)

surface-2#EEFCF4

Mint card tint (second)

surface-3#FFF7FE

Pink card tint (third)

field#FFFFFF

inverse-canvas#000000

Full-screen menu overlay and its links

Ink

on-primary#5BB381

Text on primary

on-accent#FFFFFF

Text on accent

ink#000000

Headlines, section titles, footer links, the text link, the menu dot

ink-muted#8F8F8F

Paragraphs and list items (base p, li), card labels (Home 1), Based in Tokyo

ink-link#747474

Default a colour, input text and placeholders, product prices

inverse-ink#FFFFFF

Text on inverse-canvas

inverse-ink-muted#FFFFFF · 60%

Captions under menu links

Action

primary#E4FEEF

The mint pill button and its green label; also the blockquote background

primary-hover#5BB381

Button background on hover, with white text

accent#5BB381

Eyebrow text, footer link hover, the animated underline, blockquote border and text

accent-soft#A1D6B7

A lighter green defined in the variables; use for subtle green details only

Lines & effects

line#E7E7F0

The hairline under the header

line-field#E1E1E1

Input borders, cart borders

line-underline#B1B1B1 · 56%

The resting 1px underline under the text link

Typography

Clash Display · display-hero

The quick brown fox jumps

Introducing / Ødger Template (the first line measures 1.2 line height). 130px · 500 · 0.9

Clash Display · headline-lg

The quick brown fox jumps

Base h1 on inner pages. 38px · 500 · 1.16

Clash Display · title-md

The quick brown fox jumps

.footer-title; menu captions at weight 400. 20px · 500 · 1.5

Clash Display · body-lg

The quick brown fox jumps

Footer links, prices. 18px · 500 · 1.28

Clash Display · label

The quick brown fox jumps

Pill buttons. 17px · 600 · 1.4

Clash Display · eyebrow

The quick brown fox jumps

.introducing-text in green: MULTI-LAYOUT WEBFLOW TEMPLATE. 13px · 600 · 1.54 · 1px

Spacing & shape

Purpose	Value
Container	max 1200px, centred
Section rhythm	.section is 100px top and bottom
Breakpoints	991px, 767px and 479px, plus a min-width: 768px rule set

Spacing scale

Token	Value	Preview
`hair`	5px
`xs`	15px
`sm`	16px
`md`	20px
`lg`	25px
`xl`	30px
`2xl`	40px
`3xl`	50px

Layout spacing

Token	Value	Preview
`cta-top`	50px
`cta-bottom`	59px
`nav-height`	88px
`section`	100px
`hero`	200px

Border radius

xs2px

pill30px

full9999px

Surfaces

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

Level 1canvas

Level 2surface-3

Level 3surface-1

Level 4surface-2

Motion

Line reveal	Text moves y 102% → 0% inside an overflow-hidden wrapper, 500ms ease
Slide and fade	Elements start at y 100px or x 80px and opacity 0, then settle to 0, 0 and opacity 1 over 1000ms outQuart
Short fade	opacity 0 → 1, 400ms ease; 800ms ease on some blocks
Underline grow	Green line width grows, 500ms (ease on some), 300ms ease on smaller links
Image hover	scale 1 → 1.05, 500ms
Icon hover	scale 1 → 1.1 and back, 100ms ease
Border change	300ms ease
Button and link hover	Colour and background, 200ms

Do’s and don’ts

Keep the canvas #FFFFFF and the type #000000 Clash Display, weight 500 for display and body, 600 for labels.
Cycle content cards through surface-1 #FFF8F2, surface-2 #EEFCF4 and surface-3 #FFF7FE.
Pair the mint pill (button-primary, #E4FEEF with #5BB381 text, 30px radius) with an uppercase underlined text link 25px to its right.
Centre hero content and leave at least 200px of space above and below it.
Use green #5BB381 only for the eyebrow, button text, hover states and the growing underline.
Keep cards and images square-cornered and flat.
Set long paragraphs in ink-muted #8F8F8F below 16px; it is about 3.2:1 on white. Keep it for 17px+ text.
Use the mint pair below 17px weight 600; #5BB381 on #E4FEEF is about 2.4:1 (button, submit, 27px blockquote), so keep it large and bold.
Use green #5BB381 on white (about 2.6:1) for anything but the 13px+ weight 600 eyebrow and the 18px footer-link hover; white on the green hover fill is the same ratio.
Add shadows, gradients, or a second accent colour.
Round cards or images; only buttons, inputs and the menu dot are round.
Use the declared Satoshi or Inter fonts; only Clash Display is loaded.

Example prompt

Any page in the Ødger style

Prompt

Build your page in the Ødger style. Use a #FFFFFF background and Clash Display everywhere (weight 500, 600 for labels). The header is fixed: a "Ø" mark left, a globe icon and "Based in Tokyo" in #8F8F8F centred, a solid black dot right, and a 1px #E7E7F0 rule under it inside a 1200px container. Heroes are centred: a 13px uppercase green (#5BB381) eyebrow with 1px tracking, a 130px weight 500 title with line height 0.9, then a mint pill button (#E4FEEF, #5BB381 17px weight 600 text, 30px radius, padding 15px 30px, turning #5BB381 with white text on hover in 200ms) next to an uppercase 12px black text link with 2px tracking and a thin underline. Paragraphs are 17px weight 500, line height 1.3, #8F8F8F. Put content in flat, square-cornered pastel cards that cycle #FFF8F2, #EEFCF4, #FFF7FE, three per row with a 15px gap. Sections are 100px top and bottom. No shadows. Reveal text by sliding lines up from 102% in 500ms.

# Ødger Design System

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

## Overview

Ødger is a bright, calm agency template. It is almost
all white space: a white canvas, black type in the wide
geometric Clash Display, and soft pastel blocks (peach,
mint, pink) that hold the content. The only saturated
colour in the interface is a fresh green, used for the

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background          |
| surface-1    | #FFF8F2     | Peach card tint (first … |
| surface-2    | #EEFCF4     | Mint card tint (second)  |
| surface-3    | #FFF7FE     | Pink card tint (third)   |
| field        | #FFFFFF     |                          |
| inverse-can… | #000000     | Full-screen menu overla… |
| on-primary   | #5BB381     | Text on primary          |
| on-accent    | #FFFFFF     | Text on accent           |
| ink          | #000000     | Headlines, section titl… |
| ink-muted    | #8F8F8F     | Paragraphs and list ite… |
| ink-link     | #747474     | Default a colour, input… |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| inverse-ink… | #FFFFFF 60% | Captions under menu lin… |
| primary      | #E4FEEF     | The mint pill button an… |

## Typography

- display-hero: Clash Display 130px / 500
- display-cta: Clash Display 101px / 500
- display-menu: Clash Display 80px / 600
- headline-lg: Clash Display 38px / 500

{
  "$description": "Ødger design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#E4FEEF",
      "$description": "The mint pill button and its green label; also the blockquote background"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#5BB381",
      "$description": "Button background on hover, with white text"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#5BB381",
      "$description": "Text on primary"
    },
    "accent": {
      "$type": "color",
      "$value": "#5BB381",
      "$description": "Eyebrow text, footer link hover, the animated underline, blockquote border and text"
    },
    "on-accent": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on accent"
    },
    "accent-soft": {
      "$type": "color",
      "$value": "#A1D6B7",
      "$description": "A lighter green defined in the variables; use for subtle green details only"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FFF8F2",
      "$description": "Peach card tint (first in each row)"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#EEFCF4",

/* Ødger 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-xs, p-lg */

@theme {
  /* Colors */
  --color-primary: #E4FEEF;
  --color-primary-hover: #5BB381;
  --color-on-primary: #5BB381;
  --color-accent: #5BB381;
  --color-on-accent: #FFFFFF;
  --color-accent-soft: #A1D6B7;
  --color-canvas: #FFFFFF;
  --color-surface-1: #FFF8F2;
  --color-surface-2: #EEFCF4;
  --color-surface-3: #FFF7FE;
  --color-ink: #000000;
  --color-ink-muted: #8F8F8F;
  --color-ink-link: #747474;
  --color-line: #E7E7F0;
  --color-line-field: #E1E1E1;
  --color-line-underline: #B1B1B18F;
  --color-field: #FFFFFF;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-ink-muted: #FFFFFF99;

  /* Fonts */
  --font-sans: "Clash Display", "Space Grotesk", sans-serif;
  --font-clash-display: "Clash Display", "Space Grotesk", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 130px;
  --text-display-hero--line-height: 0.9;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 500;
  --text-display-cta: 101px;
  --text-display-cta--line-height: 1.1;
  --text-display-cta--letter-spacing: 0px;
  --text-display-cta--font-weight: 500;
  --text-display-menu: 80px;
  --text-display-menu--line-height: 0.71;
  --text-display-menu--letter-spacing: 0px;
  --text-display-menu--font-weight: 600;
  --text-headline-lg: 38px;
  --text-headline-lg--line-height: 1.16;

/* Ødger 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: #E4FEEF; /* The mint pill button and its green label; also the blockquote background */
  --color-primary-hover: #5BB381; /* Button background on hover, with white text */
  --color-on-primary: #5BB381; /* Text on primary */
  --color-accent: #5BB381; /* Eyebrow text, footer link hover, the animated underline, blockquote border and text */
  --color-on-accent: #FFFFFF; /* Text on accent */
  --color-accent-soft: #A1D6B7; /* A lighter green defined in the variables; use for subtle green details only */
  --color-canvas: #FFFFFF; /* Page background */
  --color-surface-1: #FFF8F2; /* Peach card tint (first in each row) */
  --color-surface-2: #EEFCF4; /* Mint card tint (second) */
  --color-surface-3: #FFF7FE; /* Pink card tint (third) */
  --color-ink: #000000; /* Headlines, section titles, footer links, the text link, the menu dot */
  --color-ink-muted: #8F8F8F; /* Paragraphs and list items (base p, li), card labels (Home 1), Based in Tokyo */
  --color-ink-link: #747474; /* Default a colour, input text and placeholders, product prices */
  --color-line: #E7E7F0; /* The hairline under the header */
  --color-line-field: #E1E1E1; /* Input borders, cart borders */
  --color-line-underline: #B1B1B18F; /* The resting 1px underline under the text link */
  --color-field: #FFFFFF;
  --color-inverse-canvas: #000000; /* Full-screen menu overlay and its links */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */
  --color-inverse-ink-muted: #FFFFFF99; /* Captions under menu links */

  /* Fonts */
  --font-clash-display: "Clash Display", "Space Grotesk", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 130px;
  --text-display-hero-font: var(--font-clash-display);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 0.9;
  --text-display-hero-tracking: 0px;
  --text-display-cta: 101px;
  --text-display-cta-font: var(--font-clash-display);
  --text-display-cta-weight: 500;
  --text-display-cta-line-height: 1.1;
  --text-display-cta-tracking: 0px;
  --text-display-menu: 80px;
  --text-display-menu-font: var(--font-clash-display);
  --text-display-menu-weight: 600;
  --text-display-menu-line-height: 0.71;
  --text-display-menu-tracking: 0px;
  --text-headline-lg: 38px;

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

Clash Display · display-hero

Clash Display · headline-lg

Clash Display · title-md

Clash Display · body-lg

Clash Display · label

Clash Display · eyebrow

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Ødger style

More design systems like this

Agencē

Creativum

Cuox

Fold

Bring any of them to your AI tool