flowmanceInvent Design System
Invent is a loud, monochrome agency site. The first screen is nothing but three words in near-black capitals at 13vw, staggered left and right like a poster, with a short paragraph tucked into the gap. After that it settles into a calm white page with one dark #151619 band for the work, uppercase titles at 40px, and photography that carries all the colour.
Four signatures make it recognisable:
- The staggered capital hero. THINK. / ✳︎CREATE. / SOLUTION. in General Sans 500 at 187.2px (13vw), line height 1.0. The first line is pulled left (−280px), the last pushed right (−160px), and the middle line runs reversed so a 5-line lead paragraph sits to its left.
- The ✳ glyph. A thin eight-armed asterisk ✳︎ opens the hero's middle word and the main section titles (✳ UNIQUE DIGITAL EXPERIENCES, ✳ FEATURED WORK); the logo-strip heading has none. It is set in the same size and colour as the title.
- Everything uppercase, one weight. Titles, project names, tags and labels are all caps in weight 500 with no letter spacing. Only paragraphs and links are sentence case.
- The blend-mode chrome. The INVENT wordmark (top-left) and the outlined Menu pill (top-right) are fixed with mix-blend-mode: difference, so they flip colour over whatever scrolls beneath them: black on white, white on the dark band, orange over a blue photo.
Invent is light with one inverse band. There is no dark mode.
Colors
Surfaces
#FFFFFFPage background, hero, feature and logo sections
#F3F3F3The 100px icon tiles in the feature grid (Webflow var --white-smoke)
#151619The featured-work band, the menu overlay and the footer
#FFFFFF · 60%Typed text in the contact fields
Ink
#FFFFFFText on primary
#151619Headlines, labels, paragraphs (Webflow var --black)
#151619Same as ink: body copy is set in full near-black, not grey
#FFFFFFTitles, project names and links on the dark band; the 1px footer divider
#FFFFFF · 70%Footer links at rest
#FFFFFFAction
#151619The filled pill button and the round cart button
#33343AButton background on hover (CSS .button:hover)
Lines & effects
#1516191px bottom border of the underline form fields
#000000Fill of the fixed Menu pill (with a 2px white border and difference blending)
#12141DThe ecommerce cart drawer and its dividers
#FFFFFF · 11%The ecommerce cart drawer and its dividers
Typography
General Sans · display-hero
The quick brown fox jumpsHero lines and the >47 / +1,140 metrics. 187.2px · 500 · 1.0
General Sans · headline-lg
The quick brown fox jumpsSection titles after ✳ (.title-main, 9 uses). 40px · 500 · 1.3
General Sans · title-lg
The quick brown fox jumpsProject names under work images (IPAD APP, VIVID AGENCY). 25px · 500 · 1.3
General Sans · body-lg
The quick brown fox jumpsParagraphs (base p), hero lead. 18px · 500 · 1.4
General Sans · label
The quick brown fox jumpsButtons and footer links. 16px · 500 · 1.2
General Sans · eyebrow
The quick brown fox jumpsProject tags in brackets (USER INTERFACE). 15px · 500 · 1.33
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred (.container) |
| Section rhythm | 110px top and bottom on every section (.section { padding: 110px 5% }) |
| Section header row | ✳ TITLE on the left, an underlined text link (More Work) on the right, space-between |
| Breakpoints | Webflow's 991px, 767px and 479px, plus a 1280px+ step |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 8px | |
sm | 15px | |
md | 20px | |
lg | 30px | |
xl | 45px | |
2xl | 50px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-x | 72px | |
section | 110px | |
hero-y | 191px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Fade-up on scroll | opacity 0 → 1 over 1000ms outQuart, with y 20–30px → 0 over 500ms outExpo |
| Staggered rise | Children move y 40px or 100px → 0, 500ms |
| Cursor follow | x / y ±5px follow the mouse, 500ms |
| Link underline grow | Width change, 300ms ease on hover, reversed on mouse-out |
| Menu open | Overlay display none → flex, links fade in 400ms ease; the icon rotates over 300ms ease; Menu text fades to the close label |
| Button hover | Background #151619 → #33343A, transition: all .3s |
| Social link hover | opacity 1 → 0.6 |
Do’s and don’ts
- Open sections with ✳︎ plus an uppercase headline-lg title (40px, weight 500, line height 1.3) in ink #151619.
- Keep the page white (#FFFFFF) and put work on a single #151619 inverse-canvas band.
- Use the black pill (primary #151619, 30px radius, padding 17px 30px) for the main action, hovering to #33343A.
- Set paragraphs at 18px weight 500, line height 1.4, in full #151619.
- Keep images square-cornered and full colour.
- Keep the wordmark and Menu pill fixed with mix-blend-mode: difference.
- Add an accent colour; #FF4D00 and #2E5CFF exist in the variables but are unused.
- Add letter spacing to uppercase text, or use any weight other than 500 (400 only inside inputs).
- Add shadows, gradients, blur or rounded images.
- Use EB Garamond or any second typeface.
- Fade body text to grey, or put inverse-ink-muted (70% white) on anything but the dark band.
- Animate longer than 1000ms or use bounce easing.
Example prompt
Any page in the Invent 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 Invent 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/invent.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