flowmanceAgencs Design System
Agencs is a dark, image-led creative agency site. The page is near-black, and almost all type is a soft light grey (#BFBFBF) rather than white, which makes the huge Inter Tight headlines feel quiet instead of shouting. Colour comes only from photos: vivid 3D renders and product shots in the work section, and warm sepia-toned shots of the team elsewhere.
Four signatures make it recognisable:
- Tilted floating photos. The hero title Think, / Create, / Solution. sits centred at 144px, and rounded photos (30px radius) float around it rotated -10deg, drifting with the cursor.
- Grey, not white. Headlines and body share #BFBFBF; pure white is kept for the logo, project names, footer links and the main pill button.
- Sepia for people, colour for work. Most team, office and blog photos (the photo band, about, team and blog images) are filtered sepia() at 50–70% opacity; project images and the floating hero photos are full colour.
- Dashed link lists. Expertise, clients and past agencies are written as inline 20px words with 1px dashed grey underlines (Research, Branding, Webflow, Microsoft …).
Agencs is dark only, apart from one grey CTA band.
Colors
Surfaces
#040507Page background
#191C20Overlay menu background and the footer subscribe field
#BFBFBFThe Ready to talk CTA band
Ink
#040507Text on primary
#040507Text on secondary
#BFBFBFHeadlines, links, tags, numbers (--font-color)
#BFBFBFBody text is the same grey (same as ink)
#FFFFFFLogo, footer links, project names
#FFFFFF · 60%Footer links at rest (opacity: 0.6, 1 on hover)
#FFFFFFProject names over images
#040507Text on inverse-canvas
Action
#FFFFFFWhite pill button
#BFBFBFThe grey fill that grows inside the pill on hover
#BFBFBF55px circle arrow button, form submit, skill bars
Lines & effects
#FFFFFF · 15%1px dividers
#FFFFFF · 20%1px rules between testimonials
#BFBFBF2px borders on tags, category pills, inputs, menu index circles
#999999Input placeholders
Typography
Inter Tight · display-stat
The quick brown fox jumpsStats 41, 316, 10+. 150px · 500 · 0.9 · 3px
Inter Tight · headline
The quick brown fox jumpsSection titles (The Team). 55px · 500 · 1.1
Inter Tight · title-lg
The quick brown fox jumpsList titles Expertise, Clients list, Past agencies. 26px · 500 · 1.15
Inter Tight · body-link
The quick brown fox jumpsDashed-underline words. 20px · 500 · 1.3
Inter Tight · label-nav
The quick brown fox jumpsMenu. 19px · 600 · 1.58
Inter Tight · footer-link
The quick brown fox jumpsFooter links. 17.6px · 500 · 1.1
Spacing & shape
| Purpose | Value |
|---|---|
| Container | 1200px max, centred; sections pad 5% left and right (72px at 1440) |
| Section rhythm | 150px top and bottom |
| Breakpoints | 991, 767 and 479px, plus 1280px and 1440px steps |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 20px | |
md | 30px | |
lg | 40px | |
xl | 50px | |
2xl | 100px | |
3xl | 150px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
cta | 70px | |
gutter | 72px | |
section | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Headline reveal | Lines slide up from below (offset y 200%) to y 0% over 1100ms outQuint, with a skew 7deg → 0deg over 500ms |
| Fade-up | opacity 0 → 1 with y 40px → 0, 500ms; slower fades 1000ms outQuart |
| Hero photos | Rotated -10deg; drift ±6px with the cursor, 500ms |
| Button fill and roll | Grey circle grows, 500ms; label rolls up to its copy, about 500ms |
| Menu open | The + rotates (500ms); overlay fades and links roll in; hovers swap colour 300ms ease |
| Service and project names | Slide sideways x -30% with scroll, 500ms |
| Image hover | Photo scale → 1, 300ms ease; filter change 300ms ease; transition: all 0.3s on blog images |
| Skill bars | Width grows to the percentage, 500ms ease |
| Click feedback | scale 0.8, 300ms outQuad |
Do’s and don’ts
- Use canvas #040507 and set text in ink #BFBFBF, including headlines.
- Set display type in Inter Tight 500 at 100–150px with no negative tracking.
- Round every image to 30px and let hero photos tilt -10deg.
- Apply sepia() at 50–70% opacity to people photos; keep project images vivid.
- Use the white button-primary pill (100px radius, 60px tall) with a grey fill on hover.
- Open sections with a 2px outlined tag pill and a dot.
- Use pure white for headlines or body text.
- Add an accent colour; #BFEA88 and #F3EAF7 are unused leftovers.
- Leave input text at Webflow's #333333; set it to #BFBFBF.
- Add drop shadows; use tilt, scale and sepia for depth.
- Use square corners on photos or buttons.
- Put the 60% white footer link colour on anything smaller than 16px.
Example prompt
Any page in the Agencs 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 Agencs 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/agencs.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