flowmanceAGNCY Design System
AGNCY is a dark, kinetic agency site. Everything is set in white uppercase Inter Tight on a soft black (#181818), and a single electric violet-blue (#5A26F0) does all the colour work: big circles, a solid panel, icon discs and a tilted ribbon. The page is built around huge type that moves with the scroll, and a gap-free strip of colourful editorial photos.
Four signatures make it recognisable:
- Statement under a growing circle. A sticky, full-screen section where the line BUILDING BRANDS THAT MATTER AND EXPERIENCES THAT AMAZE. slides sideways at 15vw while a #5A26F0 circle grows from 1px behind it.
- The tilted WORK ribbon. A full-width #5A26F0 band rotated −6° and scaled 1.2, repeating WORK · at 6vw in white, with a soft shadow; a second, darker ribbon crosses behind it with faint text.
- Uppercase everywhere. body { text-transform: uppercase }. The nav centre shows a tagline instead of links: BORN IN CURIOSITY, RAISED BY DEDICATION.
- Square bullets. Section labels are preceded by an 8px white square (WE BUILD EXPERIENCES, OUR SKILLS, VISIT US).
AGNCY is dark-only.
Colors
Surfaces
#181818Page background (--black-2)
#000000Full-screen menu overlay (--black)
#525252Form placeholder text (--dim-grey)
Ink
#FFFFFFText on primary
#FFFFFFAll text
#FFFFFFBody text is full white too
#FFFFFF · 28%Blog dates; menu indexes use 33% opacity
#FFFFFFAction
#5A26F0--blue: the form button, circles, the about panel, the ribbon
#6E3FF5.button:hover
Lines & effects
#FFFFFF · 30%1px rules between service rows
#FFFFFF · 29%1px underline under footer and contact links
#181818 · 20%Overlay on work images
#000000 · 10%Ribbon shadow 1px 10px 15px
Typography
Inter Tight · display-statement
The quick brown fox jumpsThe sliding statement (.text-rotator-1, 15vw, nowrap). 216px · 500 · 1.2
Inter Tight · headline-sm
The quick brown fox jumpsProject titles on images, with 0 3px 6px #0000001A text-shadow. 32px · 500 · 1.2
Inter Tight · title-lg
The quick brown fox jumpsSection labels WE BUILD EXPERIENCES, OUR SKILLS (.title-2). 24px · 500 · 1.3
Inter Tight · body-lg
The quick brown fox jumpsAbout text on the blue panel (.subhead). 20px · 400 · 1.3
Inter Tight · label-lg
The quick brown fox jumpsSkill rows CONCEPT 95%. 17px · 500 · 1.18
Inter Tight · link
The quick brown fox jumpsUnderlined footer links. 16px · 400 · 1.4
Spacing & shape
| Purpose | Value |
|---|---|
| Container | 1400px max, centred |
| Breakpoints | 991px, 767px, 479px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 6px | |
xs | 10px | |
sm | 15px | |
md | 20px | |
lg | 25px | |
xl | 35px | |
2xl | 50px | |
3xl | 80px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
nav-y | 21px | |
section | 100px | |
section-about | 120px | |
section-cta | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Text reveal | Lines move y 110–130% → 0% with skewY 7° → 0° in an overflow mask, 500ms; large titles 1100ms outQuint |
| Fade-in | opacity 0 → 1, 500ms; 1000ms outQuart for slower blocks |
| Side slide | x ±30px → 0, 500ms |
| Statement | Scroll-scrubbed: the 15vw line moves sideways and the circle scales up across a 400vh track |
| Ribbon | WORK · text moves sideways as the section scrolls in view |
| Bars and lines | Width 0 → value, 500ms ease |
| Icon nudge | x/y ±6–10px, 500ms |
| Hamburger | Lines rotate 200ms outSine |
| Button | all 300ms; the CTA circle all 200ms |
Do’s and don’ts
- Keep canvas #181818 with ink #FFFFFF uppercase Inter Tight 500.
- Use #5A26F0 for big shapes: circles, the half-width panel, the ribbon.
- Put an 8px white square before every section label.
- Let display type scale with the viewport (vw or em) and move it with scroll.
- Run work photos edge to edge with square corners and a 20% #181818 scrim.
- Separate list rows with 1px #FFFFFF4D rules.
- Use ink-subtle (white at 28%) for anything but 15px+ dates and indexes; it is only about 2.5:1.
- Add a second accent; the yellow and rose variables are unused.
- Round photos, panels or buttons; only circles are round.
- Use sentence case or weights above 600.
- Add shadows beyond the ribbon's 1px 10px 15px #0000001A.
- Put text links in the nav bar; it holds the logo, the tagline and the hamburger only.
Example prompt
Any page in the AGNCY 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 AGNCY 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/agency.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