flowmanceCoach X Design System
Coach X is a personal-brand site for a coach or consultant. It feels trustworthy and warm at the same time: a deep navy page, crisp white BDO Grotesk headlines, and one hot coral-red accent that marks the main actions. Large, friendly portraits of women in soft pink and neutral tones do the selling.
Four signatures make it recognisable:
- The leaf button. Filled buttons are a coral-to-red gradient (#FF5252 → #FA1515 at 201°) with border-radius: 0 30px: two opposite corners square, two rounded, like a leaf.
- Coral as the only accent. Red marks the active nav link, the X in the logo CoachX, the hand-drawn underline under business, the top-bar icons, the checklist badges, the quote mark and the footer column titles. Nothing else is coloured.
- The two-tier navy header. A contact strip (phone, address, opening hours with red line icons) above a hairline, then the logo, centred links and Cart [0]. The whole 142px header is fixed and solid navy.
- Text boxes on photos. Service cards are full photos with a navy-90% caption box, blurred 7px, inset at the bottom. The testimonial is a white square card floating on a full-bleed portrait.
Colors
Surfaces
#0C2468Page background, header, every dark section (--blue)
#FFFFFF · 3%Faint raised panels on navy
#FFFFFF · 10%Slightly stronger panels and hover fills
#FFFFFFInputs: white, 1px light-grey border, navy text
#DDDDDDWith field: Inputs: white, 1px light-grey border, navy text
#FFFFFFTestimonial card, footer
Ink
#FFFFFFButton labels
#FFFFFFHeadlines, nav, list items, lead text
#FFFFFF · 70%Paragraphs: the CSS sets p { opacity: .7 }
#FFFFFF · 63%Meta text like Track my projects on (.smaller-text)
#FFFFFF#0C2468Text on inverse-canvas
Action
#FF5252Filled button gradient (201°)
#FA1515With primary: Filled button gradient (201°)
#FF5252#FF5252Active nav link, logo X, icons, quote text, footer titles, outline button
Lines & effects
#0C2468 · 90%Caption boxes on service-card photos
#0C2468 · 80%Bottom fade on the hero portrait (transparent until 64%, then navy)
#FFFFFF · 14%Header hairlines, the rule under the hero text, the rule above the signature
#FFFFFF · 15%Left border of tab links
#C7C7C7 · 20%Date and category pills on blog cards
Typography
BDO Grotesk · display-cta · shown in Inter (fallback)
The quick brown fox jumpsFooter CTA title, centred, max 67% wide. 70px · 600 · 1.2
BDO Grotesk · headline-lg · shown in Inter (fallback)
The quick brown fox jumpsSection titles: Expertise in our field. 40px · 600 · 1.3
BDO Grotesk · title-lg · shown in Inter (fallback)
The quick brown fox jumpsBlog card titles. 26px · 600 · 1.4
Inter Tight · quote
The quick brown fox jumpsTestimonial quote, in coral. 25px · 600 · 1.4
Inter Tight · body-lead
The quick brown fox jumpsHero lead under the title. 22px · 600 · 1.5
BDO Grotesk · eyebrow · shown in Inter (fallback)
The quick brown fox jumpsJoin the ranks of clients like:. 18px · 600 · 1.5
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Breakpoints | 991px, 767px and 479px (Webflow defaults), plus a 1440px+ step |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 8px | |
sm | 15px | |
md | 25px | |
lg | 50px | |
xl | 64px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
gutter | 72px | |
section | 120px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Button hover | Label and arrow slide x 100% → 0% and back, 300ms ease; a fill grows behind the label (size, 300ms ease) |
| Arrow nudge | x 3px, y −3px and back, 300ms ease; or x 6px, 500ms outQuint |
| Icon pop | scale 0 → 1, 600ms outExpo; out at 400ms outExpo |
| Fade-in on scroll | opacity 0 → 1, 1000–1250ms outQuart |
| Image drift | y −7% ↔ 7%, 500ms, while scrolling in view |
| Service card hover | scale 0.96, transform .3s |
| Outline button hover | Background → #FF5252, text → white, 300ms |
| Dropdown row hover | Background white 5%, padding-left .75rem, 300ms |
| Link hover | Opacity → 0.6 (footer) or 0.7 (social), 300ms |
Do’s and don’ts
- Use #0C2468 navy for the page and the whole fixed header.
- Give every button the leaf radius 0 30px; filled buttons use the #FF5252 → #FA1515 gradient, outline buttons a 2px coral border.
- Use coral #FF5252 for one highlight per area: the active link, icons, the logo X, a quote.
- Set headings in BDO Grotesk 600 and paragraphs in Inter Tight 17px at white 70%.
- Put text on photos inside a navy-90% box with a 7px blur, or a white square card.
- Keep the contact strip (phone, address, hours) above the nav.
- Round images or cards. Only buttons (leaf), tags and inputs (30px) are rounded.
- Add a second accent colour or use the unused #DAE6FF alice blue.
- Put white text on coral at small sizes: #FFFFFF on #FF5252 is about 3:1, so keep button labels at 16px 600 or bolder.
- Use coral text on white below 16px bold: #FF5252 on #FFFFFF is about 3.2:1, so keep it to the 25px quote and the bold 16–17px quote source and footer titles.
- Use ink-subtle (white 63%) for paragraphs; it is for short meta lines only.
- Add drop shadows to cards or sections.
- Set paragraphs in coral on navy. #FF5252 on #0C2468 is about 4.5:1: fine for the 17.6px 600 active link and the outline button, not for running text.
Example prompt
Any page in the Coach X style
More design systems like this
Business 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 Coach X 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/coach.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