Linear Design System

243KB 源码 · 实验室采样 · 2026.02.13

243KB
Source
5
Variables
1
Breakpoint
Semantic Variables

Linear 的 CSS 变量，命名如诗。

:root {
  --color-primary: #4354B8; /* 不是 blue */
  --color-bg: #08090A; /* 不是 dark */
  --radius-md: 6px; /* 不是 6px */
}
#435
#080
#e4e
#E559
#8A8
Responsive Grid

768px 断点，2 列自适应。极简的背后是克制。

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
Column 1
Column 2
Typography
  • Font: Inter / SF Pro — 中性、耐看
  • Weight: 400 / 600 — 层次分明
  • Line-height: 1.5 — 阅读舒适
  • Tracking: -0.02em — 紧凑精致
The Formula

Premium = Order × Restraint − Decoration

高级感 = 秩序 × 克制 - 装饰