flowmanceBridge Design System
Bridge is a plain, tidy business template. Everything is neutral: a light grey hero band, white cards and sections, black Inter 600 headlines and dark grey body copy. The home page works as a showcase: a centred hero, four small feature cards, then a grid of framed page previews, each labelled with a grey chip.
Four signatures make it recognisable:
- Three-part header. Social squares and a Search field on the left, the Bridge wordmark centred, and a long hamburger line plus MENU in 5px-tracked capitals on the right. A very soft shadow (0 16px 25px black at 3%) sits under it.
- Grey hero band with white cards. The hero is a #E0E0E0 band with centred text and buttons, and the white 3px-radius feature cards sit on the same grey.
- Framed previews with chips. Screenshots of the template's pages at about 1.55:1, with a 1px #EDEDED frame and 3px radius, each with a centred grey chip (Home 1, Work 3) below.
- Eyebrow / title / subtitle stacks. Each preview section opens with a centred Choose your favorite eyebrow in grey, a 46px title and a 23px light subtitle.
Bridge is a light design with one near-black closing band.
Colors
Surfaces
#FFFFFFPage, nav, feature cards, white button
#E0E0E0Hero band, nav social squares, back-to-top button (--gainsboro)
#E0E0E0 · 50%Preview chips
#FFFFFF#6E6E6E#111111Ready to talk? band and footer
Ink
#FFFFFFText on primary
#121212Text on secondary
#000000Headlines, links, nav
#121217Base text colour (--black-2)
#414147Paragraphs, hero lead, subtitles (--dim-grey)
#707070Section eyebrows (--dim-grey-3)
#FFFFFFText on inverse-canvas
#FFFFFF · 70%Footer links and copyright
Action
#000000Main button (Purchase Bridge, Send Message)
#000000#E0E0E0The .button-primary class (contact us), hover #C7C4C4
#C7C4C4Lines & effects
#EDEDED1px frame around page previews
#E4E4E41px input borders
#3D3D3DFooter social squares
#E1E1E1 · 11%Footer divider
#000000 · 3%Nav shadow
Typography
Inter · display-hero
The quick brown fox jumpsHero See the power behind Bridge template. 59px · 600 · 0.98
Inter · headline-lg
The quick brown fox jumpsSection titles (Homepages, Company Pages). 46px · 600 · 1.04
Inter · body-lead
The quick brown fox jumpsHero lead and section subtitles (Make the right impression). 23px · 400 · 1.3
Inter · eyebrow
The quick brown fox jumpsChoose your favorite above section titles. 16px · 600 · 1.5
Inter · label-button
The quick brown fox jumpsButton labels. 16px · 600 · 1.25
Inter · caption
The quick brown fox jumpsCopyright. 15px · 500 · 0.93
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1130px, centred |
| Section rhythm | 80px top and bottom |
| Breakpoints | 991px, 767px (sections stay 80px; footer 1 column) and 479px (sections 60px top and bottom) |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 9px | |
sm | 10px | |
md | 16px | |
lg | 40px | |
xl | 50px | |
2xl | 60px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section | 80px | |
nav-height | 80px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Page-load and scroll reveal | Elements move y 20px → 0 and fade opacity 0 → 1; 500ms, up to 1000ms outQuart |
| Menu toggle | MENU and CLOSE swap by moving y 50% with opacity, 350ms ease; hamburger line rotates 350ms ease; overlay shown with display: flex |
| Size changes | Lines and panels resize over 300–500ms ease, and 1000ms outExpo on the larger ones |
| Border change | Border changes at 1500ms outExpo |
| Dropdown carets | Rotate 200–300ms ease |
| Hovers | Buttons, links and social squares: 300ms all; opacity 200ms |
Do’s and don’ts
- Use white canvas #FFFFFF with a #E0E0E0 hero band and white cards on it.
- Set headlines in Inter 600, black, centred, at 59px (hero) and 46px (sections).
- Open sections with the grey eyebrow, the title and a 23px #414147 subtitle.
- Use 3px corners on cards, chips and previews and 4px on buttons.
- Use the black button for the main action and the white or #E0E0E0 button beside it.
- Keep the header layout: socials and search left, logo centre, MENU right.
- Add the unused blue, purple or brown variables, or any other accent.
- Use the declared Space Grotesk font.
- Put #707070 ink-subtle on the #E0E0E0 band; keep it for 16px eyebrows on white.
- Add drop shadows to cards; the only shadow is the 3% nav shadow.
- Use pills or large radii.
- Use uppercase outside the MENU toggle.
Example prompt
Any page in the Bridge 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 Bridge 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/bridge.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