flowmanceVānguard Design System
Vānguard is a confident, corporate consulting site with a gallery feel. Everything is square: no rounded corners on buttons, cards, images or fields. Headlines in Instrument Sans run at billboard size with −1px tracking, and the white page is framed by a 15px white border, so the hero photo and the dark band read like mounted prints. Colour comes from the photography (teal-blue, mint, hot pink) and from one cobalt blue used sparingly.
Four signatures make it recognisable:
- Two-tone headlines. Big titles split into a black first word and a grey rest: Our in black, Services in black at 40%; on the dark band, Empowerment in white over and growth in white at 65%. The hero does the same with Core objectives (soft, luminosity-blended) over for leaders. (solid white).
- The 15px frame. The hero, the about images and the #111111 band all sit 15px in from the viewport edges, leaving a thin white margin around them.
- Square everything. 0px radius on buttons, images, cards, inputs and step numbers. The only circles are the small arrow rings in cards.
- Huge numbers and a marquee. Metrics are set at 9vw (130px at 1440), and the footer runs an endless Vanguard™ Solutions ticker at 16vw (230px).
Vānguard is a light design with one inset dark band and a dark footer.
Colors
Surfaces
#FFFFFFPage background and the 15px frame
#F5F5F5The grey testimonial band (--divider-color whitesmoke)
#000000 · 10%Input border and typed text
#333333Text on field
#111111The inset dark band and the footer
Ink
#FFFFFFText on primary
#000000Headlines, links, metric numbers
#000000 · 85%Paragraphs (p has opacity .85)
#000000 · 65%Secondary paragraphs (.paragraph-0, .text-lighter)
#000000 · 40%The grey second word of display titles (Services)
#FFFFFFText on the dark band
#FFFFFFAction
#4361EESquare buttons, the active step number
#5670EE.button:hover
Lines & effects
#000000 · 12%1px rules between list items
#272727Inactive step-number squares on the dark band
#242424Footer newsletter field
#FFFFFF · 65%and growth, step descriptions
#FFFFFF · 30%Inactive step titles and numbers
#D9DAE2--body-text-color: subscribe button label
#FFFFFF · 25%Nav bottom rule over the hero photo
#FFFFFF · 50%0.5px ring around arrow icons on photos
#000000Footer subscribe button (hover #080425)
Typography
Instrument Sans · display-marquee
The quick brown fox jumpsFooter ticker Vanguard™ Solutions (.category-ticket, 16vw). 230px · 600 · 1.2 · -1px
Instrument Sans · headline-lg
The quick brown fox jumpsAbout statement Vanguard™ is rooted in creativity…. 47px · 600 · 1.3 · -1px
Instrument Sans · title-lg
The quick brown fox jumpsTestimonial quotes. 22px · 600 · 1.3
Instrument Sans · body-lg
The quick brown fox jumpsParagraphs. 19px · 500 · 1.5
Instrument Sans · label
The quick brown fox jumpsButton labels. 16px · 600 · 1.1
Instrument Sans · footer-title
The quick brown fox jumpsFooter column titles at 60% white. 20px · 400 · 1.1
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1220px, centred; the hero grid is 1240px |
| Grid | a 12-column main-grid with no column gap and a 3vw row gap |
| Section rhythm | 250px top and bottom on desktop, 100px from 991px down |
| Breakpoints | 991px, 767px and 479px, plus min-width 768px and 1280px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 16px | |
md | 20px | |
lg | 30px | |
xl | 50px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
frame | 15px | |
card-gap | 25px | |
gutter | 43px | |
nav-height | 84px | |
logos | 90px | |
numbers | 120px | |
feature | 150px | |
section | 250px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Headline reveal | Each word sits in an overflow-hidden mask. It moves y 100% → 0% while skew goes 15° → 0°, 500ms outExpo (also 500ms linear) |
| Text roll on hover | Label moves out by 100%, copy y 100% → 0%, 500ms outQuint; text colour changes over 500ms |
| Step activation | Background colour, text colour and size, 400ms outQuart; inactive steps go to opacity 0.3 |
| Fade-in | opacity 0 → 1, 400–800ms outQuart |
| Slide-in | x −30px / 30px → 0, 500–800ms outExpo |
| Arrow ring | Rotate, 500ms |
| Card hover | transform and color, 300ms |
| Button hover | All properties, 300ms; nav links 200ms |
| Logo and footer marquee | Continuous horizontal loop |
Do’s and don’ts
- Keep every corner square: rounded.none on buttons, images, fields and cards.
- Inset hero media and dark bands 15px from the viewport edge.
- Split display titles into ink #000000 and ink-faint (black at 40%), or white and white at 65% on #111111.
- Use 250px section padding on desktop; this template breathes.
- Use −1px tracking on display and headline titles (32px+) in Instrument Sans weight 600.
- Use cobalt #4361EE only for buttons and the active step.
- Round anything, add shadows, or add a second accent colour.
- Use Playfair Display, even though it is loaded.
- Use ink-faint (40%) for text under 40px; for small labels use at least 50%.
- Put body text in full black; paragraphs are 85%.
- Set white text on the hover blue #5670EE below 16px semibold; it is about 4.2:1.
- Add a long animation: reveals are 500ms, hovers 200–500ms.
- Use inverse-faint (white at 30% on #272727) for anything that must be read. It is only for inactive step numbers and titles, which the active state replaces.
Example prompt
Any page in the Vānguard 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 Vānguard 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/vanguard.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