W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Linear
Linear is a project and issue-tracking tool built for software teams — "the purpose-built tool for planning and building products." The brand voice is precise, calm, and craft-forward: dark-first product surfaces, an angular sans-serif wordmark, a single desaturated indigo accent (#5E6AD2), and a near-monochrome neutral system that lets motion and typography carry the brand. Where competing trackers shout, Linear whispers.
1 palette 3 fonts 0 assets 10 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/linear/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/linear/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.
Linear
Linear is a project and issue-tracking tool built for software teams — "the purpose-built tool for planning and building products." The brand voice is precise, calm, and craft-forward: dark-first product surfaces, an angular sans-serif wordmark, a single desaturated indigo accent (#5E6AD2), and a near-monochrome neutral system that lets motion and typography carry the brand. Where competing trackers shout, Linear whispers.
Tags: saas, productivity, linear, dark-first, minimal, developer-tools
Atoms
Palette
Linear · [email protected] · Proprietary — All Rights Reserved
Linear's brand palette — a dark-first minimal identity built around a desaturated indigo-violet primary (#5E6AD2), Mercury White for light surfaces (#F4F5F8), and Nordic Gray for dark surfaces (#222326). The palette is deliberately restrained: one accent, two canvases, and a tight set of authored neutrals to support a near-monochrome product surface where typography, spacing, and motion carry the brand voice.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter Tight ([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 |
|---|---|---|
linear-indigo |
Linear Indigo | #5E6AD2 |
mercury-white |
Mercury White | #F4F5F8 |
nordic-gray |
Nordic Gray | #222326 |
linear-near-black |
Linear Near-Black | #08090A |
linear-surface-dark |
Linear Surface Dark | #1A1B1F |
linear-surface-elevated-dark |
Linear Surface Elevated (Dark) | #2C2D31 |
linear-text-on-dark |
Linear Text on Dark | #F7F8F8 |
linear-text-secondary-dark |
Linear Text Secondary (Dark) | #B4BCD0 |
linear-text-tertiary-dark |
Linear Text Tertiary (Dark) | #8A8F98 |
linear-text-on-light |
Linear Text on Light | #0B0C10 |
linear-text-secondary-light |
Linear Text Secondary (Light) | #3F4350 |
linear-text-tertiary-light |
Linear Text Tertiary (Light) | #6B7280 |
linear-surface-light-elevated |
Linear Surface Elevated (Light) | #FFFFFF |
linear-indigo-hover |
Linear Indigo Hover | #7A87F0 |
linear-success |
Linear Success | #4CB782 |
linear-warning |
Linear Warning | #F2C94C |
linear-error |
Linear Error | #E5484D |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
mercury-white |
#F4F5F8 |
surface |
linear-surface-light-elevated |
#FFFFFF |
surface-elevated |
linear-surface-light-elevated |
#FFFFFF |
text-primary |
linear-text-on-light |
#0B0C10 |
text-secondary |
linear-text-secondary-light |
#3F4350 |
text-tertiary |
linear-text-tertiary-light |
#6B7280 |
primary |
linear-indigo |
#5E6AD2 |
primary-hover |
linear-indigo-hover |
#7A87F0 |
accent |
linear-indigo |
#5E6AD2 |
accent-hover |
linear-indigo-hover |
#7A87F0 |
warning |
linear-warning |
#F2C94C |
warning-hover |
linear-warning |
#F2C94C |
error |
linear-error |
#E5484D |
success |
linear-success |
#4CB782 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
nordic-gray |
#222326 |
surface |
linear-surface-dark |
#1A1B1F |
surface-elevated |
linear-surface-elevated-dark |
#2C2D31 |
text-primary |
linear-text-on-dark |
#F7F8F8 |
text-secondary |
linear-text-secondary-dark |
#B4BCD0 |
text-tertiary |
linear-text-tertiary-dark |
#8A8F98 |
primary |
linear-indigo |
#5E6AD2 |
primary-hover |
linear-indigo-hover |
#7A87F0 |
accent |
linear-indigo |
#5E6AD2 |
accent-hover |
linear-indigo-hover |
#7A87F0 |
warning |
linear-warning |
#F2C94C |
warning-hover |
linear-warning |
#F2C94C |
error |
linear-error |
#E5484D |
success |
linear-success |
#4CB782 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
nordic-gray |
#222326 |
on-identity |
linear-text-on-dark |
#F7F8F8 |
background |
nordic-gray |
#222326 |
surface |
linear-surface-dark |
#1A1B1F |
surface-elevated |
linear-surface-elevated-dark |
#2C2D31 |
text-primary |
linear-text-on-dark |
#F7F8F8 |
text-secondary |
linear-text-secondary-dark |
#B4BCD0 |
text-tertiary |
linear-text-tertiary-dark |
#8A8F98 |
primary |
linear-indigo |
#5E6AD2 |
primary-hover |
linear-indigo-hover |
#7A87F0 |
accent |
linear-indigo |
#5E6AD2 |
accent-hover |
linear-indigo-hover |
#7A87F0 |
success |
linear-success |
#4CB782 |
warning |
linear-warning |
#F2C94C |
error |
linear-error |
#E5484D |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (7)
colorChoice → logo.mark
- allowed: linear-indigo, linear-text-on-dark, linear-text-on-light, mercury-white, nordic-gray
- forbidden: any-non-brand-color
Linear's brand guidance prefers monochrome wordmark usage; the indigo primary is the only accent color sanctioned for the mark. Recoloring into off-brand hues violates Linear's brand-use policy ("do not alter these files in any way").
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, cramped-clearspace
Linear's brand guidelines instruct consumers to "provide plenty of space around Linear assets" and forbid alteration of the logo files.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast minimum for body text. Linear's near-white-on-Nordic-Gray reads at very high contrast, comfortably above AA.
variantSelection → logo
- use:
wordmark-light - when:
backgroundColorScheme="dark"
On dark surfaces (the canonical Nordic Gray canvas), use the light-fill wordmark variant for legibility.
variantSelection → logo
- use:
wordmark-dark - when:
backgroundColorScheme="light"
On Mercury White or other light surfaces, use the dark-fill wordmark variant.
contextRestriction → roles.colors.identity
- forbiddenContexts: decorative-only, product-of-competitor, endorsement-implication
Linear's brand guidance prohibits use of the mark in ways that imply endorsement or appear without permission on competing-product surfaces.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Linear's near-monochrome surfaces start well above AA; consumers must hold that floor.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700
Linear's wordmark and display lockups use medium-to-bold weights in the 500–700 band; lighter weights compromise the precise, institutional voice.
💡 recommendation (2)
compositionConstraint → roles.colors.primary
- pairsWith: nordic-gray, mercury-white
The indigo primary is calibrated to read on both Nordic Gray and Mercury White. Pairing it with a third dominant hue breaks the calibrated quiet of Linear's identity.
numericRatio → typography.body.lineHeight
- min:
1.5 - max:
1.65
Linear's product surface reads with disciplined line-height in the 1.5–1.65 band. Tighter values feel cramped; looser values break the calm rhythm.
Provenance
- Source: https://linear.app
- License:
Proprietary — All Rights Reserved - Attribution: Linear and the Linear mark are trademarks of Linear Orbit, Inc. The primary brand color (#5E6AD2) is verified via the simple-icons brand database, which cites linear.app as the source. Mercury White (#F4F5F8) and Nordic Gray (#222326) are documented directly on Linear's brand page (linear.app/brand). Linear's brand guidance describes the primary as "a subtle desaturated blue," consistent with #5E6AD2.
- Imported:
2026-05-17 - Notes: Linear is a dark-first brand: the canonical product surface is Nordic Gray. The reference for body and display typography is Inter (for body) and Inter Tight (for tighter display lockups) — the closest open-source approximations to Linear's bespoke "Inter Display" cut. Both are already in the brand-atoms catalog.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Linear
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.
Linear
A clear hierarchy in Linear'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
palette
Linear
[email protected]font · heading
Inter Tight
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
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
→ linear-indigo #5E6AD2 accent-hover
→ linear-indigo-hover #7A87F0 background
→ nordic-gray #222326 error
→ linear-error #E5484D identity
→ nordic-gray #222326 on-identity
→ linear-text-on-dark #F7F8F8 primary
→ linear-indigo #5E6AD2 primary-hover
→ linear-indigo-hover #7A87F0 success
→ linear-success #4CB782 surface
→ linear-surface-dark #1A1B1F surface-elevated
→ linear-surface-elevated-dark #2C2D31 text-primary
→ linear-text-on-dark #F7F8F8 text-secondary
→ linear-text-secondary-dark #B4BCD0 text-tertiary
→ linear-text-tertiary-dark #8A8F98 warning
→ linear-warning #F2C94C Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter Tight prose
→ body Inter Palette mode mappings (from linear)
Light mode (14 roles)
accent
→ linear-indigo accent-hover
→ linear-indigo-hover background
→ mercury-white error
→ linear-error primary
→ linear-indigo primary-hover
→ linear-indigo-hover success
→ linear-success surface
→ linear-surface-light-elevated surface-elevated
→ linear-surface-light-elevated text-primary
→ linear-text-on-light text-secondary
→ linear-text-secondary-light text-tertiary
→ linear-text-tertiary-light warning
→ linear-warning warning-hover
→ linear-warning Dark mode (14 roles)
accent
→ linear-indigo accent-hover
→ linear-indigo-hover background
→ nordic-gray error
→ linear-error primary
→ linear-indigo primary-hover
→ linear-indigo-hover success
→ linear-success surface
→ linear-surface-dark surface-elevated
→ linear-surface-elevated-dark text-primary
→ linear-text-on-dark text-secondary
→ linear-text-secondary-dark text-tertiary
→ linear-text-tertiary-dark warning
→ linear-warning warning-hover
→ linear-warning Rules (10 typed constraints)
error · 7 rules
colorChoice logo.mark allowed linear-indigo, linear-text-on-dark, linear-text-on-light, mercury-white, nordic-gray forbidden any-non-brand-color Linear's brand guidance prefers monochrome wordmark usage; the indigo primary is the only accent color sanctioned for the mark. Recoloring into off-brand hues violates Linear's brand-use policy ("do not alter these files in any way").
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, cramped-clearspace Linear's brand guidelines instruct consumers to "provide plenty of space around Linear assets" and forbid alteration of the logo files.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast minimum for body text. Linear's near-white-on-Nordic-Gray reads at very high contrast, comfortably above AA.
variantSelection logo use wordmark-light when backgroundColorScheme="dark" On dark surfaces (the canonical Nordic Gray canvas), use the light-fill wordmark variant for legibility.
variantSelection logo use wordmark-dark when backgroundColorScheme="light" On Mercury White or other light surfaces, use the dark-fill wordmark variant.
contextRestriction roles.colors.identity forbiddenContexts decorative-only, product-of-competitor, endorsement-implication Linear's brand guidance prohibits use of the mark in ways that imply endorsement or appear without permission on competing-product surfaces.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Linear's near-monochrome surfaces start well above AA; consumers must hold that floor.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 500, 600, 700 Linear's wordmark and display lockups use medium-to-bold weights in the 500–700 band; lighter weights compromise the precise, institutional voice.
recommendation · 2 rules
compositionConstraint roles.colors.primary pairsWith nordic-gray, mercury-white The indigo primary is calibrated to read on both Nordic Gray and Mercury White. Pairing it with a third dominant hue breaks the calibrated quiet of Linear's identity.
numericRatio typography.body.lineHeight min 1.5 max 1.65 Linear's product surface reads with disciplined line-height in the 1.5–1.65 band. Tighter values feel cramped; looser values break the calm rhythm.
Provenance
- Source
- https://linear.app
- License
Proprietary — All Rights Reserved- Attribution
- Linear and the Linear mark are trademarks of Linear Orbit, Inc. The primary brand color (#5E6AD2) is verified via the simple-icons brand database, which cites linear.app as the source. Mercury White (#F4F5F8) and Nordic Gray (#222326) are documented directly on Linear's brand page (linear.app/brand). Linear's brand guidance describes the primary as "a subtle desaturated blue," consistent with #5E6AD2.
- Imported
2026-05-17- Notes
- Linear is a dark-first brand: the canonical product surface is Nordic Gray. The reference for body and display typography is Inter (for body) and Inter Tight (for tighter display lockups) — the closest open-source approximations to Linear's bespoke "Inter Display" cut. Both are already in the brand-atoms catalog.