flowmanceKurt Design System
Kurt is a clean, white studio template that reads like a well-set brochure. Bold Satoshi headlines sit in an offset column on plenty of white space, each section is numbered with an italic serif figure on a long hairline, and a single orange-red does all the work of a brand colour. Photography is crisp product and studio imagery, often with an orange object or backdrop that echoes the button.
Four signatures make it recognisable:
- Numbered section heads. Content sections open with 01., 02. … set in italic Playfair Display 40px (the landing's showcase grid and closing quote have no number), followed by a 1px black rule that runs to the right edge of the container.
- The hanging eyebrow. A small bold word (Intro, Hello!, About, Our Work, Pricing, Blog, Contact) sits at the top-left of the headline, and the headline's first line is indented to start after it: Intro Raise your brand with / a spectacular template.
- One orange-red square button. #FF6501 with black bold text and a 3px radius. On hover it turns black with white text.
- Outlined cards with a hard shadow. Showcase cards are 1px black outlines with a 3px 3px 0 #000 offset shadow, no blur and no radius.
Kurt is a light-only design. The navigation is a frosted white bar, and a custom black dot replaces the cursor over links and buttons.
Colors
Surfaces
#FFFFFFPage background
#F4F5F8Quiet panel grey declared in the Webflow variables; use sparingly for a soft band
#ECECECSecond light grey from the variables, for image placeholders
#FFFFFFForm inputs and their typed text
#333333Text on field
#000000The round Follow Us button and the button hover state
Ink
#000000Text on primary
#000000Headlines, nav, labels, rules
#4B4B4BParagraphs and list items (the p and li base colour)
#161616 · 63%Footer links and footer paragraph links, which go full black on hover
#717171Input placeholders and the faintest meta
#FFFFFF#FFFFFFText on inverse-canvas
Action
#FF6501The filled button, the menu overlay circle, pricing icons
#000000Button background on hover (text turns #FFFFFF)
Lines & effects
#0000001px rules after section numbers, card outlines, underlined form fields
#DDDDDDCart panel border and cart footer rule
#FFFFFF · 30%The fixed navigation bar
#4253FFDevelopment blog tag
#7122FAInspiration blog tag
#D40617Design blog tag
#061012Dark end of the overlay-menu text gradient
Typography
Satoshi · display-hero
The quick brown fox jumpsHero and Let's connect titles (.title-1). 70px · 700 · 1.0
Playfair Display · numeral
The quick brown fox jumps01. 40px · 400 · 1.0
Satoshi · headline-lg
The quick brown fox jumpsSection titles (h2): Who we are, Discover our work. 32px · 700 · 1.13
Satoshi · quote
The quick brown fox jumpsBlockquotes, with a 3px orange-red left bar. 30px · 500 · 1.27
Satoshi · title-price
The quick brown fox jumpsPlan prices $ 1,300.00 USD. 24px · 600 · 1.88
Satoshi · body-lg
The quick brown fox jumpsParagraphs and list items, in ink-muted. 17px · 500 · 1.29
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 120px top and 100px bottom (.section), side padding 5%; 80px with 2% sides at ≤991; 60px top and bottom at ≤479 |
| Section head pattern | a row of numeral + 1px rule (with about 40px between them), then about 60px below, the eyebrow and the headline |
| Breakpoints | 991px (tablet), 767px (landscape phone) and 479px (phone), plus a min-width: 768px group |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 5px | |
sm | 10px | |
md | 16px | |
lg | 20px | |
xl | 30px | |
2xl | 50px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 30px | |
footer-bottom | 40px | |
nav-height | 80px | |
section-bottom | 100px | |
section-top | 120px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Headline line reveal | Lines start skewed x 30deg and moved y 20% at opacity 0, then settle to 0deg, 0%, opacity 1 over 400ms outCubic |
| Fade-up on scroll | opacity 0 → 1 and move to 0px over 1000ms outQuart; some blocks 600ms outCubic from y 30px |
| Image reveal | Size and filter changes over 500–600ms (outExpo on size) |
| Menu open | Orange circle scales 0 → 1 over 500ms; links fade in at 300ms ease; display toggles at 0ms |
| Custom cursor | A small black dot follows the mouse; links and buttons set cursor: none |
| Hover colour | transition: all .2s on footer links, .3s on buttons |
| Small slides | x −30px → 0 over 500ms, y → 0px over 200ms ease |
Do’s and don’ts
- Open every section with 01. in italic Playfair Display 40px, a 1px #000000 rule, the eyebrow and a bold Satoshi headline.
- Keep content in the right 80% of the 1200px container and leave the left fifth empty.
- Use #FF6501 with #000000 text for the one filled button, 3px radius, padding 14px 18px; turn it #000000 with white text on hover.
- Set paragraphs in #4B4B4B at 17px, weight 500, line height 1.29.
- Outline cards with 1px #000000 and the hard 3px 3px 0 #000 shadow.
- Use the three tag colours (#4253FF, #7122FA, #D40617) only for blog categories.
- Round cards, images or inputs. Only buttons get 3px, and circles stay circles.
- Use soft or blurred shadows, or grey shadows. The only shadow is the hard black offset.
- Set headlines in Playfair or use the serif for anything but section numbers.
- Add letter spacing or uppercase to headlines.
- Spread orange-red over large areas of a page; it belongs to buttons, icons and the menu circle.
- Use ink-subtle (#161616 at 63%) for paragraphs; it is for footer links only.
Example prompt
Any page in the Kurt style
More design systems like this
Agency design systems, the same colors first.
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 AccessUpgrade to All AccessHow to use the Kurt design system
Pick a file to see what it’s for and where it goes.
What it is
The whole design system in one markdown file, written for AI: every color, type style, spacing value, component and motion rule, plus do's, don'ts and a ready prompt.
Best for
Claude, ChatGPT, Gemini, Cursor and v0, or any other AI tool that builds pages or code.
How to use it
- Put
DESIGN.mdin your project and mention it in your request, or save it as.cursor/rules/kurt.mdc - For the rule file, start it with a front-matter block that sets
alwaysApply: true, so every chat uses it - Ask: “Build a pricing page using DESIGN.md.” Cursor follows the colors, fonts, spacing and rules
- Put
DESIGN.mdin the project root - Add one line to
CLAUDE.md: “Follow DESIGN.md for all UI.” - Ask for any page or component; Claude reads the file first
- Attach
DESIGN.mdto the chat (or paste it in) - Ask: “Build a landing page in this design system.”
- Keep the file in the chat or project knowledge, so follow-up pages stay on style
What it is
Every token as data, in the W3C Design Tokens format: colors with their roles, type styles, radius, spacing, and component tokens that point at them.
Best for
Figma (Tokens Studio), Style Dictionary and other design-token tools, and build scripts.
How to use it
- In Figma, open Tokens Studio, choose Import, and pick
tokens.json - Or point Style Dictionary’s
sourceat it to generate tokens for any platform - In code, import it like any JSON file
What it is
A Tailwind CSS v4 theme: every color, font, type style, radius and spacing value becomes a Tailwind utility, like bg-canvas, text-headline-lg or rounded-md.
Best for
Tailwind v4 projects, and AI builders that write Tailwind (v0, Lovable, Bolt).
How to use it
- Save
theme.cssnext to your main CSS file - Import it after Tailwind:
@import "tailwindcss"; @import "./theme.css"; - Use the classes:
bg-canvas text-ink rounded-md p-lg
What it is
The same tokens as plain CSS variables on :root. Component values point at the color variables, so changing one color updates everything that uses it.
Best for
Any website: plain CSS, Webflow custom code, Framer, WordPress.
How to use it
- Add it to your stylesheet, or in Webflow paste it into Site settings → Custom code inside a
<style>tag - Use the variables anywhere:
color: var(--color-ink) - Change a token once and every place that uses it follows