ClickUp
MIT
Modern task-management design system with vibrant gradient accents, pill-shaped buttons, and clean typography—built for productivity platforms and collaborative tools
Published by Layout32 importsminimal tierLayout StudioImport this kit into a Studio project and start editing.
CLI installRun it in any project. No account needed.
npx @layoutdesign/context install clickupUI themeReskin shadcn or Layout UI components to match ClickUp.
npx shadcn add https://layout.design/r/clickup/theme.json# layout.md — ClickUp Design System
---
## 0. Quick Reference
**Stack:** Next.js · CSS custom properties (304 vars extracted, high confidence) · Plus Jakarta Sans + Inter · Pill-shaped buttons (border-radius: 54px computed)
**How to apply:** Use as `var(--token-name)` in CSS, `style={{ prop: 'var(--token-name)' }}` in JSX, or `bg-[var(--token-name)]` in Tailwind.
```css
/* ── Core Tokens ── */
/* Colours */
--Core-Text-Main: #202020; /* Primary body text */
--Core-Text-Secondary: #646464; /* Secondary/supporting text */
--Core-Text-Tertiary: #838383; /* Muted/helper text */
--Core-Text-Disabled: #bbb; /* Disabled state text */
--Core-Background-Main: #fff; /* Page background */
--Core-Background-Box: #f8f9fa; /* Card/box surface */
--Core-Border-Default: #e8e8e8; /* Dividers, input borders */
--Core-Accents-Purple: #6647f0; /* Hover accent, links */
--color-brand-clickup: var(--color-purple-1); /* = rgb(123,104,238) */
--color-button-primary-background: linear-gradient(263deg,rgba(var(--color-v3-pink)) -35%,rgba(var(--color-v3-purple)) 41%,rgba(18,208,250) 135%);
--color-button-primary-background-hover: linear-gradient(261deg,#831778 -65%,#7612FA -22%,#12D0FA 135%);
/* Typography */
--font-default: var(--font-plus-jakarta-sans), var(--font-fallback); /* Headings */
--font-inter: "Inter", var(--font-fallback); /* Body/UI */
/* Spacing */
--spacing-nav-height: 60px;
--size-v3-container: 1160px;
--spacing-desktop-padding-gutter: 40px;
--spacing-mobile-padding-gutter: 20px;
--spacing-stack-spacing-desktop: 150px; /* between major sections */
--spacing-stack-spacing-mobile: 60px;
/* Radius — pill-first brand */
--border-radius-sm: 15px;
--border-radius-md: 20px;
--border-radius-lg: 25px;
--border-radius-full: 100%; /* pill buttons */
/* Motion */
--transition-short: 0.25s var(--easing-natural);
--easing-natural: cubic-bezier(0.5, 0, 0.5, 1);
```
```tsx
// Primary CTA Button — correct token usage
<button
className="cu-btn-primary"
style={{
background: 'var(--color-button-primary-background)',
color: 'rgb(var(--color-v3-white))',
borderRadius: '100px',
padding: '12px 28px',
fontFamily: 'var(--font-inter)',
fontSize: '14px',
fontWeight: 600,
transition: 'var(--transition-short)',
}}
onMouseEnter={e => e.currentTarget.style.background = 'var(--color-button-primary-background-hover)'}
onMouseLeave={e => e.currentTarget.style.background = 'var(--color-button-primary-background)'}
>
Get Started Free
</button>
```
**NEVER rules:**
- **NEVER** use a flat solid purple as the primary CTA — it must use `--color-button-primary-background` (gradient)
- **NEVER** use `border-radius` < 15px on interactive controls — ClickUp is a pill-radius brand
- **NEVER** use Inter for headings — headings use `--font-plus-jakarta-sans`
- **NEVER** hardcode hex colours — always reference the original CSS custom properties
- **NEVER** use spacing values not from the `--spacing-*` or `--size-*` token scale
- **NEVER** generate dynamic Tailwind class names (e.g. `bg-[${variable}]` string interpolation)
- **NEVER** omit hover/focus/active states on buttons and interactive cards
**Full design system → see layout.md**
---
<!-- Quick Reference truncated to fit the 75-line cap. See later sections for the full design system. -->
## 1. Design Direction & Philosophy
### Character & Mood
ClickUp's visual language is **bold, gradient-forward, and kinetic**. The brand communicates ambition and productivity through vivid purple-to-cyan-to-pink gradients, heavy typographic weight (font-weight 650–700 on headings), and generous whitespace punctuated by card grids. The design is optimistic and assertive — it competes directly with enterprise software by feeling more like a consumer product.
### Aesthetic Pillars
- **Gradient as identity.** The primary CTA, hero headlines, and decorative elements all use the brand gradient (`--color-button-primary-background`, `--color-gradient-primary`). Static flat purple is a secondary fallback, never the hero.
- **Pill-shaped geometry.** Every interactive element — buttons, inputs, chips, feature pills — uses large border-radius (15px–100%). Sharp corners are reserved for image media only (`--border-radius-v3-media: 14px`).
- **Typographic gradient.** H1 and H2 headings receive a `background-image` gradient clipped to text (`linear-gradient(98deg, #202020 43%, #8f8f8f 92%)`), giving body copy a dimensional fade.
- **Monospace accents.** `Sometype Mono` and `Shantell Sans` are used for chip labels and handwritten accents respectively — not for body copy.
- **Motion is purposeful.** Transitions are `0.2s`–`0.25s ease` — fast enough to feel snappy, never decorative for its own sake.
### What This Design Explicitly Rejects
- Flat, low-contrast enterprise grey palettes
- Rounded corners in the 4–8px range (too timid for the brand)
- Inter or system-ui as a heading font
- Static CTAs without gradient backgrounds
- Heavy drop shadows (ClickUp uses diffuse large-radius shadows, not tight card shadows)
- Warm colour temperatures for UI surfaces (the brand is cool purple/blue/cyan)
---
## 2. Colour System
### Tier 1: Primitives (RGB channels — compose with `rgba()`)
```css
/* ── Purple family ── */
--color-v3-purple: 118, 18, 250; /* Core brand purple (vivid) */
--color-v3-purple-0: 73, 1, 170;
--color-v3-purple-1: 85, 0, 199;
--color-v3-purple-2: 106, 6, 239;
--color-v3-purple-3: 128, 32, 255;
--color-v3-purple-4: 137, 47, 255;
--color-purple-1: 123, 104, 238; /* Legacy brand purple (softer) */
--color-purple-2: 242, 240, 253; /* Purple tint surface */
--color-purple-3: 248, 247, 254; /* Purple lightest surface */
--color-purple-neon: 137, 32, 254;
/* ── Pink family ── */
--color-v3-pink: 250, 18, 227; /* Brand neon pink */
--color-pink-1: 253, 113, 175; /* Softer pink */
--color-pink-2: 255, 241, 247;
--color-pink-3: 255, 248, 251;
--color-pink-neon: 255, 11, 229;
/* ── Blue/Cyan family ── */
--color-v3-blue: 31, 124, 255;
--color-v3-light-blue: 64, 221, 255;
--color-blue-1: 73, 204, 249; /* Cyan accent */
--color-blue-2: 229, 248, 254;
--color-blue-3: 237, 250, 254;
--color-blue-neon: 69, 196, 249;
/* ── Green family ── */
--color-v3-green: 33, 200, 40;
--color-green-1: 0, 184, 132; /* Teal/mint green */
--color-green-2: 228, 248, 242;
--color-mint-1: 104, 238, 190;
/* ── Orange / Yellow ── */
--color-v3-orange: 255, 98, 33;
--color-v3-yellow: 255, 215, 0;
--color-yellow-1: 255, 200, 0;
--color-yellow-2: 255, 250, 230;
/* ── Violet ── */
--color-violet-1: 155, 81, 224;
--color-violet-2: 241, 230, 251;
/* ── Neutrals ── */
--color-white: 255, 255, 255;
--color-v3-white: 255, 255, 255;
--color-v3-white-0: 248, 248, 252;
--color-v3-white-1: 241, 241, 249;
--color-v3-white-2: 233, 233, 246;
--color-v3-white-3: 242, 232, 255;
--color-v3-white-4: 234, 218, 253;
--color-grey: 51, 51, 51;
--color-grey-0: 41, 45, 52; /* Primary text colour (dark) */
--color-grey-1: 124, 130, 141;
--color-grey-2: 185, 190, 199;
--color-grey-3: 233, 235, 240;
--color-grey-4: 250, 251, 252;
--color-v3-grey: 36, 34, 62; /* Dark navy-grey */
--color-v3-grey-0: 81, 75, 129;
--color-v3-grey-1: 127, 118, 179;
--color-v3-grey-2: 182, 174, 224;
--color-v3-grey-3: 189, 189, 220;
--color-v3-grey-4: 206, 206, 234;
--color-v3-grey-5: 241, 241, 249; /* Tertiary button bg */
--color-v3-grey-6: 248, 242, 255;
--color-v3-dark-blue: 44, 42, 65;
--color-v3-black: 0, 0, 0;
--color-v3-black-0: 7, 12, 28;
--color-v3-black-1: 10, 17, 40;
--color-v3-black-2: 13, 21, 48;
--color-v3-black-3: 15, 25, 61;
--color-v3-black-4: 21, 34, 79;
--color-v3-black-5: 44, 64, 133;
/* ── Status ── */
--color-success-1: 0, 136, 68;
--color-success-2: 235, 245, 240;
--color-warning-1: 248, 174, 0;
--color-warning-2: 254, 249, 235;
--color-error-1: 211, 61, 68;
--color-error-2: 252, 239, 240;
--color-error-3: 224, 79, 68;
--color-red-1: 253, 113, 113;
```
### Tier 2: Semantic Aliases (resolved hex values)
```css
/* ── Text ── */
--Core-Text-Main: #202020; /* Primary headings and body */
--Core-Text-Secondary: #646464; /* Supporting text, captions */
--Core-Text-Tertiary: #838383; /* Muted, placeholder text */
--Core-Text-Disabled: #bbb; /* Disabled state text */
/* ── Surfaces ── */
--Core-Background-Main: #fff; /* Page-level background */
--Core-Background-Box: #f8f9fa; /* Card and box surfaces */
--Core-Background-Card: #f8f9fa; /* Card surface (alias) */
--Core-Utilities-Gray: #f7f7f7; /* Subtle alt surface */
--bg-main: var(--color-white);
--bg-secondary: var(--color-white);
/* ── Borders ── */
--Core-Border-Default: #e8e8e8; /* Default dividers */
--BottomNavigation-Subsection-Border: #e8e8e8;
/* ── Brand accent ── */
--color-brand-clickup: var(--color-purple-1); /* rgb(123,104,238) */
--Core-Accents-Purple: #6647f0; /* Hover/active accent purple */
--Core-Accents-Blue: #0091ff; /* Blue accent */
--Core-Accents-Pink: #ff02f0; /* Neon pink accent */
--Core-Accents-Orange: #fc6d2d; /* Orange accent */
/* ── Accent badge backgrounds ── */
--Core-Accents-Purple-Badge: #efedfd;
--Core-Accents-Blue-Badge: #edf6fd;
--Core-Accents-Pink-Badge: #feecfc;
--Core-Accents-Orange-Badge: #fdede7;
/* ── Status (resolved) ── */
--color-success: var(--color-success-1); /* rgb(0,136,68) */
--color-warning: var(--color-warning-1); /* rgb(248,174,0) */
--color-error: var(--color-error-1); /* rgb(211,61,68) */
--Core-Utilities-Green: #078d3b;
--Core-Utilities-Green-Badge: #e2f8ec;
--Core-Utilities-Red: #f0382d;
--Core-Utilities-Red-Badge: #fbdddd;
--Core-Utilities-Deep-Blue: #4a2fff;
--Core-Utilities-Deep-Blue-Badge: #e3e5fb;
--Core-Utilities-Black: #000;
--Core-Utilities-White: #fff;
```
### Tier 3: Component Tokens (button-specific)
```css
/* ── Primary button ── */
--color-button-primary-background: linear-gradient(263deg, rgba(var(--color-v3-pink)) -35%, rgba(var(--color-v3-purple)) 41%, rgba(18,208,250) 135%);
--color-button-primary-background-hover: linear-gradient(261deg, #831778 -65%, #7612FA -22%, #12D0FA 135%);
--color-button-primary-text: rgb(var(--color-v3-white)); /* white */
--Core-Button-Primary: #202020; /* Dark-mode / alternate primary */
/* ── Secondary button ── */
--color-button-secondary-background: rgb(248, 243, 255);
--color-button-secondary-background-hover: rgb(239, 228, 255);
--color-button-secondary-text: rgb(var(--color-v3-purple));
--Core-Button-Secondary: #f0f0f0;
--Core-Button-Secondary-Hover: #dedede;
/* ── Tertiary button ── */
--color-button-tertiary-background: var(--color-v3-grey-5); /* rgb(241,241,249) */
--color-button-tertiary-background-hover: rgb(230, 230, 249);
--color-button-tertiary-text: rgb(81, 75, 129);
/* ── Other / ghost button ── */
--color-button-other-background: rgba(0, 0, 0, 0.15);
--color-button-other-text: var(--color-v3-white);
```
### Accent / Brand Subgroup (decorative, illustration use)
```css
/* Use for tile backgrounds, illustration fills, SVG accents — NEVER as UI surface tokens */
--Core-Accents-Pink: #ff02f0; /* Neon pink — decorative */
--Core-Utilities-Deep-Blue: #4a2fff; /* Deep electric blue — decorative */
--Core-Utilities-Red: #f0382d; /* Vivid red — error/decorative */
/* brand-mark fills from SVG (reconstructed: high confidence from SVG census) */
/* brand-mark-1: rgb(30, 215, 96) — green checkmark motif */
/* brand-mark-2: rgb(140, 21, 21) — dark red icon fill */
/* brand-mark-3: rgb(127, 24, 127) — dark magenta icon fill */
/* brand-mark-4: rgb(255, 153, 0) — amber/orange icon fill */
```
### Gradients
```css
/* ── Brand gradient family ── */
--color-gradient-primary: linear-gradient(83deg, rgba(var(--color-v3-light-blue)) -5%, rgba(var(--color-v3-purple)) 51%, rgba(var(--color-v3-pink)) 125%);
--color-gradient-purple-1: linear-gradient(29deg, rgba(var(--color-v3-purple)) 26%, rgba(var(--color-v3-pink)) 161%);
--color-gradient-purple-2: linear-gradient(133deg, rgba(var(--color-v3-purple)) 16%, rgba(var(--color-v3-pink)) 136%);
--color-gradient-blue-1: linear-gradient(21deg, rgba(var(--color-v3-blue)) 33%, rgba(var(--color-v3-light-blue)) 129%);
--color-gradient-blue-2: linear-gradient(147deg, rgba(var(--color-v3-blue)) 14%, rgba(var(--color-v3-light-blue)) 103%);
--color-gradient-blue-purple-1: linear-gradient(159deg, rgba(var(--color-v3-purple)) 7%, rgba(var(--color-v3-light-blue)) 96%);
--color-gradient-blue-purple-2: linear-gradient(331deg, rgba(var(--color-v3-purple)) -6%, rgba(var(--color-v3-light-blue)) 107%);
--color-gradient-orange-pink-1: linear-gradient(201deg, rgba(var(--color-v3-pink)) -34%, rgba(var(--color-v3-orange)) 81%);
--color-gradient-orange-pink-2: linear-gradient(323deg, rgba(var(--color-v3-pink)) -45%, rgba(var(--color-v3-orange)) 106%);
--color-gradient-dark-purple-1: linear-gradient(340deg, rgba(var(--color-v3-pink)) -75%, rgba(16 31 82) 94%);
--color-gradient-dark-purple-2: linear-gradient(136deg, rgba(var(--color-v3-pink)) -76%, rgba(16 31 82) 85%);
--color-gradient-white-1: linear-gradient(164deg, rgba(var(--color-v3-white-0)) 4%, rgba(var(--color-v3-white)) 89%);
--color-gradient-purple-to-blue: linear-gradient(90deg, #6647F0 22.6%, #0091FF 79.33%);
--color-gradient-cyan-accent-lightest-1: linear-gradient(45deg, #45C4F9 -0.01%, #7D09FF 50.33%, #FF0BE5);
/* Heading text gradient (reconstructed: high confidence from computed h1/h2 backgroundImage) */
--gradient-h1-bg: linear-gradient(98deg, rgb(32,32,32) 43.06%, rgb(143,143,143) 91.81%);
--gradient-h2-bg: linear-gradient(97deg, rgb(32,32,32) 43.17%, rgb(143,143,143) 110.86%);
```
### Shadow Primitives
```css
--color-shadow: rgba(16, 30, 54, 0.1);
--color-shadow-1: rgba(16, 30, 54, 0.06);
--color-purple-shadow-1: rgba(var(--color-purple-1), 0.1);
--color-purple-shadow-2: rgba(var(--color-purple-1), 0.2);
--color-purple-shadow-4: rgba(var(--color-purple-1), 0.4);
--color-purple-shadow-5: rgba(var(--color-purple-1), 0.5);
--color-blue-shadow-1: rgba(var(--color-blue-1), 0.1);
--color-pink-shadow-1: rgba(var(--color-pink-1), 0.1);
--color-green-shadow-1: rgba(var(--color-green-1), 0.1);
--color-yellow-shadow-1: rgba(var(--color-yellow-1), 0.1);
--color-violet-shadow-1: rgba(var(--color-violet-1), 0.1);
```
---
## 3. Typography System
### Font Stack
```css
--font-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
--font-plus-jakarta-sans: "Plus Jakarta Sans"; /* Headings — variable font 200-800 */
--font-inter: "Inter", var(--font-fallback); /* Body, UI, buttons — variable 100-900 */
--font-default: var(--font-plus-jakarta-sans), var(--font-fallback);
/* Specialist fonts */
/* Sometype Mono — chip labels, monospace accents (weight 400-700) */
/* Shantell Sans — handwritten decorative text (weight 300-800) */
```
> **Rule:** Plus Jakarta Sans for all h1–h4. Inter for body, buttons, form labels, nav items. NEVER swap these.
### Composite Typography Tokens
| Role | font-family | font-size | font-weight | line-height | letter-spacing |
|---|---|---|---|---|---|
| **h1 / Hero** | Plus Jakarta Sans | 38–52px (computed 38px; `--size-hero-heading` = 48px) | 650–700 | 44px (at 38px) / 60px (at 48px) | -1.6px |
| **h2 / Section** | Plus Jakarta Sans | 48px (`--size-content-xl`) | 650 | 60px | -1.68px |
| **h3 / Card heading** | Plus Jakarta Sans | 26px (`--clickup-font-size-xl`) | 650 | 32.5px | -0.91px |
| **h4 / Label heading** | Inter | 16px | 600 | 20px | -0.15px |
| **Body default** | Inter | 14px (`--size-content-default`) | 400 | 20px | -0.15px |
| **Body medium** | Inter / Plus Jakarta Sans | 16px (`--clickup-font-size-md`) | 500 | 24px | normal |
| **Body large** | Plus Jakarta Sans | 18px (`--clickup-font-size-lg`) | 400 | 24px | normal |
| **Chip/label** | Sometype Mono | 14px | 500 | 18px | normal (uppercase) |
| **Caption/muted** | Inter | 12–14px | 400 | 20px | normal |
| **Button** | Inter | 14px | 600 | 20px | -0.15px |
| **Nav item** | Plus Jakarta Sans | 16px | 400 | 24px | normal |
```css
/* Font-size scale tokens (extracted, high confidence) */
--clickup-font-size-xs: 8px;
--clickup-font-size-sm: 14px; /* body default */
--clickup-font-size-md: 16px; /* body medium, labels, nav */
--clickup-font-size-lg: 18px; /* large body */
--clickup-font-size-xl: 26px; /* h3/card headings */
--clickup-font-size-2xl: 48px; /* h2/section headings */
--clickup-font-size-3xl: 52px; /* h1/hero max */
/* Font-weight scale */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 650; /* NOTE: 650 — not a standard CSS value; requires variable font */
--font-weight-bold: 700;
/* Line-height scale */
--line-height-tight: 20px; /* body/UI */
--line-height-normal: 21px; /* nav, inline */
--line-height-loose: 24px; /* large body */
```
**Heading gradient treatment (apply to h1/h2):**
```css
h1, h2 {
background-image: var(--gradient-h1-bg);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
```
---
## 4. Spacing & Layout
### Base Unit & Scale
ClickUp's spacing system uses two parallel scales: a fine-grained `--spacing-N` scale (10px increments) and a `--size-N` rem scale. The effective base unit is **10px**.
```css
/* ── Section / macro spacing ── */
--spacing-stack-spacing-desktop: 150px; /* Between major page sections */
--spacing-stack-spacing-mobile: 60px;
--spacing-section-title-block-end: 50px; /* Gap below section heading */
--spacing-section-title-block-end-mobile: 40px;
--spacing-block-between-containers: var(--spacing-5); /* 50px between content blocks */
--spacing-block-container: var(--spacing-10); /* 100px inner container padding */
--spacing-inline-container: var(--spacing-13); /* 130px inline padding */
--spacing-desktop-padding-gutter: 40px;
--spacing-mobile-padding-gutter: 20px;
/* ── Numeric scale (10px increments) ── */
--spacing-1: 10px;
--spacing-2: 20px;
--spacing-3: 30px;
--spacing-4: 40px;
--spacing-5: 50px;
--spacing-6: 60px;
--spacing-7: 70px;
--spacing-8: 80px;
--spacing-9: 90px;
--spacing-10: 100px;
--spacing-11: 110px;
--spacing-12: 120px;
--spacing-13: 130px;
--spacing-14: 140px;
--spacing-15: 150px;
/* ── Named component spacing ── */
--spacing-spacing-5: 5px;
--spacing-spacing-10: 10px;
--spacing-spacing-20: 20px;
--spacing-spacing-30: 30px;
--spacing-spacing-40: 40px;
--spacing-spacing-50: 50px;
--spacing-spacing-75: 75px;
/* ── Navigation ── */
--spacing-nav-height: 60px;
--spacing-brain-nav-height: 100px;
/* ── Curated shorthand scale ── */
--clickup-space-xs: 2px;
--clickup-space-sm: 9px;
--clickup-space-md: 11px;
--clickup-space-lg: 12px;
--clickup-space-xl: 75px;
--clickup-space-2xl: 80px;
--clickup-space-3xl: 120px;
```
### Container Widths
```css
--size-v3-container: 1160px; /* Standard content container */
--size-v3-homepage-container: 1160px; /* Homepage sections */
--size-nav-container: 1120px; /* Navigation container */
--size-4-dot-0-container: 1120px; /* v4 pages */
--size-container-current: 1160px; /* Active container */
```
### Border Radius Scale
**ClickUp is a pill-radius brand.** All interactive elements use ≥15px radius.
```css
--border-radius-xxs: 4px; /* Micro elements, cookie banners only */
--border-radius-xs: 9px; /* Small badges, dropdown items */
--border-radius-sm: 15px; /* Default pill-start — most UI controls */
--border-radius-md: 20px; /* Cards, panels */
--border-radius-lg: 25px; /* Large cards, feature tiles */
--border-radius-xl: 35px; /* Hero pills, large chips */
--border-radius-xxl: 60px; /* Extra-large containers */
--border-radius-full: 100%; /* Primary buttons, avatar circles */
--border-radius-v3-media: 14px; /* Media/image containers */
/* Mined additional values: */
--radius-radius-12: 12px; /* Feature cards */
--radius-radius-14: 14px; /* Media blocks (alias of v3-media) */
--radius-radius-18: 18px; /* Mid-size cards */
```
> **Computed confirmation:** Primary button `border-radius: 54px` (pill). Input `border-radius: 50px` (pill). Feature cards `border-radius: 24px`.
### Grid & Breakpoints
```css
/* Breakpoints (use min-width mobile-first) */
/* Key breakpoints: 768px (tablet), 1160px (desktop content), 1440px (wide) */
/* Full list: 300, 395, 400, 425, 426, 500, 550, 600, 610, 640, 650, 670,
700, 740, 767, 768, 820, 896, 900, 968, 1000, 1100, 1160, 1200, 1400, 1440 */
/* Flex/grid defaults from digest */
/* Buttons: display:inline-flex, flex-direction:row, align-items:center */
/* Cards: display:grid, gap:1px (mosaic/masonry grid pattern) */
/* Nav: display:block */
```
---
## 5. Page Structure & Layout Patterns
### 5.1 Section Map
| # | Section | Layout Type | Key Elements | Notes |
|---|---|---|---|---|
| 1 | **Navigation** | `display:block` → inner `flex row` | Logo, nav links (dropdown), CTAs (Sign In + Get Started) | Fixed, `height: 60px`, container `1120px` |
| 2 | **Hero** | Flex column, centered | H1 (gradient text), subheading, dual CTA buttons, product screenshot/video | (inferred) H1 at 38–52px, pill CTAs, gradient background overlay |
| 3 | **Social Proof Bar** | Flex row, scrolling marquee | Customer logos, animated horizontal scroll | (inferred) `_moveLogos` keyframe animation |
| 4 | **Feature Grid / Cards** | `display:grid`, gap:1px | 3–4 col feature cards, icon + h3 + body copy | `border-radius-lg: 24px` on cards; mosaic layout from digest |
| 5 | **Product Tabs** | Flex row tabs + content panel | Tabs with `gap:12px`, active tab `border: 1px solid #000`, content area with media | (inferred) Tab computed: `padding: 14px 0`, `justify-content: center` |
| 6 | **AI / Brain Section** | 2-col (text left, media right) or full-width | Feature cards with `radius-lg: 24px`, audio gradient pill `radius-full: 39px` | Audio bar animation `Lp4BrainSection_audioBar` |
| 7 | **Comparison / Competitor** | Table or grid | Compare tokens: green `rgb(0,184,132)`, yellow `rgb(255,200,0)`, red `rgb(253,113,113)` | Uses `--color-compare-*` tokens |
| 8 | **Testimonials / Social Proof** | Slider / card carousel | Avatar, quote, company name | (inferred) `_slider_1fno9` animation, `_slideContainer_1s4xh` |
| 9 | **Pricing / CTA Banner** | Centered, full-width | Section title, pricing cards or single CTA | (inferred) `--spacing-stack-spacing-desktop: 150px` between sections |
| 10 | **Footer** | Multi-column grid | Nav links, social icons, legal text | (inferred) `BottomNavigation-Subsection-Border: #e8e8e8` |
### 5.2 Layout Patterns
**Navigation:**
- Container: max-width `1120px`, centered, padding `0 40px` desktop / `0 20px` mobile
- Height: `60px` fixed
- Inner layout: `display:flex`, `justify-content:space-between`, `align-items:center`
- Nav links: dropdown buttons with `border-radius:8px`, padding `4px 10px`
**Feature Card Grid:**
- `display:grid`, `gap:1px` (mosaic tile pattern from digest)
- Cards: `border-radius:24px`, `background:#f8f9fa` or white
- Hover: `background-image: linear-gradient(white, rgb(241,241,249))` + layered blue-tinted box-shadow
- 3-column desktop, 1-column mobile (inferred)
**Section Wrapper:**
- Max-width: `1160px`, centered with `margin: 0 auto`
- Vertical padding: `--spacing-stack-spacing-desktop: 150px` top and bottom
- Section title spacing: `margin-bottom: 50px` desktop
**Hero CTAs:**
- Primary: gradient pill button (border-radius: 100%) + `--color-button-primary-background`
- Secondary: white/light pill, `border-radius: --border-radius-full`
- Gap between buttons: ~12px (inferred from `--spacing-spacing-10`)
### 5.3 Visual Hierarchy
1. **H1 hero** at 38–52px, `font-weight:700`, gradient text clip — most prominent element
2. **Primary CTA** — gradient button is the only high-chroma element in most sections; eye naturally drawn to it
3. **Section H2** at 48px, center-aligned, gradient text
4. **Feature card grid** — large tiles with icon + h3 + body
5. **Body copy** at 14–16px Inter, `color: #202020` or `#646464` secondary
**CTA colour from button census:** Primary CTA always uses `--color-button-primary-background` (pink→purple→cyan gradient). Secondary CTA uses `#f8f3ff` (purple tint). Dark-mode sections use `--color-button-other-background: rgba(0,0,0,0.15)`.
### 5.4 Content Patterns
**Icon + Heading + Body (Feature tile):**
```
[Icon/Illustration]
[H3 — 26px, weight 650]
[Body — 14–16px, weight 400–500]
[Optional: "Learn more →" link]
```
**Section intro pattern:**
```
[Eyebrow label — Sometype Mono, 14px, uppercase, muted]
[H2 — 48px, centered, gradient text clip]
[Subheading — 16–18px Plus Jakarta Sans, #646464, centered, max-width ~680px]
```
**Comparison chip pattern:**
- Chip uses `Sometype Mono`, `14px`, `font-weight:500`, `text-transform:uppercase`, color `#838383`
---
## 6. Component Patterns
### 6.1 Primary Button
**Anatomy:** Container pill → gradient background → white text label → optional icon
| State | Background | Text | Border | Transform |
|---|---|---|---|---|
| Default | `--color-button-primary-background` (gradient) | `rgb(255,255,255)` | none | — |
| Hover | `--color-button-primary-background-hover` | `rgb(255,255,255)` | none | — |
| Active/Focus | same as hover + `outline-offset: 2px` | white | transparent | — |
| Disabled | `rgba(0,0,0,0.15)` + `opacity:0.5` | `#bbb` | none | — |
| Loading | gradient (dimmed) + spinner | hidden | none | — |
```tsx
// components/PrimaryButton.tsx
import React, { useState } from 'react';
interface PrimaryButtonProps {
children: React.ReactNode;
disabled?: boolean;
loading?: boolean;
onClick?: () => void;
}
export function PrimaryButton({ children, disabled, loading, onClick }: PrimaryButtonProps) {
const [hovered, setHovered] = useState(false);
const baseStyle: React.CSSProperties = {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
gap: '8px',
padding: '12px 28px',
borderRadius: 'var(--border-radius-full)', // 100% — pill shape
fontFamily: 'var(--font-inter)',
fontSize: 'var(--clickup-font-size-sm)', // 14px
fontWeight: 600,
lineHeight: '20px',
letterSpacing: '-0.15px',
color: 'rgb(var(--color-v3-white))',
background: hovered
? 'var(--color-button-primary-background-hover)'
: 'var(--color-button-primary-background)',
border: '1px solid transparent',
cursor: disabled || loading ? 'not-allowed' : 'pointer',
opacity: disabled ? 0.5 : 1,
transition: 'var(--transition-short)', // 0.25s cubic-bezier(0.5,0,0.5,1)
textDecoration: 'none',
whiteSpace: 'nowrap',
};
return (
<button
style={baseStyle}
disabled={disabled || loading}
onClick={onClick}
onMouseEnter={() => !disabled && setHovered(true)}
onMouseLeave={() => setHovered(false)}
aria-busy={loading}
>
{loading ? (
<>
<span style={{ opacity: 0 }}>{children}</span>
<span style={{ position: 'absolute' }} aria-label="Loading">···</span>
</>
) : children}
</button>
);
}
```
---
### 6.2 Secondary Button
**Anatomy:** Pill container → purple tint background → purple text
| State | Background | Text |
|---|---|---|
| Default | `rgb(248,243,255)` = `--color-button-secondary-background` | `rgb(var(--color-v3-purple))` |
| Hover | `rgb(239,228,255)` = `--color-button-secondary-background-hover` | same |
| Active | same as hover | same |
| Disabled | `#f0f0f0` | `#bbb` |
```css
.btn-secondary {
background: rgb(var(--color-button-secondary-background));
color: rgb(var(--color-v3-purple));
border-radius: var(--border-radius-full);
padding: 12px 28px;
font-family: var(--font-inter);
font-size: var(--clickup-font-size-sm);
font-weight: 600;
transition: var(--transition-short);
}
.btn-secondary:hover {
background: rgb(var(--color-button-secondary-background-hover));
}
```
---
### 6.3 Card
**Anatomy:** Grid container (gap:1px) → card inner → [icon] → h3 → body → [CTA link]
| State | Background | Box Shadow | Transform |
|---|---|---|---|
| Default | `#f8f9fa` | none | — |
| Hover | `linear-gradient(#fff, rgb(241,241,249))` | `rgba(18,43,165,0.06) 0px 6px 6px -3px, rgba(18,43,165,0.06) 0px 12px 12px -6px, ...` | `translateY(-1px)` |
| Minimal hover | none | none | — |
| Focus (link card) | same as hover | same | — |
| Disabled | `opacity: 0.5` | none | — |
```tsx
// components/FeatureCard.tsx
interface FeatureCardProps {
icon?: React.ReactNode;
title: string;
body: string;
href?: string;
}
export function FeatureCard({ icon, title, body, href }: FeatureCardProps) {
const [hovered, setHovered] = useState(false);
const wrapperStyle: React.CSSProperties = {
display: 'grid',
borderRadius: 'var(--radius-radius-12)', // 24px feature cards
padding: '24px',
backgroundColor: 'var(--Core-Background-Card)', // #f8f9fa
backgroundImage: hovered
? 'linear-gradient(rgb(255,255,255), rgb(241,241,249))'
: 'none',
boxShadow: hovered
? 'rgba(18,43,165,0.06) 0px 6px 6px -3px, rgba(18,43,165,0.06) 0px 12px 12px -6px, rgba(18,43,165,0.06) 0px 24px 24px -12px'
: 'none',
transition: 'var(--transition-short)',
cursor: href ? 'pointer' : 'default',
};
return (
<div
style={wrapperStyle}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
>
{icon && <div style={{ marginBottom: '16px' }}>{icon}</div>}
<h3 style={{
fontFamily: 'var(--font-plus-jakarta-sans)',
fontSize: 'var(--clickup-font-size-xl)', // 26px
fontWeight: 'var(--font-weight-semibold)', // 650
lineHeight: '32.5px',
letterSpacing: '-0.91px',
color: 'var(--Core-Text-Main)', // #202020
marginBottom: '8px',
}}>
{title}
</h3>
<p style={{
fontFamily: 'var(--font-inter)',
fontSize: 'var(--clickup-font-size-sm)', // 14px
fontWeight: 'var(--font-weight-regular)',
lineHeight: 'var(--line-height-tight)', // 20px
color: 'var(--Core-Text-Secondary)', // #646464
}}>
{body}
</p>
{href && (
<a href={href} style={{
display: 'inline-flex',
opacity: hovered ? 1 : 0,
transition: 'opacity 0.2s var(--easing-natural)',
color: 'var(--Core-Accents-Purple)',
fontFamily: 'var(--font-inter)',
fontSize: '14px',
fontWeight: 600,
textDecoration: 'none',
marginTop: '12px',
}}>
Learn more →
</a>
)}
</div>
);
}
```
---
### 6.4 Input
**Anatomy:** Pill container → text input → optional icon right
| State | Border | Box Shadow |
|---|---|---|
| Default | `1px solid rgb(209,209,209)` | none |
| Hover | `1px solid rgb(185,190,199)` | `rgba(0,0,0,0.03) 0px 8px 13px` |
| Focus | `1px solid rgb(41,45,52)` | none; `outline: none` |
| Disabled | `1px solid #e8e8e8` | none; `opacity:0.5` |
| Error | `1px solid rgb(var(--color-error-1))` | none |
```css
.cu-input {
font-family: var(--font-plus-jakarta-sans), var(--font-fallback);
font-size: 12.8px; /* computed */
font-weight: 400;
border-radius: 50px; /* pill — computed */
padding: 6px 35px 6px 15px;
border: 1px solid rgb(209, 209, 209);
background: var(--Core-Background-Main);
color: var(--Core-Text-Main);
transition: var(--transition-short);
outline: none;
width: 100%;
}
.cu-input:hover {
border-color: rgb(185, 190, 199);
box-shadow: rgba(0, 0, 0, 0.03) 0px 8px 13px;
}
.cu-input:focus, .cu-input:focus-visible {
border-color: rgb(41, 45, 52);
outline: none;
}
.cu-input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.cu-input.error {
border-color: rgb(var(--color-error-1));
}
```
---
### 6.5 Navigation Item (Dropdown Trigger)
**Anatomy:** `<button>` → label text → chevron icon
| State | Color | Background |
|---|---|---|
| Default | `rgb(41,45,52)` | transparent |
| Hover | `rgb(0,0,0)` | transparent |
| Active / Open | `rgb(118,18,250)` = `var(--colors-Text-Purple)` | transparent |
| Focus | — | — |
```css
.nav-dropdown-btn {
font-family: var(--font-plus-jakarta-sans);
font-size: var(--clickup-font-size-md); /* 16px */
font-weight: var(--font-weight-regular);
line-height: var(--line-height-loose); /* 24px */
color: rgb(var(--color-grey-0));
background: transparent;
border: none;
border-radius: var(--border-radius-xs); /* 8px — from computed dropdown */
padding: 4px 10px;
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
transition: background-color 0.2s;
}
.nav-dropdown-btn:hover { color: rgb(0, 0, 0); }
.nav-dropdown-btn[data-state="open"],
.nav-dropdown-btn:active { color: rgb(var(--color-v3-purple)); }
```
---
### 6.6 Badge
**Anatomy:** Inline span → colored background → label text
| Variant | Background | Text |
|---|---|---|
| Purple | `--Core-Accents-Purple-Badge: #efedfd` | `#6647f0` |
| Blue | `--Core-Accents-Blue-Badge: #edf6fd` | `#0091ff` |
| Pink | `--Core-Accents-Pink-Badge: #feecfc` | `#ff02f0` |
| Orange | `--Core-Accents-Orange-Badge: #fdede7` | `#fc6d2d` |
| Green | `--Core-Utilities-Green-Badge: #e2f8ec` | `#078d3b` |
| Red | `--Core-Utilities-Red-Badge: #fbdddd` | `#f0382d` |
```tsx
// components/Badge.tsx
type BadgeVariant = 'purple' | 'blue' | 'pink' | 'orange' | 'green' | 'red';
const badgeTokens: Record<BadgeVariant, { bg: string; color: string }> = {
purple: { bg: 'var(--Core-Accents-Purple-Badge)', color: 'var(--Core-Accents-Purple)' },
blue: { bg: 'var(--Core-Accents-Blue-Badge)', color: 'var(--Core-Accents-Blue)' },
pink: { bg: 'var(--Core-Accents-Pink-Badge)', color: 'var(--Core-Accents-Pink)' },
orange: { bg: 'var(--Core-Accents-Orange-Badge)', color: 'var(--Core-Accents-Orange)' },
green: { bg: 'var(--Core-Utilities-Green-Badge)',color: 'var(--Core-Utilities-Green)' },
red: { bg: 'var(--Core-Utilities-Red-Badge)', color: 'var(--Core-Utilities-Red)' },
};
export function Badge({ children, variant = 'purple' }: { children: React.ReactNode; variant?: BadgeVariant }) {
const { bg, color } = badgeTokens[variant];
return (
<span style={{
display: 'inline-flex',
alignItems: 'center',
padding: '2px 10px',
borderRadius: 'var(--border-radius-xxl)', // 60px — full pill badge
backgroundColor: bg,
color,
fontFamily: 'var(--font-inter)',
fontSize: 'var(--clickup-font-size-sm)', // 14px
fontWeight: 600,
lineHeight: '21px',
}}>
{children}
</span>
);
}
```
---
### 6.7 Tab
**Anatomy:** Tab list → individual triggers → active underline/filled state
| State | Background | Border | Color |
|---|---|---|---|
| Default | transparent | none | `rgb(41,45,52)` |
| Hover (span inner) | `rgb(233,233,246)` | `1px solid rgb(206,206,234)` | `rgb(62,62,111)` |
| Active | `rgb(0,0,0)` | `1px solid #000` | `rgb(255,255,255)` |
```css
.tab-trigger {
font-family: var(--font-plus-jakarta-sans);
font-size: var(--clickup-font-size-md); /* 16px */
font-weight: var(--font-weight-regular);
line-height: var(--line-height-loose); /* 24px */
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 0;
cursor: pointer;
background: transparent;
border: none;
color: rgb(var(--color-grey-0));
transition: var(--transition-short);
}
.tab-trigger span {
padding: 4px 12px;
border-radius: 9px;
border: 1px solid transparent;
transition: var(--transition-short);
}
.tab-trigger:hover span {
background: rgb(233, 233, 246);
border-color: rgb(206, 206, 234);
color: rgb(62, 62, 111);
}
.tab-trigger[data-state="active"] span {
background: #000;
border-color: #000;
color: #fff;
}
```
---
## 7. Elevation & Depth
```css
/* ── Shadow tokens ── */
--shadow-xs: 0 4px 12px; /* Subtle hover lift on item cards */
--shadow-sm: 0 10px 25px; /* Default card shadow */
--shadow-md: 0 20px 60px; /* Modal, floating elements */
--shadow-lg: 0 16px 78px; /* Hero media, major elevation */
--shadow-xl: 0 34px 54px; /* Maximum depth, hero cards */
/* ── Usage with colour ── */
/* Item card hover: box-shadow: rgba(0,0,0,0.1) 0px 4px 12px */
/* Link card hover: box-shadow: rgba(0,0,0,0.1) 0px 2px 8px */
/* Feature card hover: box-shadow: rgba(18,43,165,0.06) 0px 6px 6px -3px,
rgba(18,43,165,0.06) 0px 12px 12px -6px,
rgba(18,43,165,0.06) 0px 24px 24px -12px,
rgba(18,43,165,0.06) 0px 48px 48px -24px */
/* Border pulse (AI): box-shadow: rgba(0,145,255,0.3) 0px 0px 0px 0px
→ rgba(0,145,255,0.1) 0px 0px 0px 4px (50%)
→ rgba(0,145,255,0) 0px 0px 0px 0px (100%) */
/* ── Z-index scale (reconstructed: moderate confidence) ── */
/* z-0: base content */
/* z-10: cards, floating labels */
/* z-20: sticky nav (60px height) */
/* z-30: dropdowns, tooltips */
/* z-40: modals */
/* z-50: overlays, sign-up sheets */
/* ── Border tokens ── */
--Core-Border-Default: #e8e8e8; /* Default dividers */
--BottomNavigation-Subsection-Border: #e8e8e8;
/* Input borders: 1px solid rgb(209,209,209) → hover rgb(185,190,199) → focus rgb(41,45,52) */
/* Button border: 1px solid transparent (gradient buttons use box-shadow for depth) */
```
**Layering principles:**
- ClickUp uses **diffuse multi-layer shadows** (4 layers, decreasing opacity) rather than tight hard shadows
- Shadows are blue-tinted (`rgba(18,43,165,...)`) not neutral grey
- The nav sits above all content; modals use a fade-in overlay (`_fadeInOverlay` keyframe)
- Never use `box-shadow: inset` on primary CTAs (except the ghost/other button variant which uses `rgba(0,0,0,0.15) 0px 0px 0px 1px inset`)
---
## 8. Motion
```css
/* ── Easing functions ── */
--easing-natural: cubic-bezier(0.5, 0, 0.5, 1); /* Default — balanced ease */
--easing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Playful overshoot */
--easing-in: cubic-bezier(0.895, 0.03, 0.685, 0.22); /* Accelerate — exit animations */
--easing-out: cubic-bezier(0.165, 0.84, 0.44, 1); /* Decelerate — enter animations */
--easing-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);
/* ── Duration tokens ── */
--clickup-duration-fast: 0.1s; /* Micro interactions (icon swaps) */
--clickup-duration-base: 0.2s; /* Standard UI transitions (buttons, bg changes) */
--clickup-duration-slow: 0.25s; /* Card reveals, menu open */
/* ── Composite transition tokens ── */
--transition-short: 0.25s var(--easing-natural);
--transition-long: 0.5s var(--easing-natural);
--transition-short-bounce: 0.25s var(--easing-bounce);
--transition-long-bounce: 0.5s var(--easing-bounce);
```
### Named Animation Patterns
| Animation | Duration | Usage |
|---|---|---|
| `_slideDown` / `_slideUp` | 0.25–0.5s | Accordion expand/collapse |
| `_mediaFadeUpIn` | 0.3s ease | Media content reveal (translateY 10px→0, opacity 0→1) |
| `_mediaFadeUpOut` | 0.3s ease | Media content exit (translateY 0→-30px, opacity 1→0) |
| `_moveLogos` | continuous | Logo marquee scroll |
| `_rotatingGradientBorder` | continuous | Animated gradient pill border (0→360deg) |
| `shimmerStream` | continuous | Shimmer loading effect (background-position 200%→-200%) |
| `_borderPulse` | 1.5s loop | Blue focus pulse on feature items |
| `_fadeIn` / `_fadeInOverlay` | 0.3–0.5s | Modal/overlay fade |
| `accordion-down` / `accordion-up` | 0.25s | Grid-template-rows accordion (uses Radix UI vars) |
| `_pillExpandFromCorner` | 0.3s | Scale 0.92→1 pill entrance |
| `_checkBounce` | 0.4s | Check icon scale/rotate bounce (0°→10°→0°) |
| `rainbow` | 3s linear infinite | Rainbow CTA text gradient shift |
### When to Animate
- **Always:** Button hover state transitions (`--transition-short: 0.25s`)
- **Always:** Card hover lift (`translateY(-1px)`) and shadow transition
- **Always:** Dropdown/accordion open/close
- **Always:** Logo marquee (continuous, `animation-play-state: paused` on hover)
- **Never:** Animate purely decorative elements on scroll without `prefers-reduced-motion` guard
- **Never:** Use transition durations > `0.5s` for interactive controls
```css
/* Reduced motion guard — always include */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
```
---
## 9. Anti-Patterns & Constraints
1. **Using a flat solid purple for the primary CTA → Why it fails → What to do instead.**
AI agents default to `background: #7b68ee` (the brand purple) for primary buttons because it's the most prominent colour in the palette. This strips the gradient that is the single most recognisable ClickUp brand signal and makes the CTA look flat and unfinished. Use `background: var(--color-button-primary-background)` (the pink→purple→cyan gradient) always. For the hover state, swap to `var(--color-button-primary-background-hover)`.
2. **Using border-radius values < 15px on buttons or inputs → Why it fails → What to do instead.**
AI agents trained on generic design systems default to `border-radius: 6px` or `8px` for "rounded" buttons. ClickUp's computed button radius is 54px (pill). Using < 15px produces an enterprise-angular look that contradicts the brand. Use `--border-radius-full` (100%) for buttons and pill inputs, `--border-radius-lg` (25px) for cards.
3. **Using Inter as a heading font → Why it fails → What to do instead.**
Inter is ClickUp's body/UI font — it's extracted from `--font-inter`. AI agents see Inter used widely and apply it to headings. Heading typography at ClickUp uses **Plus Jakarta Sans** exclusively (`--font-plus-jakarta-sans`). Applying Inter to h1/h2 makes headings feel lighter and less distinctive. Use `font-family: var(--font-default)` (which resolves to Plus Jakarta Sans) for all h1–h3.
4. **Hardcoding hex colours instead of CSS custom properties → Why it fails → What to do instead.**
When an AI reads `#6647f0` in the extraction and writes it inline, it bypasses the token system. This breaks theming, makes dark-mode impossible, and creates drift between components. Every colour reference must use the original CSS variable name (`var(--Core-Accents-Purple)`, not `#6647f0`). For RGB-channel variables used in `rgba()`, the correct pattern is `rgba(var(--color-v3-purple), 0.1)`.
5. **Using arbitrary spacing values not on the token scale → Why it fails → What to do instead.**
ClickUp has 21 unique spacing values including off-grid values (9px, 11px, 75px). AI agents invent new values like `margin: 13px` or `gap: 17px` when not given explicit token guidance. This creates visual rhythm inconsistency across components. Use only `--spacing-N` (10px increments), `--spacing-spacing-N`, or `--clickup-space-*` tokens. Map any required value to the nearest token.
6. **Constructing Tailwind classes dynamically → Why it fails → What to do instead.**
Patterns like `` `bg-[${colorVar}]` `` cause Tailwind to miss the class at build time (PurgeCSS removes it). The correct approach is `style={{ background: 'var(--color-button-primary-background)' }}` in JSX or defining the token in a CSS class statically.
7. **Omitting hover/focus/active states on interactive components → Why it fails → What to do instead.**
ClickUp's UI has rich hover states — card lift, gradient swap on CTAs, tab span fill. An AI generating only `default` state styles produces dead-feeling UI that contradicts the brand's kinetic character. Every interactive component must implement all five states (default, hover, focus, active, disabled) using the interaction patterns documented in Section 6.
8. **Applying heading gradient text treatment to body copy → Why it fails → What to do instead.**
The `background-clip: text` + gradient technique is used exclusively on h1 and h2. AI agents sometimes generalise it to paragraphs or nav items, which reduces readability on small text and degrades on some browsers. Apply the gradient text technique only to elements ≥ 26px (h1/h2). Body copy uses solid `#202020` or `#646464`.
9. **Using `!important` to override gradient backgrounds → Why it fails → What to do instead.**
ClickUp components use CSS specificity (scoped class names from CSS modules) to manage overrides. Adding `!important` breaks the layered override system used in the v3/v4/v5 versioned components. Instead, increase specificity by adding a parent class or use a CSS variable to swap the background value.
10. **Using neutral grey shadows instead of the brand-tinted shadow palette → Why it fails → What to do instead.**
AI agents default to `box-shadow: 0 4px 8px rgba(0,0,0,0.1)` — a generic neutral shadow. ClickUp's card hover shadows use `rgba(18,43,165,0.06)` (blue-tinted, multi-layer). Using neutral shadows makes ClickUp components look generic. Use the shadow formulas from Section 7 exactly, including the multi-layer pattern for feature cards.
11. **Setting font-weight to 600 when 650 is required → Why it fails → What to do instead.**
ClickUp headings use `font-weight: 650` — a non-standard value only valid on variable fonts. AI agents snap to the nearest standard weight (600) which produces visibly lighter headings than the brand. Both Plus Jakarta Sans and Inter are variable fonts loaded with the exact weight ranges. Always use `--font-weight-semibold: 650` for headings and set the font-weight property to `650`.
---
## Appendix A: Complete Token Reference
Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.
```css
/* Colours (184) */
--color-button-other-background: rgba(0,0,0,0.15);
--color-shadow: rgba(16,30,54,0.1);
--color-shadow-1: rgba(16,30,54,0.06);
--color-pink-shadow-1: rgba(var(--color-pink-1), 0.1);
--color-pink-shadow-2: var(--color-pink-1),0.2;
--color-blue-shadow-1: rgba(var(--color-blue-1), 0.1);
--color-blue-shadow-2: var(--color-blue-1),0.2;
--color-green-shadow-1: rgba(var(--color-green-1), 0.1);
--color-green-shadow-2: var(--color-green-1),0.2;
--color-purple-shadow-1: rgba(var(--color-purple-1), 0.1);
--color-purple-shadow-2: rgba(var(--color-purple-1), 0.2);
--color-purple-shadow-4: rgba(var(--color-purple-1), 0.4);
--color-purple-shadow-5: rgba(var(--color-purple-1), 0.5);
--color-violet-shadow-1: rgba(var(--color-violet-1), 0.1);
--color-violet-shadow-2: var(--color-violet-1),0.2;
--color-yellow-shadow-1: rgba(var(--color-yellow-1), 0.1);
--color-gradient-cyan-accent-light-1: var(--color-white),0.1;
--color-gradient-cyan-accent-lightest-1: linear-gradient(45deg, #45C4F9 -0.01%, #7D09FF 50.33%, #FF0BE5);
--Core-Button-Primary: #202020;
--Core-Text-Secondary: #646464;
--Core-Text-Tertiary: #838383;
--Core-Text-Disabled: #bbb;
--Core-Background-Main: #fff;
--Core-Background-Box: #f8f9fa;
--Core-Button-Secondary: #f0f0f0;
--Core-Button-Secondary-Hover: #dedede;
--BottomNavigation-Subsection-Border: #e8e8e8;
--Core-Accents-Purple: #6647f0;
--Core-Accents-Purple-Badge: #efedfd;
--Core-Accents-Blue: #0091ff;
--Core-Accents-Blue-Badge: #edf6fd;
--Core-Accents-Pink: #ff02f0;
--Core-Accents-Pink-Badge: #feecfc;
--Core-Accents-Orange: #fc6d2d;
--Core-Accents-Orange-Badge: #fdede7;
--Core-Utilities-Red: #f0382d;
--Core-Utilities-Red-Badge: #fbdddd;
--Core-Utilities-Green: #078d3b;
--Core-Utilities-Green-Badge: #e2f8ec;
--Core-Utilities-Deep-Blue: #4a2fff;
--Core-Utilities-Deep-Blue-Badge: #e3e5fb;
--Core-Utilities-Black: #000;
--Core-Utilities-Gray: #f7f7f7;
--BottomNavigation-Link-Hover-Background: #0000000a;
--bg-secondary: var(--color-white);
--color-v3-pink: 250,18,227;
--color-v3-red: 240,2,80,1;
--color-v3-red-rgb: 240,2,80;
--color-v3-orange: 255,98,33;
--color-v3-yellow: 255, 215, 0;
--color-v3-green: 33,200,40;
--color-v3-light-blue: 64,221,255;
--color-v3-blue: 31,124,255;
--color-v3-dark-blue: 44,42,65;
--color-v3-purple: 118,18,250;
--color-v3-purple-0: 73, 1, 170;
--color-v3-purple-1: 85, 0, 199;
--color-v3-purple-2: 106, 6, 239;
--color-v3-purple-3: 128, 32, 255;
--color-v3-purple-4: 137, 47, 255;
--color-v3-black: 0, 0, 0;
--color-v3-black-0: 7, 12, 28;
--color-v3-black-1: 10, 17, 40;
--color-v3-black-2: 13, 21, 48;
--color-v3-black-3: 15, 25, 61;
--color-v3-black-4: 21, 34, 79;
--color-v3-black-5: 44, 64, 133;
--color-v3-grey: 36, 34, 62;
--color-button-tertiary-text: rgb(81,75,129);
--color-v3-grey-1: 127, 118, 179;
--color-v3-grey-2: 182, 174, 224;
--color-v3-grey-3: 189, 189, 220;
--color-v3-grey-4: 206, 206, 234;
--color-v3-grey-5: 241,241,249;
--color-v3-grey-6: 248, 242, 255;
--color-white: 255,255,255;
--color-v3-white-0: 248, 248, 252;
--color-v3-white-2: 233, 233, 246;
--color-v3-white-3: 242, 232, 255;
--color-v3-white-4: 234, 218, 253;
--color-gradient-primary: linear-gradient(83deg,...);
--color-gradient-purple-1: linear-gradient(29deg,...);
--color-gradient-purple-2: linear-gradient(133deg, rgba(var(--color-v3-purple)) 16%, rgba(var(--color-v3-pink)) 136%);
--color-gradient-blue-1: linear-gradient(21deg, rgba(var(--color-v3-blue)) 33%, rgba(var(--color-v3-light-blue)) 129%);
--color-gradient-blue-2: linear-gradient(147deg, rgba(var(--color-v3-blue)) 14%, rgba(var(--color-v3-light-blue)) 103%);
--color-gradient-blue-purple-1: linear-gradient(159deg,...);
--color-gradient-blue-purple-2: linear-gradient(331deg, rgba(var(--color-v3-purple)) -6%, rgba(var(--color-v3-light-blue)) 107%);
--color-gradient-orange-pink-1: linear-gradient(201deg,...);
--color-gradient-orange-pink-2: linear-gradient(323deg, rgba(var(--color-v3-pink)) -45%, rgba(var(--color-v3-orange)) 106%);
--color-gradient-dark-purple-1: linear-gradient(340deg, rgba(var(--color-v3-pink)) -75%, rgba(16 31 82) 94%);
--color-gradient-dark-purple-2: linear-gradient(136deg, rgba(var(--color-v3-pink)) -76%, rgba(16 31 82) 85%);
--color-gradient-white-1: linear-gradient(164deg, rgba(var(--color-v3-white-0)) 4%, rgba(var(--color-v3-white)) 89%);
--color-gradient-purple-to-blue: linear-gradient(90deg,#6647F0 22.6%,#0091FF 79.33%);
--color-button-primary-text: rgb(var(--color-v3-white));
--color-button-primary-background: linear-gradient(263deg,...);
--color-button-primary-background-hover: linear-gradient(261deg,#831778 -65%,#7612FA -22%,#12D0FA 135%);
--color-button-secondary-text: rgb(var(--color-v3-purple));
--color-button-secondary-background: rgb(248,243,255);
--color-button-secondary-background-hover: rgb(239,228,255);
--color-button-tertiary-background: var(--color-v3-grey-5);
--color-button-tertiary-background-hover: rgb(230,230,249);
--color-button-other-text: var(--color-v3-white);
--color-grey: 51, 51, 51;
--color-grey-0: 41,45,52;
--color-grey-1: 124,130,141;
--color-grey-2: 185,190,199;
--color-grey-3: 233,235,240;
--color-grey-4: 250,251,252;
--color-v4-text-secondary: 180,180,180;
--color-text: var(--color-grey-0);
--color-pink-1: 253,113,175;
--color-pink-2: 255, 241, 247;
--color-pink-3: 255, 248, 251;
--color-pink-neon: 255, 11, 229;
--color-pink: var(--color-pink-1);
--color-pink-shadow: var(--color-pink-shadow-1);
--color-blue-1: 73,204,249;
--color-blue-2: 229, 248, 254;
--color-blue-3: 237, 250, 254;
--color-blue-neon: 69, 196, 249;
--color-blue: var(--color-blue-1);
--color-blue-shadow: var(--color-blue-shadow-1);
--color-compare-green: 0,184,132;
--color-green-2: 228, 248, 242;
--color-green-3: 240,251,248;
--color-green: var(--color-green-1);
--color-green-shadow: var(--color-green-shadow-1);
--color-mint-1: 104, 238, 190;
--color-mint: var(--color-mint);
--color-purple-1: 123,104,238;
--color-purple-2: 242, 240, 253;
--color-purple-3: 248, 247, 254;
--color-purple-neon: 137, 32, 254;
--color-brand-clickup: var(--color-purple-1);
--color-purple-shadow: var(--color-purple-shadow-1);
--color-violet-1: 155,81,224;
--color-violet-2: 241, 230, 251;
--color-violet-3: 245,238,252;
--color-violet: var(--color-violet-1);
--color-violet-shadow: var(--color-violet-shadow-1);
--color-compare-yellow: 255,200,0;
--color-yellow-2: 255, 250, 230;
--color-yellow-neon: 255,200,1;
--color-yellow: var(--color-yellow-1);
--color-yellow-shadow: var(--color-yellow-shadow-1);
--color-gradient-cyan-accent-primary-1: 97,255,255;
--color-gradient-cyan-accent-shadow-1: var(--color-shadow);
--color-compare-red: 253,113,113;
--color-success-1: 0,136,68;
--color-success-2: 235, 245, 240;
--color-success: var(--color-success-1);
--color-warning-1: 248,174,0;
--color-warning-2: 254, 249, 235;
--color-warning: var(--color-warning-1);
--color-error-1: 211,61,68;
--color-error-2: 252, 239, 240;
--color-error-3: 224, 79, 68;
--color-error: var(--color-error-1);
--color-brand-facebook: 59,89,152;
--color-brand-instagram: 195,42,163;
--color-brand-linkedin: 0,119,181;
--color-brand-twitter: 29,161,242;
--color-brand-youtube: 255,0,0;
--color-link: var(--color-brand-clickup);
--color-compare-blue: 0,121,191;
--color-compare-dark-blue: 0,48,89;
--color-compare-lime-green: 72,184,98;
--gradient-h1-bg: linear-gradient(98deg,#202020 43%,#8f8f8f 92%);
--gradient-h2-bg: linear-gradient(97deg,#202020 43%,#8f8f8f 111%);
--brand-mark-1: rgb(30, 215, 96); /* Brand mark fill on 9 svg shapes — e.g. "path" /* mined from svg fill */ */
--brand-mark-2: rgb(140, 21, 21); /* Brand mark fill on 8 svg shapes — e.g. "path" /* mined from svg fill */ */
--brand-mark-3: rgb(127, 24, 127); /* Brand mark fill on 6 svg shapes — e.g. "path" /* mined from svg fill */ */
--brand-mark-4: rgb(255, 153, 0); /* Brand mark fill on 2 svg shapes — e.g. "path" /* mined from svg fill */ */
--Core-Text-Main: #202020;
--Core-Border-Default: #e8e8e8;
--color-green-1: 0,184,132;
--color-yellow-1: 255,200,0;
--color-v3-white: 255,255,255;
--color-v3-white-1: 241, 241, 249;
--color-v3-grey-0: 81, 75, 129;
--color-red-1: 253, 113, 113;
--Core-Background-Card: #f8f9fa;
--bg-main: var(--color-white);
--Core-Utilities-White: #fff;
/* Typography (88) */
--easing-natural: cubic-bezier(0.5,0,0.5,1);
--easing-bounce: cubic-bezier(0.175,0.885,0.32,1.275);
--easing-in: cubic-bezier(0.895,0.03,0.685,0.22);
--easing-out: cubic-bezier(0.165,0.84,0.44,1);
--easing-in-out: cubic-bezier(0.445,0.05,0.55,0.95);
--size-1: 0.063rem;
--size-2: 0.125rem;
--size-3: 0.188rem;
--size-4: 0.25rem;
--size-5: 0.313rem;
--size-6: 0.375rem;
--size-7: 0.438rem;
--size-8: 0.5rem;
--size-9: 0.563rem;
--size-10: 0.625rem;
--size-11: 0.688rem;
--size-12: 0.75rem;
--size-13: 0.8125rem;
--size-14: 0.875rem;
--size-15: 0.938rem;
--size-v3-container: 1160px;
--size-nav-container: 1120px;
--font-fallback: system-ui, -apple-system, ...;
--font-plus-jakarta-sans: "Plus Jakarta Sans";
--font-inter: "Inter", var(--font-fallback);
--font-default: var(--font-plus-jakarta-sans), var(--font-fallback);
--size-16: 1rem;
--size-17: 1.0625rem;
--size-18: 1.125rem;
--size-19: 1.188rem;
--size-20: 1.25rem;
--size-21: 1.313rem;
--size-22: 1.375rem;
--size-23: 1.438rem;
--size-24: 1.5rem;
--size-25: 1.563rem;
--size-26: 1.625rem;
--size-27: 1.688rem;
--size-28: 1.75rem;
--size-29: 1.8125rem;
--size-30: 1.875rem;
--size-32: 2rem;
--size-35: 2.188rem;
--size-38: 2.375rem;
--size-39: 2.438rem;
--size-40: 2.5rem;
--size-44: 2.6875rem;
--size-46: 2.875rem;
--size-48: 3rem;
--size-50: 3.125rem;
--size-55: 3.4375rem;
--size-70: 4.375rem;
--size-xl: var(--size-50);
--size-hero-heading: var(--size-48);
--size-hero-subheading: ;
--size-content-subheading: var(--size-12);
--size-content-lg: var(--size-38);
--size-content-default: var(--size-14);
--size-label: var(--size-content-subheading);
--size-v3-homepage-container: var(--size-v3-container);
--font-size-xs: 8px; /* 4 elements — e.g. div "CERTIFIED", div "CERTIFIED", div "COMPLIANT" /* mined from computed styles */ */
--font-size-sm: 14px; /* 162 elements — e.g. p "Dependencies", p "Connected Search", p "Tasks" /* mined from computed styles */ */
--font-size-md: 16px; /* 49 elements — e.g. h4 "REPLACES", p "Replaces", p "A superhuman brain b" /* mined from computed styles */ */
--font-size-lg: 18px; /* 9 elements — e.g. h3 "Your company's AI", h3 "Connected to 50+ app", h3 "Every AI" /* mined from computed styles */ */
--font-size-xl: 26px; /* 9 elements — e.g. h3 "Projects", h3 "Docs", h3 "Brain" /* mined from computed styles */ */
--font-size-2xl: 48px; /* 5 elements — e.g. h2 "60% of work is lost ", h2 "All apps, AI Agents,", h2 "AI solutions for eve" /* mined from computed styles */ */
--font-size-3xl: 52px; /* 3 elements — e.g. h1 "All software.
Every", span "All software.
Every", span "One Brain." /* mined from computed styles */ */
--font-weight-regular: 400; /* 46 elements — e.g. p "Save 2 hours every d", p "A superhuman brain b", p "Superpowers to compl" /* mined from computed styles */ */
--font-weight-medium: 500; /* 131 elements — e.g. h4 "REPLACES", p "Work Sprawl is killi", p "100+ products to rep" /* mined from computed styles */ */
--font-weight-semibold: 650; /* 19 elements — e.g. h2 "60% of work is lost ", h2 "All apps, AI Agents,", h2 "AI solutions for eve" /* mined from computed styles */ */
--font-weight-bold: 700; /* 41 elements — e.g. h1 "All software.
Every", h2 "A new era of humans,", h2 "The only AI that wor" /* mined from computed styles */ */
--line-height-tight: 20px; /* 99 elements — e.g. h4 "REPLACES", p "Dependencies", p "Connected Search" /* mined from computed styles */ */
--line-height-normal: 21px; /* 35 elements — e.g. a "Product", a "Compare", button "Dependencies" /* mined from computed styles */ */
--line-height-loose: 24px; /* 41 elements — e.g. h3 "Your company's AI", h3 "Connected to 50+ app", h3 "Every AI" /* mined from computed styles */ */
--clickup-font-size-xs: 8px;
--clickup-font-size-sm: 14px;
--clickup-font-size-md: 16px;
--clickup-font-size-lg: 18px;
--clickup-font-size-xl: 26px;
--clickup-font-size-2xl: 48px;
--clickup-font-size-3xl: 52px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 650;
--font-weight-bold: 700;
--line-height-tight: 20px;
--line-height-normal: 21px;
--line-height-loose: 24px;
/* Spacing (50) */
--spacing-nav-height: 60px;
--spacing-stack-spacing-desktop: 150px;
--spacing-1: 10px;
--spacing-mobile-padding-gutter: 20px;
--spacing-3: 30px;
--spacing-section-title-block-end-mobile: 40px;
--spacing-section-title-block-end: 50px;
--spacing-7: 70px;
--spacing-8: 80px;
--spacing-9: 90px;
--spacing-brain-nav-height: 100px;
--spacing-11: 110px;
--spacing-12: 120px;
--spacing-13: 130px;
--spacing-14: 140px;
--spacing-block-between-containers: 50px;
--spacing-block-container: 100px;
--spacing-block-container-no-background: var(--spacing-15);
--spacing-inline-container: 130px;
--spacing-spacing-5: 5px;
--spacing-spacing-75: 75px;
--space-xs: 2px; /* 9 elements — e.g. div .GradientPill_eyebrowText__EYj3Z, div .GradientPill_eyebrowText__EYj3Z, div .GradientPill_eyebrowText__EYj3Z /* mined from computed styles */ */
--space-sm: 9px; /* 81 elements — e.g. a .CuHomeHero4_1_card__2ufZf, a .CuHomeHero4_1_card__2ufZf, a .CuHomeHero4_1_card__2ufZf /* mined from computed styles */ */
--space-md: 11px; /* 24 elements — e.g. a .CuHomeHero4_1_card__2ufZf, a .CuHomeHero4_1_card__2ufZf, a .CuHomeHero4_1_card__2ufZf /* mined from computed styles */ */
--space-lg: 12px; /* 8 elements — e.g. footer .ui, footer .ui, a .CuLink_link__CFBMW /* mined from computed styles */ */
--size-v3-container: 1160px;
--spacing-desktop-padding-gutter: 40px;
--spacing-stack-spacing-mobile: 60px;
--spacing-2: 20px;
--spacing-4: 40px;
--spacing-5: 50px;
--spacing-6: 60px;
--spacing-10: 100px;
--spacing-15: 150px;
--spacing-spacing-10: 10px;
--spacing-spacing-20: 20px;
--spacing-spacing-30: 30px;
--spacing-spacing-40: 40px;
--spacing-spacing-50: 50px;
--clickup-space-xs: 2px;
--clickup-space-sm: 9px;
--clickup-space-md: 11px;
--clickup-space-lg: 12px;
--clickup-space-xl: 75px;
--clickup-space-2xl: 80px;
--clickup-space-3xl: 120px;
--size-v3-homepage-container: 1160px;
--size-nav-container: 1120px;
--size-4-dot-0-container: 1120px;
--size-container-current: 1160px;
/* Radius (16) */
--border-radius-xxs: 4px;
--border-radius-xs: 9px;
--border-radius-sm: 15px;
--border-radius-md: 20px;
--border-radius-lg: 25px;
--border-radius-xl: 35px;
--border-radius-xxl: 60px;
--border-radius-full: 100%;
--border-radius-v3-media: 14px;
--radius-radius-12: 12px;
--radius-radius-18: 18px;
--radius-sm: 2px; /* 2 elements — e.g. button .ot-link-btn "Back Button", button .save-preference-btn-handler "Confirm My Choices" /* mined from computed styles */ */
--radius-md: 8px; /* 14 elements — e.g. button ._dropdownButton_ywfkq_4 "Brain AI", button ._dropdownButton_ywfkq_4 "Product", button ._dropdownButton_ywfkq_4 "Solutions" /* mined from computed styles */ */
--radius-lg: 24px; /* 3 elements — e.g. div .Lp4BrainSection_featureCard__6uHKX "@Brain AgentUse @Bra", div .Lp4BrainSection_featureCard__6uHKX "Ambient AnswersHuman", div .Lp4BrainSection_featureCard__6uHKX "Project ManagerNever" /* mined from computed styles */ */
--radius-full: 39px; /* 1 element — e.g. div .Lp4BrainSection_audioGradientRectangle__BzY0e /* mined from computed styles */ */
--radius-radius-14: 14px;
/* Effects (11) */
--transition-long: 0.5s var(--easing-natural);
--transition-short: 0.25s var(--easing-natural);
--transition-long-bounce: 0.5s var(--easing-bounce);
--transition-short-bounce: 0.25s var(--easing-bounce);
--shadow-xs: 0 4px 12px;
--shadow-sm: 0 10px 25px;
--shadow-md: 0 20px 60px;
--shadow-lg: 0 16px 78px;
--shadow-xl: 0 34px 54px;
--shadow-sm: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; /* 2 elements — e.g. button .v4, button .v4 /* mined from computed styles */ */
--shadow-md: rgba(13, 21, 48, 0.04) 0px 4px 4px 0px; /* 2 elements — e.g. button .CuButton_button__2XIwY, button .CuButton_button__2XIwY /* mined from computed styles */ */
/* Motion (83) */
----motion-_progressBarHeight_1kq03_1: @keyframes _progressBarHeight_1kq03_1 {
0% { block-size: 0px; }
100% { block-size: 100%; }
}; /* @keyframes _progressBarHeight_1kq03_1 */
----motion-_slideDown_1kq03_1: @keyframes _slideDown_1kq03_1 {
0% { max-block-size: 0px; opacity: 0; }
50% { opacity: 0; }
100% { max-block-size: var(--radix-accordion-content-height); opacity: 1; }
}; /* @keyframes _slideDown_1kq03_1 */
----motion-_slideUp_1kq03_1: @keyframes _slideUp_1kq03_1 {
0% { max-block-size: var(--radix-accordion-content-height); opacity: 1; }
20% { opacity: 0; }
100% { max-block-size: 0px; opacity: 0; }
}; /* @keyframes _slideUp_1kq03_1 */
----motion-_slideDown_jxed5_1: @keyframes _slideDown_jxed5_1 {
0% { block-size: 0px; }
100% { block-size: var(--radix-accordion-content-height); }
}; /* @keyframes _slideDown_jxed5_1 */
----motion-_slideUp_jxed5_1: @keyframes _slideUp_jxed5_1 {
0% { block-size: var(--radix-accordion-content-height); }
100% { block-size: 0px; }
}; /* @keyframes _slideUp_jxed5_1 */
----motion-_banner_10pd0_1: @keyframes _banner_10pd0_1 {
75% { transform: translate(-300%); }
75.01% { transform: translate(100%); }
}; /* @keyframes _banner_10pd0_1 */
----motion-_moveLogos_1ojqd_1: @keyframes _moveLogos_1ojqd_1 {
0% { transform: translate(0px); }
100% { transform: translate(calc(var(--numLogos) / 2 * -180px)); }
}; /* @keyframes _moveLogos_1ojqd_1 */
----motion-_slide-translate_1s4xh_1: @keyframes _slide-translate_1s4xh_1 {
100% { transform: translate(-100%); }
}; /* @keyframes _slide-translate_1s4xh_1 */
----motion-_slide-translate-reverse_1s4xh_1: @keyframes _slide-translate-reverse_1s4xh_1 {
0% { transform: translate(-100%); }
100% { transform: translate(0px); }
}; /* @keyframes _slide-translate-reverse_1s4xh_1 */
----motion-_full-translate_1fno9_1: @keyframes _full-translate_1fno9_1 {
100% { transform: translate(-100%); }
}; /* @keyframes _full-translate_1fno9_1 */
----motion-_full-translate-right_1fno9_1: @keyframes _full-translate-right_1fno9_1 {
0% { transform: translate(-50%); }
100% { transform: translate(0px); }
}; /* @keyframes _full-translate-right_1fno9_1 */
----motion-_rotatingGradientBorder_10iw9_1: @keyframes _rotatingGradientBorder_10iw9_1 {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(1turn); }
}; /* @keyframes _rotatingGradientBorder_10iw9_1 */
----motion-_rotateGradientAngle_10iw9_1: @keyframes _rotateGradientAngle_10iw9_1 {
0% { --gradient-angle: 45deg; opaci… <0.3KB elided>; /* @keyframes _rotateGradientAngle_10iw9_1 */
----motion-_shimmerStream_jp7j6_1: @keyframes _shimmerStream_jp7j6_1 {
0% { background-position: 200% 0px; }
100% { background-position: -200% 0px; }
}; /* @keyframes _shimmerStream_jp7j6_1 */
----motion-_scroll_5q1ej_1: @keyframes _scroll_5q1ej_1 {
0% { transform: translate(0px); }
100% { transform: translate(calc(-50% - 32px)); }
}; /* @keyframes _scroll_5q1ej_1 */
----motion-_fadeInContactSalesOverlay_167aw_1: @keyframes _fadeInContactSalesOverlay_167aw_1 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes _fadeInContactSalesOverlay_167aw_1 */
----motion-_fadeInContactSalesContent_167aw_1: @keyframes _fadeInContactSalesContent_167aw_1 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes _fadeInContactSalesContent_167aw_1 */
----motion-_mediaFadeUpOut_36zu8_1: @keyframes _mediaFadeUpOut_36zu8_1 {
0% { transform: translateY(0px); opacity: 1; }
100% { transform: translateY(-30px); opacity: 0; }
}; /* @keyframes _mediaFadeUpOut_36zu8_1 */
----motion-_mediaFadeUpIn_36zu8_1: @keyframes _mediaFadeUpIn_36zu8_1 {
0% { transform: translateY(10px); opacity: 0; }
100% { transform: translateY(0px); opacity: 1; }
}; /* @keyframes _mediaFadeUpIn_36zu8_1 */
----motion-_pillExpandFromCorner_36zu8_1: @keyframes _pillExpandFromCorner_36zu8_1 {
0% { transform: scale(0.92); opacity: 0.65; }
100% { transform: scale(1); opacity: 1; }
}; /* @keyframes _pillExpandFromCorner_36zu8_1 */
----motion-_textFadeIn_36zu8_1: @keyframes _textFadeIn_36zu8_1 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes _textFadeIn_36zu8_1 */
----motion-_banner_g4vua_1: @keyframes _banner_g4vua_1 {
75% { transform: translate(-300%); }
75.01% { transform: translate(100%); }
}; /* @keyframes _banner_g4vua_1 */
----motion-_borderPulse_12c7p_1: @keyframes _borderPulse_12c7p_1 {
0% { box-shadow: rgba(0, 145, 255, 0.3) 0px… <0.2KB elided>; /* @keyframes _borderPulse_12c7p_1 */
----motion-_logoEnter_nk8qp_1: @keyframes _logoEnter_nk8qp_1 {
0% { opacity: 0; filter: blur(5px); transform: scale(0.8) translateZ(0px); }
100% { opacity: 1; filter: blur(0px); transform: scale(1) translateZ(0px); }
}; /* @keyframes _logoEnter_nk8qp_1 */
----motion-_logoExit_nk8qp_1: @keyframes _logoExit_nk8qp_1 {
0% { opacity: 1; filter: blur(0px); transform: scale(1) translateZ(0px); }
100% { opacity: 0; filter: blur(5px); transform: scale(0.8) translateZ(0px); }
}; /* @keyframes _logoExit_nk8qp_1 */
----motion-_shimmerStream_ywfkq_1: @keyframes _shimmerStream_ywfkq_1 {
0% { background-position: 200% 0px; }
100% { background-position: -200% 0px; }
}; /* @keyframes _shimmerStream_ywfkq_1 */
----motion-_curtainDown_17h43_66: @keyframes _curtainDown_17h43_66 {
0% { block-size: 0px; padding-block-end: 0… <0.2KB elided>; /* @keyframes _curtainDown_17h43_66 */
----motion-_curtainUp_17h43_70: @keyframes _curtainUp_17h43_70 {
0% { block-size: var(--previous-height); pad… <0.3KB elided>; /* @keyframes _curtainUp_17h43_70 */
----motion-_curtainExpandDown_17h43_74: @keyframes _curtainExpandDown_17h43_74 {
0% { block-size: var(--previous-height); }
100% { block-size: var(--current-height); }
}; /* @keyframes _curtainExpandDown_17h43_74 */
----motion-_curtainContractUp_17h43_78: @keyframes _curtainContractUp_17h43_78 {
0% { block-size: var(--previous-height); }
30% { block-size: var(--previous-height); }
100% { block-size: var(--current-height); }
}; /* @keyframes _curtainContractUp_17h43_78 */
----motion-_columnCurtainDrop_17h43_1: @keyframes _columnCurtainDrop_17h43_1 {
0% { max-block-size: 0px; }
50% { max-block-size: 300px; }
100% { max-block-size: 500px; }
}; /* @keyframes _columnCurtainDrop_17h43_1 */
----motion-_columnContentReveal_17h43_1: @keyframes _columnContentReveal_17h43_1 {
0% { opacity: 0; transform: translateY(-10px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes _columnContentReveal_17h43_1 */
----motion-_columnContentFadeOut_17h43_1: @keyframes _columnContentFadeOut_17h43_1 {
0% { opacity: 1; transform: translateY(0px); }
100% { opacity: 0; transform: translateY(-5px); }
}; /* @keyframes _columnContentFadeOut_17h43_1 */
----motion-_columnContentFadeIn_17h43_1: @keyframes _columnContentFadeIn_17h43_1 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes _columnContentFadeIn_17h43_1 */
----motion-_slide-translate_1f636_1: @keyframes _slide-translate_1f636_1 {
100% { transform: translate(-100%); }
}; /* @keyframes _slide-translate_1f636_1 */
----motion-_slide-translate-reverse_1f636_1: @keyframes _slide-translate-reverse_1f636_1 {
0% { transform: translate(-100%); }
100% { transform: translate(0px); }
}; /* @keyframes _slide-translate-reverse_1f636_1 */
----motion-_full-translate_gxvs6_1: @keyframes _full-translate_gxvs6_1 {
100% { transform: translate(-100%); }
}; /* @keyframes _full-translate_gxvs6_1 */
----motion-_full-translate-right_gxvs6_1: @keyframes _full-translate-right_gxvs6_1 {
0% { transform: translate(-50%); }
100% { transform: translate(0px); }
}; /* @keyframes _full-translate-right_gxvs6_1 */
----motion-_fadeInOverlay_qx9ft_1: @keyframes _fadeInOverlay_qx9ft_1 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes _fadeInOverlay_qx9ft_1 */
----motion-_bounce_1jqav_143: @keyframes _bounce_1jqav_143 {
0%, 80%, 100% { opacity: 0.5; transform: scale(0); }
40% { opacity: 1; transform: scale(1); }
}; /* @keyframes _bounce_1jqav_143 */
----motion-_fadeIn_1jqav_1: @keyframes _fadeIn_1jqav_1 {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes _fadeIn_1jqav_1 */
----motion-_borderPulse_1oq8r_1: @keyframes _borderPulse_1oq8r_1 {
0% { box-shadow: rgba(0, 145, 255, 0.3) 0px… <0.2KB elided>; /* @keyframes _borderPulse_1oq8r_1 */
----motion-_borderPulse_1wm9k_1: @keyframes _borderPulse_1wm9k_1 {
0% { box-shadow: rgba(0, 145, 255, 0.3) 0px… <0.2KB elided>; /* @keyframes _borderPulse_1wm9k_1 */
----motion-eyebrow-rotate-gradient-angle: @keyframes eyebrow-rotate-gradient-angle {
0% { --eyebrow-gradient-angle: 45d… <0.3KB elided>; /* @keyframes eyebrow-rotate-gradient-angle */
----motion-eyebrow-rotating-gradient-border: @keyframes eyebrow-rotating-gradient-border {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(1turn); }
}; /* @keyframes eyebrow-rotating-gradient-border */
----motion-accordion-down: @keyframes accordion-down {
0% { opacity: 0; grid-template-rows: 0fr; }
100% { opacity: 1; grid-template-rows: 1fr; }
}; /* @keyframes accordion-down */
----motion-accordion-up: @keyframes accordion-up {
0% { opacity: 1; grid-template-rows: 1fr; }
100% { opacity: 0; grid-template-rows: 0fr; }
}; /* @keyframes accordion-up */
----motion-integrations-slider-forward: @keyframes integrations-slider-forward {
100% { transform: translate(-100%); }
}; /* @keyframes integrations-slider-forward */
----motion-integrations-slider-reverse: @keyframes integrations-slider-reverse {
0% { transform: translate(-100%); }
100% { transform: translate(0px); }
}; /* @keyframes integrations-slider-reverse */
----motion-callout-card-logo-scroll: @keyframes callout-card-logo-scroll {
100% { transform: translate(calc(-50% - var(--callout-card-logo-scroll-half-gap,32px))); }
}; /* @keyframes callout-card-logo-scroll */
----motion-shimmerStream: @keyframes shimmerStream {
0% { background-position: 200% 0px; }
100% { background-position: -200% 0px; }
}; /* @keyframes shimmerStream */
----motion-email-form-bounce: @keyframes email-form-bounce {
0%, 80%, 100% { opacity: 0.5; transform: scale(0); }
40% { opacity: 1; transform: scale(1); }
}; /* @keyframes email-form-bounce */
----motion-email-form-fade-in: @keyframes email-form-fade-in {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes email-form-fade-in */
----motion-cu-bouncedelay: @keyframes cu-bouncedelay {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}; /* @keyframes cu-bouncedelay */
----motion-CuPageBanner_shimmerStream__rx_E9: @keyframes CuPageBanner_shimmerStream__rx_E9 {
0% { background-position: 200% 0px; }
100% { background-position: -200% 0px; }
}; /* @keyframes CuPageBanner_shimmerStream__rx_E9 */
----motion-ExperimentLoader_loader__EJBeb: @keyframes ExperimentLoader_loader__EJBeb {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; pointer-events: none; }
}; /* @keyframes ExperimentLoader_loader__EJBeb */
----motion-CuContactSalesModal_fadeIn___C_oj: @keyframes CuContactSalesModal_fadeIn___C_oj {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes CuContactSalesModal_fadeIn___C_oj */
----motion-CuSignUpOverlay_fadeInOverlay__Ip0Ao: @keyframes CuSignUpOverlay_fadeInOverlay__Ip0Ao {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes CuSignUpOverlay_fadeInOverlay__Ip0Ao */
----motion-CuTitle_rotatingGradientBorder__iTjhD: @keyframes CuTitle_rotatingGradientBorder__iTjhD {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(1turn); }
}; /* @keyframes CuTitle_rotatingGradientBorder__iTjhD */
----motion-CuTitle_rotateGradientAngle__7Lvm1: @keyframes CuTitle_rotateGradientAngle__7Lvm1 {
0% { --gradient-angle: 45deg;… <0.3KB elided>; /* @keyframes CuTitle_rotateGradientAngle__7Lvm1 */
----motion-Lp4ComingSoon_rotatingGradientBorder__VRSd3: @keyframes Lp4ComingSoon_rotatingGradientBorder__VRSd3 {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(1turn); }
}; /* @keyframes Lp4ComingSoon_rotatingGradientBorder__VRSd3 */
----motion-Lp4ComingSoon_rotateGradientAngle__u03ro: @keyframes Lp4ComingSoon_rotateGradientAngle__u03ro {
0% { --gradient-angle:… <0.3KB elided>; /* @keyframes Lp4ComingSoon_rotateGradientAngle__u03ro */
----motion-Lp4BrainSection_audioBar__nWZ_C: @keyframes Lp4BrainSection_audioBar__nWZ_C {
0%, 100% { opacity: 0.7; transfo… <0.2KB elided>; /* @keyframes Lp4BrainSection_audioBar__nWZ_C */
----motion-GradientPill_rotatingGradientBorder__Dp7_X: @keyframes GradientPill_rotatingGradientBorder__Dp7_X {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(1turn); }
}; /* @keyframes GradientPill_rotatingGradientBorder__Dp7_X */
----motion-HomeHeroLongTitle_rainbowCtaRotatingBorder__6Vv3B: @keyframes HomeHeroLongTitle_rainbowCtaRotatingBorder__6Vv3B {
0% { transform: rotate(0deg); }
100% { transform: rotate(1turn); }
}; /* @keyframes HomeHeroLongTitle_rainbowCtaRotatingBorder__6Vv3B */
----motion-HomeHeroTabs0226_pulseRing__EOgbo: @keyframes HomeHeroTabs0226_pulseRing__EOgbo {
0% { box-shadow: rgba(128, 128, 128, 0.6) 0px 0px; opacity: 1; }
100% { box-shadow: rgba(128, 128, 128, 0) 0px 0px 0px 17px; opacity: 0; }
}; /* @keyframes HomeHeroTabs0226_pulseRing__EOgbo */
----motion-HomeHeroTabs0226_previewFadeIn__1HRTa: @keyframes HomeHeroTabs0226_previewFadeIn__1HRTa {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes HomeHeroTabs0226_previewFadeIn__1HRTa */
----motion-HomeHeroTabs0226_superAgentCardFadeIn__LILyr: @keyframes HomeHeroTabs0226_superAgentCardFadeIn__LILyr {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes HomeHeroTabs0226_superAgentCardFadeIn__LILyr */
----motion-CuHomeTeamsTab4o_borderPulse__aALOZ: @keyframes CuHomeTeamsTab4o_borderPulse__aALOZ {
0% { box-shadow: rgba(0, 145… <0.2KB elided>; /* @keyframes CuHomeTeamsTab4o_borderPulse__aALOZ */
----motion-CuHomeTeamsTab4o_checkBounce__dk_qu: @keyframes CuHomeTeamsTab4o_checkBounce__dk_qu {
0% { transform: scale(0) rotate(-180deg); }
50% { transform: scale(1.2) rotate(10deg); }
100% { transform: scale(1) rotate(0deg); }
}; /* @keyframes CuHomeTeamsTab4o_checkBounce__dk_qu */
----motion-CuHomeHero4_1_rainbow__ChMsu: @keyframes CuHomeHero4_1_rainbow__ChMsu {
0% { background-position: 0px center; }
100% { background-position: 200% center; }
}; /* @keyframes CuHomeHero4_1_rainbow__ChMsu */
----motion-HomeHero4o_rainbow__HqbOe: @keyframes HomeHero4o_rainbow__HqbOe {
0% { background-position: 0px center; }
100% { background-position: 200% center; }
}; /* @keyframes HomeHero4o_rainbow__HqbOe */
----motion-HomeHero4o_rainbowCtaRotatingBorder__ZRkHK: @keyframes HomeHero4o_rainbowCtaRotatingBorder__ZRkHK {
0% { transform: rotate(0deg); }
100% { transform: rotate(1turn); }
}; /* @keyframes HomeHero4o_rainbowCtaRotatingBorder__ZRkHK */
----motion-HomeHero4o_borderPulse__qF2ma: @keyframes HomeHero4o_borderPulse__qF2ma {
0% { box-shadow: rgba(0, 145, 255,… <0.2KB elided>; /* @keyframes HomeHero4o_borderPulse__qF2ma */
----motion-HomeHero4o_checkBounce__u2eaj: @keyframes HomeHero4o_checkBounce__u2eaj {
0% { transform: scale(0) rotate(-180deg); }
50% { transform: scale(1.2) rotate(10deg); }
100% { transform: scale(1) rotate(0deg); }
}; /* @keyframes HomeHero4o_checkBounce__u2eaj */
----motion-HomeHero4o_pulseRing__ctI77: @keyframes HomeHero4o_pulseRing__ctI77 {
0% { box-shadow: rgba(128, 128, 128, 0.6) 0px 0px; opacity: 1; }
100% { box-shadow: rgba(128, 128, 128, 0) 0px 0px 0px 17px; opacity: 0; }
}; /* @keyframes HomeHero4o_pulseRing__ctI77 */
----motion-HomeHero4o_crossFade__SZVBk: @keyframes HomeHero4o_crossFade__SZVBk {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes HomeHero4o_crossFade__SZVBk */
----motion-HomeHero4o_shimmer1__rcAXE: @keyframes HomeHero4o_shimmer1__rcAXE {
0% { background-position: 100% center; }
40% { background-position: 0px center; }
100% { background-position: 0px center; }
}; /* @keyframes HomeHero4o_shimmer1__rcAXE */
----motion-HomeHero4o_shimmer2__G6Fni: @keyframes HomeHero4o_shimmer2__G6Fni {
0% { background-position: 100% center… <0.2KB elided>; /* @keyframes HomeHero4o_shimmer2__G6Fni */
--duration-fast: 0.1s; /* 2 elements — e.g. button, button /* mined from computed styles */ */
--duration-base: 0.2s; /* 66 elements — e.g. button, button, button /* mined from computed styles */ */
--duration-slow: 0.25s; /* 17 elements — e.g. button, button, button /* mined from computed styles */ */
--ease-default: ease; /* 158 elements — e.g. button, button, button /* mined from computed styles */ */
```
## Appendix B: Token Source Metadata
```yaml
tokenSource: extracted-css-vars
site: clickup.com
extractionDate: 2024
confidence: high
totalCSSVarsFound: 304
curatedTokensMapped: 49
curatedPrefix: "--clickup-"
fonts:
- family: "Plus Jakarta Sans"
weights: "200-800 (variable)"
style: "normal, italic"
usage: "Headings (h1-h3), default font-family"
source: "/assets/fonts/PlusJakartaSans-VariableFont_wght.woff2"
- family: "Inter"
weights: "100-900 (variable)"
style: "normal, italic"
usage: "Body, UI, buttons, nav"
source: "/assets/fonts/Inter.woff2"
- family: "Shantell Sans"
weights: "300-800 (variable)"
usage: "Decorative/handwritten accents only"
source: "/assets/fonts/ShantellSans-VariableFont.woff2"
- family: "Sometype Mono"
weights: "400-700 (variable)"
usage: "Chip labels, monospace UI elements, uppercase labels"
source: "/assets/fonts/SometypeMono-VariableFont.woff2"
namingStrategy: |
Original CSS custom property names preserved exactly (e.g. --Core-Text-Main,
--color-v3-purple, --border-radius-sm).
Curated aliases use --clickup-* prefix for the 49 mapped semantic tokens.
Two reconstructed gradient tokens created from computed h1/h2 backgroundImage:
--gradient-h1-bg and --gradient-h2-bg (confidence: high, 2 matching elements).
colorNotes: |
173 colour tokens extracted. 49 mapped to semantic roles.
RGB channel format (e.g. "255,255,255") requires rgba() wrapper in usage.
Resolved hex values exist in the --Core-* namespace.
Gradient tokens reference RGB channel variables via rgba(var(--color-v3-*)).
spacingNotes: |
Dual scale system: --spacing-N (10px increments, 1-15) + --size-N (rem scale).
13 off-grid values found in extraction — not recommended for new components.
Standardised to 7 curated tokens (--clickup-space-xs through -3xl).
Section spacing: 150px desktop, 60px mobile.
radiusNotes: |
14 distinct radius values extracted.
Brand confirmation: computed button radius = 54px (pill).
Computed input radius = 50px (pill).
--border-radius-xxs: 4px found only on cookie/consent banners — not brand UI.
All interactive controls use --border-radius-sm (15px) minimum.
detectedLibraries:
- Bootstrap (utility classes detected)
- Next.js (routing/SSR framework)
- Radix UI (accordion, dropdown primitives — --radix-accordion-content-height var found)
versionNotes: |
Site uses versioned component classes (v3, v4, v5 prefixes).
--color-v3-* tokens are the active brand colour primitives.
--color-v4-text-secondary found (180,180,180) — used in dark sections.
Some components have both v3 and v4 implementations running simultaneously.
```More from the gallery
Browse all kits →You may also like
atlassian.com
MITEnterprise design system for Atlassian's marketing site, featuring bold brand colours, custom typography, and structured spacing tokens built for large-scale SaaS platforms
Layout06
boldsaaslanding-pagelight
github.com
MITGitHub's production design system with 568 CSS custom properties, featuring clean typography, accessible colour tokens, and motion primitives built for developer platforms and collaborative workflows
Layout04
darkdeveloper-toolsaas
Customer.io
MITDark SaaS design system with mint-green accents and clean typography, built for product dashboards and developer-focused platforms
Layout011
darksaasdeveloper-tooldashboard