flowmanceAgenci Design System
Agenci is a dark, rigid, all-caps agency site. Every word on the page, from the 120px hero to the 12px tag, is uppercase Manrope in white on #111314, and every section header sits on a 2px white rule that runs the width of the 1200px container. Colour comes only from the work: a full-bleed gallery of bright product and illustration shots that slides sideways as you scroll.
Four signatures make it recognisable:
- Uppercase everywhere. body { text-transform: uppercase } is set globally, so paragraphs, links, labels and headings are all capitals, in Manrope 500–600 with no tracking (only the button and tags get 1px).
- 2px white rules. The nav sits on a 2px white line; the hero headline sits between two; every section title (FEATURED WORKS, WE BUILD EXPERIENCE) has one below it with 20px of space; testimonials and the footer use them too.
- Sideways work gallery. FEATURED WORKS pins, and a row of square-cornered 4:3 images wider than the screen moves horizontally as you scroll down, running off both edges with about 40px gaps.
- The showreel badge. A 120px circle of * SHOWREEL * text wrapped around a small play triangle, bottom-right of the hero, with abbreviated socials under it (TW. IN. DB. IG.).
Agenci is dark-only.
Colors
Surfaces
#111314Page background (Webflow var --black)
#171919Form fields (--black-3)
#1F1F1FService cards
#222222The smallest raised blocks (--black-4)
#171919#DCF2F4 · 60%Placeholder text in fields
Ink
#0E1010Text on primary
#FFFFFFAll headings, paragraphs, links and rules
#FFFFFFSame as ink: paragraphs are full white (base p { color: #fff })
#FFFFFF · 53%Secondary meta text
#FFFFFF · 45%Footer column titles (.footer-title)
#FFFFFFAction
#FFFFFFThe white button and tag
#FFFFFFLines & effects
#0E1010The full-screen menu overlay (--black-2)
#DCF2F4Inline grey-blue links (.gray-link)
#E7FBFC · 60%List items and footer-link hover
#FFFFFF2px section rules, 2px nav underline, 2px icon circles
Typography
Manrope · display-hero
The quick brown fox jumpsDYNAMIC VISUAL CONCEPT. 120px · 500 · 0.9
Manrope · headline-lg
The quick brown fox jumpsMetric numbers such as 10. 44px · 600 · 1.2
Manrope · title-lg
The quick brown fox jumpsBlog titles (fade to 60% on hover). 28px · 500 · 1.3
Manrope · body
The quick brown fox jumpsParagraphs and the hero lead. 16px · 500 · 1.2
Manrope · label-link
The quick brown fox jumpsRoll links LEARN MORE (.button-link, 15 uses). 16px · 600 · 1.63
Manrope · caption
The quick brown fox jumpsWork categories FONT, USER INTERFACE. 15px · 600 · 1.2
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 100px top and bottom (.section, .section-cta) |
| Section header | a 2-column top-grid (16px gap) with the title on the left and an optional link on the right, 20px bottom padding, then a 2px white rule |
| Breakpoints | Webflow's 991px, 767px and 479px, plus a 1440px+ step |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 16px | |
md | 20px | |
lg | 35px | |
xl | 50px | |
2xl | 80px | |
3xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-x | 72px | |
section | 100px | |
hero-bottom | 120px | |
hero-top | 190px |
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, y 20px → 0, 300ms outCubic or 500ms ease |
| Slow reveal | opacity 0 → 1 and x / y → 0 over 1000ms outQuart |
| Roll link | Label moves up inside a 31px mask; the 2px underline width grows, 500ms ease |
| Scale-in | scale 0 → 1, 600ms outExpo (icon rings, badge) |
| Image hover | A CSS filter change, 200ms ease in and 500ms out |
| Menu open | Overlay display none → flex; one element slides x −100% → 0% → 100% with outBack, 500ms |
| Menu link hover | White block grows from the bottom, 400ms outCubic; border shifts 200ms outSine |
| Button hover | opacity 1 → 0.7, transition: all .2s |
| Work gallery | Horizontal translate scrubbed by vertical scroll while the section is pinned |
Do’s and don’ts
- Set all text uppercase in Manrope, weight 500 for display and body, 600 for titles and links.
- Put a 2px #FFFFFF rule under every section title, 20px below the text.
- Keep the page on canvas #111314 and cards on surface-2 #1F1F1F with a 5px radius.
- Use the white button-primary (6px radius, padding 14px 24px, 15px 800, 1px tracking) for the one main action; use roll links for the rest.
- Keep images square-cornered and full-bleed in the work gallery.
- Keep ink-faint (45% white) for 14px bold footer titles only.
- Use sentence case or lowercase anywhere on the page.
- Add an accent colour; #00DEE2 is declared but unused.
- Add shadows, gradients or rounded image corners.
- Use Inter; it is loaded but unused.
- Grey out paragraphs or soften the rules below full white.
- Leave form text at the inherited #333333 on #171919 fields.
Example prompt
Any page in the Agenci 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 Agenci 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/agenci.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