Cuox Design System

Get DESIGN.md Download View template Works with

Cuox (the demo brand on the live site is written Cūox) is a bright, confident studio site. It feels like a white poster with black type: huge Inter Tight 700 headlines centred in white space, warm natural-light office photos in 25px-rounded frames, small outlined uppercase pills that label most sections, and one heavy black slab for the testimonial. The UI is black, white and grey only.

Four signatures make it recognisable:

Solid-outline-solid hero. Three centred words at 160px weight 700, line height 0.9: Cūox solid black, Digital as an outline (white fill with a 1px black text-shadow on all four sides), Studio solid black. A hand-drawn paper-plane scribble (140px) sits bottom-left and a small mouse outline bottom-centre.
Pill eyebrows. Most sections open with an outlined pill (OUR WORK, FUN FACTS, DIGITAL AGENCY): 2px #E1E1E1 border, 40px radius, 13px weight 700 uppercase, then the headline-lg title right under it. The pill is centred over centred titles and left-aligned in the split CTA row; Who we are has none.
Two-tone leads. Lead paragraphs start in #222222 and switch mid-sentence to the same colour at opacity 0.4: In the realm of Webflow templates, / Cūox takes the lead with designs favored by users.
Staggered project grid. Three columns of rounded project images with the title and an outlined tag pill centred below; the middle column sits higher than the outer two.

Cuox is a light-only design.

Colors

Surfaces

canvas#FFFFFF

Page background (the variable is oddly named --black)

surface-1#FAFAFA

The wipe panel that slides off headings on reveal; placeholder fill behind images (--black-2)

field-placeholder#777777

Form placeholders

inverse-canvas#000000

The testimonial slab and the round UP button

Ink

on-primary#383838

Text on primary

ink#000000

Headlines, nav icons, the logo, metric numbers

ink-strong#222222

The dark half of two-tone leads; the faded half is this colour at opacity 0.4

ink-link#333333

Uppercase line links

ink-muted#4D4D4D · 90%

Body paragraphs and metric labels (the base p colour)

ink-label#000000 · 70%

Text inside the section label pills and project tags

ink-subtle#8F8F8F

Rotated menu numbers, blockquotes, footer links (--grey)

inverse-ink#FFFFFF

Text on inverse-canvas

on-media#FFFFFF

Action

primary#DFDFDF

The only filled button: Send Message on the contact page

accent#3CCF91

Declared as --medium-aquamarine; appears once as a small fill

Lines & effects

line#E1E1E1

2px outlines on pills and tags

line-link#555555

The 2px line that slides under line links on hover

Typography

Inter Tight · display-hero

The quick brown fox jumps

The three-word hero stack. 160px · 700 · 0.9

Inter Tight · headline-lg

The quick brown fox jumps

Section titles: Selected work, Enhance your brand with a stellar website., Latest post. 50px · 700 · 1.1

Inter Tight · title-lg

The quick brown fox jumps

Blog card titles. 28px · 600 · 1.3

Inter Tight · body-xl

The quick brown fox jumps

Two-tone lead paragraphs. 26px · 600 · 1.4

Inter Tight · label-name

The quick brown fox jumps

Testimonial name DEXTER NGUYEN. 16px · 600 · 1.56

Inter Tight · eyebrow

The quick brown fox jumps

Section label pills and project tags (LOGO, USER INTERFACE). 13px · 700 · 1.54

Spacing & shape

Purpose	Value
Container	max 1200px, centred
Breakpoints	991px, 767px and 479px, plus min-width: 768px and min-width: 1440px steps

Spacing scale

Token	Value	Preview
`hair`	4px
`xs`	12px
`sm`	16px
`md`	30px
`lg`	40px
`xl`	50px
`2xl`	80px

Layout spacing

Token	Value	Preview
`nav-pad`	35px
`section`	100px
`hero-top`	160px
`hero-bottom`	200px

Border radius

tag20px

lg25px

button30px

pill40px

full9999px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-1

Motion

Heading wipe	A #FAFAFA panel covering each heading slides away (translate(-100%)), revealing the text on scroll into view
Fade in	opacity 0 → 1, 1000ms outQuart
Text roll (links, menu)	Label y 0% → −100% while a copy comes from 100% → 0%, 300ms ease or 400ms inOutCubic, inside a 24px (links) or 90px (menu) mask
Line wipe	The 2px line grows across, 300–400ms ease / outCubic
Image hover	scale 1 → 1.1, 100ms ease, and back
Parallax	Images drift y ±25px and y ±100px while scrolling in view
Scroll direction	Paired scroll-down / scroll-up triggers move elements y −100% and back
Hamburger	Lines rotate 200–400ms ease into a cross
Hover transitions	all 0.3s on blog titles and links

Do’s and don’ts

Keep the page canvas #FFFFFF with ink #000000 headlines in Inter Tight 700.
Open sections with the outlined pill (2px #E1E1E1, 40px radius, 13px 700 uppercase) and a centred headline-lg title.
Split lead paragraphs into #222222 and #222222 at opacity 0.4.
Frame photos with a 25px radius and keep them in natural colour.
Use the uppercase line link (label, #333333) as the main call to action.
Use one black inverse-canvas slab per page at most, for the testimonial.
Add a brand colour to buttons or text; the UI stays black, white and grey.
Use black or dark borders on pills; outlines are #E1E1E1.
Put ink-subtle #8F8F8F on small text: it is only about 3.2:1 on white. Keep it for 15px+ menu numbers, footer links and 30px blockquotes.
Add drop shadows or blur to cards or the UP button.
Fill the outline word; the hero keeps exactly one outline word between two solid ones.
Animate longer than 500ms except the 1000ms fade, or use bounce easing.

Example prompt

Any page in the Cuox style

Prompt

Build your page in the Cuox style. White #FFFFFF background, Inter Tight. Headlines are black #000000, weight 700: hero 160px / line height 0.9, section titles 50px / 1.1, centred. Above each section title put an outlined pill: 13px weight 700 uppercase, #000000 at 70%, 2px #E1E1E1 border, 40px radius, padding 7px 18px 6px. Leads are 26px weight 600, line height 1.4, starting in #222222 and switching mid-sentence to the same colour at opacity 0.4. Body text is 17px weight 500 in #4D4D4D at 90%. Photos have 25px rounded corners. The main call to action is an uppercase 14px weight 700 #333333 text link whose text rolls up on hover while a 2px #555555 line wipes beneath it. No shadows. Reveal headings with a #FAFAFA panel sliding off to the left.

# Cuox Design System

> Measured from the Cuox template. Drop it into Claude,
> ChatGPT, Gemini, Cursor or v0.

## Overview

Cuox (the demo brand on the live site is written Cūox)
is a bright, confident studio site. It feels like a
white poster with black type: huge Inter Tight 700
headlines centred in white space, warm natural-light
office photos in 25px-rounded frames, small outlined

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background (the va… |
| surface-1    | #FAFAFA     | The wipe panel that sli… |
| field-place… | #777777     | Form placeholders        |
| inverse-can… | #000000     | The testimonial slab an… |
| on-primary   | #383838     | Text on primary          |
| ink          | #000000     | Headlines, nav icons, t… |
| ink-strong   | #222222     | The dark half of two-to… |
| ink-link     | #333333     | Uppercase line links     |
| ink-muted    | #4D4D4D 90% | Body paragraphs and met… |
| ink-label    | #000000 70% | Text inside the section… |
| ink-subtle   | #8F8F8F     | Rotated menu numbers, b… |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| on-media     | #FFFFFF     |                          |
| primary      | #DFDFDF     | The only filled button:… |

## Typography

- display-hero: Inter Tight 160px / 700
- display-menu: Inter Tight 80px / 700
- display-about: Inter Tight 76px / 700
- display-metric: Inter Tight 70px / 700

{
  "$description": "Cuox design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#DFDFDF",
      "$description": "The only filled button: Send Message on the contact page"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#383838",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background (the variable is oddly named --black)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FAFAFA",
      "$description": "The wipe panel that slides off headings on reveal; placeholder fill behind images (--black-2)"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Headlines, nav icons, the logo, metric numbers"
    },
    "ink-strong": {
      "$type": "color",
      "$value": "#222222",
      "$description": "The dark half of two-tone leads; the faded half is this colour at opacity 0.4"
    },
    "ink-link": {
      "$type": "color",
      "$value": "#333333",
      "$description": "Uppercase line links"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#4D4D4DE6",
      "$description": "Body paragraphs and metric labels (the base p colour)"
    },
    "ink-label": {
      "$type": "color",
      "$value": "#000000B3",

/* Cuox theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-headline-lg, rounded-lg, p-lg */

@theme {
  /* Colors */
  --color-primary: #DFDFDF;
  --color-on-primary: #383838;
  --color-canvas: #FFFFFF;
  --color-surface-1: #FAFAFA;
  --color-ink: #000000;
  --color-ink-strong: #222222;
  --color-ink-link: #333333;
  --color-ink-muted: #4D4D4DE6;
  --color-ink-label: #000000B3;
  --color-ink-subtle: #8F8F8F;
  --color-field-placeholder: #777777;
  --color-line: #E1E1E1;
  --color-line-link: #555555;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFFF;
  --color-on-media: #FFFFFF;
  --color-accent: #3CCF91;

  /* Fonts */
  --font-sans: "Inter Tight", sans-serif;
  --font-inter-tight: "Inter Tight", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 160px;
  --text-display-hero--line-height: 0.9;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 700;
  --text-display-menu: 80px;
  --text-display-menu--line-height: 1.08;
  --text-display-menu--letter-spacing: 0px;
  --text-display-menu--font-weight: 700;
  --text-display-about: 76px;
  --text-display-about--line-height: 1.1;
  --text-display-about--letter-spacing: 0px;
  --text-display-about--font-weight: 700;
  --text-display-metric: 70px;
  --text-display-metric--line-height: 0.71;
  --text-display-metric--letter-spacing: 0px;
  --text-display-metric--font-weight: 700;
  --text-headline-lg: 50px;

/* Cuox design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #DFDFDF; /* The only filled button: Send Message on the contact page */
  --color-on-primary: #383838; /* Text on primary */
  --color-canvas: #FFFFFF; /* Page background (the variable is oddly named --black) */
  --color-surface-1: #FAFAFA; /* The wipe panel that slides off headings on reveal; placeholder fill behind images (--black-2) */
  --color-ink: #000000; /* Headlines, nav icons, the logo, metric numbers */
  --color-ink-strong: #222222; /* The dark half of two-tone leads; the faded half is this colour at opacity 0.4 */
  --color-ink-link: #333333; /* Uppercase line links */
  --color-ink-muted: #4D4D4DE6; /* Body paragraphs and metric labels (the base p colour) */
  --color-ink-label: #000000B3; /* Text inside the section label pills and project tags */
  --color-ink-subtle: #8F8F8F; /* Rotated menu numbers, blockquotes, footer links (--grey) */
  --color-field-placeholder: #777777; /* Form placeholders */
  --color-line: #E1E1E1; /* 2px outlines on pills and tags */
  --color-line-link: #555555; /* The 2px line that slides under line links on hover */
  --color-inverse-canvas: #000000; /* The testimonial slab and the round UP button */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */
  --color-on-media: #FFFFFF;
  --color-accent: #3CCF91; /* Declared as --medium-aquamarine; appears once as a small fill */

  /* Fonts */
  --font-inter-tight: "Inter Tight", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 160px;
  --text-display-hero-font: var(--font-inter-tight);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 0.9;
  --text-display-hero-tracking: 0px;
  --text-display-menu: 80px;
  --text-display-menu-font: var(--font-inter-tight);
  --text-display-menu-weight: 700;
  --text-display-menu-line-height: 1.08;
  --text-display-menu-tracking: 0px;
  --text-display-about: 76px;
  --text-display-about-font: var(--font-inter-tight);
  --text-display-about-weight: 700;
  --text-display-about-line-height: 1.1;
  --text-display-about-tracking: 0px;
  --text-display-metric: 70px;
  --text-display-metric-font: var(--font-inter-tight);
  --text-display-metric-weight: 700;
  --text-display-metric-line-height: 0.71;

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

Agency design systems, the same colors first.

Browse all 398

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 Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

Inter Tight · display-hero

Inter Tight · headline-lg

Inter Tight · title-lg

Inter Tight · body-xl

Inter Tight · label-name

Inter Tight · eyebrow

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Cuox style

More design systems like this

Agencē

Creativum

Fold

Goya

Bring any of them to your AI tool