flowmanceCuoxd Design System
Cuoxd (the demo brand on the live site is Cūox) is a dark, confident studio site. It feels like a black poster with white type: huge Inter Tight 700 headlines, plenty of black space, warm editorial office photography in 25px-rounded frames, and small outlined uppercase pills that label most sections. The UI itself is pure black, white and grey.
Four signatures make it recognisable:
- Solid-outline-solid hero. The hero stacks three centred words at 160px weight 700, line height 0.9: Cūox solid white, Digital as a white outline (black fill with a 1px white text-shadow on all four sides), Studio solid white.
- Pill eyebrows. Most sections start with an outlined pill, centred above the title (OUR WORK, FUN FACTS) or left-aligned in the CTA split (DIGITAL AGENCY); the About block has none: 2px #E1E1E1 border, 40px radius, 13px weight 700 uppercase. The headline-lg title follows right under it.
- Two-tone leads. 26px weight 600 leads begin in white and finish in grey: In the realm of Webflow templates, + Cūox takes the lead with designs favored by users.
- Line links. Calls to action are uppercase 15px links over a 1px white-20% line with a 2px white line that grows across it (WORK WITH US). There are 19 of them.
Cuoxd is a dark-only design.
Colors
Surfaces
#000000Page, nav, sections, footer, menu overlay
#242424Testimonial card, raised panels
#FFFFFFThe round UP button bottom right
Ink
#383838Text on primary
#FFFFFFHeadlines, labels, links
#FFFFFF · 70%Paragraphs and metric labels (p { opacity: .7 })
#8F8F8FWebflow --grey: rotated menu numbers (at 60% opacity), footer links, the grey half of two-tone leads
#747474Default link colour in the CSS (a)
#FFFFFF#000000Text on inverse-canvas
Action
#DFDFDFThe filled button (pricing, form submit)
#111111The filled button turns near-black with white text on hover
Lines & effects
#FFFFFF · 20%The 1px base line under every line link
#E1E1E12px outlines on label pills and work tags
#FFFFFF · 30%1px border on the filled button
#FAFAFAWebflow --light-gray: the block that wipes across headings as they reveal
#090909Cart drawer, with #FFFFFF33 dividers
Typography
Inter Tight · display-hero
The quick brown fox jumpsCūox / Digital / Studio. 160px · 700 · 0.9
Inter Tight · headline-xl
The quick brown fox jumpsWho we are (with mix-blend-mode: soft-light in the CSS). 76px · 700 · 1.1
Inter Tight · title-lg
The quick brown fox jumpsBlog titles. 28px · 600 · 1.3
Inter Tight · body
The quick brown fox jumpsParagraphs, list items, metric labels. 17px · 500 · 1.4
Inter Tight · label-lg
The quick brown fox jumpsLine links and the filled button. 15px · 600 · 1.47
Inter Tight · eyebrow
The quick brown fox jumpsMenu numbers, rotated −90°. 15px · 600 · 0.8 · 2px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 100px top and bottom; footer 60px top, 20px bottom |
| Section header | centred label pill, then a centred headline-lg title |
| Breakpoints | 991px, 767px and 479px (Webflow defaults), plus a 1440px+ step |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 5px | |
sm | 15px | |
md | 30px | |
lg | 40px | |
xl | 50px | |
2xl | 80px | |
3xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
nav-pad | 35px | |
gutter | 72px | |
section | 100px | |
hero-top | 160px | |
hero-bottom | 200px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Heading wipe | A #FAFAFA block (.heading-overlay, starts translate(-100%)) sweeps across the heading and away, revealing the text |
| Fade-in | opacity 0 → 1, 1000ms outQuart |
| Rise | y 100% → 0%, 500ms easeIn; exit y −110%, 500ms easeOut |
| Text roll | y 0% → −100%, 300ms ease or 400ms inOutCubic, inside 20–24px masks (links, menu) |
| Line grow | Size, 300ms ease, for the 2px overlay line |
| Image hover | scale 1 → 1.1, 100ms ease, back to 1 on mouse out |
| Icon turn | rotate, 400ms ease (hamburger) |
| Scroll moves | Page-scroll triggers move elements x ±50vw, y ±100px, y ±25px and y −8vh, 500ms steps |
| Nav on scroll | Scroll-up and scroll-down triggers; the nav moves y −100% and back in 300ms ease |
| CSS | all .2s on buttons, all .3s on blog titles |
Do’s and don’ts
- Keep the canvas pure #000000 with white ink #FFFFFF headlines in Inter Tight 700.
- Open most sections with an outlined pill (2px #E1E1E1, 40px radius, 13px 700 uppercase), then a 50px title.
- Write leads in two tones: white first, #8F8F8F second, 26px weight 600.
- Use the uppercase line link with the growing 2px white line as the main call to action.
- Frame photos with a 25px radius and keep them warm and natural.
- Use the outline trick (black fill, 1px white text-shadow) only for one hero word and the menu.
- Add a brand colour to buttons, links or text; the one-off content colours stay in images.
- Add shadows, glows or blur.
- Put body copy in full white; paragraphs are white at 70%.
- Use the filled #DFDFDF button for every action; it is for submit and pricing only.
- Track display type wider or use uppercase on headlines.
- Box the form fields; inputs are bare white text on black.
Example prompt
Any page in the Cuoxd 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 Cuoxd 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/cuoxd.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