A DesignMD user

Generated Nov 2, 2026

DESIGN.md for linear.app

linear.app12 colors6 componentsInter Variable

Remix

12 screenshots captured· linear.app

1 / 12 · Linear – The system for product development · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Linear
description: |
  Linear's design system embodies a sophisticated, high-performance aesthetic
  rooted in minimalism and dark-mode-first thinking. The visual language
  prioritizes clarity and density—every interface element serves function, with
  virtually no decorative ornament. The atmosphere is cool, professional, and
  technically refined, reflecting a product designed for engineers and product
  teams who value precision over warmth. Typography is spare and weighted;
  spacing breathes but never wastes; colors are deployed with surgical
  restraint. The overall effect is one of quiet confidence and purposeful
  construction—a system that trusts its users to operate at depth and speed.
source:
  url: "https://linear.app"
  pagesAnalyzed: 6
  extractedAt: 2026-11-02
  tokensMeasured: true
colors:
  primary: "#FFFFFF"
  accent: "#5E6AD2"
  link: "#828FFF"
  canvas: "#08090A"
  surface: "#0F1011"
  on-primary: "#08090A"
  ink: "#F7F8F8"
  body: "#D0D6E0"
  muted: "#8A8F98"
  faint: "#62666D"
  hairline: "#E5E5E6"
  accent-1: "#23252A"
  neutral-1: "#161718"
typography:
  display-xl:
    fontFamily: "Inter Variable"
    fontSize: 72px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.58px
  display-lg:
    fontFamily: "Inter Variable"
    fontSize: 64px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.41px
  display-md:
    fontFamily: "Inter Variable"
    fontSize: 48px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.06px
  display-md-strong:
    fontFamily: "Inter Variable"
    fontSize: 48px
    fontWeight: 590
    lineHeight: 1
    letterSpacing: -1.06px
  display-sm:
    fontFamily: "Inter Variable"
    fontSize: 40px
    fontWeight: 510
    lineHeight: 1.1
    letterSpacing: -0.88px
  heading-xl:
    fontFamily: "Inter Variable"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.13
    letterSpacing: -0.7px
  heading-lg:
    fontFamily: "Inter Variable"
    fontSize: 24px
    fontWeight: 590
    lineHeight: 1.33
    letterSpacing: -0.29px
  heading-md:
    fontFamily: "Inter Variable"
    fontSize: 20px
    fontWeight: 590
    lineHeight: 1.33
    letterSpacing: -0.24px
  heading-sm:
    fontFamily: "Inter Variable"
    fontSize: 16px
    fontWeight: 590
    lineHeight: 1.75
    letterSpacing: 0px
  heading-xs:
    fontFamily: "Inter Variable"
    fontSize: 13px
    fontWeight: 510
    lineHeight: 1.5
    letterSpacing: -0.13px
  body-xl:
    fontFamily: "Inter Variable"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: -0.29px
  body-lg:
    fontFamily: "Inter Variable"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: -0.16px
  body-lg-strong:
    fontFamily: "Inter Variable"
    fontSize: 15px
    fontWeight: 510
    lineHeight: 1.6
    letterSpacing: -0.16px
  body-md:
    fontFamily: "Inter Variable"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.18px
  body-sm:
    fontFamily: "Inter Variable"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.13px
  body-sm-strong:
    fontFamily: "Inter Variable"
    fontSize: 13px
    fontWeight: 510
    lineHeight: 3.08
    letterSpacing: 0px
  nav:
    fontFamily: "Inter Variable"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-lg:
    fontFamily: "Inter Variable"
    fontSize: 16px
    fontWeight: 510
    lineHeight: 2.75
    letterSpacing: 0px
  button-md:
    fontFamily: "Inter Variable"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 2.86
    letterSpacing: 0px
  button-md-strong:
    fontFamily: "Inter Variable"
    fontSize: 14px
    fontWeight: 510
    letterSpacing: 0px
  button-sm:
    fontFamily: "Inter Variable"
    fontSize: 13.3333px
    fontWeight: 400
    letterSpacing: 0px
  button-xs:
    fontFamily: "Inter Variable"
    fontSize: 13px
    fontWeight: 510
    lineHeight: 3.38
    letterSpacing: 0px
  label:
    fontFamily: "Inter Variable"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption-xs:
    fontFamily: "Inter Variable"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.17
    letterSpacing: 0px
  caption-xs-strong:
    fontFamily: "Inter Variable"
    fontSize: 12px
    fontWeight: 510
    lineHeight: 1.4
    letterSpacing: 0px
  code-sm:
    fontFamily: "Berkeley Mono"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.71
    letterSpacing: 0px
  code-sm-tight:
    fontFamily: "Berkeley Mono"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  code-xs:
    fontFamily: "Berkeley Mono"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
    textTransform: uppercase
rounded:
  none: 0px
  xs: 3px
  sm: 4px
  md: 6px
  lg: 8px
  xl: 9px
  xxl: 12px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 32px
  section: 40px
  band: 48px
borderWidths:
  thin: 1px
shadows:
  sm: "rgba(0, 0, 0, 0.2) 0px 0px 0px 1px"
  md: "rgba(0, 0, 0, 0.4) 0px 1px 0px 0px"
  lg: "rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px"
elevationStrategy: layered-micro
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#F9FAFE"
    surface: "#EFF0F4"
    surfaceRaised: "#E8E9EC"
    text: "#15151B"
    textMuted: "#6B6B70"
    border: "#D6D7DA"
    accent: "#5E6AD2"
    accentFg: "#FFFFFF"
    focusRing: "#5E6AD2"
    elevation: shadow
  dark:
    bg: "#08090A"
    surface: "#0F1011"
    surfaceRaised: "#222324"
    text: "#F7F8F8"
    textMuted: "#D0D6E0"
    border: "#E5E5E6"
    accent: "#5E6AD2"
    accentFg: "#FFFFFF"
    focusRing: "#5E6AD2"
    elevation: "border+surface"
gradients:
  - context: hero
    kind: mixed
    value: "radial-gradient(52.53% 57.5% at 50% 100%, rgba(8, 9, 10, 0) 0%, rgba(8, 9, 10, 0.5) 100%), linear-gradient(rgb(8, 9, 10) 10%, rgb(208, 214, 224) 100%)"
  - context: section
    kind: linear
    value: "linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)), none"
  - context: section
    kind: linear
    value: "linear-gradient(rgba(11, 11, 11, 0.8) 0%, oklab(0.149576 0.00000680983 0.00000298768 / 0.761905) 100%)"
  - context: section
    kind: radial
    value: "radial-gradient(50% 50%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 90%)"
  - context: section
    kind: linear
    value: "linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)), none"
  - context: section
    kind: linear
    value: "linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)), linear-gradient(rgb(22, 23, 24), rgb(22, 23, 24)), linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%)"
components:
  button-filled:
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.hairline}"
    height: 32px
    padding: "0px 12px 0px 12px"
    fontSize: 13px
    boxShadow: "rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px"
    fontFamily: "Inter Variable"
    fontWeight: 510
    lineHeight: 2.46
    rounded: "{rounded.full}"
    backgroundColor: "{colors.hairline}"
  button-filled-lg:
    typography: "{typography.button-lg}"
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.hairline}"
    height: 44px
    padding: "0px 20px 0px 20px"
    boxShadow: "rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px"
    rounded: "{rounded.full}"
    backgroundColor: "{colors.hairline}"
  button-primary:
    textColor: "{colors.body}"
    height: 28px
    padding: "0px 7px 0px 7px"
    fontSize: 13px
    fontFamily: "Inter Variable"
    fontWeight: 510
    rounded: "{rounded.lg}"
    backgroundColor: "rgba(255, 255, 255, 0.04)"
  button-icon:
    typography: "{typography.button-sm}"
    textColor: "rgb(226, 228, 231)"
    border: "1px solid rgb(36, 40, 44)"
    height: 28px
    rounded: "{rounded.full}"
    backgroundColor: "rgba(255, 255, 255, 0.02)"
  button-primary-lg:
    typography: "{typography.button-lg}"
    textColor: "{colors.ink}"
    height: 44px
    padding: "0px 20px 0px 20px"
    boxShadow: "rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px"
    rounded: "{rounded.full}"
    backgroundColor: "rgba(255, 255, 255, 0.05)"
  button-icon-2:
    typography: "{typography.button-sm}"
    textColor: "{colors.muted}"
    height: 28px
    padding: "0px 7px 0px 7px"
    boxShadow: "rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset"
    rounded: "{rounded.full}"
    backgroundColor: "rgba(255, 255, 255, 0.02)"
  card:
    textColor: "{colors.ink}"
    border: "1px solid rgba(255, 255, 255, 0.08)"
    padding: "12px 16px 16px 16px"
    fontSize: 16px
    boxShadow: "rgba(0, 0, 0, 0.2) 0px 0px 0px 1px"
    fontFamily: "Inter Variable"
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.xl}"
    backgroundColor: "{colors.surface}"
  card-featured:
    textColor: "{colors.ink}"
    padding: "24px 32px 24px 32px"
    fontSize: 16px
    fontFamily: "Inter Variable"
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.lg}"
    backgroundColor: "rgb(228, 242, 34)"
  card-lg:
    textColor: "{colors.ink}"
    padding: "12px 12px 0px 12px"
    fontSize: 16px
    fontFamily: "Inter Variable"
    fontWeight: 400
    lineHeight: 1.5
  badge-primary:
    textColor: "{colors.body}"
    border: "1px solid rgba(255, 255, 255, 0.08)"
    height: 22px
    padding: "2px 5px 2px 4px"
    fontSize: 13px
    fontFamily: "Inter Variable"
    fontWeight: 400
    lineHeight: 1.54
    rounded: "{rounded.xs}"
    backgroundColor: "rgba(255, 255, 255, 0.07)"
  badge-text:
    textColor: "{colors.muted}"
    height: 24px
    padding: "0px 4px 0px 8px"
    fontSize: 12px
    fontFamily: "Inter Variable"
    fontWeight: 510
    lineHeight: 1.17
    rounded: "{rounded.full}"
  badge-primary-sm:
    textColor: "{colors.body}"
    border: "1px solid rgba(255, 255, 255, 0.08)"
    height: 20px
    padding: "0px 6px 0px 4px"
    fontSize: 12px
    fontFamily: "Inter Variable"
    fontWeight: 510
    lineHeight: 1.5
    rounded: "{rounded.sm}"
    backgroundColor: "rgba(255, 255, 255, 0.05)"
  badge-filled:
    textColor: "{colors.body}"
    border: "1px solid rgba(255, 255, 255, 0.08)"
    height: 20px
    padding: "0px 6px 0px 4px"
    fontSize: 12px
    fontFamily: "Inter Variable"
    fontWeight: 510
    lineHeight: 1.5
    rounded: "{rounded.sm}"
    backgroundColor: "rgb(28, 28, 29)"
  navigation:
    textColor: "{colors.ink}"
    height: 72px
    fontSize: 16px
    fontFamily: "Inter Variable"
    fontWeight: 400
    lineHeight: 1.5
  footer:
    textColor: "{colors.ink}"
    border: "1px solid {colors.accent-1}"
    fontSize: 16px
    fontFamily: "Inter Variable"
    fontWeight: 400
    lineHeight: 1.5
    backgroundColor: "{colors.canvas}"
  link:
    textColor: "{colors.ink}"
    fontSize: 16px
    fontFamily: "Inter Variable"
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.sm}"
  link-sm:
    typography: "{typography.body-sm}"
    textColor: "{colors.muted}"
    padding: "0px 12px 0px 12px"
    rounded: "{rounded.full}"
states:
  other-hover:
    target: other
    state: hover
    textColor: currentcolor
  other-focus:
    target: other
    state: focus
    opacity: 1
    transform: none
  other-disabled:
    target: other
    state: disabled
    opacity: 0.5
  other-active:
    target: other
    state: active
    filter: "brightness(98%)"
    transform: "scale(0.97)"
  other-focus-visible:
    target: other
    state: focus-visible
    outline: none
  button-hover:
    target: button
    state: hover
    filter: "brightness(1.3)"
  button-active:
    target: button
    state: active
    filter: "brightness(1.6)"
  button-focus-visible:
    target: button
    state: focus-visible
    boxShadow: "rgba(0, 0, 0, 0.4) 0px 0px 0px 2px"
  link-hover:
    target: link
    state: hover
    backgroundColor: "rgba(39, 44, 48, 0.75)"
breakpoints:
  - width: 375
    containerWidth: 343
    gridColumns: 2
    navLinksVisible: 3
    menuToggleVisible: true
    headingPx: 38
    bodyPx: 16
    sectionPaddingX: 16
  - width: 768
    containerWidth: 712
    gridColumns: 2
    navLinksVisible: 3
    menuToggleVisible: true
    headingPx: 56
    bodyPx: 16
    sectionPaddingX: 28
  - width: 1024
    containerWidth: 968
    gridColumns: 6
    navLinksVisible: 6
    menuToggleVisible: true
    headingPx: 56
    bodyPx: 16
    sectionPaddingX: 28
  - width: 1280
    containerWidth: 1270
    gridColumns: 6
    navLinksVisible: 7
    menuToggleVisible: true
    headingPx: 64
    bodyPx: 16
    sectionPaddingX: 10
  - width: 1440
    containerWidth: 1344
    gridColumns: 6
    navLinksVisible: 7
    menuToggleVisible: true
    headingPx: 72
    bodyPx: 16
    sectionPaddingX: 46
coverage:
  statesFound: 108
  gradientsFound: 8
  rolesUnassigned: 2
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Linear

1. Visual Theme & Atmosphere

Linear's design system embodies a sophisticated, high-performance aesthetic rooted in minimalism and dark-mode-first thinking. The visual language prioritizes clarity and density—every interface element serves function, with virtually no decorative ornament. The atmosphere is cool, professional, and technically refined, reflecting a product designed for engineers and product teams who value precision over warmth. Typography is spare and weighted; spacing breathes but never wastes; colors are deployed with surgical restraint. The overall effect is one of quiet confidence and purposeful construction—a system that trusts its users to operate at depth and speed.

Key Characteristics

Achromatic foundation — Near-black canvas (#08090A) and white primary (#FFFFFF) form the backbone
Accent restraint — Brand purple (#5E6AD2) used sparingly for links and states, never for fill
Micro-elevation — Depth via color layering and hairline borders rather than dramatic shadows
Typographic hierarchy — Extreme range (12px to 72px) with negative letter-spacing on display sizes for tightness
Pill-shaped interactions — Buttons and badges adopt rounded pill geometry ({rounded.full} = 9999px)
Monospace accent — Berkeley Mono appears only for code, reinforcing technical context

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #FFFFFF): Used as button fill, brand accent, and active state indicator. The dominant light color deployed on dark backgrounds.

Accent Colors

Brand Accent ({colors.accent} — #5E6AD2): Brand hue paired alongside the achromatic primary; appears in interactive states and alongside primary CTAs.
Link ({colors.link} — #828FFF): Inline link and hypertext color; lighter than brand accent for distinction.
Accent Decorative ({colors.accent-1} — #23252A): No measured role; used decoratively where a subtle dark accent is needed.

Interactive

On Primary / Label ({colors.ink} — #F7F8F8): Headings and primary text; near-white for maximum contrast on dark surfaces.
Body Copy ({colors.body} — #D0D6E0): Secondary body text; used for longer-form content where maximum contrast is not required.
Muted Text ({colors.muted} — #8A8F98): Captions, secondary labels, and tertiary UI text.
Faint Text ({colors.faint} — #62666D): Placeholder text, disabled states, and lowest-priority information.

Neutral Scale

Canvas ({colors.canvas} — #08090A): Default page background and application root. The true dark foundation of the system.
Surface ({colors.surface} — #0F1011): Card, panel, and elevated container background. One step lighter than canvas for depth.
Neutral Decorative ({colors.neutral-1} — #161718): No measured role; subtle tonal shift used decoratively.

Surface & Borders

Hairline / Border ({colors.hairline} — #E5E5E6): 1px borders and dividers; deployed sparingly, typically with reduced opacity.

3. Typography Rules

Font Family

Primary: Inter Variable, with fallback stack: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif

Secondary (Code): Berkeley Mono, with fallback: Courier New, monospace

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display Large	Inter Variable	64px	510	1.0	-1.41px	Hero, primary h1
Display MD	Inter Variable	48px	510	1.0	-1.06px	h1, h2
Display MD Strong	Inter Variable	48px	590	1.0	-1.06px	Bold variant of Display MD
Display SM	Inter Variable	40px	510	1.1	-0.88px	Large heading; h1 at smaller viewports
Display XL	Inter Variable	72px	510	1.0	-1.58px	Largest display size; hero text
Heading XL	Inter Variable	32px	400	1.13	-0.70px	Section heading
Heading LG	Inter Variable	24px	590	1.33	-0.29px	h3, subsection title
Heading MD	Inter Variable	20px	590	1.33	-0.24px	h3 variant
Heading SM	Inter Variable	16px	590	1.75	0px	h4, small heading
Heading XS	Inter Variable	13px	510	1.5	-0.13px	Label, small title
Body XL	Inter Variable	24px	400	1.33	-0.29px	Large body prose
Body LG	Inter Variable	15px	400	1.6	-0.16px	Default body copy
Body LG Strong	Inter Variable	15px	510	1.6	-0.16px	Bold variant of Body LG
Body MD	Inter Variable	14px	400	1.5	-0.18px	Standard body, labels, input
Body SM	Inter Variable	13px	400	1.5	-0.13px	Secondary body, list items, links
Body SM Strong	Inter Variable	13px	510	3.08	0px	Bold small text; unusual line-height for specific context
Button LG	Inter Variable	16px	510	2.75	0px	Large button text
Button MD	Inter Variable	14px	400	2.86	0px	Standard button text
Button MD Strong	Inter Variable	14px	510	—	0px	Bold button variant
Button SM	Inter Variable	13.33px	400	—	0px	Small button, compact UI
Button XS	Inter Variable	13px	510	3.38	0px	Extra-small button; very tall line-height
Navigation	Inter Variable	13px	400	1.5	0px	Primary nav link; same size as body-sm
Caption XS	Inter Variable	12px	400	1.17	0px	Smallest caption, footnote
Caption XS Strong	Inter Variable	12px	510	1.4	0px	Bold caption
Code XS	Berkeley Mono	12px	400	1.4	0px	Inline code, uppercase transform
Code SM	Berkeley Mono	14px	400	1.71	0px	Code block, standard monospace
Code SM Tight	Berkeley Mono	14px	400	1.2	0px	Condensed code presentation
Label	Inter Variable	14px	400	1.5	0px	Form label, semantic size

Principles

Negative tracking on display — Every heading and display size carries negative letter-spacing (down to -1.58px) to create visual density and forward motion
Weight modulation — Primary weight is 400; headings and buttons shift to 510–590 for emphasis; serif-like distinction without serifs
Line-height economy — Display and heading text sits tight (1.0–1.13); body and navigation looser (1.5–1.75) for readability; button text deliberately oversized (2.75–3.38) for visual breathing room
Monospace isolation — Berkeley Mono used only for code; signals technical content without bleeding into prose
Semantic sizing — Caption and code sit at 12–14px floor; body at 13–15px; display starts at 40px and scales to 72px; no intermediate sizes

4. Component Stylings

Buttons

Primary (Small)

Background: rgba(255, 255, 255, 0.05)
Text Color: {colors.body} (#D0D6E0)
Size: 28px height, 0–7px padding (x-axis)
Font: {typography.button-sm} (13.33px, weight 400)
Border: none
Border Radius: {rounded.lg} (8px)
Box Shadow: none
Hover: filter: brightness(1.3)
Active: filter: brightness(1.6)

Primary Large

Background: rgba(255, 255, 255, 0.05)
Text Color: {colors.ink} (#F7F8F8)
Size: 44px height, 20px padding (x-axis)
Font: {typography.button-lg} (16px, weight 510)
Border: none
Border Radius: {rounded.full} (9999px)
Box Shadow: rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px
Hover: filter: brightness(1.3)
Active: filter: brightness(1.6)

Filled (White, Small)

Background: #E5E5E6 ({colors.hairline})
Text Color: {colors.canvas} (#08090A)
Size: 32px height, 12px padding (x-axis)
Font: {typography.button-sm} (13px, weight 510)
Border: 1px solid #E5E5E6
Border Radius: {rounded.full} (9999px)
Box Shadow: rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px
Hover: filter: brightness(120%)
Active: filter: brightness(98%); transform: scale(0.97)

Filled Large (White, Large)

Background: #E5E5E6 ({colors.hairline})
Text Color: {colors.canvas} (#08090A)
Size: 44px height, 20px padding (x-axis)
Font: {typography.button-lg} (16px, weight 510)
Border: 1px solid #E5E5E6
Border Radius: {rounded.full} (9999px)
Box Shadow: rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px
Hover: filter: brightness(120%)
Active: filter: brightness(98%)

Icon (Small)

Background: rgba(255, 255, 255, 0.02)
Text Color: #E2E4E7
Size: 28px height, 0px padding
Font: {typography.button-sm} (13.33px, weight 400)
Border: 1px solid #242C2C (rgb(36, 40, 44))
Border Radius: {rounded.full} (9999px)
Box Shadow: none
Hover: backgroundColor: rgba(255, 255, 255, 0.16)
Active: backgroundColor: rgba(255, 255, 255, 0.16); transform: scale(0.97)

Icon Variant 2 (Tertiary)

Background: rgba(255, 255, 255, 0.02)
Text Color: {colors.muted} (#8A8F98)
Size: 28px height, 7px padding (x-axis)
Font: {typography.button-sm} (13.33px, weight 400)
Border: none
Border Radius: {rounded.full} (9999px)
Box Shadow: rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset
Hover: backgroundColor: rgba(255, 255, 255, 0.04)
Active: transform: scale(0.97)

Ghost / Secondary

Background: transparent
Text Color: {colors.ink} (#F7F8F8)
Size: Varies; typically body-sized
Font: {typography.body-sm} (13px, weight 400)
Border: none
Border Radius: varies
Box Shadow: none
Hover: color: var(--color-link-hover); backgroundColor: rgba(255, 255, 255, 0.04)
Active: color: var(--color-text-primary); transform: scale(0.97)

Cards & Containers

Default Card

Background: {colors.surface} (#0F1011)
Text Color: {colors.ink} (#F7F8F8)
Padding: 12px 16px 16px 16px ({spacing.sm} x {spacing.md} x {spacing.md} x {spacing.md})
Border: 1px solid rgba(255, 255, 255, 0.08)
Border Radius: {rounded.xl} (9px)
Box Shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px (micro-elevation via hairline)
Font: {typography.body-md} (14px, weight 400)
Hover: backgroundColor: rgba(255, 255, 255, 0.03) (subtle lift)

Featured Card

Background: #E4F222 (bright yellow-green, brand highlight)
Text Color: {colors.canvas} (#08090A)
Padding: 24px 32px 24px 32px ({spacing.xl} x {spacing.xxxl} x {spacing.xl} x {spacing.xxxl})
Border: none
Border Radius: {rounded.lg} (8px)
Box Shadow: none
Font: {typography.body-md} (14px, weight 400)
Line Height: 24px
Height: 480px (fixed for content cards in gallery)

Large / Section Container

Background: transparent or rgba(0, 0, 0, 0)
Text Color: {colors.ink} (#F7F8F8)
Padding: 12px 12px 0px 12px
Border: none
Border Radius: {rounded.none} (0px)
Box Shadow: none
Font: {typography.body-md} (14px, weight 400)
Width: Full-width container (1344px measured at 1440px)

Inputs & Forms

Text Input / Label

Text Color: {colors.ink} (#F7F8F8)
Font: {typography.label} (14px, weight 400)
Line Height: 1.5
Letter Spacing: 0px
Background: Typically transparent with border focus states
Border: 1px solid border on focus; color derived from surface tone
Border Radius: Varies; typically {rounded.md} (6px) to {rounded.lg} (8px)
Focus: outline: 2px solid var(--color-accent) with border-radius adjustment
Disabled: opacity: 0.5

Navigation

Primary Navigation Bar

Background: rgba(0, 0, 0, 0) (transparent; inherits canvas)
Text Color: {colors.ink} (#F7F8F8)
Height: 72px
Font: {typography.nav} (13px, weight 400)
Line Height: 1.5
Padding: 0px (items positioned within)
Border: none
Border Radius: {rounded.none} (0px)
Box Shadow: none
Hover (Link): color: var(--color-text-primary); backgroundColor: rgba(255, 255, 255, 0.04)
Active (Nav): color: var(--btn-highlight-color) (typically brand accent or emphasis color)
Responsive Toggle: Menu hamburger appears when viewport < 768px or nav links fall below visible threshold

Footer Navigation

Background: {colors.canvas} (#08090A)
Text Color: {colors.ink} (#F7F8F8)
Height: 494px
Border Top: 1px solid #232529 (rgb(35, 37, 42))
Font: {typography.body-md} (14px, weight 400)
Padding: Calculated from link spacing within sections

Badges

Primary Badge

Background: rgba(255, 255, 255, 0.07)
Text Color: {colors.body} (#D0D6E0)
Padding: 2px 5px 2px 4px (minimal)
Font: {typography.body-sm} (13px, weight 400)
Border: 1px solid rgba(255, 255, 255, 0.08)
Border Radius: {rounded.xs} (3px)
Height: 22px

Badge (Small, Filled)

Background: rgba(255, 255, 255, 0.05) or rgb(28, 28, 29) (filled variant)
Text Color: {colors.body} (#D0D6E0)
Padding: 0px 6px 0px 4px
Font: {typography.caption-xs-strong} (12px, weight 510)
Border: 1px solid rgba(255, 255, 255, 0.08)
Border Radius: {rounded.sm} (4px)
Height: 20px

Badge (Text Only)

Background: transparent
Text Color: {colors.muted} (#8A8F98)
Padding: 0px 4px 0px 8px
Font: {typography.caption-xs-strong} (12px, weight 510)
Border: none
Border Radius: {rounded.full} (9999px)
Height: 24px

5. Layout Principles

Spacing System

The spacing system uses an 4px base unit with a logarithmic scale designed for rhythm and breathing room:

{spacing.xxs} = 4px — Micro-spacing: adjacent inline elements, icon-to-text
{spacing.xs} = 8px — Extra-small: adjacent components, condensed layouts
{spacing.sm} = 12px — Small: default gap between sections, compact cards
{spacing.md} = 16px — Medium: default padding within containers, standard gap
{spacing.lg} = 20px — Large: gap between component groups, breathing room
{spacing.xl} = 24px — Extra-large: section separation, card padding
{spacing.xxl} = 28px — Double extra-large: header/footer zones
{spacing.xxxl} = 32px — Triple extra-large: generous gutters, featured content
{spacing.section} = 40px — Section block: vertical spacing between major sections
{spacing.band} = 48px — Band / hero: largest vertical rhythm unit

Usage Context:

Cards default to {spacing.md} padding; featured cards to {spacing.xl} and {spacing.xxxl}
Navigation and header use {spacing.xxl} (28px) for vertical balance
Body copy and long-form content maintain {spacing.lg} to {spacing.section} between blocks
Buttons and form elements use {spacing.sm} to {spacing.md} for internal spacing

Grid & Container

Maximum Content Width: 1440px (measured at full viewport)
Effective Content Column at 1440px: 1344px (48px margin applied evenly)
Grid Columns: 6 columns at breakpoints 1024px and above; 2 columns below
Section Padding (Horizontal):
- 375px: 16px left/right ({spacing.md})
- 768px–1024px: 28px left/right ({spacing.xxl})
- 1440px: 46px left/right
Multi-column layouts scale from 1 column (mobile) → 2 columns (tablet) → 6 columns (desktop)
Card grids typically 1–3 items per row depending on viewport and component density

Whitespace Philosophy

The system embraces negative space as a design principle. Whitespace is deployed:

Between content blocks: {spacing.section} to {spacing.band} (40–48px) creates visual separation without visual division
Within cards: {spacing.md} padding with a single border (1px hairline) provides micro-elevation
Around text: Generous line-height (1.5–1.75) and letter-spacing (often negative for display) balances density
In navigation: Sparse link labels with ample click targets (28–44px heights) reduce cognitive load
At viewport edges: Symmetrical horizontal margins scale responsively (16px mobile → 46px desktop)

Whitespace is never wasted; it always serves to clarify hierarchy or focus attention.

Border Radius Scale

{rounded.none} = 0px — Sharp, full-bleed containers; footer, sections
{rounded.xs} = 3px — Micro-radius; badges, small affordances
{rounded.sm} = 4px — Small radius; input fields, small cards
{rounded.md} = 6px — Medium radius; avatars, moderate cards
{rounded.lg} = 8px — Large radius; buttons, significant containers
{rounded.xl} = 9px — Extra-large; card default (card: 9px measured)
{rounded.xxl} = 12px — Double extra-large; featured cards, modals
{rounded.full} = 9999px — Pill/circle; buttons, icon buttons, badges

Component Mapping (Measured):

Buttons (primary interaction): {rounded.lg} (8px) or {rounded.full} (9999px) depending on variant
Cards (default): {rounded.xl} (9px)
Featured cards: {rounded.lg} (8px)
Badges: {rounded.none} to {rounded.sm} (0–4px) for text/data badges; {rounded.full} for pill badges
Avatars: {rounded.md} (6px)
Images in gallery: {rounded.full} or square (0px) depending on content

Border Widths

Thin: 1px — Used for card borders, input focus states, button strokes, and hairline dividers
- Card default border: 1px solid rgba(255, 255, 255, 0.08)
- Button stroke (filled variants): 1px solid (typically border-color matches background)
- Navigation underline or separator: 1px from shadow or border
- Form input focus ring: 2px solid accent (derived from border, not the border-width scale itself)

6. Depth & Elevation

The system employs a color-blocking and micro-shadow strategy rather than dramatic elevation. Depth is primarily achieved through:

Surface color shifts: Canvas → Surface (one step lighter) → Elevated Surface (further steps)
Hairline borders with transparency: rgba(255, 255, 255, 0.08) borders define edges without hard lines
Inset and outset micro-shadows: Subtle 1px insets and outsets for tactile affordance
Opacity gradations: Text color ramp from #F7F8F8 (ink, headings) → #D0D6E0 (body) → #62666D (faint) creates depth through readability

Level	Treatment	Use
Flat / Base	No shadow; background only	Canvas, section backgrounds, full-bleed layouts
Card / Micro	`rgba(0, 0, 0, 0.2) 0px 0px 0px 1px`	Card default; hairline border with minimal depth cueing
Navigation / Subtle	`rgba(0, 0, 0, 0.4) 0px 1px 0px 0px`	Navigation bar bottom edge; barely perceptible lift
Button / Layered	`rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px`	Primary button; complex multi-layer shadow for depth and inner highlight

Shadow Philosophy: The system rejects drop shadows in favor of inset bevels and hairline borders. This micro-elevation approach keeps the interface visually flat while providing tactile affordance and surface definition. Buttons are the exception: they carry a complex shadow stack (inset highlight + outer depth + soft falloff) to signal interactivity. All shadows use black with opacity variations (0.1–0.6) to preserve the dark theme's integrity.

Opacity Levels

0.30 (30%) — Strongly reduced; reserved for severely disabled or background elements
0.40 (40%) — Reduced interactive states; de-emphasized hover backgrounds
0.60 (60%) — Secondary disabled or muted state; partial transparency for overlay or separator
0.70 (70%) — Slight reduction; text or background very close to fully opaque
0.80 (80%) — Minor reduction; near-full opacity for hover or active states
0.90 (90%) — Almost full; reserved for very subtle transitions

Typical uses:

Card borders: rgba(255, 255, 255, 0.08) (5% opacity on white)
Button hover: rgba(255, 255, 255, 0.16) (16% opacity)
Disabled button: opacity: 0.5 (50% of full color)
Overlay / scrim: rgba(0, 0, 0, 0.5) to rgba(0, 0, 0, 0.8)

Z-index / Layering

Base: z-index 1–3 — Standard content flow; cards, buttons, text
Dropdown / Floating: z-index 50 — Popovers, dropdowns, tooltips above base content
Sticky / Navigation: z-index 100 — Navigation bar stays above scrolling content
Sticky Alternative: z-index 995–997 — Reserved for sticky elements competing with modals (specific use cases)
Modal / Dialog: z-index 1000+ (inferred; not explicitly measured) — Modals, alerts, and topmost overlays

Stacking Context: The system maintains a shallow z-index ladder because most interactive depth is managed via color and shadow rather than stacking order. Dropdowns sit at 50, sticky nav at 100, and true modals above 1000. This prevents z-index wars and keeps the layer ordering predictable.

7. Do's and Don'ts

Do

Use hairline borders and micro-shadows for depth, never drop shadows on regular containers
Deploy the text color ramp (#F7F8F8 → #D0D6E0 → #62666D) to create hierarchy and secondary information without additional contrast layers
Pair pill-shaped buttons ({rounded.full}) with tight negative letter-spacing on adjacent display text for a cohesive, forward-moving aesthetic
Limit the brand accent (#5E6AD2 and #828FFF) to links, hover states, and accent fills; keep the primary background/button fill white (#FFFFFF) or high-opacity white
Maintain the 4px base spacing unit and prefer {spacing.md} (16px) as the default gap; deviations should be purposeful
Apply negative letter-spacing on all display and heading sizes; it is not optional and defines the brand's density and forward motion
Use Berkeley Mono exclusively for code; Inter Variable everywhere else preserves clarity and reduces visual noise
Test all hover and active states with the documented filter: brightness() values; they are precise and non-negotiable
Respect the responsive grid (2 columns mobile, 6 columns desktop); do not force-fit desktop layouts to mobile
Group related nav links visually using opacity and spacing rather than dividers; trust whitespace to communicate structure

Don't

Never invent a semantic color ramp (error red, success green, warning orange); the site does not expose one and these colours do not appear in the extracted system
Do not apply drop shadows to cards or panels; hairline borders are the only accepted shadow treatment for regular content
Do not mix rounded and sharp edges within a single component family (e.g., don't combine {rounded.full} buttons with {rounded.none} inputs); consistency within component type is essential
Do not use colour alone to communicate state (hover, active, focus); always include opacity change, shadow change, or other visual cue
Do not override the negative letter-spacing on display and heading text; it is structural, not optional
Do not deploy the brand accent (#5E6AD2) as a primary fill; reserve it for secondary emphasis and link underlines
Do not create multi-tier shadows (e.g., layered drop + inset + spread) on anything except buttons; the layered button shadow is the only exception
Do not remove or reduce padding below {spacing.sm} (12px) on interactive elements; click targets must remain at least 28px in height/width
Do not deviate from the responsive breakpoints without documented justification; the measured grid (2→6 columns) and viewport widths are authoritative
Do not apply opacity below 0.30 to interactive text or critical information; it will become unreadable on the dark canvas

8. Responsive Behavior

Breakpoints

Viewport (min-width)	Content Width	Grid Columns	Nav Visible Links	Menu Toggle	Display Size Largest	Body Size	Section Padding (x)
375px (mobile)	343px	2	3	Yes	`{typography.display-sm}` (40px)	`{typography.body-md}` (14px)	`{spacing.md}` (16px)
768px (tablet)	712px	2	3	Yes	`{typography.display-sm}` (40px)	`{typography.body-md}` (14px)	`{spacing.xxl}` (28px)
1024px (small desktop)	968px	6	6	Yes	`{typography.display-sm}` (40px)	`{typography.body-md}` (14px)	`{spacing.xxl}` (28px)
1280px (desktop)	1270px	6	7	Yes	`{typography.display-lg}` (64px)	`{typography.body-md}` (14px)	10px
1440px (large desktop)	1344px	6	7	Yes	`{typography.display-xl}` (72px)	`{typography.body-md}` (14px)	46px

Transition Points:

375px → 768px: Section padding increases from 16px to 28px; grid columns remain 2; nav stable at 3 visible links
768px → 1024px: Grid activates 6-column layout; display size stabilizes; section padding stable at 28px
1024px → 1280px: Display text grows from 40px to 64px; nav shows 7th link; section padding narrows to 10px (tight containment)
1280px → 1440px: Display grows to full 72px; section padding expands to 46px (max breathing room)

Menu Toggle: A hamburger menu (not a collapse) appears at 375px and remains visible across all viewports. Navigation may reorganize internally but does not hide.

Touch Targets

Minimum height: 28px (measured on small buttons; icon buttons)
Minimum width: 28px (square icon buttons; pill badges)
Recommended minimum: 44px (primary buttons, large link targets) — meets WCAG AAA for touch accessibility
Padding around targets: At least {spacing.sm} (12px) separation between interactive elements in dense layouts

Button & Link Sizing:

Small (compact UI): 28–32px height, 44px at minimum for primary CTAs
Medium (default): 32–44px height, typical nav links and form buttons
Large (hero / featured): 44px+ height, primary CTAs and featured buttons
Icon buttons: Maintain 28–44px square minimum; content is centered within

Collapsing Strategy

Mobile (375px):

Single-column layout (100% minus padding)
Featured cards stack vertically
Navigation condenses: 3 primary links visible, remainder in menu
Pricing cards display as scrollable carousel or single column
Feature grids collapse to 1 column; image + text stack vertically

Tablet (768px):

2-column grid for card layouts (e.g., customer stories, features)
Navigation remains 3 visible links; no change from mobile
Padding increases to 28px; content breathing room improves
Section headings and body text scale slightly (remains 14px body, 40px display)
Pricing and comparison tables: horizontal scroll if needed, or condense to 2 tier displays side-by-side

Small Desktop (1024px):

6-column grid activates
Cards can scale to 2–3 items per row
Navigation shows 6 links visibly
Display text scales to 40px; content is spacious
All tables and complex layouts shift to multi-row horizontal layout (no scroll needed)

Desktop & Large Desktop (1280px+):

6-column grid fully utilized
Maximum 3 items per row for featured cards; can go to 4–6 for smaller cards
Display text reaches maximum (64–72px)
Navigation shows 7 links; section padding expands to accommodate max-width container
Full-width sections (footer, hero) expand to viewport edge with centered content inside

Images & Media:

Images in card galleries: scale to card width (responsive)
Hero imagery: full-width at all breakpoints; aspect ratio maintained
Inline images and diagrams: scale proportionally with container; max-width 100%

9. Agent Prompt Guide

Quick Color Reference

Primary CTA / Brand Fill: White ({colors.primary} — #FFFFFF)
Brand Accent / Link: Purple ({colors.accent} — #5E6AD2)
Link Alternate: Lighter Purple ({colors.link} — #828FFF)
Page Background / Canvas: Near-black ({colors.canvas} — #08090A)
Card / Surface: Dark Gray ({colors.surface} — #0F1011)
Heading / Ink Text: Off-white ({colors.ink} — #F7F8F8)
Body Copy: Light Gray ({colors.body} — #D0D6E0)
Secondary / Muted Text: Gray ({colors.muted} — #8A8F98)
Tertiary / Faint Text: Dark Gray ({colors.faint} — #62666D)
Borders / Hairline: Off-white ({colors.hairline} — #E5E5E6)
Decorative Accents: {colors.accent-1} (#23252A), {colors.neutral-1} (#161718) — use sparingly for tonal variation only

Iteration Guide

Respect negative letter-spacing on all display/heading text — Every heading from 13px upward carries precise negative tracking (e.g., -0.13px at 13px, -1.58px at 72px). This is not ornamental; it defines density and motion.
Deploy the text color ramp, not contrast switches — Use the measured hierarchy (#F7F8F8 → #D0D6E0 → #62666D → #8A8F98 → #62666D) to signal priority. Never jump directly to white or black for emphasis.
Use hairline borders and micro-shadows only — Card and container depth comes from 1px solid rgba(255, 255, 255, 0.08) borders and minimal box-shadows (card: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px). Drop shadows are forbidden except on primary buttons.
Buttons: white fill or high-opacity white background — Primary CTAs use #FFFFFF or rgba(255, 255, 255, 0.05). Reserve the brand purple for secondary emphasis and links, never primary button fills.
Pill-shaped buttons are mandatory for primary interactions ({rounded.full} = 9999px) — Small secondary buttons may use {rounded.lg} (8px), but CTAs must be pill-shaped. Icon buttons follow suit.
**Spacing defaults to {spacing.md} (16px) — Increase only for major section breaks ({spacing.section} = 40px, {spacing.band} = 48px). Never invent intermediate spacing; use the provided scale.
Grid is 2 columns mobile, 6 columns desktop — Mobile layouts collapse to single column; tablet stretches to 2. Desktop activates the 6-column grid. Do not force multi-column on mobile.
Apply filter: brightness() for hover/active states — Primary buttons: brightness(1.3) on hover, brightness(1.6) on active. This is more precise than color shifts and maintains the brand's minimalist aesthetic.
Inter Variable everywhere, Berkeley Mono for code only — Weight scales from 400 (body) to 590 (headings) with 510 as the button/accent weight. Never use serif fonts; monospace is reserved for <code> and pre-formatted text.
Responsive text scales progressively — 40px display at mobile/tablet, 64px at 1280px, 72px at 1440px. Body remains 14px across all breakpoints. Do not invent intermediate scaling; follow the measured progression.
Focus states: outline + context — Links and buttons on focus show outline: 2px solid var(--color-accent). Form inputs show the same. Do not hide focus rings; they are accessibility-critical.
Opacity for disabled and secondary states — Disabled buttons: opacity: 0.5. Secondary muted text: use the color ramp, not opacity reduction. Overlay/scrim backgrounds: rgba(0, 0, 0, 0.5) to rgba(0, 0, 0, 0.8).

10. Known Gaps

No semantic color ramp — The site does not expose error (red), success (green), warning (orange), or info (blue) colors in its markup. Do not invent these; if the design requires status communication, use monochromatic opacity or text labels only.
Two decorative-only colours — {colors.accent-1} (#23252A) and {colors.neutral-1} (#161718) were measured but have no clear semantic role. They appear only in subtle tonal variations and decorative backgrounds. Treat them as optional tonal shifts, not as semantic placeholders.
No interaction states from stylesheets — The extraction captured hover/active/focus states from the site's CSS, but they vary widely depending on component type. Not every variant (button, link, input, nav) has a complete hover+active+focus set. Assume missing states follow the brightness/opacity pattern documented above; test edge cases (e.g., disabled inputs, invalid forms) in context.
Surfaces behind authentication not visited — The site has logged-in product features (workspace sidebar, issues detail, boards, etc.) that were not extracted. The public marketing pages, pricing, and customer stories were analyzed; the application core is out of scope.
No dark/light theme toggle observed — Linear.app displays a single dark theme. No light mode was measured or inferred. If the brand supports a light theme, it was not visible during extraction and is not documented here.
No animation or transition timings — The extraction captured static visual properties (color, size, shadow, radius) and interaction states (hover, active, focus) but not motion curves, durations, or transform animations. Animations observed (translateY, scale) are listed but timings (ms) and easing functions were not extracted.
No icon library or symbol definitions — Icon sizes and styles were observed in components (buttons, navigation) but the source icon set (name, asset, variants) was not catalogued. Assume icons are 16–24px, monochrome (inherit text color), and available as SVG or similar scalable format.
No typography fallback depth — Inter Variable is the primary font; the system assumes it loads successfully. If Inter fails, the fallback stack (-apple-system, BlinkMacSystemFont, Segoe UI, ...) is provided, but no system font rules or font-display strategies were extracted.
No grid system / layout library documented — The responsive grid (2→6 columns) was measured empirically; no CSS Grid or Flexbox source code was examined. Implement using modern layout tools (CSS Grid recommended for 6-column at desktop, Flexbox for mobile wrapping).
No component variant completeness — Not all components have full hover/active/focus/disabled sets. For example, badge and card states are minimal. Use the documented patterns (brightness, opacity, color ramp) to extrapolate missing states.
No loading, skeleton, or empty states — The site as captured did not display loading spinners, skeleton screens, or empty state illustrations. If these exist, they are not documented here.

This design system was extracted from Linear.app across 6 public pages (homepage, pricing, customers, product detail). Implementation should prioritize the colour ramp, negative letter-spacing, hairline borders, and responsive grid as the system's non-negotiable core. All values are measured and exact; deviations should be documented and justified.

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from linear.app

Primary

#FFFFFF

Primary CTA, brand accent, active state

#5E6AD2

Brand hue used alongside the achromatic primary

#828FFF

Inline link colour

#23252A

Accent / decorative

Neutral

#08090A

Default page background; label colour on brand surfaces

#0F1011

Card / panel background

#F7F8F8

Headings / primary text

#D0D6E0

Body copy

#8A8F98

Captions, secondary text

#62666D

Tertiary / placeholder text

#E5E5E6

1px borders and dividers

#161718

Neutral

Typography · Inter Variable

body15px · 400 · 24px

body13px · 510 · 40px

caption12px · 400 · 14px

link13px · 400 · 19.5px

body15px · 510 · 24px

caption12px · 510 · 16.8px

heading13px · 510 · 19.5px

h272px · 510 · 72px

nav-link13px · 400 · 19.5px

body14px · 400 · 21px

button13px · 400 · 19.5px

h164px · 510 · 64px

body24px · 400 · 31.92px

heading32px · 400 · 36px

body13px · 400 · 16px

h148px · 510 · 48px

h324px · 590 · 31.92px

button16px · 510 · 44px

label14px · 400 · 21px

link16px · 400 · 24px

body14px · 510 · 21px

body15px · 510 · 40px

h320px · 590 · 26.6px

h416px · 590 · 28px

body13px · 400 · 20px

button13.3333px · 400

display48px · 510 · 48px

body15px · 300 · 20px

body13px · 510 · 19.5px

body13px · 400 · 20px

body13px · 500 · 16px

list-item16px · 400 · 24px

body24px · 510 · 31.92px

body17px · 510 · 27.2px

h313px · 510 · 19.5px

list-item13px · 400 · 19.5px

body20px · 510 · 26.6px

h248px · 510 · 48px

h320px · 510 · 26.6px

input14px · 400 · 21px

caption16px · 400 · 24px

heading15px · 510 · 24px

display40px · 510 · 44px

button13px · 510 · 44px

h140px · 510 · 44px

h315px · 510 · 24px

body14px · 400 · 23.8px

button14px · 400 · 40px

button14px · 510

h148px · 590 · 48px

body17px · 400 · 27.2px

Typography · Berkeley Mono

input14px · 400 · 24px

code12px · 400 · 16.8px

code14px · 400 · 16.8px

Spacing

8px

32px

12px

16px

4px

24px

48px

40px

Elevation

rgba(0, 0, 0, 0.2) 0px 0px 0px 1px

rgba(0, 0, 0, 0.4) 0px 1px 0px 0px

rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px

Components · 6

Remixes of linear.app

Latest remixes

No public remixes yet. Be the first to make one.

Remix it

DESIGN.md for linear.app

Preview

Design System Inspired by Linear

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Accent Colors

Interactive

Neutral Scale

Surface & Borders

3. Typography Rules

Font Family

Hierarchy

Principles

4. Component Stylings

Buttons

Primary (Small)

Primary Large

Filled (White, Small)

Filled Large (White, Large)

Icon (Small)

Icon Variant 2 (Tertiary)

Ghost / Secondary

Cards & Containers

Default Card

Featured Card

Large / Section Container

Inputs & Forms

Text Input / Label

Navigation

Primary Navigation Bar

Footer Navigation

Badges

Primary Badge

Badge (Small, Filled)

Badge (Text Only)

Links

Default Link (Prose)

Small Link (Compact)

5. Layout Principles

Spacing System

Grid & Container

Whitespace Philosophy

Border Radius Scale

Border Widths

6. Depth & Elevation

Opacity Levels

Z-index / Layering

7. Do's and Don'ts

Do

Don't

8. Responsive Behavior

Breakpoints

Touch Targets

Collapsing Strategy

9. Agent Prompt Guide

Quick Color Reference

Iteration Guide

10. Known Gaps

Remixes of linear.app

Preview

Design System Inspired by Linear

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Accent Colors

Interactive

Neutral Scale

Surface & Borders

3. Typography Rules

Font Family

Hierarchy

Principles

4. Component Stylings

Buttons

Primary (Small)

Primary Large

Filled (White, Small)

Filled Large (White, Large)

Icon (Small)