ClickUp Design System

Overview

ClickUp's visual identity is built on a foundation of cool-toned minimalism — a light gray-blue canvas ({colors.canvas}) that feels both professional and approachable, paired with near-black ink ({colors.ink}) for maximum readability. The design philosophy balances editorial spaciousness in its marketing surfaces with the dense information architecture expected of a productivity tool's interface preview.

Brand voltage concentrates strategically: the primary action color {colors.primary} is an almost-black navy that reads as authoritative rather than playful, reserved almost exclusively for conversion-driving buttons like {component.button-primary} and {component.button-signup-nav}. A signature violet accent ({colors.accent}) provides the only chromatic energy — appearing in active sidebar states, status badges, and interactive highlights — preventing the palette from feeling sterile while maintaining enterprise credibility.

The single typographic move defining this system is Plus Jakarta Sans at weight 650 for every headline level. Not 700 (too blunt), not 600 (too gentle) — 650 occupies a sweet spot of confident assertiveness without aggression. This variable font carries display text from 48px hero statements down to 26px section headers, always with aggressive negative letter-spacing that tightens the letterforms into compact, modern blocks. Body text delegates to Inter at a restrained 12px, creating a dramatic size differential (4:1 ratio between display and body) that forces clear hierarchy through scale alone.

Shape language favors the practical: {rounded.pill} (54px radius) for all call-to-action buttons creates friendly, tappable targets; {rounded.DEFAULT} (8px) for cards and inputs; {rounded.circle} for avatars and status indicators. The product preview surface introduces a darker dialect — {colors.surface-darker} sidebars and {colors.surface-dark} app chrome — signaling the shift from marketing promise to tool reality.

Key Characteristics:

• Canvas is a cool gray-blue {colors.canvas} (#e9ebf0), never pure white, creating a softened atmospheric base
• Headlines use {typography.title-md} (Plus Jakarta Sans, 48px, weight 650) with -1.68px letter-spacing for tight, impactful display text
• Primary CTA buttons ({component.button-primary}) use near-black {colors.primary} (#090c1d) on pill-shaped containers with white text
• Body text ({typography.body-md}) is Inter at 12px — notably small, trusting the user's familiarity with SaaS density
• Signature violet {colors.accent} (#7b68ee) marks active states, status badges, and brand moments
• Product preview cards ({component.product-preview-card}) use white {colors.surface-soft} backgrounds with {rounded.lg} (14px) corners and {shadows.md} elevation
• Sidebar navigation ({component.sidebar-nav}) uses 12px Inter with generous 16px horizontal padding per item
• Status and label pills employ a pastel background + dark foreground pattern (e.g., {component.label-pill-backend})
• The system supports two visual dialects: marketing-light (canvas + white cards) and app-preview-dark (near-black surfaces)

Colors

Brand & Accent

• Primary ({colors.primary} — #090c1d): Near-black navy used exclusively for high-conversion buttons — the main hero CTA ({component.button-primary}), Sign Up in nav ({component.button-signup-nav}), and any action demanding maximum visual weight.
• Primary Hover ({colors.primary-hover} — #151a33): Lightened slightly for interactive feedback on primary buttons; maintains authority while signaling responsiveness.
• Accent ({colors.accent} — #7b68ee): Medium-violet serving as the sole chromatic brand color — active sidebar item background tint ({component.sidebar-item-active}), "OPEN" status badges ({component.status-badge-open}), and floating action buttons ({component.floating-action-button}).
• Accent Soft ({colors.accent-soft} — #e2e4ff): Lavender-tinted white used as background wash behind active nav states and accent-colored elements requiring a subtle field.

Surface

• Canvas ({colors.canvas} — #e9ebf0): Cool gray-blue forming the page background across all marketing surfaces — the body-level backdrop that sits behind {component.hero-band}, {component.footer-band}, and interstitial space.
• Surface Soft ({colors.surface-soft} — #ffffff): Pure white used for elevated content containers — the {component.product-preview-card}, {component.hero-tagline} pill, {component.app-header-bar}, and {component.sidebar-nav} panel.
• Surface Strong ({colors.surface-strong} — #e8e8e8): Medium-gray used for borders, table row hover states ({component.table-row-hover}), disabled-looking backgrounds, and the {component.label-pill} default state.
• Surface Elevated ({colors.surface-elevated} — #eeeeee): Light gray for subtly raised elements — input backgrounds, divider lines, and secondary container fills.
• Surface Dark ({colors.surface-dark} — #202020): Dark charcoal used in the product preview's app chrome — header bars, dropdown backgrounds, and modal-like surfaces within the mockup.
• Surface Darker ({colors.surface-darker} — #191919): Near-black used for the leftmost sidebar rail ({component.sidebar-rail-dark}) in the app preview, creating maximum contrast for icon-only navigation.

Text

• Ink ({colors.ink} — #292d34): Dark gray-blue, the primary text color for headings, navigation items, and high-emphasis body copy — used in {component.hero-headline}, {component.nav-item}, and {component.table-row}.
• Body ({colors.body} — #646464): Medium gray for standard body text, descriptions, and secondary marketing copy — the {component.hero-subheadline} supporting text and {component.nav-cta-demo} label.
• Muted ({colors.muted} — #838383): Softer gray for truly secondary information — table headers ({component.table-header}), placeholder text, and metadata.
• Muted Soft ({colors.muted-soft} — #8a8a94): Lightest usable gray, approaching the threshold of readability — "Add task" placeholder rows ({component.task-add-row}) and disabled hints.
• Near Black ({colors.near-black} — #202020): Used specifically for the hero headline ({component.hero-headline}) to achieve deeper contrast than {colors.ink} against the light canvas.
• Pure Black ({colors.pure-black} — #000000): Reserved for navigation text ({component.top-nav}) and the absolute highest-contrast requirements.
• On Primary ({colors.on-primary} — #ffffff): White text on {colors.primary} buttons — mandatory for AA contrast compliance.
• On Dark ({colors.on-dark} — #ffffff): White text on dark surfaces ({colors.surface-darker}, {colors.surface-dark}) within the product preview.

Hairlines & Borders

• Hairline ({colors.hairline} — #e8e8e8): Default border color matching {colors.surface-strong} — card outlines, input borders, and dividers.
• Hairline Soft ({colors.hairline-soft} — #eeeeee): Barely-visible separators for subtle delineation — inner panel borders and faint rules.
• Border Strong ({colors.border-strong} — #d0d0d0): Visible gray for emphasized boundaries — focused input rings and container edges needing clearer definition.

Semantic

• Error ({colors.error} — #dc2626): Red for validation failures and destructive actions (not visible in screenshot but standardly defined).
• Success ({colors.success} — #059669): Green for confirmations and completed states.
• Warning ({colors.warning} — #d97706): Amber for caution states and pending alerts.
• Info ({colors.info} — #2563eb): Blue for informational notices.
• Link ({colors.link} — #292d34): Matches {colors.ink} — links in this system don't deviate color-wise from body text, relying on underline or hover state instead.
• Link Active ({colors.link-active} — #090c1d): Darkens to primary on interaction.

Signature / Brand-specific (UI Status Colors)

• Status Open ({colors.status-open} — #7b68ee): Violet badge background for "OPEN" tasks in the list view ({component.status-badge-open}).
• Status Progress ({colors.status-progress} — #3b82f6): Blue badge background for "IN PROGRESS" tasks ({component.status-badge-progress}).
• Label Backend ({colors.label-backend} — #dcfce7): Pale green pill background for "Backend" labels ({component.label-pill-backend}).
• Label API ({colors.label-api} — #fef3c7): Pale amber pill for "API" labels ({component.label-pill-api}).
• Label Data ({colors.label-data} — #fce7f3): Pale pink pill for "Data" labels ({component.label-pill-data}).
• Label Infra ({colors.label-infra} — #ede9fe): Pale violet pill for "Infra" labels ({component.label-pill-infra}).

Typography

Font Family

ClickUp employs a three-typeface stack, each role-defined:

1. Plus Jakarta Sans (variable weight 200–800): The exclusive headline and display face. A geometric humanist sans-serif with slightly rounded terminals that soften its technical precision. It carries all marketing-facing display text — the 48px hero statement ("Software to replace all software"), section headers, and the tagline pill. The variable font allows the specific 650 weight that defines the brand's typographic voice.

2. Inter (variable weight 100–900): The workhorse body face, deployed at 12px for virtually all UI text — navigation labels, sidebar items, table cells, form labels, button text, and supporting paragraphs. Its excellent screen rendering at small sizes and extensive Unicode coverage make it ideal for the dense information environments shown in the product preview. Inter also appears at 14px for slightly-emphasized body text and 16px in navigation.

3. Sometype Mono (variable weight 400–700): A monospaced face used for code adjacent content, technical labels (the "h4" style at 16px weight 500 in the type scale data), and any element requiring tabular alignment or developer-aesthetic signaling.

A fourth face, Shantell Sans (variable 300–800), is loaded in the font stack but not prominently visible in the above-fold screenshot — likely reserved for decorative or delight moments lower on the page.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 48px | 650 | 1.25 | -1.68px | Hero headline (alternate), major section openers | | {typography.display-lg} | 38px | 650 | 1.16 | -1.6px | H1 equivalent, primary hero headline | | {typography.display-md} | 26px | 650 | 1.25 | -0.91px | H2/H3 section headers | | {typography.title-md} | 48px | 650 | 1.25 | -1.68px | Hero headline ("Software to replace...") | | {typography.title-sm} | 20px | 600 | 1.4 | -0.02em | Card titles, subsection headers | | {typography.body-lg} | 14px | 400 | 1.5 | -0.02em | Hero subheadline, emphasized body | | {typography.body-md} | 12px | 400 | 1.5 | -0.12px | Standard body text, table cells, sidebar | | {typography.body-sm} | 11px | 400 | 1.45 | 0 | Captions, fine print, metadata | | {typography.caption} | 11px | 400 | 1.38 | 0 | Button labels in pills, timestamp text | | {typography.label} | 12px | 500 | 1.33 | 0.01em | Tagline pill, form labels, badges | | {typography.button} | 14px | 500 | 1.25 | 0 | CTA buttons, nav utility links | | {typography.button-nav} | 16px | 400 | 1.5 | 0 | Top navigation menu items | | {typography.mono} | 13px | 400 | 1.54 | 0 | Code snippets, technical annotations | | {typography.mono-label} | 16px | 500 | 1.25 | 0 | Technical subheadings (h4 style) |

Principles

The typography system trusts scale over weight to establish hierarchy. With body text at a compact 12px and display text reaching 48px, the 4:1 ratio ensures that even at identical weights, levels never confuse. Weight variation is deliberately constrained: body text stays at 400, buttons at 500, and everything display-related locks to 650 — there is no 700 (bold) in the system, which prevents the heavy-handedness common in SaaS marketing.

Negative letter-spacing is a signature move: every Plus Jakarta Sans headline carries between -0.91px and -1.68px of tracking reduction, tightening the letterforms into cohesive visual blocks. This treatment is most aggressive at the largest sizes (48px gets -1.68px), creating a custom-logotype feel without being a logo. Inter body text receives a subtle -0.12px at 12px, keeping small-screen text feeling refined rather than default-spaced.

The dual-size navigation is noteworthy: menu items ("Brain AI", "Product", etc.) render at 16px (larger than body), while utility links ("Get a Demo", "Login") drop to 14px. This size difference alone communicates structural importance without color or weight changes.

Color also participates in hierarchy: the hero headline uses {colors.near-black} (#202020) rather than the standard {colors.ink} (#292d34), buying roughly one extra step of contrast depth for the single most important text on the page.

Note on Font Substitutes

Plus Jakarta Sans is available on Google Fonts (https://fonts.google.com/specimen/Plus+Jakarta+Sans) as a variable font covering weights 200–800 — this matches ClickUp's loaded range exactly. For CSS variable definitions, use --font-display: 'Plus Jakarta Sans', -apple-system, Roboto, Helvetica, sans-serif.

Inter is available on Google Fonts (https://fonts.google.com/specimen/Inter) as a variable font covering weights 100–900 — again matching the site's loaded range. Define --font-body: 'Inter', -apple-system, sans-serif.

Sometype Mono is not on Google Fonts. Substitute with JetBrains Mono or Fira Code for the monospace role. Define --font-mono: 'Sometype Mono', 'JetBrains Mono', monospace.

If proprietary fonts cannot be loaded, the fallback stack degrades gracefully: Plus Jakarta Sans → system sans-serif (SF Pro / Segoe UI / Roboto); Inter → system sans-serif; Sometype Mono → any monospace.

Layout

Spacing System

• Base unit: 3px (the most frequent spacing value in extracted CSS at 1058 occurrences, used for tight internal gaps in icon-text pairs and inline elements).

• Tokens:

  • {spacing.xxs} (2px) — micro-gaps between icon and text in buttons
  • {spacing.xs} (3px) — base unit, icon-label gaps, checkbox spacing
  • {spacing.sm} (4px) — compact internal padding, badge horizontal padding
  • {spacing.md} (5px) — small element gaps, tag padding
  • {spacing.lg} (6px) — nav item vertical padding, input padding
  • {spacing.xl} (8px) — standard touch target padding, button internal padding, card gap
  • {spacing.2xl} (10px) — nav item horizontal padding, dense button padding
  • {spacing.3xl} (12px) — table cell padding, card internal padding
  • {spacing.4xl} (14px) — comfortable padding for medium elements
  • {spacing.5xl} (16px) — sidebar item horizontal padding, generous button padding
  • {spacing.6xl} (20px) — section-internal gaps, hero element spacing
  • {spacing.7xl} (24px) — card-to-card gaps, large internal padding
  • {spacing.section} (80px) — vertical padding for major bands (hero, features, footer)

• Section padding (vertical): {spacing.section} (80px) — applied to {component.hero-band}, {component.footer-band}, and likely all major content sections creating the airy rhythm between bands.

• Card internal padding: The {component.product-preview-card} has no explicit internal padding in YAML (it's 0 because the card contains the full app mockup with its own internal padding system). Standalone content cards would use {spacing.3xl} (12px) to {spacing.7xl} (24px) depending on density.

• Gutters: The main content container appears to use ~20px horizontal gutters (from the section selector showing padding: 0px 20px), with the central content column maxing around 820px for readable line lengths in text-heavy sections.

Grid & Container

• Max content width: The main and section containers report width: 1440px, indicating a wide viewport target (likely 1440px+ desktop). However, the header inner container narrows to 820px for text content, suggesting a two-tier grid system: full-bleed for product previews and imagery, constrained (820px) for editorial/hero text.

• Editorial vs. marketplace density: The hero section uses editorial density — generous whitespace, large type, single-column text. The product preview below shifts to marketplace/app density — multi-column layouts, tables, compact 12px text, information-rich surfaces. This dual-density approach is characteristic of SaaS landing pages promising both simplicity and power.

• Specific grid behaviors at desktop: The product preview shows a three-column layout within the card: left sidebar (~240px) for navigation, center area (flexible) for the main task list, and implied right rail for details. The task list itself uses a table-grid with columns for status indicator, task name, priority flag, assignee avatar, and labels.

• Hero column splits: The hero appears to use a single-column text block (centered or left-aligned within the 820px constraint) sitting above the full-width product preview card. There's no side-by-side text/image hero here — the visual hierarchy is vertical: headline first, then proof (the app preview).

Whitespace Philosophy

ClickUp employs asymmetric generosity with whitespace: marketing surfaces breathe freely (80px section padding, 48px type with -1.68px tracking, ample margins around the hero CTA cluster), while the product preview embraces productive density — 12px body text, tightly-packed table rows, multi-element toolbars. This duality signals "our product is simple to understand (airy marketing) but powerful enough to replace your tools (dense UI)."

Header Architecture

|--------------------------------------------------------------------------------|
|  [Logo]   Brain AI ▾  Product ▾  Solutions ▾  Learn ▾  Pricing  Enterprise  | Get a Demo  Login  [Sign Up] |
|--------------------------------------------------------------------------------|
            ↑ 820px constrained content area (text/nav)                         ↑ utilities flush-right

The top nav ({component.top-nav}) spans full-width at 72px height. Logo flushes left. Navigation items (with dropdown carets) follow with 10px horizontal padding each. Pricing and Enterprise appear as direct links without dropdowns. Right side holds three utilities in sequence: ghost "Get a Demo" button, ghost "Login" link, filled "Sign Up" primary button.

Hero Section

|--------------------------------------------------------------------------------|
|                                                                                |
|     [ The Best AI is 🧠 Brain² > ]          ← {component.hero-tagline} pill   |
|                                                                                |
|     Software to replace all software           ← {component.hero-headline}    |
|     Save time. Save money. Infinite            ← {component.hero-subheadline} |
|     productivity.                                                             |
|                                                                                |
|     [ Get started. It's FREE! ]  Free forever.   ← {component.button-primary} |
|                                   No credit card.                             |
|                                                                                |
|================================================================================|
|                                                                                |
|  | Projects  |  |← app preview card ({component.product-preview-card}) →|     |
|  | Chat      |  | [sidebar] [toolbar] [table] [FAB]                       |     |
|  | Brain MAX |  |                                                         |     |
|  | AI Agents |  |                                                         |     |
|  | ...       |  |                                                         |     |
|  |-----------|  |---------------------------------------------------------|     |
|                                                                                |

The hero band uses {colors.canvas} background. Content stacks vertically: tagline pill (white bg, rounded pill, small label type), then the massive headline in {typography.title-md}, then subheadline in {colors.body}, then CTA cluster (primary button + supporting microcopy). Below this, separated by breathing room, sits the full-width product preview card showing the actual application interface.

Product Preview Layout

The {component.product-preview-card} dominates the below-fold area with a white background, 14px radius, and medium shadow elevation. Inside:

• Left sidebar (~220-240px): White background, {component.sidebar-nav} containing vertically-stacked items (Projects, Chat, Brain MAX, AI Agents, Sprints, Time Tracking, Calendar, Docs, Whiteboards, Automations, Dashboards, Scheduling). "Projects" shows active state with {colors.accent-soft} background and violet text. Each item has 16px horizontal padding, 8px vertical.

• Icon rail (far left, ~48px): {colors.surface-darker} background with vertically-stacked icon buttons (Home, Spaces, Chat, AI, Apps) in white/icon color.

• Main content area: Contains app header bar ({component.app-header-bar}) with "Mango Tech" dropdown, search input ({component.search-input}), and user avatar. Below that, a toolbar with Engineering dropdown, view toggles (List/Board/Gantt), and a "+ Task" FAB ({component.floating-action-button}). The task list uses table rows with status circles, task names, priority flags, assignee avatars, and colored label pills.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} or {colors.surface-soft} background | Page body, flat sections, hero band | | 1 (Hairline) | 1px {colors.hairline} border or {shadows.xs} | Input fields, table cells, subtle cards | | 2 (Soft raise) | {shadows.sm} or {shadows.md} | Product preview card ({component.product-preview-card}), dropdown panels | | 3 (Modal/Floating) | {shadows.lg} | Modals, tooltips, persistent overlays | | 4 (Decorative) | {shadows.decorative} (directional, offset) | Marketing imagery, hero illustration shadows | | 5 (Inner glow) | {shadows.inner-glow} (inset) | Premium card treatments, highlighted surfaces |

The elevation system is restrained and functional — this is not a material-design world of floating papers. Most surfaces live at Level 0 or Level 1. The product preview card earns Level 2 elevation ({shadows.md}) because it must visually "lift" from the canvas background. Directional shadows ({shadows.decorative}) with negative offsets (-34px, -13px) suggest light from the bottom-right, creating the illusion that the product preview is a physical object resting on the canvas.

Inner glow effects ({shadows.inner-glow}) use a subtle lavender tint (rgba(226, 232, 255, 0.12) inset) suggesting a premium, glass-like quality on select surfaces — though this may be reserved for lower-page sections not visible in the screenshot.

Decorative Depth

Beyond functional elevation, the system employs directional offset shadows ({shadows.decorative}) with significant horizontal displacement (-34px) and moderate vertical (-13px), combined with layered blur radii (37px and 20px). This creates a sense of the product preview "floating" above the canvas with a realistic cast shadow. The inner glow inset shadow adds a subtle luminous edge, suggesting the card has thickness and light-interaction properties beyond a flat rectangle.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 6px | Small buttons, badges, sidebar items, table row highlight areas | | {rounded.DEFAULT} | 8px | Standard buttons, nav items, inputs, default cards | | {rounded.md} | 12px | Floating action button, moderate containers | | {rounded.lg} | 14px | Product preview card ({component.product-preview-card}), large content cards | | {rounded.xl} | 16px | Modal panels, featured cards (potential) | | {rounded.pill} | 54px | All CTA buttons ({component.button-primary}, {component.button-secondary}), tagline pill ({component.hero-tagline}) | | {rounded.circle} | 50% | Avatars ({component.avatar-circle}), status indicators, icon containers | | {rounded.full} | 9999px | Theoretical fully-rounded elements (aliases pill) |

The shape vocabulary is intentionally narrow: six distinct values cover every component. The pill shape (54px) is the signature choice for anything actionable — it reads as friendly and modern without the playfulness of fully-rounded circles. Circle (50%) is reserved for identity markers (avatars) and status dots, creating a visual language where "round = person/thing" and "pill = action."

Photography Geometry

No photography is visible in the above-fold screenshot — the visual proof is entirely the product preview mockup (a rendered UI representation, not a photograph). If photography exists lower on the page (customer photos, office imagery), it would likely follow the {rounded.lg} (14px) treatment established by the preview card, potentially with {shadows.md} elevation to maintain consistency with the floating-card aesthetic.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g., {component.button-primary-hover}, {component.search-input-focus}, {component.table-row-hover}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The principal conversion button, seen as "Get started. It's FREE!" in the hero and "Sign Up" in the nav. Background {colors.primary} (near-black), text {colors.on-primary} (white), type {typography.button} (14px/500), rounded {rounded.pill} (54px), padding 12px 24px. High contrast, impossible to miss. State variant: {component.button-primary-hover} lightens to {colors.primary-hover}.

{component.button-secondary} — Secondary action with white background, {colors.ink} text, same pill shape and padding as primary. Used for less-committal CTAs.

{component.button-ghost} — Transparent background, {colors.ink} text, {rounded.DEFAULT} corners. Used for "Login" and utility actions where visual weight should be minimal. Variant {component.button-ghost-dark} provides white text for dark-surface contexts.

{component.button-icon} — Square icon-only button (32px), transparent background, {colors.body} icon color. Used for toolbar actions (view toggles, settings triggers).

{component.button-signup-nav} — The filled Sign Up button in the top navigation. Uses {colors.primary} background but with {rounded.DEFAULT} (8px) rather than pill — the nav context demands a slightly more compact shape. Padding 8px 16px.

{component.nav-cta-demo} — "Get a Demo" ghost button in the nav. Transparent background, {colors.body} text, smaller than primary actions.

Cards & Containers

{component.product-preview-card} — The dominant below-fold element showcasing the actual application. White ({colors.surface-soft}) background, {colors.ink} text, {rounded.lg} (14px) corners, {shadows.md} elevation. Contains the full app mockup with sidebar, toolbar, and task list. This is the "proof" component — it must look like a real, working tool.

{component.hero-tagline} — Small pill-shaped badge reading "The Best AI is 🧠 Brain² >". White background, {colors.ink} text, {typography.label} (12px/500), {rounded.pill} (54px), padding 6px 14px. Sits above the hero headline as a credibility signal.

{component.hero-band} — Full-width section container for the hero area. {colors.canvas} background, {colors.ink} text, {typography.display-xl} potential, padding {spacing.section} (80px vertical). Holds the tagline, headline, subheadline, and CTA cluster.

{component.footer-band} — Full-width footer container. {colors.canvas} background, {colors.muted} text, {typography.body-sm}, generous vertical padding.

{component.sidebar-nav} — White navigation panel inside the product preview. Lists vertical items (Projects, Chat, Brain MAX, etc.) in {typography.body-lg} (14px/400). Each item is a {component.sidebar-item} with 8px 16px padding.

{component.sidebar-item} — Individual navigation entry. Transparent background, {colors.ink} text, {rounded.sm} (6px) for hover highlighting.

{component.sidebar-item-active} — Active navigation state (shown on "Projects"). {colors.accent-soft} (lavender) background, {colors.accent} (violet) text, same padding and rounding as default.

{component.sidebar-rail-dark} — Leftmost icon-only strip in the app preview. {colors.surface-darker} (#191919) background, white icon/text, {typography.caption} size, 8px padding. Contains Home, Spaces, Chat, AI, Apps icons stacked vertically.

{component.app-header-bar} — Top bar of the app preview showing "Mango Tech", search, and avatar. White background, {typography.body-lg} text, 8px 16px padding, subtle bottom border implied.

Inputs & Forms

{component.search-input} — Search field in the app header. {colors.canvas} (gray) background, {colors.ink} text, {typography.body-lg}, {rounded.pill} (54px) making it capsule-shaped, 8px 16px padding, 36px height. Contains "Search ⌘K" placeholder text. Focus state {component.search-input-focus} switches to white background.

Navigation

{component.top-nav} — Global navigation bar spanning full viewport width. {colors.canvas} background (blends with page), {colors.pure-black} text, 72px height. Contains logo, dropdown menus, and utility actions.

{component.nav-item} — Top-level navigation menu item ("Product", "Solutions", "Learn"). Transparent background, 16px text, {rounded.DEFAULT} (8px), 4px 10px padding. Includes dropdown caret indicator.

{component.nav-dropdown-trigger} — Nav items with dropdown functionality (Brain AI, Product, Solutions, Learn). Same styling as {component.nav-item} with added chevron icon.

{component.nav-login} — Ghost-style login link in nav right side. Transparent, {colors.ink} text, 8px 14px padding.

Sub-Systems (Product Preview)

{component.view-toggle-group} — Container for List/Board/Gantt view switcher. Transparent, {colors.muted} icons, 4px 0 padding.

{component.view-toggle-button} — Individual toggle button (icon only). 28px square, {colors.muted} icon.

{component.table-header} — Column header row in task list. Transparent, {colors.muted} text, {typography.body-md}, 8px 12px padding. Shows Name, Priority, Assignee, Labels columns.

{component.table-row} — Individual task row. Transparent, {colors.ink} text, {typography.body-md}, 10px 12px padding. Contains status dot, task name, priority flag, avatar, labels. Hover state {component.table-row-hover} applies {colors.surface-strong} background.

{component.status-badge-open} — "OPEN" status indicator. {colors.status-open} (violet) background, white text, {typography.caption}, {rounded.sm}, 2px 8px padding.

{component.status-badge-progress} — "IN PROGRESS" status. {colors.status-progress} (blue) background, white text, same sizing.

{component.label-pill} — Generic label/tag. {colors.surface-strong} background, {colors.ink} text, {typography.caption}, {rounded.sm}, 2px 8px. Color variants exist for specific label types.

{component.label-pill-backend} — "Backend" label. {colors.label-backend} (pale green) background, dark green (#166534) text.

{component.label-pill-api} — "API" label. {colors.label-api} (pale amber) background, dark amber (#92400e) text.

{component.label-pill-data} — "Data" label. {colors.label-data} (pale pink) background, dark pink (#9d174d) text.

{component.label-pill-infra} — "Infra" label. {colors.label-infra} (pale violet) background, dark violet (#5b21b6) text.

{component.priority-flag} — Priority indicator (colored flag icon). Transparent background, {colors.ink} color, 16px size.

{component.avatar-circle} — User avatar. {colors.surface-strong} background (with photo or initial), 28px diameter, {rounded.circle} (50%).

{component.task-add-row} — "Add task" placeholder row. Transparent, {colors.muted-soft} text, {typography.body-md}, 8px 12px padding. Indicates where new tasks appear.

{component.floating-action-button} — "+ Task" button in the toolbar. {colors.accent} (violet) background, white text, {typography.label}, {rounded.md} (12px), 6px 12px padding. Stands out as the primary in-context action.

Do's and Don'ts

Do

• Do use {typography.title-md} (48px/650/-1.68px tracking) for the hero headline — this specific combination of size, weight, and letter-spacing is the brand's typographic fingerprint.
• Do reserve {colors.primary} (#090c1d) exclusively for conversion buttons ({component.button-primary}, {component.button-signup-nav}) — it loses impact if overused on non-critical elements.
• Do apply {rounded.pill} (54px) to all call-to-action buttons — the pill shape is a core brand signifier distinguishing ClickUp from competitors using sharper or fully-rounded buttons.
• Do maintain the 12px body text size ({typography.body-md}) in the product preview — the density signals professional capability; enlarging it would make the tool look simplistic.
• Do use {colors.accent} (#7b68ee) sparingly for active states and status badges — it's the only chromatic color in the system and should remain special.
• Do give the {component.product-preview-card} {shadows.md} elevation and {rounded.lg} (14px) corners when implementing — the floating-card effect is crucial for separating "marketing promise" from "tool reality."
• Do pair {colors.surface-darker} (#191919) backgrounds with {colors.on-dark} (#ffffff) text in the icon rail — this maximum contrast ensures icon legibility at small sizes.
• Do use the pastel-foreground pattern for label pills (pale background + dark text of the same hue family) — this creates scannable color coding without accessibility issues.
• Do keep {spacing.section} (80px) as vertical padding between major bands — the airy rhythm is essential to the editorial marketing voice.
• Do load Plus Jakarta Sans as a variable font (weight range 200–800) to access the exact 650 weight — static fonts may not offer this intermediate value.

Don't

• Don't substitute {colors.ink} (#292d34) for {colors.near-black} (#202020) in the hero headline — the darker value is intentionally reserved for the single most important text element.
• Don't round nav buttons to {rounded.pill} — the nav uses {rounded.DEFAULT} (8px) for {component.button-signup-nav} and {component.nav-item} to differentiate from hero CTAs.
• Don't use font-weight 700 (bold) anywhere in the system — the brand caps display weight at 650 and body at 500; going bolder breaks the refined aesthetic.
• Don't remove the negative letter-spacing from headlines — the -1.68px tracking at 48px is integral to the custom-logotype feel; neutral spacing looks generic.
• Don't apply {colors.accent} to buttons or primary navigation — violet is for states and accents, not conversions; {colors.primary} owns the CTA role.
• Don't expand the radius vocabulary beyond the nine defined tokens — the system's consistency comes from repeated shape choices (pill for actions, circle for identities, 8-14px for containers).
• Don't use pure white (#ffffff) as the page background — the canvas is intentionally {colors.canvas} (#e9ebf0), a cool gray-blue that softens the entire experience.
• Don't make the product preview card full-radius ({rounded.pill} or {rounded.circle}) — {rounded.lg} (14px) is the maximum for content cards; more rounding turns the tool into a toy.
• Don't place body text ({typography.body-md} at 12px) on {colors.muted-soft} (#8a8a94) or lighter — the contrast ratio fails WCAG AA; reserve that color for placeholders and disabled hints.
• Don't mix Inter into headlines or Plus Jakarta Sans into body text — the two-face division (display vs. body) is a hard rule in this system.

Motion & Animation

Transition Tokens

--transition-background: background-color 0.2s ease;
--transition-color: color 0.2s ease;
--transition-combined: background-color 0.2s, color 0.2s ease;
--transform-base: transform 0.2s cubic-bezier(0.5, 0, 0.5, 1);
--opacity-fade: opacity 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--all-transition: all 0.25s cubic-bezier(0.5, 0, 0.5, 1);

The transition system favors 200ms duration for most interactions (background color, color changes) with a standard ease curve. Transform animations (scroll-driven movements, hover lifts) use the same 200ms with a cubic-bezier (0.5, 0, 0.5, 1) — the Material Design "standard" curve providing natural deceleration. Opacity fades run slightly longer (280ms) with a customized ease for smoother perceptual blending. A catch-all all transition exists at 250ms for legacy or complex state changes.

Keyframe Animations

• _progressBarHeight_ — Animated height transition for progress/loading bars
• _slideDown_ / _slideUp_ — Vertical reveal/hide for dropdown panels and accordion content (appears in multiple scoped variants)
• _banner_ — Entrance animation for promotional/notification banners
• _moveLogos_ — Horizontal marquee/scroll for logo carousels or partner grids
• _slide-translate_ / _slide-translate-reverse_ — Horizontal scroll-triggered translations for content reveals
• _full-translate_ / _full-translate-right_ — Full-width entrance animations (likely for section reveals on scroll)
• _rotatingGradientBorder_ / _rotateGradientAngle_ — Rotating gradient effect for premium/featured badges (the "shimmer" on the Brain AI nav item)
• _shimmerStream_ — Shimmer sweep effect across surfaces (used on the Brain AI dropdown trigger per CSS class _shimmer_ywfkq_48)
• _scroll_ — Continuous scroll animation for infinite-scroll elements
• _fadeInContactSalesOverlay_ / _fadeInContactSalesContent_ — Modal overlay and content fade-in for contact sales forms
• _mediaFadeUpOut_ / _mediaFadeUpIn_ — Scroll-triggered fade-up for media/imagery elements
• _pillExpandFromCorner_ — Animated corner-origin expansion for pill-shaped highlights or tags

Interaction Patterns

• Dropdown reveals: Navigation items (Brain AI, Product, etc.) trigger {component.nav-dropdown-trigger} with slideDown animation on hover/click, revealing mega-menu panels
• Search focus expansion: {component.search-input} expands or changes background ({colors.canvas} → {colors.surface-soft}) on focus per {component.search-input-focus}
• Table row hover: Task list rows ({component.table-row}) apply {colors.surface-strong} background on hover per {component.table-row-hover}
• Sidebar active state: Clicking a sidebar item transitions to {component.sidebar-item-active} with background color change to {colors.accent-soft}
• Button hover lift: Primary and secondary buttons likely gain slight y-transform or shadow increase (implied by _transform-base token)
• Scroll-triggered reveals: Sections fade/slide up on enter viewport via _mediaFadeUpIn_ and _full-translate_ keyframes
• Shimmer effect on CTA: The "Brain AI" nav item shows class _shimmer_ indicating a subtle animated gradient sweep across the button surface
• Modal contact form: Contact sales triggers overlay + content fade via dedicated keyframes with staggered timing

Imagery Style

• Product preview dominance: The primary visual element is not photography but a high-fidelity UI mockup of the actual application — a "show, don't tell" approach where the tool itself is the imagery
• Floating card aesthetic: The product preview is treated as a physical object with directional shadow ({shadows.decorative}), rounded corners ({rounded.lg}), and subtle inner glow — it "sits on" the canvas rather than being flatly composited
• App-icon integration: Small emoji/icons (🧠 brain icon) appear inline with text in the tagline, suggesting a playful yet professional illustration style for concept icons
• Avatar photography: User avatars in the task list appear as photographic headshots cropped to circles ({component.avatar-circle}) — real faces, warm tones, casual-professional
• No stock lifestyle photography visible: The above-fold avoids the "happy office workers" trope, letting the product speak for itself
• Color accuracy in mockup: The preview renders with faithful color tokens — status badges show actual {colors.status-open} violet, labels show pastel backgrounds matching the defined palette
• Density as visual texture: The information-rich table, sidebar, and toolbar create visual complexity that contrasts pleasingly with the simple hero above — the "image" is the complexity itself
• Likely lower-page imagery: Given SaaS conventions, expect customer logos (grayscale/muted), feature illustrations (flat or isometric), and team photos further down — these would adopt the {rounded.lg} corner treatment and {shadows.md} elevation established by the preview card

Icon System

• Library: Custom SVG icons (no detected third-party library — iconLibs is empty in framework data). ClickUp designs and hosts its own icon set.
• Specific icons observed:
  • ClickUp logo (multicolored geometric mark — red/orange/yellow/blue segments)
  • Chevron/down arrow (for dropdowns: Brain AI ▾, Product ▾, etc.)
  • Right arrow (in tagline pill: "Brain² >")
  • Sidebar icons: Projects (checkmark circle), Chat (message bubble), Brain MAX (brain circuit), AI Agents (sparkle/nodes), Sprints (routing/grid), Time Tracking (clock), Calendar (calendar grid), Docs (document), Whiteboards (grid/layout), Automations (lightning/zap), Dashboards (chart), Scheduling (calendar-clock)
  • Rail icons: Home (house), Spaces (folder/grid), Chat (message), AI (wand/sparkle), Apps (grid of dots)
  • Toolbar icons: List view, Board view, Gantt view (layout variants), filter/sort, more options (three lines)
  • Status icons: Hollow circle (open), spinning/loader (in progress)
  • Priority flags: Colored flag markers (blue, yellow)
  • Search icon (magnifying glass), clear (x), command symbol (⌘K)
  • User/avatar placeholder, notification bell, help/question mark
• Treatment: Predominantly stroke-based icons with 1.5-2px stroke weight, using currentColor for color inheritance. Icons align centrally with text (vertically centered via flexbox). Sizes: 16px for inline/list icons, 20px for nav items, 24px for rail icons.
• Style: Clean, geometric, slightly rounded stroke endings (not purely rectilinear, not fully hand-drawn). Consistent 2px stroke weight across most icons. The multicolored logo is the only filled/mark-based icon; all functional icons are monochrome strokes.

Recommended Frontend Stack

- Framework:      Next.js (React-based, evident from __NEXT_DATA__ script in source)
- Styling:        CSS Modules (scoped class naming like _dropdownButton_ywfkq_4 suggests module-scoped CSS)
- Fonts:           Self-hosted WOFF2/WOFF/TTF (font-face declarations point to /assets/fonts/)
- Animation:       CSS Keyframes + JS intersection observers (keyframes defined in CSS, scroll triggers likely JS)
- Icons:           Custom SVG (inline or sprite, no external library detected)
- Component lib:   Custom (no Radix/shadcn/AntD signatures found)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column layout, hamburger nav, hero text shrinks, product preview becomes scrollable horizontally or stacks | | Tablet | 640px – 1024px | Two-column possible, condensed nav (dropdowns hidden), product preview may simplify (hide sidebar rail) | | Desktop | 1024px – 1440px | Full layout as shown: 820px text column, 1440px preview width, complete nav | | Wide | > 1440px | Max container stops expanding; content centers with increasing gutters |

Note: Exact breakpoint values inferred from industry standards and the 1440px container width — specific media queries not extractable from single screenshot.

Touch Targets

• {component.button-primary}: ~48px height (12px padding × 2 + 14px font + border) — meets WCAG AAA 44×44 minimum ✓
• {component.button-signup-nav}: ~36px height (8px padding × 2 + 14px font + border) — below AAA, meets AA 44×44 if total width ≥ 44px ✓
• {component.search-input}: 36px height — below AAA minimum, may need increase to 44px on touch devices
• {component.nav-item}: ~32px height (4px padding × 2 + 16px font + border) — below minimum, relies on click/touch tolerance
• {component.sidebar-item}: ~30px height (8px padding × 2 + 14px font) — below minimum, acceptable in desktop app preview but problematic if replicated in touch interfaces
• {component.table-row}: ~34px height — dense but functional with row-level tap targets

Collapsing Strategy

• Navigation: At mobile breakpoint, the horizontal nav items (Brain AI, Product, Solutions, Learn, Pricing, Enterprise) collapse into a hamburger menu. "Get a Demo", "Login", and "Sign Up" may persist as simplified links or move into the menu drawer. The _hideOnSm_1ojt5_244 class on several nav items explicitly confirms hiding on small screens.
• Hero columns: The already-vertical hero stack (tagline → headline → subheadline → CTA → preview) remains single-column on mobile; the preview card may require horizontal scroll or convert to a simplified feature list
• Product preview sidebar: The three-column layout (icon rail + sidebar + main content) likely collapses — the icon rail disappears (icons move to bottom tab bar or hamburger), the sidebar becomes a slide-out drawer or accordion, and the task list takes full width
• Typography scaling: {typography.title-md} (48px) probably drops to 32-36px on mobile; {typography.body-md} (12px) may increase to 14px for touch readability
• Button padding: {component.button-primary} may increase vertical padding to ensure 48px touch height on mobile

Image Behavior

• Product preview card: On mobile, the wide app mockup either scrolls horizontally within the card (overflow-x: auto with snap points) or transforms into a feature list/key-stats representation. The 1440px-wide preview cannot fit a 375px viewport without transformation.
• Avatars: {component.avatar-circle} (28px) may stay fixed size or shrink slightly to 24px on mobile to accommodate denser rows
• Logo: The ClickUp mark likely reduces in horizontal padding but maintains aspect ratio

Iteration Guide

1. Start with the font loading strategy: Define @font-face declarations for Plus Jakarta Sans (variable 200-800), Inter (variable 100-900), and Sometype Mono (variable 400-700) using the paths shown in the extracted CSS. Set font-display: swap to prevent FOIT. Create CSS variables: --font-display, --font-body, --font-mono.

2. Establish the color foundation: Copy every token from the colors: frontmatter section into your Tailwind config (or CSS custom properties). Build a "tokens.css" file that maps {colors.canvas} to --color-canvas, etc. Never hard-code a hex — if you need a background, reference the token.

3. Implement the top navigation first: Build {component.top-nav} at 72px height with {colors.canvas} background. Add the logo (left), nav items with dropdown carets (center-left), and utility buttons (right). Use {typography.button-nav} (16px/400) for menu items, {typography.button} (14px/500) for utilities. Apply _hideOnSm class to items that should collapse on mobile.

4. Build the hero band next: Create {component.hero-band} with {spacing.section} (80px) vertical padding. Implement {component.hero-tagline} as a pill (white bg, {rounded.pill}, {typography.label}). Set the headline in {typography.title-md} (48px/650/-1.68px tracking) using {colors.near-black}. Add the subheadline in {typography.body-lg} (14px) with {colors.body}. Place {component.button-primary} below with the supporting microcopy.

5. Construct the product preview card: This is the most component-dense element. Start with the outer card ({component.product-preview-card}): white bg, {rounded.lg} (14px), {shadows.md}. Inside, build a CSS Grid or Flexbox layout with three zones: icon rail ({component.sidebar-rail-dark}, ~48px wide, {colors.surface-darker}), sidebar ({component.sidebar-nav}, ~240px, white), and main content (flexible). Populate the sidebar with {component.sidebar-item} entries, marking "Projects" as {component.sidebar-item-active}.

6. Implement the task list subsystem: Within the main content zone, add {component.app-header-bar} (white, search input with {rounded.pill}), a toolbar with view toggles and {component.floating-action-button} (violet "+ Task"), then the table. Build {component.table-header} for columns, then {component.table-row} instances with status badges ({component.status-badge-open}, {component.status-badge-progress}), priority flags, {component.avatar-circle} elements, and label pills ({component.label-pill-backend}, etc.). Ensure hover state applies {colors.surface-strong} background.

7. Add motion progressively: After static layout is correct, apply the transition tokens. Add transition: background-color 0.2s, color 0.2s to buttons and interactive elements. Implement _slideDown / _slideUp for dropdown panels. Add the _shimmerStream keyframe to the Brain AI nav item. Use Intersection Observer for _mediaFadeUpIn on scroll-triggered elements.

8. Validate token usage: Run a script (or manual audit) ensuring every color, font, radius, spacing, and shadow value in your implementation references a defined token. Any hardcoded #090c1d, 14px, or 8px that bypasses the token system is technical debt — fix it to read {colors.primary}, {spacing.4xl}, or {spacing.xl}.

9. Test responsive behavior: At each breakpoint, verify: nav collapses correctly, hero text scales down appropriately, product preview handles overflow gracefully (horizontal scroll or transformed layout), and touch targets meet 44×44px minimum on mobile. The _hideOnSm_1ojt5_244 class pattern should extend to any element needing responsive visibility toggling.

10. Polish with the Do's and Don'ts: Review against the prohibitions: no bold (700) weights, no white canvas background, no accent color on CTAs, no mixing typefaces across roles. Ensure the hero headline uses {colors.near-black} not {colors.ink}. Confirm all CTAs use {rounded.pill} not {rounded.DEFAULT}. Check that negative letter-spacing appears on every Plus Jakarta Sans headline.

Font Setup for Implementation:

/* CSS Variables */
:root {
  --font-display: 'Plus Jakarta Sans', -apple-system, Roboto, Helvetica, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'Sometype Mono', 'JetBrains Mono', monospace;
}

/* Google Fonts fallback (if self-hosted fonts unavailable) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Plus+Jakarta+Sans:wght@200..800&display=swap');
/* Note: Sometype Mono requires self-host or substitute with JetBrains Mono from Google Fonts */

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover colors, shadow increases, and transform offsets for buttons, nav items, table rows, and links are not documented. These must be designed implementation-time following the transition tokens provided.
• Loading/skeleton states: No loading skeletons, spinners, or pending-state treatments were visible in the static screenshot. The _progressBarHeight keyframe suggests progress bars exist, but skeleton card patterns are unknown.
• Form validation states: Beyond {component.search-input-focus}, error/warning/success states for form fields (red/green borders, helper text, icons) are not represented in the above-fold content.
• Authenticated/user-specific surfaces: Dashboard views, settings panels, notification drawers, and any post-login UI are not visible — the product preview is a staged mockup, not a live authenticated view.
• Dark mode palette: While {colors.surface-dark} and {colors.surface-darker} exist for the app-preview dialect, a true system-wide dark mode (inverted canvas, adjusted text colors, reduced shadows) is not represented. The extensions.mode: "light" confirms the captured design is light-theme only.
• Mobile navigation pattern: The exact hamburger menu structure, slide-out drawer width, and mobile menu animation are inferred from _hideOnSm classes but not visually confirmed.
• Lower-page sections: Features grid, pricing table, testimonials, integrations showcase, FAQ accordion, and final CTA band — all standard SaaS sections — are not visible and thus have no component definitions.
• Exact pixel values for some surfaces: The product preview card's internal dimensions (sidebar width, rail width, toolbar height) are estimated from proportions in the screenshot; exact pixel measurements would require inspecting the live DOM at wider viewport.
• Accessibility focus indicators: Focus ring style (outline offset, color, radius) for keyboard navigation is not visible in a static screenshot and must be implemented per WCAG guidelines (likely using {colors.accent} or {colors.info} for focus rings).
• Shantell Sans usage: This font is loaded in the stack but its specific application (delight moments, pull quotes, decorative headings) is not visible above-fold — its role remains speculative.