Button
Linear button: ghost is the default (near-zero opacity bg + thin translucent border); primary fills with brand indigo #5e6ad2.
html
Hand-tuned CSS, no framework
1 props · 6 states · 7 tags · 2 sources
Design system
web
v1.0.0
90/100Linear App UI Kit
@dante · Productivity & SaaS
Dark-mode-native, keyboard-first product UI inspired by Linear: near-black canvas, indigo-violet accent, Inter Variable at signature weight 510, and whisper-thin translucent borders.
HTML/CSS
React
shadcn/ui
Tailwind
#indigo
#keyboard-first
#monochrome
#product
#saas
Overview
Linear App UI Kit
Principles
Linear's surface is a masterclass in dark-mode-first product design. Treat darkness as the native medium, not a theme variant: information hierarchy comes from gradations of white opacity, not color. The page background #08090a IS the whitespace — content emerges from it through whisper-thin translucent borders (rgba(255,255,255,0.05) to rgba(255,255,255,0.08)) rather than shadows.
Typography
Inter Variable powered every text element with the OpenType features "cv01", "ss03" enabled globally — these are non-negotiable; without them you get generic Inter, not Linear's Inter. The signature weight is 510, sitting between regular and medium for a subtle emphasis that doesn't shout. Display sizes ran aggressive negative tracking: -1.584px at 72px, -1.056px at 48px, -0.704px at 32px. Below 16px, tracking relaxes toward normal. Berkeley Mono served all code, identifiers, and keyboard chips.
Color
The palette was almost entirely achromatic. Surfaces stacked by luminance: #08090a marketing, #0f1011 panels, #191a1b elevated, #28282c hover. Text laddered through #f7f8f8 (primary, never pure white) → #d0d6e0 (secondary) → #8a8f98 (tertiary) → #62666d (quaternary). The single chromatic accent was brand indigo #5e6ad2 with #7170ff for interactive elements and #828fff for hover — reserved exclusively for primary CTAs and active states. Status emerald #10b981 and green #27a644 appeared only on completion indicators.
Components & Density
Buttons used near-zero opacity backgrounds (rgba(255,255,255,0.02) ghost, 0.04 subtle), with brand indigo reserved for primary CTAs. Cards never used solid backgrounds — always translucent rgba white at 0.02–0.05 with a 1px translucent white border at 6–8px radius. Radii laddered tight: 2px (badges), 4px (rows), 6px (controls), 8px (cards), 12px (panels), 22px (large), 9999px (pills). Issue rows ran 32–36px tall for keyboard-first density, with mono identifiers and tinted-indigo selected states. Every interactive primitive paired with a Berkeley Mono keyboard chip.
Elevation
Drop shadows on dark surfaces are nearly invisible, so depth communicated through background luminance steps and translucent white borders. The dialog shadow was a multi-layer stack of barely-perceptible black layers — never a single dark blob.
Preview
Open in new tab ↗Derived view rendered server-side from package tokens and components — no authored copy.
Colors (27)
marketingBlack
#08090amarketingBlackDeep
#010102panelDark
#0f1011level3Surface
#191a1bsecondarySurface
#28282cprimaryText
#f7f8f8secondaryText
#d0d6e0tertiaryText
#8a8f98quaternaryText
#62666dbrandIndigo
#5e6ad2accentViolet
#7170ffaccentHover
#828fffsecurityLavender
#7a7fadstatusGreen
#27a644statusEmerald
#10b981borderPrimary
#23252aborderSecondary
#34343aborderTertiary
#3e3e44borderSubtle
rgba(255,255,255,0.05)borderStandard
rgba(255,255,255,0.08)lineTint
#141516lineTertiary
#18191alightBackground
#f7f8f8lightSurface
#f3f4f5lightBorder
#d0d6e0pureWhite
#ffffffoverlayPrimary
rgba(0,0,0,0.85)Typography (9)
display
Inter Variable, Inter Display, Inter, SF Pro Display, -apple-system, system-ui, sans-serif- 48pxThe quick brown fox jumps over the lazy dog 1234
- 32pxThe quick brown fox jumps over the lazy dog 1234
- 24pxThe quick brown fox jumps over the lazy dog 1234
- 18pxThe quick brown fox jumps over the lazy dog 1234
- 14pxThe quick brown fox jumps over the lazy dog 1234
- 12pxThe quick brown fox jumps over the lazy dog 1234
heading
Inter Variable, Inter, SF Pro Display, -apple-system, system-ui, sans-serif- 48pxThe quick brown fox jumps over the lazy dog 1234
- 32pxThe quick brown fox jumps over the lazy dog 1234
- 24pxThe quick brown fox jumps over the lazy dog 1234
- 18pxThe quick brown fox jumps over the lazy dog 1234
- 14pxThe quick brown fox jumps over the lazy dog 1234
- 12pxThe quick brown fox jumps over the lazy dog 1234
body
Inter Variable, Inter, -apple-system, system-ui, Segoe UI, Roboto, sans-serif- 48pxThe quick brown fox jumps over the lazy dog 1234
- 32pxThe quick brown fox jumps over the lazy dog 1234
- 24pxThe quick brown fox jumps over the lazy dog 1234
- 18pxThe quick brown fox jumps over the lazy dog 1234
- 14pxThe quick brown fox jumps over the lazy dog 1234
- 12pxThe quick brown fox jumps over the lazy dog 1234
label
Inter Variable, Inter, system-ui, sans-serif- 48pxThe quick brown fox jumps over the lazy dog 1234
- 32pxThe quick brown fox jumps over the lazy dog 1234
- 24pxThe quick brown fox jumps over the lazy dog 1234
- 18pxThe quick brown fox jumps over the lazy dog 1234
- 14pxThe quick brown fox jumps over the lazy dog 1234
- 12pxThe quick brown fox jumps over the lazy dog 1234
caption
Inter Variable, Inter, system-ui, sans-serif- 48pxThe quick brown fox jumps over the lazy dog 1234
- 32pxThe quick brown fox jumps over the lazy dog 1234
- 24pxThe quick brown fox jumps over the lazy dog 1234
- 18pxThe quick brown fox jumps over the lazy dog 1234
- 14pxThe quick brown fox jumps over the lazy dog 1234
- 12pxThe quick brown fox jumps over the lazy dog 1234
mono
Berkeley Mono, ui-monospace, SF Mono, Menlo, monospace- 48pxThe quick brown fox jumps over the lazy dog 1234
- 32pxThe quick brown fox jumps over the lazy dog 1234
- 24pxThe quick brown fox jumps over the lazy dog 1234
- 18pxThe quick brown fox jumps over the lazy dog 1234
- 14pxThe quick brown fox jumps over the lazy dog 1234
- 12pxThe quick brown fox jumps over the lazy dog 1234
featureSettings
'cv01', 'ss03'- 48pxThe quick brown fox jumps over the lazy dog 1234
- 32pxThe quick brown fox jumps over the lazy dog 1234
- 24pxThe quick brown fox jumps over the lazy dog 1234
- 18pxThe quick brown fox jumps over the lazy dog 1234
- 14pxThe quick brown fox jumps over the lazy dog 1234
- 12pxThe quick brown fox jumps over the lazy dog 1234
weights
unparsed{
"light": 300,
"regular": 400,
"signature": 510,
"semibold": 590
}scale
unparsed{
"displayXl": "72px/1.0 (-1.584px)",
"displayLg": "64px/1.0 (-1.408px)",
"display": "48px/1.0 (-1.056px)",
"h1": "32px/1.13 (-0.704px)",
"h2": "24px/1.33 (-0.288px)",
"h3": "20px/1.33 (-0.24px)",
"bodyLg": "18px/1.6 (-0.165px)",
"body": "16px/1.5",
"small": "15px/1.6 (-0.165px)",
"caption": "13px/1.5 (-0.13px)",
"label": "12px/1.4",
"micro": "11px/1.4"
}Components (14)
Input
Translucent input field: near-zero white opacity bg, semi-transparent border, soft tertiary placeholder.
html
Hand-tuned CSS
1 props · 5 states · 4 tags · 2 sources
Card
Translucent panel emerging from darkness — never solid, always rgba white at 0.02–0.05.
html
Hand-tuned CSS
1 props · 2 states · 5 tags · 2 sources
Missing states: focus-visible, disabled
Badge
Pill and inline tag variants. Status emerald for completion, neutral pill with thin solid border for chips.
html
Hand-tuned CSS
1 props · 1 states · 7 tags · 2 sources
Missing states: hover, focus-visible, disabled
Heading
Display headlines with aggressive negative tracking — Linear's compressed, engineered headline feel.
html
Hand-tuned CSS
1 props · 1 states · 11 tags · 2 sources
Missing states: hover, focus-visible, disabled
Link
Inline link in accent violet; chrome links use silver-gray with lighten-on-hover.
html
Hand-tuned CSS
1 props · 4 states · 5 tags · 2 sources
Missing states: disabled
Hero
Centered single-column hero on marketing black; compressed display headline + brand-indigo CTA + ghost secondary.
html
Hand-tuned CSS
0 props · 1 states · 6 tags · 2 sources
Missing states: hover, focus-visible, disabled
Nav
Sticky dark header on panel bg with logomark, link cluster, and brand-indigo CTA.
html
Hand-tuned CSS
0 props · 1 states · 5 tags · 2 sources
Missing states: hover, focus-visible, disabled
Footer
Quiet grid footer on marketing black with column headings and quaternary metadata row.
html
Hand-tuned CSS
0 props · 1 states · 4 tags · 2 sources
Missing states: hover, focus-visible, disabled
Stat
Single-figure stat block: large compressed number + caption label. Used in product metrics rows.
html
Hand-tuned CSS
0 props · 1 states · 4 tags · 2 sources
Missing states: hover, focus-visible, disabled
IssueRow
Linear-signature issue list row: status pill, title, identifier, assignee, due caption — tight density.
html
Hand-tuned CSS
1 props · 3 states · 8 tags · 2 sources
Missing states: focus-visible, disabled
Kbd
Keyboard shortcut chip in Berkeley Mono — Linear is a keyboard-first product, so Cmd+K, /, etc. appear everywhere.
html
Hand-tuned CSS
0 props · 1 states · 2 tags · 2 sources
Missing states: hover, focus-visible, disabled
Sidebar
Left navigation rail on panelDark with workspace switcher, primary nav, and section headers. Selected row uses tinted brand indigo.
html
Hand-tuned CSS
0 props · 3 states · 5 tags · 2 sources
Missing states: focus-visible, disabled
CommandPalette
Cmd+K modal: Level 3 surface with multi-layer dialog shadow, search input, result rows with Kbd hints.
html
Hand-tuned CSS
0 props · 2 states · 4 tags · 2 sources
Missing states: hover, focus-visible, disabled
DESIGN.md
Linear App UI Kit
Principles
Linear's surface is a masterclass in dark-mode-first product design. Treat darkness as the native medium, not a theme variant: information hierarchy comes from gradations of white opacity, not color. The page background #08090a IS the whitespace — content emerges from it through whisper-thin translucent borders (rgba(255,255,255,0.05) to rgba(255,255,255,0.08)) rather than shadows.
Typography
Inter Variable powered every text element with the OpenType features "cv01", "ss03" enabled globally — these are non-negotiable; without them you get generic Inter, not Linear's Inter. The signature weight is 510, sitting between regular and medium for a subtle emphasis that doesn't shout. Display sizes ran aggressive negative tracking: -1.584px at 72px, -1.056px at 48px, -0.704px at 32px. Below 16px, tracking relaxes toward normal. Berkeley Mono served all code, identifiers, and keyboard chips.
Color
The palette was almost entirely achromatic. Surfaces stacked by luminance: #08090a marketing, #0f1011 panels, #191a1b elevated, #28282c hover. Text laddered through #f7f8f8 (primary, never pure white) → #d0d6e0 (secondary) → #8a8f98 (tertiary) → #62666d (quaternary). The single chromatic accent was brand indigo #5e6ad2 with #7170ff for interactive elements and #828fff for hover — reserved exclusively for primary CTAs and active states. Status emerald #10b981 and green #27a644 appeared only on completion indicators.
Components & Density
Buttons used near-zero opacity backgrounds (rgba(255,255,255,0.02) ghost, 0.04 subtle), with brand indigo reserved for primary CTAs. Cards never used solid backgrounds — always translucent rgba white at 0.02–0.05 with a 1px translucent white border at 6–8px radius. Radii laddered tight: 2px (badges), 4px (rows), 6px (controls), 8px (cards), 12px (panels), 22px (large), 9999px (pills). Issue rows ran 32–36px tall for keyboard-first density, with mono identifiers and tinted-indigo selected states. Every interactive primitive paired with a Berkeley Mono keyboard chip.
Elevation
Drop shadows on dark surfaces are nearly invisible, so depth communicated through background luminance steps and translucent white borders. The dialog shadow was a multi-layer stack of barely-perceptible black layers — never a single dark blob.
Adapters (6)
All files (11)
DESIGN.mdtext/markdownSKILL.mdtext/markdowntokens/colors.jsonapplication/jsontokens/typography.jsonapplication/jsontokens/components.jsonapplication/jsonadapters/tokens.csstext/cssadapters/shadcn-registry.jsonapplication/jsonadapters/tailwind.config.jstext/javascriptadapters/react/index.tstext/typescriptadapters/html/index.htmltext/htmladapters/html/styles.csstext/css
Versions
- v1.0.05/8/2026Download