What Linear does
#010102#08090a#7170ff#828fff
linear.app ships with data-theme=dark. The marketing background token is #010102 and the dark base level is #08090a; one theme sets border-primary to #ffffff14 (8% white), giving hairline dividers. Depth comes from soft radial gradients of translucent white, such as #ffffff0a (about 4%) fading to transparent, plus edge-glow and shine-beam masks on cards. The accent is #7170ff (hover #828fff), used sparingly. Type is Inter Variable at weights 510 (medium) and 680 (bold); the hero headline's lines start at opacity 0 with blur(10px) and translateY(20%) and resolve in.
Linear's system, as published
- Bg Marketing
- #010102
- Bg Level 0 Dark
- #08090a
- Border Primary
- #ffffff14
- Glow
- radial-gradient(50% 50%, #ffffff0a 0%, #fff0 100%)
- Accent
- #7170ff
- Accent Hover
- #828fff
- Font
- Inter Variable
- Weights · Medium
- 510
- Weights · Bold
- 680
- Headline Reveal · Opacity From
- 0
- Headline Reveal · Blur Px From
- 10
- Headline Reveal · Translate Y From
- 20%
Why it works
Near-black with faint white glows and hairline borders gives depth without boxes or heavy color, so the product UI and the headline carry the page. The few accent touches stand out because nothing else competes.
Best for
Developer tools, AI and software products, technical launches, and any piece that should feel precise and premium
What breaks it
- Pure black with full-opacity borders (reads harsh, not deep)
- Colored glows that turn the page into a gradient
- Accent on more than a few elements
Sources
- linear.app: Live homepage HTML and stylesheets: theme attribute, color tokens, radial glows, headline reveal styles
Steal it for your brand
The same system, written in your colors, type and shapes. Nothing of Linear's look comes with it.
The recipe
- Set the whole page on
palette.night, text inpalette.on night, secondary text at 60% opacity. - Separate sections and cards with 1 px hairlines of
palette.on nightat 8% opacity instead of filled boxes. - Behind the hero and key cards, place one radial glow of
palette.on nightat 4 to 8% opacity fading to transparent at half its radius. - Use
palette.accent on nightfor at most one or two marks per screen: a link, a status, a single highlighted word. - Reveal the headline line by line from a 10 px blur and a small rise, over the recipe's headline_reveal duration_ms with stagger_ms between lines; then hold still.
What you'll need
- A product screenshot or UI the customer owns, to sit under the glow
- A dark palette role or the ink color to stand in
Recipe as JSON
{
"recipe": {
"page_fill": "{palette.night}",
"text": "{palette.on_night}",
"text_muted_opacity": 0.6,
"hairline": "{palette.on_night}",
"hairline_opacity": 0.08,
"hairline_px": 1,
"glow_color": "{palette.on_night}",
"glow_opacity": {
"by": "style.emphasis",
"map": {
"color": 0.04,
"contrast": 0.08
},
"default": 0.05
},
"glow_radius_ratio": 0.5,
"accent": "{palette.accent_on_night}",
"accent_share_max": 0.05,
"card_radius_px": "{style.radius}",
"headline_weight": "{typography.display.weight}",
"headline_reveal": {
"blur_px_from": 10,
"rise_ratio_from": 0.2,
"duration_ms": {
"by": "style.motion",
"map": {
"calm": 900,
"crisp": 500,
"playful": 700
},
"default": 700
},
"stagger_ms": 80
},
"section_gap_px": {
"by": "style.density",
"map": {
"airy": 160,
"balanced": 128,
"dense": 96
},
"default": 128
}
},
"fallbacks": {
"palette.night": "{palette.ink}",
"palette.on_night": "{palette.paper}",
"palette.accent_on_night": "{palette.accent}",
"style.radius": 12
},
"steps": [
"Set the whole page on {palette.night}, text in {palette.on_night}, secondary text at 60% opacity.",
"Separate sections and cards with 1 px hairlines of {palette.on_night} at 8% opacity instead of filled boxes.",
"Behind the hero and key cards, place one radial glow of {palette.on_night} at 4 to 8% opacity fading to transparent at half its radius.",
"Use {palette.accent_on_night} for at most one or two marks per screen: a link, a status, a single highlighted word.",
"Reveal the headline line by line from a 10 px blur and a small rise, over the recipe's headline_reveal duration_ms with stagger_ms between lines; then hold still."
]
}See it working
- Linear: The dark homepage hero with blur-in headline, soft white glows and hairline-bordered cards
The lesson
Let a near-black page, faint hairlines and a cropped view of the app do the separating, so the headline needs no boxes or color.
The move
White type on near-black: "The product development system for teams and agents", a grey subline "Purpose-built for planning and building products. Designed for the AI era." and a "New Loops" link. The app interface starts directly below in a thin-bordered panel showing an issue titled "Faster app launch"; a pale Sign up pill is the nav's brightest button.
Why it works
- Our readLittle on the page is bright: the white headline, the Sign up pill and a few small yellow marks, so the eye has little to choose between.
- Our readShowing a real issue with an activity log and properties makes the embedded app read as the product, not an illustration of it.
- Our readHairline borders and spacing do the grouping in the nav and the app panel, which keeps a dark page from feeling heavy.
What not to copy
A dark canvas can lose legibility for small text, so check contrast on your own copy. Keep the few bright accents and the app view cropped into the hero.
