---
version: alpha
name: ClickUp
description: Dark-canvas productivity platform with a near-black charcoal system, electric violet-to-rainbow gradient signature, Plus Jakarta Sans at tight negative tracking, and layered multi-stop conic gradients as the defining brand energy.

colors:
  # Canvas
  background: "#ffffff"
  surface: "#1a1a1a"
  surface-elevated: "#292d34"
  surface-subtle: "#f0f0f0"

  # Text / ink
  ink: "#202020"
  ink-muted: "#646464"
  ink-on-dark: "#ffffff"
  on-background: "#202020"
  on-surface: "#ffffff"

  # Brand
  primary: "#7612fa"
  on-primary: "#ffffff"
  primary-container: "#edf6fd"
  primary-text: "#0091ff"

  # Rainbow gradient stops (used in hero conic gradients)
  grad-blue: "#0091ff"
  grad-violet: "#6647f0"
  grad-magenta: "#ff02f0"
  grad-orange: "#f76808"

  # Semantic
  success: "#22c55e"
  warning: "#f59e0b"
  error: "#ef4444"
  info: "#0091ff"

  # Border & neutrals
  border: "#e9ebf0"
  border-subtle: "#dedede"
  border-dark: "#383838"

  # Shadow tints (opaque approximations)
  shadow-soft: "#d9d9d9"  # was rgba(0, 0, 0, 0.10) — Google format requires hex
  shadow-dark: "#0d1530"  # was rgba(13, 21, 48, 0.04) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Plus Jakarta Sans, -apple-system, Roboto, Helvetica, sans-serif"
    fontSize: 76px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -3.04px
  display:
    fontFamily: "Plus Jakarta Sans, -apple-system, Roboto, Helvetica, sans-serif"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -2.1px
  heading-section:
    fontFamily: "Plus Jakarta Sans, -apple-system, Roboto, Helvetica, sans-serif"
    fontSize: 48px
    fontWeight: 650
    lineHeight: 1.25
    letterSpacing: -1.68px
  heading-sub:
    fontFamily: "Plus Jakarta Sans, -apple-system, Roboto, Helvetica, sans-serif"
    fontSize: 40px
    fontWeight: 650
    lineHeight: 1.18
    letterSpacing: -1.6px
  heading-3:
    fontFamily: "Plus Jakarta Sans, -apple-system, Roboto, Helvetica, sans-serif"
    fontSize: 26px
    fontWeight: 650
    lineHeight: 1.25
    letterSpacing: -0.91px
  body-large:
    fontFamily: "Inter, -apple-system, Roboto, Helvetica, sans-serif"
    fontSize: 19px
    fontWeight: 500
    lineHeight: 1.37
    letterSpacing: -0.36px
  body:
    fontFamily: "Inter, -apple-system, Roboto, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: -0.36px
  body-ui:
    fontFamily: "Plus Jakarta Sans, -apple-system, Roboto, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -0.25px
  button-ui:
    fontFamily: "Plus Jakarta Sans, -apple-system, Roboto, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 650
    lineHeight: 1.0
    letterSpacing: 0px
  button-small:
    fontFamily: "Plus Jakarta Sans, -apple-system, Roboto, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.144px
  mono-display:
    fontFamily: "Sometype Mono, ui-monospace, Menlo, monospace"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, -apple-system, Roboto, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 56px
  5xl: 80px

rounded:
  none: 0px
  sm: 8px
  md: 12px
  lg: 14px
  xl: 16px
  2xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 14px 20px
  button-primary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-on-dark}"
    rounded: "{rounded.lg}"
    padding: 14px 20px
  button-secondary:
    backgroundColor: "{colors.surface-subtle}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 14px 20px
  button-secondary-hover:
    backgroundColor: "{colors.border}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 14px 20px
  button-ghost:
    backgroundColor: "{colors.surface-subtle}"
    textColor: "{colors.ink}"
    typography: "{typography.button-small}"
    rounded: "{rounded.pill}"
    padding: 5px 14px
  button-chip:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-text}"
    typography: "{typography.button-small}"
    rounded: "{rounded.xl}"
    padding: 4px 12px
  button-small:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.button-small}"
    rounded: "{rounded.sm}"
    padding: 8px 12px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-dark:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-on-dark}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-feature:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 20px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 12px 16px

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-text}"
    typography: "{typography.caption}"
    rounded: "{rounded.xl}"
    padding: 4px 12px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-ui}"
    padding: 12px 24px
---

# ClickUp Design System

## Overview

ClickUp reads as a product built on controlled tension: a blindingly white marketing canvas with near-black charcoal text (`{colors.ink}`) that snaps into sharp relief, punctuated by one of the most energetic gradient systems in the PM software category. The hero anchor is Plus Jakarta Sans at 76px, tracking -3.04px — tight enough that letters nearly touch, converting dense platform copy like "Software to replace all software" into a single assertive visual block. No softness, no editorial restraint. ClickUp wants to be seen.

The signature visual element is the conic gradient — a full 360-degree color sweep cycling through electric blue (`{colors.grad-blue}`), deep violet (`{colors.grad-violet}`), hot magenta (`{colors.grad-magenta}`), and burnt orange (`{colors.grad-orange}`) — used as rotating border animations on the hero eyebrow chip and as halos around feature icons. It signals "everything in one place" visually, matching the product's "all-in-one" positioning. Away from that spectacle, the system settles into a surprisingly restrained charcoal-on-white mode: dark buttons (`{colors.surface-elevated}` filling, `{colors.ink-on-dark}` labels), 12–14px card radius, and Inter for all body text. The contrast between the gradient theater and the functional UI is deliberate — the homepage sells the energy, the product delivers the control.

The type stack splits into three clear voices: Plus Jakarta Sans for display and headings (boldness, weight 700–800), Inter for body copy and UI prose (neutrality, legibility), and Sometype Mono for decorative number callouts and ticker-style feature labels. The mono face adds a product-UI-inside-marketing feel, grounding the marketing language in something that looks like actual software output.

**Key Characteristics:**
- Near-white canvas (`{colors.background}`) with `{colors.ink}` text — near-achromatic base, brand energy delivered by gradient
- Plus Jakarta Sans at weight 700–800, -3.04px tracking at hero scale — the tightest headline tracking in the productivity-tool category
- Conic gradient cycling `{colors.grad-blue}` → `{colors.grad-violet}` → `{colors.grad-magenta}` → `{colors.grad-orange}` — the brand's signature pattern
- Dark charcoal buttons (`{colors.surface-elevated}`) as the primary CTA shape — not `{colors.primary}` purple, which appears only in small UI accents
- `{colors.primary}` (`#7612fa`) reserved for UI chrome highlights and the brand mark, not button fills
- Sometype Mono at 40px for display stat callouts — a visual signal of "data" and "output" in marketing context
- 12px base border-radius on most cards and buttons — rounded but not soft; geometric rather than friendly
- Three-speed motion: 0.2s micro, 0.25–0.3s component, 0.45s section — all on `cubic-bezier(0.33, 1, 0.68, 1)` ease-out-quart
- Spring easing (`cubic-bezier(0.68, -0.55, 0.265, 1.55)`) on interactive state transitions — slight overshoot adds tactile feedback
- Inter weight 400–500 for body — readable, neutral, avoids competing with the headline drama

## Colors

### Primary Canvas
- **White** (`{colors.background}`): Page background, card surfaces, nav fill.
- **Charcoal** (`{colors.ink}`): Primary text — near-black at #202020, not pure black.
- **Subtle Gray** (`{colors.surface-subtle}`): Secondary panel backgrounds, ghost button fills.

### Dark Surfaces
- **Surface** (`{colors.surface}`): Dark card fill and dark-mode feature panels (~#1a1a1a).
- **Surface Elevated** (`{colors.surface-elevated}`): Primary button fill — a slightly lighter charcoal (#292d34) against the dark card.

### Brand Accent
- **Violet** (`{colors.primary}`): The ClickUp brand purple. Used in the logomark, small UI accent highlights, and gradient start points — never as a fill color on large surfaces.
- **Blue** (`{colors.primary-text}`): Electric sky blue, the secondary accent; used in feature chips, text links on dark surfaces, and gradient sequences.

### Gradient Spectrum
- **Blue** (`{colors.grad-blue}`): Gradient anchor start — energetic, techy.
- **Violet** (`{colors.grad-violet}`): Bridges blue to magenta in conic sequences.
- **Magenta** (`{colors.grad-magenta}`): Hot pink endpoint — the most vibrant stop.
- **Orange** (`{colors.grad-orange}`): Warm gradient terminator — grounds the rainbow in warmth.

### Semantic
- **Success** (`{colors.success}`): Green check states, positive confirmations.
- **Warning** (`{colors.warning}`): Amber — deadline alerts, cautions.
- **Error** (`{colors.error}`): Red — destructive actions, error states.
- **Info** (`{colors.info}`): Blue — consistent with `{colors.primary-text}`.

### Borders & Dividers
- **Border** (`{colors.border}`): Default card and section separator — cool light gray.
- **Border Subtle** (`{colors.border-subtle}`): Softer internal dividers.
- **Border Dark** (`{colors.border-dark}`): Used on dark-surface card edges.

## Typography

### Font Families
- **Primary Display**: `Plus Jakarta Sans` — a geometric sans with optical tightness at large scale. The variable weight axis runs from 400 to 800; ClickUp uses 650–800 for headings and 400–500 for UI labels.
- **Body / UI Prose**: `Inter` — system-neutral, optimized for screen. Used across all paragraph text, captions, and UI descriptions.
- **Monospace Display**: `Sometype Mono` — deployed exclusively at large scale (40px) for number callouts, product stat blocks, and ticker-style feature labels.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference each role via tokens.

| Token | Use |
|---|---|
| `display-hero` | Hero headline — 76px, -3.04px tracking, weight 700 |
| `display` | Section hero headlines — 60px |
| `heading-section` | Major section titles — 48px |
| `heading-sub` | Feature group headings — 40px |
| `heading-3` | Card and column titles — 26px |
| `body-large` | Lead paragraph and callout text |
| `body` | Standard reading copy (Inter) |
| `body-ui` | UI labels, nav items, caption-tier headings |
| `button-ui` | Primary CTA label — 18px, weight 650 |
| `button-small` | Small buttons and chip labels |
| `mono-display` | Sometype Mono stat callouts — 40px |
| `caption` | Fine print, metadata, badge labels |

### Principles
- **Tighten as you scale.** Tracking compresses from -3.04px at 76px down to 0px at 18px — the larger the type, the tighter the tracking. Never apply negative tracking to body text.
- **Plus Jakarta Sans owns all display.** Inter never appears above 20px — it handles body and UI prose only. The families never cross over.
- **Weight maps to intent.** 700–800 = headline authority; 650 = sub-section emphasis; 500 = body emphasis; 400 = quiet utility.
- **Mono marks data.** Sometype Mono at large scale signals product output, making feature stats feel extracted from the actual app.
- **No italic.** The display stack is upright-only on the marketing site.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Built on an 8px base unit with an extended section-level scale up to 80px.

The page feels dense at the element level — `{spacing.md}` to `{spacing.lg}` between inline elements — but breathes at section level, with 56–80px vertical gaps separating major content clusters. This creates the sensation of a packed product with organized information architecture.

### Grid & Container
- Max content width: ~1400px
- Hero layout: centered stack — headline + subhead + primary CTA, then full-width product UI screenshot
- Feature sections: 2-up and 3-up card grids, switching to single-column below 768px
- Navigation: top sticky, 56px height; left logo, center nav links, right CTA
- Notable pattern: alternating section backgrounds (white → dark charcoal panel) to create visual rhythm without section borders

### Whitespace Philosophy
- Compact at element level, generous at section level — the tightness is a deliberate reflection of the product's density.
- Internal card padding: 20–24px; section margins: 48–80px.
- Button padding stays generous (`14px 20px` on primary) even at compact nav size.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default white page sections |
| Soft (Level 1) | `rgba(0, 0, 0, 0.10)` `0px 1px 3px 0px` + `0px 1px 2px -1px` | Cards, small UI containers |
| Medium (Level 2) | `rgba(13, 21, 48, 0.04)` `0px 4px 4px 0px` | Feature card lift, button lift |
| Layered (Level 3) | Blue-tinted 4-stop spread: `1px / 3px / 6px / 12px` | Deep feature panels |
| Dark Inset | `rgba(255, 255, 255, 0.08)` `-32px 64px inset` | Gloss sheen inside dark surface cards |
| Focus Ring | `{colors.primary}` 2px solid outline | Interactive focus state |

**Shadow Philosophy**: ClickUp's shadow system is intentionally light — the real depth signal comes from alternating surface colors (white sections vs. charcoal panels) rather than shadow layering. Card shadows use a cool blue-tinted base (`rgba(18, 43, 165, 0.04)`), ensuring lifted elements read as belonging to the same slightly cold color world as the product UI. The dark-surface cards use an inset gloss treatment rather than an outer shadow.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Sharp section backgrounds, dividers |
| `sm` | 8px | Small buttons, tight UI chips |
| `md` | 12px | Standard cards, secondary buttons |
| `lg` | 14px | Primary CTA buttons |
| `xl` | 16px | Feature cards, info chips |
| `2xl` | 24px | Large containers, modal panels |
| `pill` | 9999px | Eyebrow labels, tag chips, pill CTAs |

ClickUp's radius system is mid-range — not pill-heavy, not angular. The 12–14px range dominates, giving components a rounded-but-businesslike feel. Pills are reserved for small eyebrow tags and feature category chips, never for primary action buttons, which stay at the more structured `{rounded.lg}`.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing values.

### Button Variants
- **`button-primary`** — Charcoal fill (`{colors.surface-elevated}`), white label, 14px radius. The dominant CTA. Intentionally avoids the brand purple — charcoal reads as confident utility, not brand showboating.
- **`button-secondary`** — Light gray fill (`{colors.surface-subtle}`), dark label. Paired with primary on hero sections.
- **`button-ghost`** — Pill-shaped eyebrow tag style. Light gray fill, dark label, `{rounded.pill}` — used for "Introducing ClickUp 3.0" announcement chips.
- **`button-chip`** — Feature category selector. Blue-tinted container (`{colors.primary-container}`), blue text (`{colors.primary-text}`). 16px radius, compact padding.
- **`button-small`** — Dark fill at 8px radius, 14px label — secondary action in feature sections.

### Cards
- **`card`** — White surface, 14px radius, `{spacing.xl}` padding. Standard feature card with border.
- **`card-dark`** — Charcoal surface (`{colors.surface}`), white text. Dark alternating-section containers. Often uses the inset gloss shadow.
- **`card-feature`** — Compact 12px radius, 20px padding. Lighter card chrome for nested product UI screenshots.

### Inputs
- **`input`** — White surface, gray border, 12px radius. Placeholder in `{colors.ink-muted}`.
- **`input-focus`** — Same shape; border color shifts to `{colors.primary}` on focus.

### Badges / Tags
- **`badge`** — Blue-tinted container, blue text, `{rounded.xl}` radius. Compact 4px × 12px padding. Used for feature labels and category chips.

### Navigation
- **`nav-bar`** — White sticky header. Logo left, five main nav items center, "Log in" + "Get a Demo" + "Sign Up" right. `{typography.body-ui}` for nav labels. Transparent-to-white on scroll.

## Do's and Don'ts

### Do
- Use Plus Jakarta Sans weight 700+ with negative letter-spacing for all headlines — the tightness is ClickUp's visual signature.
- Apply the conic gradient (`{colors.grad-blue}` → `{colors.grad-violet}` → `{colors.grad-magenta}` → `{colors.grad-orange}`) only as an accent: rotating border animations, icon halos, eyebrow chip decorations. Never as a background fill on large sections.
- Fill primary CTAs with `{colors.surface-elevated}` (charcoal) — the dark button is the system's workhorse CTA, not the brand purple.
- Reserve `{colors.primary}` (violet) for the logomark, small UI accents, and gradient anchor points only.
- Use Inter for all body copy and UI prose — it stays neutral and lets the display font carry the personality.
- Use Sometype Mono only at 40px+ for stat callouts — at smaller sizes it reads as code, not brand texture.
- Alternate section backgrounds (white → charcoal dark panel) to create page rhythm without adding borders or shadows.
- Apply spring easing (`cubic-bezier(0.68, -0.55, 0.265, 1.55)`) for interactive state transitions — the overshoot creates the tactile, snappy feel that matches ClickUp's energetic persona.

### Don't
- Don't use `{colors.primary}` (violet) as a button fill — it reads as a standard purple SaaS button and loses the charcoal-authority statement.
- Don't apply the conic gradient as a full section background — it overwhelms the content; confine it to 2–4px borders and icon-sized halos.
- Don't mix Sometype Mono into body text — it signals "data output," not reading, and breaks prose rhythm.
- Don't use positive letter-spacing on Plus Jakarta Sans at display scale — every headline uses negative tracking; positive tracking makes the face look cheap and unintentional.
- Don't introduce mid-range border-radius (30–50px) on content cards — the system is built around 12–16px geometry; large radii belong only on pill chips.
- Don't apply box shadows to dark-surface cards — the dark background already provides depth contrast; shadows on dark cards create muddy visual noise.
- Don't use `{colors.ink-muted}` (#646464) for any text smaller than 14px — the contrast ratio against white is insufficient for body-scale reading.
- Don't use light-colored buttons on dark-surface sections unless the section background is truly dark — the light-on-gray combination loses the intended inversion contrast.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile XS | <400px | Single column, hero font drops to ~40px, nav collapses |
| Mobile | 400–640px | Single column, hero font ~48px, buttons stack |
| Tablet | 640–960px | 2-column grid; hero font ~60px |
| Desktop | 960–1200px | 3-column grids appear; section padding expands |
| Large Desktop | 1200–1440px+ | Full multi-column layout; max-width ~1400px applied |

### Touch Targets
- Primary buttons at `14px 20px` padding reach 46px+ height — meets 44px minimum.
- Feature chip buttons are smaller (4px × 12px) — rely on 8px row gaps for thumb separation.
- Nav collapse to hamburger below 768px.

### Collapsing Strategy
- Hero display text scales: 76px → 60px → 48px → ~40px across breakpoints, maintaining negative tracking at each step.
- 3-column feature grids collapse to 2-up at tablet, single column on mobile.
- Dark-panel alternating sections maintain full-bleed at all widths.
- Conic gradient border animations reduce complexity on mobile (simpler gradient, slower animation) to preserve performance.

### Image Behavior
- Product UI screenshots scale with their container; nested frame radii (outer/inner) maintained proportionally.
- Hero screenshots clip to viewport width on mobile; horizontal scroll is not enabled.

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#ffffff)
- Text: `{colors.ink}` (#202020)
- Muted text: `{colors.ink-muted}` (#646464)
- Primary CTA fill: `{colors.surface-elevated}` (#292d34)
- CTA label: `{colors.ink-on-dark}` (#ffffff)
- Brand accent (violet): `{colors.primary}` (#7612fa)
- Feature chip blue: `{colors.primary-text}` (#0091ff)
- Card border: `{colors.border}` (#e9ebf0)
- Dark panel surface: `{colors.surface}` (#1a1a1a)

### Example Component Prompts

1. **Hero Section**: White background, max-width 1400px. Eyebrow pill chip (`{colors.surface-subtle}` fill, `{rounded.pill}`, 5px 14px padding, `{typography.button-small}`, rotating conic-gradient 2px border). Headline Plus Jakarta Sans 76px weight 700 `{colors.ink}` letter-spacing -3.04px line-height 1.05, max-width 680px. Subhead Inter 18px weight 400 `{colors.ink-muted}`, 16px below. Primary CTA: `{components.button-primary}` label "Get started. It's FREE!" — charcoal fill, white label, 14px radius. Secondary CTA: `{components.button-secondary}` — light gray fill, dark label, same radius.

2. **Dark Feature Panel**: Full-width section, background `{colors.surface}` (#1a1a1a). Heading Plus Jakarta Sans 48px weight 700 `{colors.ink-on-dark}` letter-spacing -1.68px. 3-column grid of `{components.card-dark}` cards (12px radius, 24px padding). Each card has an icon with a conic-gradient halo (8px diameter dot, 2px radial gradient glow). Card text Inter 16px weight 400 `{colors.ink-on-dark}`.

3. **Feature Chip Tab Row**: Horizontal row of `{components.button-chip}` tabs. Active chip: `{colors.primary-container}` background, `{colors.primary-text}` text, 16px radius. Inactive: `{colors.surface-subtle}` background, `{colors.ink-muted}` text. Gap: 8px. `{typography.button-small}` — Plus Jakarta Sans 14px weight 600. Animate tab transitions with `cubic-bezier(0.33, 1, 0.68, 1)` 0.25s.

4. **Stat / Number Callout Block**: Use `{typography.mono-display}` — Sometype Mono 40px weight 500, `{colors.ink}`. Pair with Inter 16px weight 400 `{colors.ink-muted}` descriptor beneath. Stack in 3–4 column grid. No card chrome — the contrast between the mono face and the sans descriptor is the visual element.

5. **Navigation Bar**: Sticky white header, 56px height. Left: ClickUp logomark (violet `{colors.primary}` wordmark). Center: five nav items `{typography.body-ui}` `{colors.ink}` with hover state shifting to `{colors.primary-text}`. Right: "Log in" text link `{colors.ink-muted}` + "Get a Demo" `{components.button-secondary}` 8px radius + "Sign Up" `{components.button-primary}` 14px radius. Backdrop-filter blur on scroll-triggered semi-transparent variant.

### Iteration Guide

1. **Start with the charcoal CTA.** Every layout with a call-to-action uses `{colors.surface-elevated}` fill — never blue or purple for primary buttons.
2. **Add gradient as accent, not fill.** Use the conic gradient only as a 2–4px animated border on small elements. If it appears on a large surface, reduce opacity to 10–20%.
3. **Apply tight tracking at scale.** Every headline above 32px needs negative letter-spacing — at least -1px. Check that Plus Jakarta Sans never appears with positive tracking at display sizes.
4. **Alternate light/dark sections for rhythm.** The page should alternate: white section → charcoal panel → white section. No same-color consecutive sections above the fold.
5. **Inter for reading, Jakarta for authority.** If a text element needs to read easily, use Inter. If it needs to command attention, use Plus Jakarta Sans. Never mix within a single paragraph.
6. **Mono for numbers only.** If you're writing a statistic or product output number, Sometype Mono at large scale. All other numeric text uses Plus Jakarta Sans or Inter.
7. **Reserve violet (`{colors.primary}`) for the logo and micro-accents.** The brand color is secondary to the charcoal/white system on the marketing site. Violet on large surfaces breaks the system.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by ClickUp. Brand names and trademarks belong to their respective owners.