Design tokens · /preview

linear.app tokens, grouped by role.

Values pulled directly from linear.apps compiled CSS (--color-bg-level-*, --color-fg-*, --color-brand-bg, --color-link-*). The site ships dark-as-default, so we do the same.

Surfaces

#08090a--background--color-bg-level-0 / primary bg (dark)
#010102--bg-marketing--color-bg-marketing (deepest)
#0f1011--bg-level-1panel / card
#141516--bg-level-2tint / secondary surface
#191a1b--bg-level-3deeper tint

Typography

#f7f8f8--foreground / --fg-primarybody + headings
#d0d6e0--fg-secondarysupporting copy
#8a8f98--fg-tertiarymuted copy
#62666d--fg-quaternarymost muted / labels

Brand

#5e6ad2--brand--color-brand-bg / indigo action
#7170ff--brand-hover--color-accent-hover
#828fff--brand-link--color-link-primary

Accents

#eb5757--accent-reddestructive / urgent
#fc7840--accent-orangeIn Progress
#f0bf00--accent-yellowwarnings
#27a644--accent-greendone / positive
#4ea7fc--accent-blueinfo
#f79ce0--accent-pinkretained marketing accent

Type sample

The product development system for teams and agents.

Purpose-built for planning and building products. Designed for the AI era.

// Berkeley Mono substitute — JetBrains Mono until licensed.
const issue = { id: "ENG-2703", status: "In Progress" };
New