W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
ClickUp
ClickUp is a work-management platform positioned as "one app to replace them all" — tasks, docs, chat, goals, whiteboards, and more in a single surface. The brand voice is bold, enthusiastic, and ambitious. Visually, the identity is carried by the gradient-tipped ClickUp Purple mark (#7B68EE) on a clean white canvas with near-black body text on marketing surfaces.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/clickup/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/clickup/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
ClickUp
ClickUp is a work-management platform positioned as "one app to replace them all" — tasks, docs, chat, goals, whiteboards, and more in a single surface. The brand voice is bold, enthusiastic, and ambitious. Visually, the identity is carried by the gradient-tipped ClickUp Purple mark (#7B68EE) on a clean white canvas with near-black body text on marketing surfaces.
Tags: saas, productivity, clickup, work-management
Atoms
Palette
ClickUp · [email protected] · Proprietary — All Rights Reserved
ClickUp's brand palette, anchored on ClickUp Purple (#7B68EE) — the signature medium-slate purple that carries the wordmark and the gradient-tipped "CU" mark. The institutional voice pairs that purple with a clean white canvas and near-black body text on marketing surfaces. ClickUp's "one app to replace them all" positioning is reinforced by a single committed brand hue.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
clickup-purple |
ClickUp Purple | #7B68EE |
clickup-white |
ClickUp White | #FFFFFF |
clickup-black |
ClickUp Black | #000000 |
clickup-canvas-dark |
ClickUp Canvas Dark | #1B1A2E |
clickup-surface-light |
ClickUp Surface Light | #F6F5FB |
clickup-surface-dark |
ClickUp Surface Dark | #2A2A40 |
clickup-text-secondary |
ClickUp Text Secondary | #6B7280 |
clickup-text-tertiary |
ClickUp Text Tertiary | #9CA3AF |
clickup-purple-hover |
ClickUp Purple Hover | #9485F2 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
clickup-white |
#FFFFFF |
surface |
clickup-surface-light |
#F6F5FB |
surface-elevated |
clickup-white |
#FFFFFF |
text-primary |
clickup-black |
#000000 |
text-secondary |
clickup-text-secondary |
#6B7280 |
text-tertiary |
clickup-text-tertiary |
#9CA3AF |
primary |
clickup-purple |
#7B68EE |
primary-hover |
clickup-purple-hover |
#9485F2 |
accent |
clickup-purple |
#7B68EE |
accent-hover |
clickup-purple-hover |
#9485F2 |
warning |
clickup-purple |
#7B68EE |
warning-hover |
clickup-purple-hover |
#9485F2 |
error |
clickup-purple |
#7B68EE |
success |
clickup-purple |
#7B68EE |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
clickup-canvas-dark |
#1B1A2E |
surface |
clickup-surface-dark |
#2A2A40 |
surface-elevated |
clickup-surface-dark |
#2A2A40 |
text-primary |
clickup-white |
#FFFFFF |
text-secondary |
clickup-text-tertiary |
#9CA3AF |
text-tertiary |
clickup-text-secondary |
#6B7280 |
primary |
clickup-purple |
#7B68EE |
primary-hover |
clickup-purple-hover |
#9485F2 |
accent |
clickup-purple |
#7B68EE |
accent-hover |
clickup-purple-hover |
#9485F2 |
warning |
clickup-purple |
#7B68EE |
warning-hover |
clickup-purple-hover |
#9485F2 |
error |
clickup-purple |
#7B68EE |
success |
clickup-purple |
#7B68EE |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
clickup-purple |
#7B68EE |
on-identity |
clickup-white |
#FFFFFF |
primary |
clickup-purple |
#7B68EE |
primary-hover |
clickup-purple-hover |
#9485F2 |
accent |
clickup-purple |
#7B68EE |
accent-hover |
clickup-purple-hover |
#9485F2 |
success |
clickup-purple |
#7B68EE |
warning |
clickup-purple |
#7B68EE |
error |
clickup-purple |
#7B68EE |
background-light |
clickup-white |
#FFFFFF |
background-dark |
clickup-canvas-dark |
#1B1A2E |
surface-light |
clickup-surface-light |
#F6F5FB |
surface-dark |
clickup-surface-dark |
#2A2A40 |
text-primary-light |
clickup-black |
#000000 |
text-primary-dark |
clickup-white |
#FFFFFF |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.mark
- allowed: clickup-purple, clickup-white, clickup-black
- forbidden: any-non-brand-color
The ClickUp wordmark renders in ClickUp Purple on light surfaces and in white on dark surfaces. Recoloring the wordmark into off-brand hues violates ClickUp's brand-use guidance.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo
ClickUp's press resources prohibit stretching, rotating, recoloring, or applying decorative effects to the wordmark.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast minimum for body text. ClickUp Black (#000000) on ClickUp White (#FFFFFF) clears AA at 21:1.
variantSelection → logo
- use:
logo-light - when:
backgroundColorScheme="dark"
On dark surfaces, use ClickUp's documented light-fill wordmark variant; do not invert the purple wordmark on the fly.
contextRestriction → roles.colors.identity
- forbiddenContexts: product-of-competitor, merchandise, endorsement-implication, company-name-or-domain
ClickUp's trademark guidance forbids use of the ClickUp name and mark in third-party company names, domains, and uses that imply affiliation or endorsement.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. ClickUp-skinned surfaces must clear AA on body text.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700
ClickUp's marketing surfaces render headings in the 500–700 band; lighter weights undermine the confident voice of the brand.
💡 recommendation (1)
compositionConstraint → roles.colors.identity
- pairsWith: clickup-white, clickup-black, clickup-surface-light
ClickUp Purple is calibrated to read on white and near-black. Pairing it with another saturated hue at the same weight breaks the focused, ambitious voice of the brand surface.
Provenance
- Source: https://clickup.com/press
- License:
Proprietary — All Rights Reserved - Attribution: ClickUp and the ClickUp logo are trademarks of Mango Technologies, Inc. (d/b/a ClickUp). The primary brand color ClickUp Purple (#7B68EE) is documented on ClickUp's press resources. brand-atoms catalogues only the publicly documented signature color and authored neutrals; licensed application of the ClickUp name and mark is governed by ClickUp's brand-use guidance at clickup.com/press.
- Imported:
2026-05-18 - Notes: ClickUp's marketing pages render in a neutral humanist sans consistent with Inter; Inter is referenced here as the primary face and is already in the brand-atoms catalog. The mark also uses pink and yellow gradient stops on marketing surfaces, but those specific hex stops are not catalogued at the brand-atoms palette level to avoid fabrication.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by ClickUp
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
ClickUp
A clear hierarchy in ClickUp's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ clickup-purple #7B68EE accent-hover
→ clickup-purple-hover #9485F2 background-dark
→ clickup-canvas-dark #1B1A2E background-light
→ clickup-white #FFFFFF error
→ clickup-purple #7B68EE identity
→ clickup-purple #7B68EE on-identity
→ clickup-white #FFFFFF primary
→ clickup-purple #7B68EE primary-hover
→ clickup-purple-hover #9485F2 success
→ clickup-purple #7B68EE surface-dark
→ clickup-surface-dark #2A2A40 surface-light
→ clickup-surface-light #F6F5FB text-primary-dark
→ clickup-white #FFFFFF text-primary-light
→ clickup-black #000000 warning
→ clickup-purple #7B68EE Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from clickup)
Light mode (14 roles)
accent
→ clickup-purple accent-hover
→ clickup-purple-hover background
→ clickup-white error
→ clickup-purple primary
→ clickup-purple primary-hover
→ clickup-purple-hover success
→ clickup-purple surface
→ clickup-surface-light surface-elevated
→ clickup-white text-primary
→ clickup-black text-secondary
→ clickup-text-secondary text-tertiary
→ clickup-text-tertiary warning
→ clickup-purple warning-hover
→ clickup-purple-hover Dark mode (14 roles)
accent
→ clickup-purple accent-hover
→ clickup-purple-hover background
→ clickup-canvas-dark error
→ clickup-purple primary
→ clickup-purple primary-hover
→ clickup-purple-hover success
→ clickup-purple surface
→ clickup-surface-dark surface-elevated
→ clickup-surface-dark text-primary
→ clickup-white text-secondary
→ clickup-text-tertiary text-tertiary
→ clickup-text-secondary warning
→ clickup-purple warning-hover
→ clickup-purple-hover Rules (8 typed constraints)
error · 6 rules
colorChoice logo.mark allowed clickup-purple, clickup-white, clickup-black forbidden any-non-brand-color The ClickUp wordmark renders in ClickUp Purple on light surfaces and in white on dark surfaces. Recoloring the wordmark into off-brand hues violates ClickUp's brand-use guidance.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo ClickUp's press resources prohibit stretching, rotating, recoloring, or applying decorative effects to the wordmark.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast minimum for body text. ClickUp Black (#000000) on ClickUp White (#FFFFFF) clears AA at 21:1.
variantSelection logo use logo-light when backgroundColorScheme="dark" On dark surfaces, use ClickUp's documented light-fill wordmark variant; do not invert the purple wordmark on the fly.
contextRestriction roles.colors.identity forbiddenContexts product-of-competitor, merchandise, endorsement-implication, company-name-or-domain ClickUp's trademark guidance forbids use of the ClickUp name and mark in third-party company names, domains, and uses that imply affiliation or endorsement.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. ClickUp-skinned surfaces must clear AA on body text.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 500, 600, 700 ClickUp's marketing surfaces render headings in the 500–700 band; lighter weights undermine the confident voice of the brand.
recommendation · 1 rule
compositionConstraint roles.colors.identity pairsWith clickup-white, clickup-black, clickup-surface-light ClickUp Purple is calibrated to read on white and near-black. Pairing it with another saturated hue at the same weight breaks the focused, ambitious voice of the brand surface.
Provenance
- Source
- https://clickup.com/press
- License
Proprietary — All Rights Reserved- Attribution
- ClickUp and the ClickUp logo are trademarks of Mango Technologies, Inc. (d/b/a ClickUp). The primary brand color ClickUp Purple (#7B68EE) is documented on ClickUp's press resources. brand-atoms catalogues only the publicly documented signature color and authored neutrals; licensed application of the ClickUp name and mark is governed by ClickUp's brand-use guidance at clickup.com/press.
- Imported
2026-05-18- Notes
- ClickUp's marketing pages render in a neutral humanist sans consistent with Inter; Inter is referenced here as the primary face and is already in the brand-atoms catalog. The mark also uses pink and yellow gradient stops on marketing surfaces, but those specific hex stops are not catalogued at the brand-atoms palette level to avoid fabrication.