# Linear — Style Reference
> Precision dark product surface with restrained light actions and dense engineering controls
**Theme:** dark
测量值已归一化；名称、用途和建议属于解释。字体摘要独立列示，不按位置配对；字体文件未随产物分发。
Within the sampled public scope, Linear uses a near-black dark canvas, layered near-black panels, muted gray text, Inter Variable typography, Berkeley Mono code accents, and light pill CTAs. Indigo is used sparingly for accessibility/focus moments, while pricing contributes comparison controls and changelog contributes search, filters, pagination, and dense editorial lists.
Source: https://linear.app/
## Tokens — Colors
| Name | Value | Token | Role |
|---|---|---|---|
| Bright body text | #d0d6e0 | --color-text-body-bright | Silver-white body text used in content and active product UI. |
| Strong dark border | #34343a | --color-border-strong | Visible dark border candidate. |
| Primary white text | #f7f8f8 | --color-text-primary | Highest-contrast text and icon color on dark surfaces. |
| Subtle inactive text | #62666d | --color-text-subtle | Dim inactive icons and tertiary labels in product mockups. |
| Muted navigation text | #8a8f98 | --color-text-muted | Default muted navigation and secondary text. |
| Deep black canvas | #08090a | --color-canvas-black | Root dark canvas and text color on light action buttons. |
| White 8% border | #ffffff14 | --color-white-8 | Visible white border/hover candidate. |
| Raised surface 9 | #202122 | --color-surface-raised-9 | Dark raised panel/card surface. |
| White 5% surface | #ffffff0d | --color-white-5 | Secondary button and control surface wash. |
| Search surface | #141516 | --color-surface-search | Dark search field surface on changelog. |
| Cyan accent | #26b5ce | --color-accent-cyan | Cyan status/highlight accent observed in sampled content. |
| White | #ffffff | --color-white | Pure white text, indicators, and hover action surface. |
| Bright neutral text | #bec2c8 | --color-text-neutral-bright | Slightly dimmer neutral text candidate. |
| Bright neutral text | #e4e5e9 | --color-text-bright-neutral | Bright neutral text observed in sampled controls. |
| Light action surface | #e5e5e6 | --color-action-light | Default light filled-action surface with dark text. |
| White 12% border | #ffffff1f | --color-white-12 | Stronger white border candidate. |
| Raised surface 1 | #0f1011 | --color-surface-raised-1 | Slightly lighter than root canvas; used for panels/cards. |
| Raised border | #2e2e32 | --color-border-raised | Lighter dark border used on panels and hatching. |
| Observed color #95A2B3 | #95a2b3 | --color-blue-95a2b3 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Linear indigo accent | #5e6ad2 | --color-accent-indigo | Brand-adjacent indigo used for skip banner, toggles, and focus ring. |
| Orange accent | #f2994a | --color-accent-orange | Orange warning/status accent observed in sampled content. |
| Raised surface 8 | #1c1c1f | --color-surface-raised-8 | Near-black raised surface candidate. |
| Red accent | #eb5757 | --color-accent-red | Red error/status accent observed in sampled content. |
| White 3% wash | #ffffff08 | --color-white-3 | Faint white surface wash. |
| Green accent | #4cb782 | --color-accent-green | Green success/status accent observed in sampled content. |
| Muted dark border | #3e3e44 | --color-border-muted | Dim disabled border/pagination tone. |
| Observed color #9C9DA1 | #9c9da1 | --color-neutral-9c9da1 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| White 2% wash | #ffffff05 | --color-white-2 | Faint white control/background wash. |
| Observed color #F7C8C1 | #f7c8c1 | --color-red-f7c8c1 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| White 48% overlay | #ffffff7a | --color-white-48 | Semi-transparent white overlay candidate. |
| Observed color #F2C94C | #f2c94c | --color-yellow-f2c94c | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Raised dark surface | #23252a | --color-surface-border-raised | Dark raised surface and border tone in changelog. |
| Black | #000000 | --color-black | Pure black used for SVG/ink and dark layers. |
| Observed color #F0BF00 | #f0bf00 | --color-yellow-f0bf00 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #24282C | #24282c | --color-blue-24282c | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| White 6% wash | #ffffff0f | --color-white-6 | Low-opacity white border/surface candidate. |
| Transparent black | #00000000 | --color-transparent-black | Transparent utility background/border color. |
| Blue accent | #4ea7fc | --color-accent-blue | Blue link/status accent observed in sampled content. |
| White 16% surface | #ffffff29 | --color-white-16 | Bright low-opacity surface candidate. |
| Observed color #27A644 | #27a644 | --color-green-27a644 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Raised surface 4 | #161718 | --color-surface-raised-4 | Near-black raised surface candidate. |
| Observed color #949496 | #949496 | --color-neutral-949496 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #2A2A2D | #2a2a2d | --color-neutral-2a2a2d | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #FC7840 | #fc7840 | --color-orange-fc7840 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color COLORSRGB0P03137260P03529410P0392157-0P1 | #08090a1a | --color-color-colorsrgb0p03137260p03529410p0392157-0p1 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| High-contrast off-white | #e2e4e7 | --color-text-high-contrast | Bright off-white used for active controls and text. |
| White 20% surface | #ffffff33 | --color-white-20 | Bright low-opacity surface candidate. |
| Raised surface 2 | #101112 | --color-surface-raised-2 | Near-black raised surface candidate. |
| White 4% wash | #ffffff0a | --color-white-4 | Low-opacity white hover/control surface. |
| White 1% wash | #ffffff03 | --color-white-1 | Very faint white surface wash. |
| Light indigo accent | #6d78d5 | --color-accent-indigo-light | Lighter indigo used in highlights and gradients. |
| Observed color #F7F8F808 | #f7f8f808 | --color-neutral-f7f8f808 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Raised surface 3 | #121414 | --color-surface-raised-3 | Near-black raised surface candidate. |
| Observed color #090A0B | #090a0b | --color-neutral-090a0b | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #6D78D526 | #6d78d526 | --color-blue-6d78d526 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Code yellow | #e4f222 | --color-accent-code-yellow | High-visibility yellow code/terminal block surface. |
| Raised surface 6 | #191a1b | --color-surface-raised-6 | Near-black raised surface candidate. |
| Observed color #6B6B6B | #6b6b6b | --color-neutral-6b6b6b | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #585A5C | #585a5c | --color-neutral-585a5c | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| White 7% wash | #ffffff12 | --color-white-7 | Low-opacity white border/surface candidate. |
| Raised surface 5 | #18191a | --color-surface-raised-5 | Near-black raised surface candidate. |
| Observed color #E2E4E6 | #e2e4e6 | --color-neutral-e2e4e6 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #0B0B0BCC | #0b0b0bcc | --color-neutral-0b0b0bcc | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #3B3B3B | #3b3b3b | --color-neutral-3b3b3b | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #DCFFFF | #dcffff | --color-cyan-dcffff | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #1C85E8 | #1c85e8 | --color-blue-1c85e8 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #F34E52 | #f34e52 | --color-red-f34e52 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #00000080 | #00000080 | --color-neutral-00000080 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Observed color #555557 | #555557 | --color-neutral-555557 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| Raised surface 7 | #1c1c1d | --color-surface-raised-7 | Near-black raised surface candidate. |
| Focus ring indigo | #5e69d1 | --color-focus-indigo | Observed focus outline color; nearly identical to the indigo accent. |
| Observed color #626366 | #626366 | --color-neutral-626366 | 用途未确认：颜色值来自已采页面计算样式，具体全局语义未验证。 |
| 2% white wash | Gradient | --gradient-gradient-wash-2 | Flat white wash layer used over dark surfaces. |
| Diagonal hatch | Gradient | --gradient-gradient-diagonal-hatch | Repeating 3px diagonal hatch pattern. |
| Vertical hatch | Gradient | --gradient-gradient-vertical-hatch | Repeating 2px vertical hairline pattern. |
| 4% white wash | Gradient | --gradient-gradient-wash-4 | Flat white wash layer used over dark surfaces. |
| 5% white wash | Gradient | --gradient-gradient-wash-5 | Flat white wash layer used for controls. |
| Root fade | Gradient | --gradient-gradient-root-fade | Fades from root black to transparent. |
| Dark overlay | Gradient | --gradient-gradient-dark-overlay | Dark overlay with modern oklab interpolation. |
| Radial highlight | Gradient | --gradient-gradient-radial-highlight | Soft centered radial white highlight. |
| Bottom scrim | Gradient | --gradient-gradient-bottom-scrim | Progressive lab-color bottom scrim. |
| 3% white wash | Gradient | --gradient-gradient-wash-3 | Flat white wash layer used over dark surfaces. |
| Blue edge sheen | Gradient | --gradient-gradient-blue-edge-sheen | Blue horizontal sheen layered over a white control wash. |
| Radial vignette | Gradient | --gradient-gradient-radial-vignette | Soft radial highlight/vignette layer. |
| Deep radial silver | Gradient | --gradient-gradient-deep-radial-silver | Radial black overlay above a dark-to-silver vertical blend. |
| Corner sheen | Gradient | --gradient-gradient-corner-sheen | Corner-focused white sheen with stepped opacity. |
| Blue-purple tint | Gradient | --gradient-gradient-blue-purple-tint | White overlay above blue-to-purple blend. |
| 2% horizontal wash | Gradient | --gradient-gradient-horizontal-wash-2 | Flat horizontal white wash layer. |
## Tokens — Typography
### Inter Variable stack — Primary UI/marketing stack; Inter Variable was loaded across successful snapshots. · --font-font-inter-variable-stack
- **Substitute:** "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif
- **Rendered fonts observed:** Inter Variable
- **Weights:** 300, 400, 500, 510, 590
- **Sizes:** 10px, 11px, 12px, 13px, 13.6px, 14px, 15px, 16px, 17px, 18px, 20px, 24px, 32px, 38px, 48px, 64px
- **Line height:** 1, 1.1, 1.125, 1.167, 1.231, 1.273, 1.33, 1.333, 1.4, 1.5, 1.538, 1.6, 2.462, 2.75, 3.077, normal
- **Letter spacing:** -1.408px, -1.056px, -0.836px, -0.704px, -0.288px, -0.24px, -0.204px, -0.182px, -0.165px, -0.15px, -0.132px, -0.13px, -0.06px, -0.048px, -0.039px, normal
- **OpenType features:** "cv01", "ss03", "cv01", "ss01", "ss03"
- **Role:** Primary UI/marketing stack; Inter Variable was loaded across successful snapshots.
### Berkeley Mono stack — Monospace stack used for code samples; Berkeley Mono was loaded in successful snapshots. · --font-font-berkeley-mono-stack
- **Substitute:** ui-monospace, "SF Mono", Menlo, monospace
- **Weights:** 400
- **Sizes:** 10px, 12px, 13.125px, 14.875px
- **Line height:** 1.3, 1.4
- **Letter spacing:** -0.165px, normal
- **OpenType features:** "cv01", "ss03"
- **Role:** Monospace stack used for code samples; Berkeley Mono was loaded in successful snapshots.
### Type Scale
| Role | Family | Weight | Size | Line Height | Letter Spacing | Token |
|---|---|---|---|---|---|---|
| Inter Variable 15px / 24px · 400 | Inter Variable | 400 | 15px | 1.6 | -0.165px | --text-type-15px-400-24px-font-size |
| Inter Variable 17px / 27.2px · 400 | Inter Variable | 400 | 17px | 1.6 | normal | --text-type-17px-400-27p2px-font-size |
| Inter Variable 13px / 19.5px · 400 | Inter Variable | 400 | 13px | 1.5 | -0.13px | --text-type-13px-400-19p5px-font-size |
| Inter Variable 13px / 20.8px · 510 | Inter Variable | 510 | 13px | 1.6 | -0.165px | --text-type-13px-510-20p8px-font-size |
| Inter Variable 13px / 20.8px · 510 | Inter Variable | 510 | 13px | 1.6 | normal | --text-type-13px-510-20p8px-25fe-font-size |
| Inter Variable 15px / 24px · 510 | Inter Variable | 510 | 15px | 1.6 | -0.165px | --text-type-15px-510-24px-font-size |
| Inter Variable 12px / 14px · 400 | Inter Variable | 400 | 12px | 1.167 | normal | --text-type-12px-400-14px-font-size |
| Inter Variable 12px / 16px · 400 | Inter Variable | 400 | 12px | 1.333 | normal | --text-type-12px-400-16px-font-size |
| Inter Variable 12px / 14px · 510 | Inter Variable | 510 | 12px | 1.167 | normal | --text-type-12px-510-14px-font-size |
| Inter Variable 24px / 31.92px · 590 | Inter Variable | 590 | 24px | 1.33 | -0.288px | --text-type-24px-590-31p92px-font-size |
| Inter Variable 13px / 19.5px · 510 | Inter Variable | 510 | 13px | 1.5 | -0.13px | --text-type-13px-510-19p5px-font-size |
| Inter Variable 13px / 19.5px · 400 | Inter Variable | 400 | 13px | 1.5 | normal | --text-type-13px-400-19p5px-7795-font-size |
| Inter Variable 12px / 16.8px · 510 | Inter Variable | 510 | 12px | 1.4 | normal | --text-type-12px-510-16p8px-font-size |
| Inter Variable 13px / 19.5px · 510 | Inter Variable | 510 | 13px | 1.5 | -0.13px | --text-type-13px-510-19p5px-4660-font-size |
| Inter Variable 13px / normal · 510 | Inter Variable | 510 | 13px | normal | normal | --text-type-13px-510-normal-font-size |
| Inter Variable 24px / 31.92px · 510 | Inter Variable | 510 | 24px | 1.33 | -0.288px | --text-type-24px-510-31p92px-font-size |
| Inter Variable 10px / 14px · 400 | Inter Variable | 400 | 10px | 1.4 | -0.15px | --text-type-10px-400-14px-font-size |
| Inter Variable 12px / 16.8px · 400 | Inter Variable | 400 | 12px | 1.4 | normal | --text-type-12px-400-16p8px-font-size |
| Inter Variable 14px / 21px · 400 | Inter Variable | 400 | 14px | 1.5 | -0.182px | --text-type-14px-400-21px-font-size |
| Inter Variable 12px / normal · 510 | Inter Variable | 510 | 12px | normal | -0.165px | --text-type-12px-510-normal-font-size |
| Inter Variable 13.6px / normal · 510 | Inter Variable | 510 | 13.6px | normal | normal | --text-type-13p6px-510-normal-font-size |
| Berkeley Mono 13.125px / 17.0625px · 400 | Berkeley Mono | 400 | 13.125px | 1.3 | -0.165px | --text-type-13p125px-400-17p0625px-font-size |
| Berkeley Mono 14.875px / 19.3375px · 400 | Berkeley Mono | 400 | 14.875px | 1.3 | normal | --text-type-14p875px-400-19p3375px-font-size |
| Inter Variable 15px / 24px · 400 | Inter Variable | 400 | 15px | 1.6 | -0.165px | --text-type-15px-400-24px-57a3-font-size |
| Inter Variable 18px / 28.8px · 400 | Inter Variable | 400 | 18px | 1.6 | -0.165px | --text-type-18px-400-28p8px-font-size |
| Inter Variable 12px / 16.8px · 400 | Inter Variable | 400 | 12px | 1.4 | normal | --text-type-12px-400-16p8px-42db-font-size |
| Inter Variable 48px / 48px · 510 | Inter Variable | 510 | 48px | 1 | -1.056px | --text-type-48px-510-48px-font-size |
| Inter Variable 13px / 40px · 510 | Inter Variable | 510 | 13px | 3.077 | normal | --text-type-13px-510-40px-font-size |
| Inter Variable 14px / 21px · 400 | Inter Variable | 400 | 14px | 1.5 | -0.182px | --text-type-14px-400-21px-fd14-font-size |
| Inter Variable 12px / 16.8px · 510 | Inter Variable | 510 | 12px | 1.4 | normal | --text-type-12px-510-16p8px-49fb-font-size |
| Inter Variable 10px / 16px · 400 | Inter Variable | 400 | 10px | 1.6 | -0.15px | --text-type-10px-400-16px-font-size |
| Inter Variable 13px / 20px · 400 | Inter Variable | 400 | 13px | 1.538 | -0.039px | --text-type-13px-400-20px-font-size |
| Inter Variable 17px / 23.8px · 590 | Inter Variable | 590 | 17px | 1.4 | -0.204px | --text-type-17px-590-23p8px-font-size |
| Inter Variable 32px / 36px · 590 | Inter Variable | 590 | 32px | 1.125 | -0.704px | --text-type-32px-590-36px-font-size |
| Inter Variable 20px / 26.6px · 590 | Inter Variable | 590 | 20px | 1.33 | -0.24px | --text-type-20px-590-26p6px-font-size |
| Inter Variable 16px / 44px · 510 | Inter Variable | 510 | 16px | 2.75 | normal | --text-type-16px-510-44px-font-size |
| Inter Variable 24px / 31.92px · 400 | Inter Variable | 400 | 24px | 1.33 | -0.288px | --text-type-24px-400-31p92px-font-size |
| Berkeley Mono 12px / 16.8px · 400 | Berkeley Mono | 400 | 12px | 1.4 | normal | --text-type-12px-400-16p8px-923d-font-size |
| Inter Variable 13px / 20px · 500 | Inter Variable | 500 | 13px | 1.538 | normal | --text-type-13px-500-20px-font-size |
| Inter Variable 38px / 41.8px · 510 | Inter Variable | 510 | 38px | 1.1 | -0.836px | --text-type-38px-510-41p8px-font-size |
| Inter Variable 14px / 21px · 510 | Inter Variable | 510 | 14px | 1.5 | normal | --text-type-14px-510-21px-font-size |
| Inter Variable 15px / 20px · 590 | Inter Variable | 590 | 15px | 1.333 | -0.165px | --text-type-15px-590-20px-font-size |
| Inter Variable 15px / 20px · 300 | Inter Variable | 300 | 15px | 1.333 | -0.06px | --text-type-15px-300-20px-font-size |
| Inter Variable 13px / 32px · 510 | Inter Variable | 510 | 13px | 2.462 | normal | --text-type-13px-510-32px-font-size |
| Inter Variable 13px / 20px · 400 | Inter Variable | 400 | 13px | 1.538 | -0.13px | --text-type-13px-400-20px-65e1-font-size |
| Inter Variable 12px / 16px · 510 | Inter Variable | 510 | 12px | 1.333 | normal | --text-type-12px-510-16px-font-size |
| Inter Variable 13px / 16px · 500 | Inter Variable | 500 | 13px | 1.231 | normal | --text-type-13px-500-16px-font-size |
| Inter Variable 12px / 14px · 400 | Inter Variable | 400 | 12px | 1.167 | normal | --text-type-12px-400-14px-bd13-font-size |
| Inter Variable 13px / 16px · 400 | Inter Variable | 400 | 13px | 1.231 | -0.13px | --text-type-13px-400-16px-font-size |
| Inter Variable 13px / 20px · 510 | Inter Variable | 510 | 13px | 1.538 | -0.13px | --text-type-13px-510-20px-font-size |
| Inter Variable 12px / 14px · 510 | Inter Variable | 510 | 12px | 1.167 | normal | --text-type-12px-510-14px-12d7-font-size |
| Inter Variable 15px / 24px · 590 | Inter Variable | 590 | 15px | 1.6 | -0.165px | --text-type-15px-590-24px-font-size |
| Inter Variable 64px / 64px · 510 | Inter Variable | 510 | 64px | 1 | -1.408px | --text-type-64px-510-64px-font-size |
| Inter Variable 17px / 27.2px · 590 | Inter Variable | 590 | 17px | 1.6 | normal | --text-type-17px-590-27p2px-font-size |
| Inter Variable 11px / 14px · 400 | Inter Variable | 400 | 11px | 1.273 | normal | --text-type-11px-400-14px-font-size |
| Inter Variable 16px / 24px · 400 | Inter Variable | 400 | 16px | 1.5 | normal | --text-type-16px-400-24px-font-size |
| Inter Variable 12px / 19.2px · 590 | Inter Variable | 590 | 12px | 1.6 | -0.132px | --text-type-12px-590-19p2px-font-size |
| Inter Variable 17px / 27.2px · 510 | Inter Variable | 510 | 17px | 1.6 | normal | --text-type-17px-510-27p2px-font-size |
| Inter Variable 12px / 19.2px · 300 | Inter Variable | 300 | 12px | 1.6 | -0.048px | --text-type-12px-300-19p2px-font-size |
| Inter Variable 11px / 17.6px · 510 | Inter Variable | 510 | 11px | 1.6 | normal | --text-type-11px-510-17p6px-font-size |
| Inter Variable 13px / 20px · 400 | Inter Variable | 400 | 13px | 1.538 | normal | --text-type-13px-400-20px-64e2-font-size |
| Inter Variable 12px / 14px · 500 | Inter Variable | 500 | 12px | 1.167 | normal | --text-type-12px-500-14px-font-size |
| Inter Variable 14px / 21px · 510 | Inter Variable | 510 | 14px | 1.5 | -0.182px | --text-type-14px-510-21px-d76c-font-size |
| Berkeley Mono 10px / 14px · 400 | Berkeley Mono | 400 | 10px | 1.4 | normal | --text-type-10px-400-14px-74bf-font-size |
## Tokens — Spacing & Shapes
**Density:** 未确认
### Spacing Scale
| Name | Value | Token |
|---|---|---|
| Observed spacing 8px | 8px | --spacing-space-8px |
| Observed spacing 6px | 6px | --spacing-space-6px |
| Observed spacing 32px | 32px | --spacing-space-32px |
| Observed spacing 14px | 14px | --spacing-space-14px |
| Observed spacing 16px | 16px | --spacing-space-16px |
| Observed spacing 12px | 12px | --spacing-space-12px |
| Observed spacing 4px | 4px | --spacing-space-4px |
| Observed spacing -1px | -1px | --spacing-space-1px |
| Observed spacing 3px | 3px | --spacing-space-3px |
| Observed spacing 20px | 20px | --spacing-space-20px |
| Observed spacing 24px | 24px | --spacing-space-24px |
| Observed spacing 10px | 10px | --spacing-space-10px |
| Observed spacing 2px | 2px | --spacing-space-2px |
| Observed spacing 1px | 1px | --spacing-space-1px-ebe2 |
| Observed spacing 7px | 7px | --spacing-space-7px |
| Observed spacing 56px | 56px | --spacing-space-56px |
| Observed spacing -4px | -4px | --spacing-space-4px-44ad |
| Observed spacing 3.28125px | 3.28125px | --spacing-space-3p28125px |
| Observed spacing 1.3125px | 1.3125px | --spacing-space-1p3125px |
| Observed spacing 11px | 11px | --spacing-space-11px |
| Observed spacing 1.4875px | 1.4875px | --spacing-space-1p4875px |
| Observed spacing 3.71875px | 3.71875px | --spacing-space-3p71875px |
| Observed spacing 48px | 48px | --spacing-space-48px |
| Observed spacing 5px | 5px | --spacing-space-5px |
| Observed spacing 40px | 40px | --spacing-space-40px |
| Observed spacing 30px | 30px | --spacing-space-30px |
| Observed spacing 28px | 28px | --spacing-space-28px |
| Observed spacing -30px | -30px | --spacing-space-30px-b4be |
| Observed spacing 42px | 42px | --spacing-space-42px |
| Observed spacing -16px | -16px | --spacing-space-16px-62ad |
| Observed spacing 23px | 23px | --spacing-space-23px |
| Observed spacing 1319px | 1319px | --spacing-space-1319px |
| Observed spacing -195px | -195px | --spacing-space-195px |
| Observed spacing 19px | 19px | --spacing-space-19px |
| Observed spacing -720px | -720px | --spacing-space-720px |
| Observed spacing 9px | 9px | --spacing-space-9px |
| Observed spacing 18px | 18px | --spacing-space-18px |
| Observed spacing 46px | 46px | --spacing-space-46px |
| Observed spacing 80px | 80px | --spacing-space-80px |
| Observed spacing -2px | -2px | --spacing-space-2px-d7e0 |
| Observed spacing 128px | 128px | --spacing-space-128px |
| Observed spacing 31px | 31px | --spacing-space-31px |
| Observed spacing 36px | 36px | --spacing-space-36px |
| Observed spacing 15px | 15px | --spacing-space-15px |
| Observed spacing 96px | 96px | --spacing-space-96px |
| Observed spacing 35px | 35px | --spacing-space-35px |
| Observed spacing 43px | 43px | --spacing-space-43px |
| Observed spacing 77px | 77px | --spacing-space-77px |
| Observed spacing 225.875px | 225.875px | --spacing-space-225p875px |
| Observed spacing 289.391px | 289.391px | --spacing-space-289p391px |
| Observed spacing 571.391px | 571.391px | --spacing-space-571p391px |
| Observed spacing -8px | -8px | --spacing-space-8px-b05a |
| Observed spacing 60px | 60px | --spacing-space-60px |
| Observed spacing 64px | 64px | --spacing-space-64px |
| Observed spacing 71px | 71px | --spacing-space-71px |
| Observed spacing -24px | -24px | --spacing-space-24px-5ee2 |
| Observed spacing 507.875px | 507.875px | --spacing-space-507p875px |
| Observed spacing 39px | 39px | --spacing-space-39px |
| Observed spacing 72px | 72px | --spacing-space-72px |
| Observed spacing 584.172px | 584.172px | --spacing-space-584p172px |
| Observed spacing 302.172px | 302.172px | --spacing-space-302p172px |
| Observed spacing 188.703px | 188.703px | --spacing-space-188p703px |
| Observed spacing 470.703px | 470.703px | --spacing-space-470p703px |
| Observed spacing 95px | 95px | --spacing-space-95px |
### Border Radius
| Element | Value |
|---|---|
| Observed radius 9999px | 9999px |
| Observed radius 8px | 8px |
| Observed radius 4px | 4px |
| Observed radius 5px | 5px |
| Observed radius 50% | 50% |
| Observed radius 12px | 12px |
| Observed radius 9px | 9px |
| Observed radius 6px | 6px |
| Observed radius 3.9375px | 3.9375px |
| Observed radius 4.4625px | 4.4625px |
| Observed radius 16px | 16px |
| Observed radius 999px | 999px |
| Observed radius 2px | 2px |
| Observed radius 400px | 400px |
| Observed radius 1.5px | 1.5px |
| Observed radius 3px | 3px |
| Observed radius 22px | 22px |
| Observed radius 24px | 24px |
| Observed radius 100px | 100px |
### Shadows
| Name | Value | Token |
|---|---|---|
| Dark border shadow | #00000000 0px 0px 0px 0px, #3e3e44 0px 0px 0px 1px | --shadow-shadow-border-dark |
| Inset panel shadow | #ffffff08 0px 0px 0px 1px inset, #ffffff0a 0px 1px 0px 0px inset, #00000099 0px 0px 0px 1px, #0000001a 0px 4px 4px 0px | --shadow-shadow-inset-panel |
| Light action shadow | #00000000 0px 8px 2px 0px, #00000003 0px 5px 2px 0px, #0000000a 0px 3px 2px 0px, #00000012 0px 1px 1px 0px, #00000014 0px 0px 1px 0px | --shadow-shadow-action-light |
| Dark outline shadow | #00000033 0px 0px 0px 1px | --shadow-shadow-outline-dark |
| Deep inset shadow | #00000033 0px 0px 12px 0px inset | --shadow-shadow-inset-deep |
| Inset hairline | #ffffff0d 0px 0px 0px 1px inset | --shadow-shadow-inset-hairline |
| Floating shadow | #00000040 0px 2px 32px 0px | --shadow-shadow-floating |
| Inset highlight | #ffffff14 0px 0px 0px 0.5px inset | --shadow-shadow-inset-highlight |
| Ambient dark shadow | #08090a99 0px 4px 32px 0px | --shadow-shadow-ambient-dark |
| Panel shadow | #00000033 0px 4px 24px 0px | --shadow-shadow-panel |
| Raised inset border | #23252a 0px 0px 0px 1px inset | --shadow-shadow-inset-border-raised |
| Indigo focus glow | #5e6ad266 0px 0px 0px 3px | --shadow-shadow-focus-indigo |
| Bottom hairline | #00000066 0px 1px 0px 0px | --shadow-shadow-bottom-hairline |
| Thick outline | #00000033 0px 0px 0px 2px | --shadow-shadow-outline-thick |
| Compact shadow | #0000000f 0px 4px 4px -1px, #0000001f 0px 1px 1px 0px | --shadow-shadow-compact |
### Layout
- **Page max-width:** 未确认
- **Section gap:** 未确认
- **Card padding:** 未确认
- **Element gap:** 未确认
## Components
### Skip-to-content banner
**Role:** Full-width indigo accessibility banner with white 14px/510 text and 32px height.
Background #5e6ad2; Text #ffffff; Font Inter Variable 14px / 510; Line height 21px; Letter spacing normal; Padding 0px 16px 0px 16px; Radius 0px.
### Code editor textarea
**Role:** Transparent textarea overlay for the large Berkeley Mono code sample; keeps editing geometry without adding a visible chrome.
Background #00000000; Text #00000000; Font Berkeley Mono 14px / 400; Line height 24px; Letter spacing normal; Padding 0px 32px 0px 63.8px; Radius 0px.
### Global navigation bar
**Role:** Transparent 72px top navigation over the black canvas, pairing the logo with muted 13px links and light account actions.
Background #00000000; Text #f7f8f8; Font Inter Variable 16px / 400; Line height 24px; Letter spacing normal; Padding 0px; Radius 0px.
### Pricing toggle utility input
**Role:** One-pixel accessible toggle input; not a representative visible search/input surface.
Background #00000000; Text #ffffff; Font Inter Variable 13.3333px / 400; Line height normal; Letter spacing normal; Padding 0px; Radius 0px.
### Product menu trigger
**Role:** Transparent pill trigger with muted 13px text and 32px height.
Background #00000000; Text #8a8f98; Font Inter Variable 13px / 400; Line height 19.5px; Letter spacing normal; Padding 0px 12px 0px 12px; Radius 9999px.
### Hidden checkbox input
**Role:** One-pixel Base UI hidden input for toggle state; utility/control semantics, not a visible text field.
Background #3b3b3b; Text #ffffff; Font Inter Variable 13.3333px / 400; Line height normal; Letter spacing normal; Padding 0px; Radius 0px.
### Product demo sidebar
**Role:** Transparent 232px product navigation rail with dense 28px rows and subtle active/hover states.
Background #00000000; Text #f7f8f8; Font Inter Variable 16px / 400; Line height 24px; Letter spacing normal; Padding 8px 16px 16px 8px; Radius 0px.
### Focused product sidebar
**Role:** Sidebar geometry captured while the signup CTA holds focus; navigation itself remains transparent.
Background #00000000; Text #f7f8f8; Font Inter Variable 16px / 400; Line height 24px; Letter spacing normal; Padding 8px 16px 16px 8px; Radius 0px.
### Hovered product sidebar
**Role:** Sidebar geometry captured during signup CTA hover; navigation itself remains transparent.
Background #00000000; Text #f7f8f8; Font Inter Variable 16px / 400; Line height 24px; Letter spacing normal; Padding 8px 16px 16px 8px; Radius 0px.
### Scrolled product sidebar
**Role:** Sidebar geometry captured at scroll checkpoints; layout and transparent surface remain stable.
Background #00000000; Text #f7f8f8; Font Inter Variable 16px / 400; Line height 24px; Letter spacing normal; Padding 8px 16px 16px 8px; Radius 0px.
### Global signup button
**Role:** Light filled pill CTA with dark 13px/510 text, 32px height, and layered subtle elevation.
Background #e5e5e6; Text #08090a; Font Inter Variable 13px / 510; Line height 32px; Letter spacing normal; Padding 0px 12px 0px 12px; Radius 9999px; Border 1px solid #e5e5e6; Shadow #00000000 0px 8px 2px 0px, #00000003 0px 5px 2px 0px, #0000000a 0px 3px 2px 0px, #00000012 0px 1px 1px 0px, #00000014 0px 0px 1px 0px.
### Mobile product sidebar
**Role:** Mobile variant of the 232px product navigation rail.
Background #00000000; Text #f7f8f8; Font Inter Variable 16px / 400; Line height 24px; Letter spacing normal; Padding 8px 16px 16px 8px; Radius 0px.
### Pricing currency select
**Role:** Transparent mobile select with 40px height and 8px radius; styled as a compact dark control.
Background #00000000; Text #f7f8f8; Font Inter Variable 16px / 590; Line height 24px; Letter spacing -0.47px; Padding 0px 10px 0px 10px; Radius 8px.
### Sidebar disclosure control
**Role:** Transparent 28px control with 8px radius used in the product demo navigation header.
Background #00000000; Text #ffffff; Font Inter Variable 13.3333px / 400; Line height normal; Letter spacing normal; Padding 0px 4px 0px 4px; Radius 8px.
### Mobile menu button
**Role:** Transparent 64px square mobile navigation trigger.
Background #00000000; Text #f7f8f8; Font Inter Variable 16px / 400; Line height 24px; Letter spacing normal; Padding 0px; Radius 0px.
### Hero primary CTA
**Role:** Light filled 44px pill with dark 16px/510 text; primary conversion action on homepage and pricing.
Background #e5e5e6; Text #08090a; Font Inter Variable 16px / 510; Line height 44px; Letter spacing normal; Padding 0px 20px 0px 20px; Radius 9999px; Border 1px solid #e5e5e6; Shadow #00000000 0px 8px 2px 0px, #00000003 0px 5px 2px 0px, #0000000a 0px 3px 2px 0px, #00000012 0px 1px 1px 0px, #00000014 0px 0px 1px 0px.
### Sidebar collapse icon
**Role:** Inactive circular icon control with subtle gray icon color.
Background #00000000; Text #62666d; Font Inter Variable 13.3333px / 400; Line height normal; Letter spacing normal; Padding 0px; Radius 9999px.
### Changelog search field
**Role:** Dark 40px search trigger with 100px radius, muted placeholder text, and 280px desktop width.
Background #141516; Text #8a8f98; Font Inter Variable 14px / 400; Line height 40px; Letter spacing normal; Padding 0px 16px 0px 16px; Radius 100px; Shadow #ffffff08 0px 0px 0px 1px inset, #ffffff0a 0px 1px 0px 0px inset, #00000099 0px 0px 0px 1px, #0000001a 0px 4px 4px 0px.
### Changelog theme/menu icon
**Role:** Transparent 40px circular icon control with muted icon color.
Background #00000000; Text #8a8f98; Font Inter Variable 15px / 510; Line height 40px; Letter spacing normal; Padding 0px 16px 0px 16px; Radius 9999px.
### Contact sales button
**Role:** 5% white pill surface with white 16px/510 text and 44px height.
Background #ffffff0d; Text #f7f8f8; Font Inter Variable 16px / 510; Line height 44px; Letter spacing normal; Padding 0px 20px 0px 20px; Radius 9999px; Shadow #ffffff08 0px 0px 0px 1px inset, #ffffff0a 0px 1px 0px 0px inset, #00000099 0px 0px 0px 1px, #0000001a 0px 4px 4px 0px.
### Sidebar active icon
**Role:** 2% white circular active icon treatment with bright off-white icon color.
Background #ffffff05; Text #e2e4e7; Font Inter Variable 13.3333px / 400; Line height normal; Letter spacing normal; Padding 0px; Radius 9999px; Border 1px solid #24282c.
### Changelog category filter
**Role:** Transparent 56px pill filter for the Fixes category, using white 15px/510 text.
Background #00000000; Text #f7f8f8; Font Inter Variable 15px / 510; Line height 24px; Letter spacing -0.165px; Padding 16px 0px 16px 0px; Radius 8px.
### Product sidebar item
**Role:** Transparent 28px row with 8px radius and silver-white 13px/510 text.
Background #00000000; Text #d0d6e0; Font Inter Variable 13px / 510; Line height normal; Letter spacing normal; Padding 0px 7px 0px 7px; Radius 8px.
### Changelog pagination control
**Role:** Transparent 32px circular pagination/icon control.
Background #00000000; Text #f7f8f8; Font Inter Variable 13px / 510; Line height 32px; Letter spacing normal; Padding 0px 12px 0px 12px; Radius 9999px.
### Pricing secondary CTA
**Role:** 5% white 40px pill with white 13px/510 text; wide pricing-card action.
Background #ffffff0d; Text #f7f8f8; Font Inter Variable 13px / 510; Line height 40px; Letter spacing normal; Padding 0px 14px 0px 14px; Radius 9999px; Shadow #ffffff08 0px 0px 0px 1px inset, #ffffff0a 0px 1px 0px 0px inset, #00000099 0px 0px 0px 1px, #0000001a 0px 4px 4px 0px.
### Workspace filter label
**Role:** Compact 24px sidebar filter row with dim 12px/510 text.
Background #00000000; Text #62666d; Font Inter Variable 12px / 510; Line height 14px; Letter spacing normal; Padding 4px 0px 4px 6px; Radius 8px.
### Older updates control
**Role:** Transparent 32px circular control used to load older changelog entries.
Background #00000000; Text #f7f8f8; Font Inter Variable 13px / 510; Line height 32px; Letter spacing normal; Padding 0px 12px 0px 12px; Radius 9999px.
### Pricing primary CTA
**Role:** Light filled 40px pill with dark 13px/510 text; stronger pricing conversion treatment.
Background #e5e5e6; Text #08090a; Font Inter Variable 13px / 510; Line height 40px; Letter spacing normal; Padding 0px 14px 0px 14px; Radius 9999px; Border 1px solid #e5e5e6; Shadow #00000000 0px 8px 2px 0px, #00000003 0px 5px 2px 0px, #0000000a 0px 3px 2px 0px, #00000012 0px 1px 1px 0px, #00000014 0px 0px 1px 0px.
### Active sidebar row
**Role:** 4% white 28px row with 8px radius, representing an active product navigation item.
Background #ffffff0a; Text #d0d6e0; Font Inter Variable 13px / 510; Line height normal; Letter spacing normal; Padding 0px 7px 0px 7px; Radius 8px.
### Product carousel arrow
**Role:** Inactive circular 28px arrow with dim icon color.
Background #00000000; Text #62666d; Font Inter Variable 13.3333px / 400; Line height normal; Letter spacing normal; Padding 0px; Radius 9999px.
### Footer locale option
**Role:** Compact 22px footer control with 5px radius and white icon/text.
Background #00000000; Text #f7f8f8; Font Inter Variable 13.3333px / 400; Line height normal; Letter spacing normal; Padding 0px; Radius 5px.
### Product header action
**Role:** Transparent circular 28px action with white icon color.
Background #00000000; Text #ffffff; Font Inter Variable 13.3333px / 400; Line height normal; Letter spacing normal; Padding 0px; Radius 9999px.
### Disabled footer control
**Role:** Compact footer control using the muted dark border color for a disabled/inactive state.
Background #00000000; Text #3e3e44; Font Inter Variable 13.3333px / 400; Line height normal; Letter spacing normal; Padding 0px; Radius 5px.
### Media carousel dot
**Role:** 2% white 28px circular dot with muted icon color.
Background #ffffff05; Text #8a8f98; Font Inter Variable 13.3333px / 400; Line height normal; Letter spacing normal; Padding 0px 7px 0px 7px; Radius 9999px; Shadow #ffffff0d 0px 0px 0px 1px inset.
### Segmented carousel arrow
**Role:** Transparent 28px arrow within a segmented product media control.
Background #00000000; Text #8a8f98; Font Inter Variable 13.3333px / 400; Line height normal; Letter spacing normal; Padding 0px; Radius 0px.
### Performance platform tab
**Role:** Compact 24px tab with 16px radius and silver-white 12px text.
Background #00000000; Text #d0d6e0; Font Inter Variable 12px / 400; Line height 14px; Letter spacing normal; Padding 0px 11px 0px 7px; Radius 16px; Border 1px solid #2e2e32.
### Miniature carousel dot
**Role:** Tiny 14px inactive dot used inside a product illustration.
Background #00000000; Text #62666d; Font Inter Variable 13.3333px / 400; Line height normal; Letter spacing normal; Padding 0px; Radius 0px.
### Product toolbar control
**Role:** Transparent 28px control with 4px radius and white icon color.
Background #00000000; Text #ffffff; Font Inter Variable 13.3333px / 400; Line height normal; Letter spacing normal; Padding 1px 6px 1px 6px; Radius 0px.
### Product screenshot control
**Role:** 5% white 32px circular control with dim icon color and 50% radius.
Background #ffffff0d; Text #62666d; Font Inter Variable 13.3333px / 400; Line height normal; Letter spacing normal; Padding 0px; Radius 50%.
### Product utility button
**Role:** Transparent 28px square control with 4px radius and white icon color.
Background #00000000; Text #ffffff; Font Inter Variable 13.3333px / 400; Line height normal; Letter spacing normal; Padding 0px; Radius 4px.
### Product section action
**Role:** Transparent low-height action with white icon/text and measured 107px width.
Background #00000000; Text #ffffff; Font Inter Variable 13.3333px / 400; Line height normal; Letter spacing normal; Padding 0px; Radius 0px.
### Mobile screenshot control
**Role:** Mobile variant of the 5% white circular screenshot control.
Background #ffffff0d; Text #62666d; Font Inter Variable 13.3333px / 400; Line height normal; Letter spacing normal; Padding 0px; Radius 50%.
### Code sample tab bar
**Role:** Transparent 40px-wide bar spanning the code editor sample; acts as a UI chrome/button region.
Background #00000000; Text #f7f8f8; Font Inter Variable 16px / 400; Line height 24px; Letter spacing normal; Padding 0px 28px 0px 36px; Radius 0px.
### Mobile product control
**Role:** Compact transparent 24px control with 4px radius and white icon color.
Background #00000000; Text #ffffff; Font Inter Variable 13.3333px / 400; Line height normal; Letter spacing normal; Padding 0px; Radius 4px.
### Yellow code callout
**Role:** Large yellow code/terminal callout with 8px radius and dark canvas text overlay.
Background #e4f222; Text #f7f8f8; Font Inter Variable 16px / 400; Line height 24px; Letter spacing normal; Padding 24px 32px 24px 32px; Radius 8px.
### Focused signup button
**Role:** Focus state of the global signup pill: light surface remains, with a 1px indigo outline offset by 2px.
Background #e5e5e6; Text #08090a; Font Inter Variable 13px / 510; Line height 32px; Letter spacing normal; Padding 0px 12px 0px 12px; Radius 9999px; Border 1px solid #e5e5e6; Outline 1px solid #5e69d1; Outline offset 2px; Shadow #00000000 0px 8px 2px 0px, #00000003 0px 5px 2px 0px, #0000000a 0px 3px 2px 0px, #00000012 0px 1px 1px 0px, #00000014 0px 0px 1px 0px.
### Hovered signup button
**Role:** Hover state of the global signup pill: surface brightens from #e5e5e6 to pure white while geometry and typography remain stable.
Background #ffffff; Text #08090a; Font Inter Variable 13px / 510; Line height 32px; Letter spacing normal; Padding 0px 12px 0px 12px; Radius 9999px; Border 1px solid #e5e5e6; Shadow #00000000 0px 8px 2px 0px, #00000003 0px 5px 2px 0px, #0000000a 0px 3px 2px 0px, #00000012 0px 1px 1px 0px, #00000014 0px 0px 1px 0px.
## Do's and Don'ts
### Do
- Build on a near-black canvas with slightly lighter panels and a clear white-to-muted text hierarchy.
- Use light filled pills for primary actions; reserve bright white hover for the strongest conversion path.
- Keep controls compact and geometric: 28–32px navigation/product rows, 40–44px primary actions, and 9999px pills for global CTAs.
- Pair Inter Variable UI text with Berkeley Mono for code and terminal contexts.
- Preserve the 1px indigo focus outline with 2px offset on interactive actions.
### Don't
- Do not treat sampled spacing values as a global grid; observations include fractional and component-specific dimensions.
- Do not claim Linear’s private token names; all semantic names in this deliverable are interpretive.
- Do not generalize hover/focus observations to expanded menus, app-authenticated states, or unopened dialogs.
- Do not assume unread CSS declarations, Shadow DOM, iframes, missing images, or truncated samples were fully represented.
## Surfaces
| Level | Name | Value | Purpose |
|---|---|---|---|
| 0 | Root dark canvas | #08090a | Base page canvas across sampled pages. |
| 2 | White 8% surface | #ffffff14 | Visible low-opacity surface/border candidate. |
| 1 | Subtle raised surface | #0f1011 | Slightly raised dark panel surface. |
| 3 | Bright panel surface | #1c1c1f | Brighter dark panel surface. |
| 1 | White 5% surface | #ffffff0d | Secondary button surface. |
| 1 | White 2% surface | #ffffff05 | Faint control wash. |
| 2 | Light action surface | #e5e5e6 | Filled light CTA surface. |
| 2 | Border-like panel surface | #2e2e32 | Dark surface/border tone for panels. |
| 2 | Indigo accent surface | #5e6ad2 | Indigo banner/toggle surface. |
| 2 | Editorial dark surface | #23252a | Dark raised surface sampled on changelog content. |
| — | Observed surface #000000 | #000000 | 用途未确认：表面值来自已采页面计算样式，层级和全局用途未验证。 |
| 2 | Blue accent surface | #4ea7fc | Blue status/link surface. |
| 2 | White 16% surface | #ffffff29 | Bright low-opacity surface. |
| 3 | White hover surface | #ffffff | Pure-white hover state for the light CTA. |
| 2 | Red accent surface | #eb5757 | Red status surface. |
| 2 | Raised panel surface | #161718 | Dark panel/card surface. |
| — | Observed surface #62666D | #62666d | 用途未确认：表面值来自已采页面计算样式，层级和全局用途未验证。 |
| 2 | White 20% surface | #ffffff33 | Bright low-opacity surface. |
| 1 | Near-root raised surface | #101112 | Low-elevation dark surface. |
| 1 | White 4% surface | #ffffff0a | Control hover wash. |
| 0 | White 1% surface | #ffffff03 | Near-transparent wash. |
| 1 | Cool raised surface | #121414 | Low-elevation dark surface. |
| — | Observed surface #090A0B | #090a0b | 用途未确认：表面值来自已采页面计算样式，层级和全局用途未验证。 |
| 1 | Indigo wash surface | #6d78d526 | Soft indigo highlight surface. |
| 3 | Code yellow surface | #e4f222 | High-visibility code/terminal surface. |
| 1 | White 7% surface | #ffffff12 | Low-opacity surface/border candidate. |
| 2 | Raised card surface | #18191a | Dark card surface. |
| 2 | Green accent surface | #27a644 | Green status surface. |
| — | Observed surface #3B3B3B | #3b3b3b | 用途未确认：表面值来自已采页面计算样式，层级和全局用途未验证。 |
| 2 | Light cyan surface | #dcffff | Light cyan highlight surface. |
| 1 | White 3% surface | #ffffff08 | Faint surface wash. |
| 2 | Deep blue surface | #1c85e8 | Deep blue status surface. |
| 1 | Search surface | #141516 | Changelog search field surface. |
| 3 | Higher dark surface | #1c1c1d | Higher-elevation dark surface. |
## Elevation
- **Dark border shadow:** #00000000 0px 0px 0px 0px, #3e3e44 0px 0px 0px 1px
- **Inset panel shadow:** #ffffff08 0px 0px 0px 1px inset, #ffffff0a 0px 1px 0px 0px inset, #00000099 0px 0px 0px 1px, #0000001a 0px 4px 4px 0px
- **Light action shadow:** #00000000 0px 8px 2px 0px, #00000003 0px 5px 2px 0px, #0000000a 0px 3px 2px 0px, #00000012 0px 1px 1px 0px, #00000014 0px 0px 1px 0px
- **Dark outline shadow:** #00000033 0px 0px 0px 1px
- **Deep inset shadow:** #00000033 0px 0px 12px 0px inset
- **Inset hairline:** #ffffff0d 0px 0px 0px 1px inset
- **Floating shadow:** #00000040 0px 2px 32px 0px
- **Inset highlight:** #ffffff14 0px 0px 0px 0.5px inset
- **Ambient dark shadow:** #08090a99 0px 4px 32px 0px
- **Panel shadow:** #00000033 0px 4px 24px 0px
- **Raised inset border:** #23252a 0px 0px 0px 1px inset
- **Indigo focus glow:** #5e6ad266 0px 0px 0px 3px
- **Bottom hairline:** #00000066 0px 1px 0px 0px
- **Thick outline:** #00000033 0px 0px 0px 2px
- **Compact shadow:** #0000000f 0px 4px 4px -1px, #0000001f 0px 1px 1px 0px
