flowmanceVirtue Design System
Virtue is a bold, flat marketing agency site that speaks entirely in capitals. It feels like a Swiss-style print layout on white paper: black uppercase Instrument Sans, a lot of empty space, square corners everywhere, and one loud electric blue that floods the hero visual and fills every button. A fine film grain covers the page, so the white reads as paper rather than screen.
Four signatures make it recognisable:
- Everything is uppercase. The body rule sets text-transform: uppercase, so nav, headlines, paragraphs, labels and footer are all capitals.
- Two-tone headlines. A headline starts in black and finishes in grey: THE DIGITAL / MARKETING / AGENCY. with the middle line in black at 55% (.text-lighter), or OUR PRODUCT BOASTS AN EFFORTLESS THREE STEP ONBOARDING, in black followed by ENSURING YOU CAN… in grey.
- Electric blue #002AFF. Square blue buttons with an arrow (GET STARTED ↴) and a full-width blue 3D visual under the hero. No other colour appears in the UI.
- Outlined metrics. Big numbers (7,000+, 10, 5,5M) are drawn as thin black outlines with a transparent fill, on a grey #F7F7F7 band.
Colors
Surfaces
#FFFFFFPage background
#F7F7F7The metrics band, inset about 10px from the viewport edges
#040404Footer
Ink
#FFFFFFText on primary
#040404Headlines, nav, labels (--main-color)
#040404 · 60%Paragraphs: the base p rule sets opacity .6
#FFFFFFText on photos and video
#FFFFFFText on inverse-canvas
#FFFFFF · 60%Footer column titles
Action
#002AFFEvery main button (with a 2px #002AFF border), icon buttons on cards, the hero visual
#222222.button:hover background (CSS)
Lines & effects
#999999The grey second half of two-tone headlines and the cart count
#000000 · 15%1px rules; the step dividers are 1px columns with a white–black–white gradient
#040404The 1px stroke of the outlined metric numbers
#000000 · 40%.hero-overlay on service card photos under white text
#242424Footer newsletter field, with a paper-plane icon at 15px
#000000Footer subscribe button; hover goes to #080425
#080425#D9DAE2Text on inverse-button
Typography
Instrument Sans · display-metric
The quick brown fox jumpsOutlined metric numbers (transparent fill, 1px black stroke). 120px · 600 · 1
Instrument Sans · headline-md
The quick brown fox jumpsTwo-tone statements (OUR PRODUCT BOASTS…, WE'VE DONE THE MATH…). 33px · 600 · 1.4
Instrument Sans · title-xl
The quick brown fox jumpsPage and section titles (.main-page-title). 29px · 600 · 1.4
Instrument Sans · body-xl
The quick brown fox jumpsService card text over photos. 25px · 500 · 1.4
Instrument Sans · label-nav
The quick brown fox jumpsNav links, input text. 17px · 600 · 1.5
Instrument Sans · eyebrow
The quick brown fox jumpsTag text next to an 8px black dot. 14px · 600 · 1.1
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1240px, centred |
| Section rhythm | 200px top and bottom, which is very airy; 100px at ≤991px and below, side padding stays 3% |
| Breakpoints | 991px, 767px and 479px, plus min-width rules at 768, 1280 and 1920px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xxs | 3px | |
xs | 10px | |
sm | 20px | |
md | 30px | |
lg | 40px | |
xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
gutter | 43px | |
hero-top | 80px | |
section-video | 120px | |
section | 200px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Headline line reveal | Lines in overflow-hidden masks move y 150% → 0% and un-skew skewY 15° → 0°, 700ms outExpo |
| Fade-in | opacity 0 → 1 with x/y → 0, 1000ms outQuart |
| Slide-in | x −30px → 0 500ms outQuart, or x 30px → 0 800ms outExpo |
| Rise | y 10% → 0% over 500ms |
| Nav text roll | Label moves y 0 → −100% while a copy rises, 500ms |
| Button arrow nudge | x 3px, y −3px and back, 300ms ease |
| Size changes | Size 300ms ease (eight elements) and 500ms |
| Rotate | Rotate 500ms on seven elements |
| Menu icon | Lottie 0 → 100 over 600ms |
| Button colour | background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) |
Do’s and don’ts
- Set all text in uppercase Instrument Sans, headings and paragraphs at weight 600.
- Split long headlines into a black #040404 first half and a #999999 second half, ending with a full stop.
- Use #002AFF square buttons with a 2px border of the same blue and a hook arrow after the label.
- Keep every corner square: buttons, inputs, cards and images at 0px.
- Give sections 200px of vertical padding and leave wide empty areas beside headlines.
- Draw large metrics as 1px black outlines on the #F7F7F7 band.
- Use #999999 for paragraphs or labels; it is 2.8:1 on white. The template keeps it to headline sizes and the one-digit cart count.
- Add rounded corners, shadows or blur.
- Use blue for headlines or backgrounds beyond the hero visual.
- Mix in lowercase or sentence case, or add a second typeface (Space Grotesk is loaded but unused).
- Set paragraphs in full black; they are black at 60%.
- Use saturated photos without the 40% scrim when text sits on them.
Example prompt
Any page in the Virtue style
More design systems like this
Marketing 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 Virtue 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/virtue.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