flowmanceBo Design System
Bo is a quiet, gallery-like studio site. A plain white page holds very large black Satoshi Bold set at viewport width, grey supporting lines, and lots of empty space. Colour arrives only through the work: a vertical stack of full-screen project photos, each with a white bold title underlined by a thick rule.
Signatures:
- One underlined word in the hero. We're creative digital studio. is set at 9vw (130px at 1440) in Satoshi 700, and only the word creative carries a 3px black underline. It has a crosshair cursor and a hidden 460×540px photo tied to it.
- Viewport-scale marquee titles. Section names (Featured Work · Featured Work, Our Services) run as a single nowrap line at 9vw that bleeds off both edges of the screen.
- Full-screen project stack. Six 100vw × 100vh photo panels in a row down the page, each darkened 20%, with a centred white title at 6vw, a 3px white underline, and a 1/6 counter at the top right of the title.
- Light steel blue as the only UI colour. Buttons, the 11px cursor dot and the social-icon hover all use #A1C4E4 on white.
Bo is a light-only design.
Colors
Surfaces
#FFFFFFPage, nav bar and section backgrounds
#F1F3F5Webflow variable --white-smoke; not visible on the home page
#FFFFFFInputs and input text
#333333Text on field
#111314The full-screen overlay menu and its 70px links
Ink
#A1C4E4Text on primary
#FFFFFFText on primary-hover
#000000Headlines, nav links, underline rules, footer links
#6E6E6EParagraphs, list items, eyebrows (Hello people!), the nav tagline, email links
#FFFFFFProject titles and counters, over a 20% black overlay on each photo
#DCF2F4Text on inverse-canvas
Action
#FFFFFFThe outline pill: transparent on white with light steel blue text
#A1C4E4The pill on hover: fills light steel blue, text turns white
#A1C4E4Outline button text and border, button hover fill, cursor dot, social-icon hover disc, blockquote left rule
Lines & effects
#E1E1E1Input borders, the footer divider, cart borders
#000000The 3px underline under creative and the 2px rule seen once on the page
#000000 · 20%Project titles and counters, over a 20% black overlay on each photo
#222527Rules between menu links, and the bar that fills a menu row on hover
#B8DBDFRules between menu links, and the bar that fills a menu row on hover
Typography
Satoshi · display-hero
The quick brown fox jumpsHero We're creative digital studio. 130px · 700 · 1.0
Satoshi · headline-lg
The quick brown fox jumpsPhilosophy statement High-end digital experiences. 36px · 700 · 1.2
Satoshi · title-lg
The quick brown fox jumpsService names Concept, Graphic Design, Strategy. 30px · 700 · 1.0
Satoshi · body-lg
The quick brown fox jumpsService descriptions and footer statements. 24px · 400 · 1.2
Satoshi · eyebrow
The quick brown fox jumpsGrey lead-ins above headings: Hello people!, Our Philosophy, Want to start a project?. 19px · 500 · 1.58
Satoshi · label
The quick brown fox jumpsTop nav links. 17px · 700 · 1.18
Spacing & shape
| Purpose | Value |
|---|---|
| Container | content is full-width with 2% side padding on sections (about 29px at 1440) |
| Section rhythm | 100px top and bottom; the work strip uses 100px top and 50px bottom; the footer uses 30px |
| Breakpoints | 991px, 767px and 479px (Webflow defaults) |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 16px | |
md | 20px | |
lg | 30px | |
xl | 40px | |
2xl | 50px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 16px | |
footer | 30px | |
section-tight | 50px | |
section | 100px |
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 | Eyebrows, headings and statement start at opacity 0; fade to 1 over 1000ms outQuart |
| Slide-in on scroll | Elements move in from 80px (x or y) to 0 over 500ms |
| Button hover | all 200ms: fill and text colour swap to #A1C4E4 / #FFFFFF |
| Link and text colour hover | Text colour change, 200–300ms ease |
| Social icon hover | Icon scales 1 → 1.1 in 100ms ease; a disc scales in behind it (500ms outExpo) |
| Menu row hover | The #B8DBDF bar changes size over 300ms ease |
| Filter / rotate | Image filter and rotation changes of 300ms ease (the scroll down badge and image hovers) |
| Cursor | The 11px dot follows the mouse |
Do’s and don’ts
- Keep the page white (#FFFFFF) with black (#000000) headlines and #6E6E6E body copy.
- Set display lines in Satoshi 700 at 9vw with line height 1.0, and underline only one key word with a 3px black rule.
- Put a grey eyebrow (19px, 500, #6E6E6E) above every major heading.
- Show work as full-viewport photo panels with a 20% black overlay and a centred white title with a 3px white underline.
- Use the outline pill (1px #A1C4E4, 30px radius, 58px tall) for every button, filling #A1C4E4 with white text on hover.
- Run section titles as nowrap strips that bleed off both edges.
- Add a second typeface, or uppercase anything other than button and caps-link labels.
- Fill buttons in their resting state, or use the unused #E2815D and #EDE5E0 variables.
- Put #A1C4E4 text below 13px or below weight 900: on white it is only about 1.8:1. Keep it to button labels and decoration.
- Round images, inputs or panels. Only pills and circles are round.
- Add shadows, gradients or blur to the UI.
- Animate longer than 500ms except the 1000ms scroll fades.
Example prompt
Any page in the Bo style
More design systems like this
Agency 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 Bo 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/bo.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