flowmanceUmbrella Design System
Umbrella is a light, reassuring insurance site. It reads like a friendly fintech landing page: lots of white, deep-navy Inter 600 hero and card titles, grey body text, and one forest-green colour that fills the main buttons. Warm off-white cards with big 30px corners hold the content, and a single sand-gold appears only for stars, the testimonial slider arrow and button hovers.
Four signatures make it recognisable:
- Tilted pastel portrait cards. Under the hero, four cut-out portraits sit on flat colour cards (lavender, aqua, mint, coral) with 30px corners, each tilted a few degrees, alternating left and right, running edge to edge and overlapping the next section.
- Two-tone section titles. Section titles are 31px grey (ink-muted); the second half of the sentence drops to 70% (ink-faint): Real experiences, real results., A list of quick points to inform the viewer.
- Green dot eyebrow. A 10px green dot plus a green 17px label (● Welcome to Umbrella) sits above the hero title.
- Hand-drawn underline. The last word of the hero title (solution.) is set in forest green with a loose green brush stroke under it.
Umbrella is a light-only design.
Colors
Surfaces
#FFFFFFPage background
#F8F5F2Service cards, testimonial cards, FAQ rows, the blog band
#FFFFFFFooter subscribe field (contact inputs are transparent with a #CCCCCC 1px border)
#333333Typed text in contact inputs
#385F53Green bands (CTA, video panel, the products band); text on them is white, secondary text white at 70%
Ink
#FFFFFFText on primary
#0F1029Hero title, card titles, FAQ questions, names, nav links
#63666DBody copy, section titles, underline links, footer links
#63666D · 70%Second half of two-tone titles and the hero lead
#FFFFFF#FFFFFFText on inverse-canvas
#FFFFFF · 70%Action
#385F53Pill buttons, the circle submit, current nav outline, eyebrow, green word in the hero
#EBBD7FButton and circle-button hover, rating stars, slider arrow
#EBBD7FButton and circle-button hover, rating stars, slider arrow
#1E2F3CInline underlined text links such as Plan one now
Lines & effects
#E0E0E0Resting track under underline links
#CECECEBorder of the footer subscribe field
#63666D · 40%1px outline of category tags
Typography
Inter · display-hero
The quick brown fox jumpsThe single hero h1, centred, navy, last word green. 65px · 600 · 1.1
Inter · headline-lg
The quick brown fox jumpsTwo-tone section titles (14 uses). 31px · 600 · 1.4 · -1px
Inter · title-card
The quick brown fox jumpsService card titles (Life Insurance). 21px · 600 · 1.1
Inter · body-lg
The quick brown fox jumpsParagraphs and testimonial quotes. 17px · 500 · 1.4
Inter · eyebrow
The quick brown fox jumpsGreen tag text after the dot. 17px · 500 · 1.1
Inter · label
The quick brown fox jumpsNav links, footer links and titles, form button. 16px · 600 · 1.25
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 140px top and bottom, 60px at ≤991 (.section); the green products band uses 100px and the CTA band has no vertical padding (60px at ≤767, 50px at ≤479); the footer uses 70px top and 30px bottom |
| Section head | title on the left, a supporting element on the right (the Trustpilot badge, a button), aligned to the top |
| Breakpoints | 991px, 767px and 479px (Webflow defaults), plus 1920px+ |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 16px | |
md | 25px | |
lg | 30px | |
xl | 50px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
card-gap | 30px | |
gutter | 72px | |
band | 100px | |
section | 140px | |
hero-top | 203px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Scroll fade-in | opacity 0 → 1, 1000–1250ms, outQuart |
| Underline and button slide | Bar moves x −101% → 0% on hover, 300ms ease; on mouse out it moves to x 100% (300ms) and resets to −101% in 0ms |
| Arrow nudge | x 0 → 6px, 300ms ease in, 500ms outQuint back |
| Portrait card tilt | Rotate, 400ms swingTo on the four hero cards |
| Dropdown / accordion open | Height change 300–400ms (ease, easeInOut, swingTo), icon scale 0.7 → 1 |
| Nav link hover | Colour change, opacity 0.3s transition |
| Hover scale | scale 1 → 1.1, 100ms ease, and back |
| Footer links | all 0.3s |
| Circle button hover | background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) |
Do’s and don’ts
- Use #385F53 green for the filled buttons and the current nav state, with white labels.
- Put content in #F8F5F2 cards with a 30px radius on a #FFFFFF canvas.
- Write section titles as two-tone sentences: ink-muted #63666D, then ink-faint for the second half.
- Set body text in #63666D at 17px 500, line height 1.4.
- Open hero-type sections with the green dot eyebrow.
- Use underline links (Get started) for card actions, pills only for the main action of a section.
- Use gold #EBBD7F as a resting button. White on gold is only 1.7:1, so it is a brief hover state; keep the label 18px and short.
- Use ink-faint below 26px. It is for large title halves only.
- Add shadows, borders on cards, or gradients.
- Mix radii: cards 30px, pills 40px, nav capsules 20px, FAQ rows 10px.
- Add a serif or uppercase labels, or weights above 600.
- Use navy for paragraphs; navy is for titles and names.
Example prompt
Any page in the Umbrella 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 Umbrella 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/umbrella.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