flowmanceAgencix Design System
Agencix is a dark, loud, all-caps agency site. Every word on the page, from the hero to the testimonial quotes, is Poppins in uppercase, in a pale icy cyan (#E7FBFC) on an off-black (#0E1010) page. The look is bold and graphic: a three-line hero statement, a single turquoise brush-loop drawn around one word, charcoal cards with 20px corners and bright, saturated product photography.
Four signatures make it recognisable:
- Everything uppercase. body itself sets text-transform: uppercase, so paragraphs, quotes, links and meta all render in capitals. Headings are 600–700 weight; paragraphs stay 400.
- The turquoise accent. #00DEE2 appears only in small doses: a hand-drawn ellipse around REFINE, in the hero, 1px underlines under text links, the primary pill, and the call-to-action band.
- Punctuated hero. DESIGN, / REFINE, / RESOLVE. at 150px weight 700, line height 1.0, with a narrow 260px paragraph and LET'S TALK link far right, social shortcuts TW. IN. DB. IG. bottom-right and a mouse-scroll icon bottom-left.
- Charcoal bands and cards. surface-1 #171919 bands (the split band and Our Showcase) sit between canvas #0E1010 sections, and the same #171919 fills the service and testimonial cards.
Agencix is a dark-only design.
Colors
Surfaces
#0E1010Page background (--black-2), menu overlay, footer
#171919Alternate sections (.gray, .gray-full), service, testimonial cards, inputs (--black-3)
#171919#00DEE2The closing ready to talk band with a background image (text colour about)
Ink
#0E1010Text on primary
#00DEE2Text on secondary
#E7FBFCHeadings, links, names (--azure-2)
#E7FBFC · 70%Paragraphs (p is #e7fbfcb3)
#E7FBFC · 50%Work meta (LOGO, USER INTERFACE, 2020), testimonial roles
#E7FBFC · 40%.gray-text small notes
#E7FBFC · 60%List items, footer-link hover
#DCF2F4 · 60%Footer column titles (--azure at 60%), input placeholders
#FFFFFFBlog titles and coloured tag text
#0E1010Text on inverse-canvas
Action
#00DEE2Main pill (Browse our work, Get in Touch); hover #21F4F8
#21F4F8#171919Dark pill with turquoise text (Speak with Us) on the turquoise band
#00DEE2Link underlines, the hero ellipse, the blockquote's 5px rule
Lines & effects
#2225271px rules above and below overlay menu links
#E7FBFCLight circles behind service icons
#00E20FBlog category pills (Code, Marketing) with white text
#E25300Blog category pills (Code, Marketing) with white text
Typography
Poppins · display-hero
The quick brown fox jumpsDESIGN, REFINE, RESOLVE. 150px · 700 · 1.0
Poppins · headline-lg
The quick brown fox jumpsSection titles (OUR SHOWCASE, WHAT THEY THINK). 55px · 600 · 1.1
Poppins · title-lg
The quick brown fox jumpsWork card titles (COMPANY MOCKUP). 24px · 600 · 1.33
Poppins · body-lg
The quick brown fox jumpsAll paragraphs, quotes. 18px · 400 · 1.2
Poppins · label-link
The quick brown fox jumpsText links (LET'S TALK, MEET THE TEAM, MORE WORK). 16px · 600 · 1.63
Poppins · eyebrow
The quick brown fox jumpsFooter column titles. 15px · 600 · 1.33
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 100px top and bottom on .section (the full-bleed split band has no padding) |
| Breakpoints | 991px, 767px and 479px (max-width), plus min-width steps at 768px and 1440px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 5px | |
xs | 10px | |
sm | 16px | |
md | 20px | |
lg | 30px | |
xl | 35px | |
2xl | 50px | |
3xl | 60px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 30px | |
section | 100px | |
hero-top | 130px | |
hero-bottom | 230px |
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 with y 20px → 0, 300ms outCubic |
| Slow fade-in | opacity 0 → 1, 1000ms outQuart |
| Text roll on links | Label moves y 0 → −101%, copy moves 101% → 0, 500ms outBack |
| Menu row fill | Height 0 → 100%, 500ms ease; 400ms outCubic |
| Menu open | Panels slide from x ±50vw / y ±50vh and x −100% → 0, 500ms (outBack on the main panel) |
| Icon and colour hovers | filter 200ms ease; text colour 200ms ease; border 200ms outSine |
| Button hover | all .2s |
| Link, footer and blog hovers | all .3s (colour or opacity) |
Do’s and don’ts
- Set all text in Poppins uppercase, with paragraphs at weight 400 in ink-muted (#E7FBFC at 70%).
- Alternate sections between canvas #0E1010 and surface-1 #171919, with 100px vertical padding.
- Use button-primary (#00DEE2, #0E1010 text, 30px radius, 52px tall) once per section; everything else is a link-text with a 1px turquoise underline.
- Round cards and images 20px, and inputs fully (100px).
- Keep paragraph measures narrow (260–460px).
- Use #E7FBFC, not pure white, for headings and links.
- Use mixed case. Even quotes and meta are uppercase.
- Fill large areas with #00DEE2 except the closing CTA band.
- Put white text on the green #00E20F tag (about 1.8:1) or the orange #E25300 tag (about 3.8:1) at body size. Keep the tag text 13px 600 uppercase and treat the tags as decoration, with the category also stated in the title or meta.
- Use Gantari or Inter; they are loaded but unused.
- Add shadows, gradients or glass; the system is flat.
- Use letter spacing on headings; only buttons and tags get 1px.
Example prompt
Any page in the Agencix 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 Agencix 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/agencix.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