Linear — Design System Inspiration
The dark-mode productivity aesthetic: Inter Display, electric violet, and surgical motion.
Design System Inspiration of Linear
1. Visual Theme & Atmosphere
2. Color Palette & Roles
Background Surfaces
Text & Content
Brand & Accent
Status Colors
Border & Divider
# Design System Inspiration of Linear ## 1. Visual Theme & Atmosphere Linear's website is a masterclass in dark-mode-first product design — a near-black canvas (`#08090a`) where content emerges from darkness like starlight. The overall impression is one of extreme precision engineering: every element exists in a carefully calibrated hierarchy of luminance, from barely-visible borders (`rgba(255,255,255,0.05)`) to soft, luminous text (`#f7f8f8`). This is not a dark theme applied to a light design — it is darkness as the native medium, where information density is managed through subtle gradations of white opacity rather than color variation. The typography system is built entirely on Inter Variable with OpenType features `"cv01"` and `"ss03"` enabled globally, giving the typeface a cleaner, more geometric character. Inter is used at a remarkable range of weights — from 300 (light body) through 510 (medium, Linear's signature weight) to 590 (semibold emphasis). The 510 weight is…
By @meliwat - License: MIT
Raw markdown