flowmanceÃagency Design System
Ãgency is a calm, warm-grey studio site with an editorial accent. It feels like a printed portfolio on recycled stock: a soft #E5E4E2 page, near-black #151414 text, a fine architectural frame of hairlines around the content, white cards and pills, and an italic serif dropped into otherwise plain Inter headlines. It is light-only and almost colourless; the project images and their soft colour washes bring the warmth.
Four signatures make it recognisable:
- The frame. Two vertical hairlines run the full height of the page about 80px in from each edge, crossed by the nav's bottom rule and the hero's bottom rule. The left gutter holds a rail of social icons, each in a 50px cell between hairlines.
- Sans plus italic serif in one headline. The hero sets We're expert [photo pill] brand in Inter 400 over designers~developers. in italic Boska. Metric numbers (10, 340+, 17, 900+) also use italic Boska.
- The tilde. A light 50px ~ (Inter 200) marks every section title (~ Our services, ~ Exciting facts from our agency) and joins words in the hero (designers~developers). It echoes the à in the name.
- Stacked project cards. Full-width cards with a 25px radius stack on top of each other as you scroll, each showing a sliver of the card behind (a pink edge above Proin Pretium), with a white tag pill top-right and a centred white title.
Colors
Surfaces
#E5E4E2Page background (--gainsboro), the open menu, service icon circles
#FFFFFFService cards, tag pills, buttons
#151414Dark project cards and the button hover state
Ink
#151414Text on primary
#151414Headlines, links, labels (--black)
#151414Body text is the same near-black as headlines; there is no grey paragraph colour
#151414 · 75%Tag pill text (.category-text)
#151414 · 37%Social rail icons and faint meta
#FFFFFFText on inverse-canvas
#FFFFFFProject titles over images
Action
#FFFFFFFilled buttons: white with near-black text
#151414.button turns near-black with white text on hover
Lines & effects
#000000 · 12%The frame hairlines, nav and hero bottom rules, social rail cells (--black-2)
#C5C5C5The 1px underline of Learn More links
#151414 · 20%Bottom gradient on project cards, transparent 71% → #15141433
#BFBEB8Declared variable for muted fills; rarely used
Typography
Inter · display-hero
The quick brown fox jumpsHero line 1, We're expert … brand (Inter). 90px · 400 · 1.1
Inter · headline-lg
The quick brown fox jumpsSection titles (Our services). 50px · 500 · 1.2 · -1px
Inter · title-lg
The quick brown fox jumpsProject titles on cards, capitalized. 29px · 500 · 1.0
Inter · quote
The quick brown fox jumpsBlock quotes with a 2px #151414 left rule, padding 0 20px 0 30px. 23px · 500 · 1.3
Inter · body-lg
The quick brown fox jumpsLead paragraphs (We're proud to work with a diverse range of companies.). 19px · 500 · 1.47 · -1px
Inter · label-footer
The quick brown fox jumpsFooter links. 17px · 500 · 1.18 · -1px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1100px, centred |
| Section rhythm | 100px top and bottom; some sections end at 50px (_50-bottom); the CTA band uses 70px (55px at ≤767, 38px at ≤479); the footer section 30px top and 20px bottom |
| Breakpoints | 991px, 767px and 479px, plus min-width: 768px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 15px | |
md | 20px | |
lg | 30px | |
xl | 40px | |
2xl | 50px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
grid-gap | 25px | |
rail | 50px | |
cta-y | 70px | |
section | 100px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Text roll on hover | Labels in a mask move y 0 → −100% while a copy follows: 300ms ease (titles, MENU) or 400ms inOutCubic (menu links) |
| Fade-up on scroll | y 50px → 0 with opacity 0 → 1, 600ms outExpo |
| Slow fade | opacity 0 → 1, 1000ms outQuart on page load |
| Size change | Width or height changes, 300ms ease and 500ms (underlines, accordion and menu panels); 400ms outCubic |
| Icon tap | scale 1 → 1.1 → 1, 100ms ease |
| Chevron nudge | x 0 → 6px, 500ms outQuint |
| Colour change | Background and text colour, 400ms ease |
| Icon rotate | 200ms ease (hamburger) |
| CSS transitions | all 0.3s on most elements, 0.2s on .button; links fade to 58–60% opacity |
Do’s and don’ts
- Use the warm #E5E4E2 canvas with #151414 text, and white #FFFFFF only for cards, tags and buttons.
- Frame the page with black-12% hairlines about 80px in from each edge, with the social rail in the left gutter.
- Mix Inter 400 and italic Boska at the same 90px size in hero headlines.
- Mark section titles with the light 50px ~ at Inter 200.
- Use −1px tracking on body text (16px/500) and leads (19px/500).
- Stack full-width project cards with a 25px radius and a white tag pill top-right.
- Use grey body text; paragraphs are #151414 at full strength.
- Use Boska for body text or labels; keep it for 74px+ numbers and hero lines.
- Add drop shadows or coloured buttons; buttons are white and turn #151414 on hover.
- Use the declared #8F3AFF or #ECC886 as accents on the UI.
- Put pure white behind the whole page or remove the frame lines.
- Keep ink-faint (37%) for icons only, never for text.
Example prompt
Any page in the Ãgency 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 Ãgency 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/aagency.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