flowmanceSection Design System
Section is a bright, tidy SaaS site. The page is white, headlines are black Inter Tight 600, body copy is mid-grey, and one electric blue (#115CEF) marks everything interactive or important: the wordmark, the active nav link, eyebrows, the first half of leads, and the second line of some titles. Product UI cards float on square pale-blue panels, so the page reads as light and airy, with almost no lines or shadows.
Four signatures make it recognisable:
- Blue-then-grey leads. Leads start with a short blue phrase and finish in grey: Versatile and resilient. (blue) The ultimate design toolkit for startups on the move. (grey). Titles can do the same with black then blue: Explore Section. / The contrast is evident.
- Pale-blue pills. Buttons are #F0F5FF pills (40px radius) with blue text, never solid blue at rest.
- Square pale-blue panels. Hero and feature images are square-cut #F0F5FF panels holding floating UI cards (an activity card, a profile card, a Trustpilot badge) and memoji or portrait cut-outs.
- Emoji eyebrows. Most sections open with a small emoji and a blue 17px eyebrow: 🖐🏼 Hey there! We're Section, 🔒 Core features, ✉️ Get started.
Section is a light-only design.
Colors
Surfaces
#FFFFFFPage and section background
#F0F5FFImage panels, button fills, the app panel
#F0F5FF · 40%Striped rows in the comparison table
#FFFFFFInk
#115CEFText on primary
#FFFFFFText on secondary
#000000Headlines, service titles
#222222Nav links, table text, input text, footer links
#444444Small top titles (.top-small-title, 23px)
#777777Paragraphs, list items, the grey half of leads, the competitor column
#FFFFFFTestimonial text on full-bleed photos, over a 15–20% black layer
Action
#F0F5FFPill buttons
#F0F5FFNo colour change on hover for the main pill; the hover slides a 24px arrow up into the button
#115CEFHover state of the .button and subscribe button
#115CEFWordmark, active nav link, eyebrows, blue half of leads and titles, blog titles, footer titles
Lines & effects
#DFDFDF1px input borders
#115CEFThe rule under the comparison table header
#FFFFFF · 95%Fixed nav bar
#000000 · 20%Testimonial text on full-bleed photos, over a 15–20% black layer
Typography
Inter Tight · display-hero
The quick brown fox jumpsDesign a sleek site with Section. 58px · 600 · 1.2
Inter Tight · headline-lg
The quick brown fox jumpsSection titles: Insightful, client focused digital solutions., Embark on your Section adventure now. 45px · 600 · 1.2
Inter Tight · body-xl
The quick brown fox jumpsHero lead (blue phrase, then grey). 27px · 600 · 1.4
Inter Tight · title-lg
The quick brown fox jumpsFeature rows: Advanced analytics review. 26px · 600 · 1.3
Inter Tight · label-lg
The quick brown fox jumpsNav links, large buttons, footer titles. 18px · 600 · 1.11
Inter Tight · eyebrow
The quick brown fox jumpsBlue eyebrows after an emoji. 17px · 600 · 1.4
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred, with 5% side padding on sections (72px at 1440px) |
| Section rhythm | .section is 150px top and bottom on white (80px at ≤991, 60px at ≤479) |
| Breakpoints | 991px, 767px and 479px, with a min-width: 768px set |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 6px | |
sm | 15px | |
md | 24px | |
lg | 30px | |
xl | 50px | |
2xl | 74px | |
3xl | 100px | |
4xl | 150px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
nav-height | 58px | |
gutter | 72px | |
hero-top | 100px | |
hero-bottom | 130px | |
section | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Fade-in on scroll | opacity 0 → 1, 1000ms outQuart |
| Mask reveal | Covers move from x 0% to x −101% (500ms) or x 100% (300ms ease) |
| Button arrow | 24px arrow from y 100px into the button on hover; size change 500ms |
| Hover parallax | Floating UI cards move ±5px and ±10px on x and y with the mouse, 500ms |
| Logo hover | filter change, 300ms ease |
| Dropdown chevron | Rotates, 200ms easeOut |
| Nav and dropdown links | color 0.2s to blue |
| Buttons, footer links | all 0.3s |
| Subscribe button | background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) |
| Logo carousel | Continuous sideways scroll |
Do’s and don’ts
- Use a white #FFFFFF page with black #000000 headlines at weight 600 and grey #777777 body copy at 20px.
- Use #115CEF for the wordmark, active links, eyebrows and the first phrase of a lead.
- Make buttons #F0F5FF pills (40px radius) with blue 16–18px semibold text.
- Put product imagery in square #F0F5FF panels with floating UI cards.
- Open sections with an emoji plus a blue 17px eyebrow.
- Use 150px section padding and a 100px gap between split columns.
- Fill buttons solid blue at rest; blue fill is a hover state only (.button, subscribe).
- Round image panels or photos; only buttons, inputs and small cards are rounded.
- Use #777777 for text under 17px; it is only about 4.5:1 on white.
- Add CSS drop shadows to page cards or sections.
- Introduce a second accent colour; the orange #E64007 in the variables is unused.
- Use weights below 500 or any letter spacing.
Example prompt
Any page in the Section 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 Section 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/section.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