flowmanceCard Design System
Card is a light, tidy SaaS landing page with hard square edges. Most sections sit on white, with near-black headlines in Open Sauce One, short bold Inter paragraphs, and one warm colour, tomato red, used in small doses: labels, stars, icons, the play button and the closing CTA band. Pale pink tiles and arrow squares soften it.
Four signatures make it recognisable:
- Square everything. Buttons, inputs, the email submit, slider arrows, icon tiles and photos all have 0 radius. The only rounding is on nav-link hover pills, the Most Popular tag, the round play button and the 15px radius on the plain price cards (white on white, so it barely shows).
- The split hero. A portrait photo with a round tomato play button on the white left half, and a blush (#FFEFEF) right half running to the viewport edge with the headline Unlock growth opportunities. and an email field joined to a tomato square arrow button.
- Pink tiles. Feature icons are tomato line icons centred in about 102px #FFDEDE squares; slider arrows are the same pink squares with a tomato chevron.
- Tomato eyebrows. Small tomato labels like How it works and Integration sit above or below a block.
Card is light-only.
Colors
Surfaces
#FFFFFFPage background, cards on grey sections
#F7FAFFCool grey bands: logo strip, testimonials (--ghost-white)
#FFEFEFThe hero's right half
#FFFFFF#747474#F85959The closing CTA band and its white text
Ink
#FFFFFFText on primary
#2C2C2CText on secondary
#FFFFFFText on accent
#111314Headlines and body text (--black)
#111314Paragraphs are full ink, weight 600; there is no lighter body grey
#2C2C2CNav links, footer links, input text (--black-2)
#555555Dropdown links and grey inline links
#8F8F8FTestimonial roles, footer column titles, footer link hover
#AFAFAFThe /mo price suffix only (25px)
#2C2C2C · 50%Small notes: Annual billing, plus taxes if applicable
#FFFFFF#FFFFFFText on inverse-canvas
Action
#2C2C2CSquare buttons: Buy Card, Get Started, Get in Touch
#111314Button hover
#EEEEEEThe light Buy Card variant for dark or red backgrounds
#F85959Play button, email submit, stars, eyebrows, blog titles, icon strokes (--tomato)
#FFDEDEIcon tiles, slider arrows, Most Popular tag, the featured price card's 2px border (--misty-rose)
Lines & effects
#F7F7F7Nav link hover pill
#E1E1E1Input borders
Typography
Open Sauce One · display-hero · shown in Inter (fallback)
The quick brown fox jumpsHero h1 Unlock growth opportunities. 60px · 500 · 1.20
Open Sauce One · headline-xl · shown in Inter (fallback)
The quick brown fox jumpsCTA band title. 50px · 600 · 1.20
Open Sauce One · title-md · shown in Inter (fallback)
The quick brown fox jumpsBlog card titles, in tomato. 25px · 600 · 1.20
Open Sauce One · price-affix · shown in Inter (fallback)
The quick brown fox jumps/mo in #AFAFAF. 25px · 400 · 1.00
Inter · body-lg
The quick brown fox jumpsLead paragraphs under section titles. 17px · 600 · 1.40
Open Sauce One · label · shown in Inter (fallback)
The quick brown fox jumpsLearn More › links, feature titles, footer links. 16px · 600 · 1.25
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Breakpoints | 991px, 767px and 479px, plus min-width steps at 768px and 1440px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 16px | |
md | 25px | |
lg | 35px | |
xl | 50px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
card | 42px | |
section-tight-bottom | 50px | |
section-tight-top | 70px | |
section | 85px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Button hover | Background #2C2C2C → #111314, all 0.2s |
| Square submit | Background #F85959 → #2C2C2C, 200ms cubic-bezier(0.645, 0.045, 0.355, 1) |
| Play button | scale 1 → 1.1, transform 0.2s |
| Arrow nudge | Chevron x 0 → 6px, back to 0, 500ms outQuint |
| Dropdown chevron | Rotates on open, 400ms swingTo |
| Logo marquee | x 0 → −40%, 45000ms, linear, looping |
| Scroll fade-in | opacity 0 → 1, 1000ms outQuart |
| Nav and footer links | opacity 0.3s, colour all 0.3s |
| Mouse parallax | Mouse-move interactions shift elements up to ±400px / ±220px / ±80px (500ms) |
Do’s and don’ts
- Keep every button, input, photo, tile and arrow square (0 radius).
- Use primary #2C2C2C buttons with white Open Sauce One 15/600, hover #111314.
- Set paragraphs in Inter 15 or 17 at weight 600, in full #111314.
- Put tomato #F85959 icons inside #FFDEDE tiles, and use the same pink for slider arrows and the Most Popular tag.
- Alternate white sections (85px vertical padding) with #F7FAFF bands, and close the page with the tomato CTA band.
- Use Open Sauce One for headings and labels, Inter for paragraphs.
- Add shadows, gradients on surfaces, or rounded corners to cards and buttons.
- Use tomato for body text. Tomato on white is low contrast; keep it for 15px+ eyebrows, 25px blog titles, icons and stars.
- Put text labels on the tomato square or play button; white on #F85959 is low contrast, so they carry only an icon.
- Use ink-subtle #8F8F8F below 15px; keep it for roles and footer titles at 15–16px.
- Set text in #AFAFAF or tomato-on-pink beyond their measured uses: #AFAFAF is only the 25px /mo, and tomato on #FFDEDE is only the 13px weight-600 Most Popular tag plus icons in tiles and arrows. Both pairs are low contrast.
- Add letter spacing or uppercase, or use the declared but unloaded Open Sauce Sans and Open Sauce Two.
Example prompt
Any page in the Card style
More design systems like this
SaaS 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 Card 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/card.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