flowmanceAgencē X Design System
Agencē X is a calm, polished agency site with a shop, set on deep midnight navy. Headlines are centred and generous in BDO Grotesk, the hero in soft lavender with one word drawn as a hollow outline, and body copy is unusually heavy (weight 600) in white. Periwinkle blue is the action colour: pill buttons, icon circles and the rotating video badge. Large soft blue glows bleed in from the page edges, so the navy never looks flat.
Four signatures make it recognisable:
- Lavender stacked hero with a hollow word. Digital / Design / Agencē X centred on three lines at 130px, −2px tracking, in #C7CFFF, with Design as a thin outline (navy fill, light stroke).
- Periwinkle circles. #6D82FF circles of about 120px hold white line icons for features, a 140px circle carries the rotating PLAY VIDEO ring, and 40px circles hold small counts.
- Lavender lead-ins. Feature texts start with a bold lavender phrase followed by white text: Beautifully Designed. Discover our exceptional services…
- Pill everything. Buttons, inputs and the newsletter bar are fully rounded; the newsletter is an 80px navy pill with a periwinkle Get Started pill inside it.
Agencē X is dark-only.
Colors
Surfaces
#091030Page, nav bar, menu overlay, cart (--navy)
#0E163AInputs and the newsletter bar (--navy-light)
#0E163AInputs and the newsletter bar (--navy-light)
#FFFFFF · 10%1px input border
Ink
#FFFFFFText on primary
#091030Text on accent
#FFFFFFSection titles, body copy, links
#FFFFFFBody text is full white at weight 600; there is no grey body tone
#FFFFFF · 70%Work categories Logo, User Interface (.category-title, opacity 0.7)
#FFFFFFAction
#6D82FFButtons, icon circles, play badge, the 2px line under work titles (--color)
#C7CFFFButton background on hover; the text stays white
#C7CFFFHero headline, logo, feature lead-ins, footer column titles (--alice-blue)
Lines & effects
#FFFFFF · 15%1px base line under text links, and borders
#FFFFFF · 20%2px borders and the cart border
#FFFFFF · 15%Small translucent chips
Typography
BDO Grotesk · display-hero · shown in Inter (fallback)
The quick brown fox jumpsHero lines, centred, in accent (measured 129.6px = 9vw). 130px · 500 · 1 · -2px
BDO Grotesk · headline-lg · shown in Inter (fallback)
The quick brown fox jumpsStatistic numbers. 56px · 500 · 1.07
BDO Grotesk · title-lg · shown in Inter (fallback)
The quick brown fox jumpsWork titles Dreamy Visions; blog titles use 28 / 600 / 1.2. 28px · 500 · 1
BDO Grotesk · body-xl · shown in Inter (fallback)
The quick brown fox jumpsHero lead. 23px · 600 · 1.6
BDO Grotesk · label-lg · shown in Inter (fallback)
The quick brown fox jumpsFooter links and cart (1.1rem, measured 17.6px). 18px · 600 · 1.14
BDO Grotesk · caption · shown in Inter (fallback)
The quick brown fox jumpsBody default, checkbox text. 14px · 500 · 1.43
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 100px top and bottom, 80px at ≤991px and 50px at ≤767px |
| Breakpoints | 991px, 767px and 479px, plus min-width steps at 768, 1440 and 1920px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 5px | |
xs | 10px | |
sm | 15px | |
md | 20px | |
lg | 30px | |
xl | 40px | |
2xl | 50px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 40px | |
gutter | 72px | |
section | 100px | |
hero-top | 176px | |
hero-bottom | 243px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Title reveal | Lines rise y 110% → 0% in a mask, 1100ms outQuint, with skewY 7° → 0°, 500ms |
| Scroll fade | opacity 0 → 1, 1000ms outQuart; items rise from y 40px → 0, 500ms |
| Menu link roll | y 0% → −100%, 400ms inOutCubic; back → 0%, 300ms inOutCubic |
| Magnetic icons | Mouse move shifts items by ±6px on x and y, 500ms |
| Line draw | Width grows, 500ms ease (link underlines, skill bars, work lines) |
| Press / pop | scale 1 → 0.8, 300ms outQuad; small rotations 200ms outSine |
| Button hover | Background #6D82FF → #C7CFFF, 300ms ease |
| Parallax | Images drift y −7% ↔ 7% while scrolling in view |
Do’s and don’ts
- Use #091030 for the page and #0E163A for inputs and bars.
- Set the hero in #C7CFFF at 130px, weight 500, −2px tracking, centred, with one hollow word.
- Use #6D82FF for every button, icon circle and the play badge, with white icons and text.
- Write paragraphs in white BDO Grotesk at weight 600, 18–23px.
- Round buttons and inputs fully (30px or 50px) and keep images square-cornered.
- Start feature texts with a short lavender phrase and a full stop.
- Put small text on #6D82FF. White on periwinkle is 3.3:1, so keep button labels at 16px+ weight 600; on the circles, white is for line icons, the 13px count badges and the large badge ring text only.
- Put text on the lavender hover state at small sizes; the measured hover keeps white text on #C7CFFF, so keep the hover brief and the label at 16px+ semibold.
- Use #A1A1A1 or other greys for text; use white at 70%.
- Add drop shadows or hard-edged gradients; the only glow is the soft blue light at the edges.
- Use Inter Tight or Oswald for headings; Oswald is for blockquotes only.
- Use lavender for long paragraphs.
Example prompt
Any page in the Agencē X 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 Agencē X 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/agence.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