A DesignMD user

Generated Oct 13, 2026

DESIGN.md for linear.app

linear.app9 colors6 componentsInter Variable

Remix

2 screenshots captured· linear.app

1 / 2 · 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, developer-centric aesthetic
  rooted in a premium dark theme. The visual personality merges technical
  precision with refined minimalism—a stark, near-black canvas (#08090A) is
  paired with crisp, high-contrast typography and surgical use of color. The
  brand's accent palette consists of pure white (#FFFFFF) for primary
  interactions and a muted indigo (#5E6AD2) for depth and visual interest. The
  design avoids visual noise, relying instead on negative space, subtle
  elevation shifts, and micro-interactions to guide attention. Every element
  feels intentional: cards breathe, typography breathes, and whitespace is
  weaponized. This is a system for people who ship code and ship it fast—no
  ornament, no compromise.
source:
  url: "https://linear.app/"
  pagesAnalyzed: 6
  extractedAt: 2026-10-12
  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: "#000000"
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-focus-visible:
    target: other
    state: focus-visible
    boxShadow: "rgba(0, 0, 0, 0.1) 0px 4px 12px, rgba(0, 0, 0, 0.2) 0px 0px 0px 2px"
  button-focus-visible:
    target: button
    state: focus-visible
    boxShadow: "rgba(0, 0, 0, 0.4) 0px 0px 0px 2px"
  other-hover:
    target: other
    state: hover
    opacity: 1
  other-active:
    target: other
    state: active
    opacity: 1
  button-hover:
    target: button
    state: hover
    filter: "brightness(120%)"
  link-hover:
    target: link
    state: hover
    backgroundColor: "rgba(39, 44, 48, 0.75)"
  other-focus:
    target: other
    state: focus
    backgroundColor: "rgba(255, 255, 255, 0.16)"
  button-active:
    target: button
    state: active
    filter: "brightness(1.6)"
  other-disabled:
    target: other
    state: disabled
    backgroundColor: "rgba(255, 255, 255, 0.03)"
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: 61
  gradientsFound: 8
  rolesUnassigned: 2
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Linear

tokens: colors: primary: "#FFFFFF" accent: "#5E6AD2" link: "#828FFF" accent_1: "#23252A" canvas: "#08090A" surface: "#0F1011" ink: "#F7F8F8" body: "#D0D6E0" muted: "#8A8F98" faint: "#62666D" hairline: "#E5E5E6" neutral_1: "#000000" typography: display_lg: size: 64px weight: 510 lineHeight: 1 letterSpacing: "-1.41px" display_md: size: 48px weight: 510 lineHeight: 1 letterSpacing: "-1.06px" display_md_strong: size: 48px weight: 590 lineHeight: 1 letterSpacing: "-1.06px" display_sm: size: 40px weight: 510 lineHeight: 1.1 letterSpacing: "-0.88px" display_xl: size: 72px weight: 510 lineHeight: 1 letterSpacing: "-1.58px" heading_lg: size: 24px weight: 590 lineHeight: 1.33 letterSpacing: "-0.29px" heading_md: size: 20px weight: 590 lineHeight: 1.33 letterSpacing: "-0.24px" heading_sm: size: 16px weight: 590 lineHeight: 1.75 letterSpacing: 0px heading_xl: size: 32px weight: 400 lineHeight: 1.13 letterSpacing: "-0.7px" heading_xs: size: 13px weight: 510 lineHeight: 1.5 letterSpacing: "-0.13px" body_lg: size: 15px weight: 400 lineHeight: 1.6 letterSpacing: "-0.16px" body_lg_strong: size: 15px weight: 510 lineHeight: 1.6 letterSpacing: "-0.16px" body_md: size: 14px weight: 400 lineHeight: 1.5 letterSpacing: "-0.18px" body_sm: size: 13px weight: 400 lineHeight: 1.5 letterSpacing: "-0.13px" body_sm_strong: size: 13px weight: 510 lineHeight: 3.08 letterSpacing: 0px body_xl: size: 24px weight: 400 lineHeight: 1.33 letterSpacing: "-0.29px" button_lg: size: 16px weight: 510 lineHeight: 2.75 letterSpacing: 0px button_md: size: 14px weight: 400 lineHeight: 2.86 letterSpacing: 0px button_md_strong: size: 14px weight: 510 lineHeight: null letterSpacing: 0px button_sm: size: 13.3333px weight: 400 lineHeight: null letterSpacing: 0px button_xs: size: 13px weight: 510 lineHeight: 3.38 letterSpacing: 0px caption_xs: size: 12px weight: 400 lineHeight: 1.17 letterSpacing: 0px caption_xs_strong: size: 12px weight: 510 lineHeight: 1.4 letterSpacing: 0px code_sm: size: 14px weight: 400 lineHeight: 1.71 letterSpacing: 0px code_sm_tight: size: 14px weight: 400 lineHeight: 1.2 letterSpacing: 0px code_xs: size: 12px weight: 400 lineHeight: 1.4 letterSpacing: 0px textTransform: uppercase label: size: 14px weight: 400 lineHeight: 1.5 letterSpacing: 0px nav: size: 13px weight: 400 lineHeight: 1.5 letterSpacing: 0px spacing: xxs: 4px xs: 8px sm: 12px md: 16px lg: 20px xl: 24px xxl: 28px xxxl: 32px section: 40px band: 48px rounded: none: 0px xs: 3px sm: 4px md: 6px lg: 8px xl: 9px xxl: 12px full: 9999px 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" borders: thin: 1px opacity: - 0.30 - 0.40 - 0.60 - 0.70 - 0.80 - 0.90 zindex: base: 1 base_2: 2 base_3: 3 dropdown: 50 sticky: 100 sticky_high: 995 sticky_higher: 996 sticky_highest: 997

1. Visual Theme & Atmosphere

Linear's design system embodies a sophisticated, developer-centric aesthetic rooted in a premium dark theme. The visual personality merges technical precision with refined minimalism—a stark, near-black canvas ({colors.canvas} — #08090A) is paired with crisp, high-contrast typography and surgical use of color. The brand's accent palette consists of pure white ({colors.primary} — #FFFFFF) for primary interactions and a muted indigo ({colors.accent} — #5E6AD2) for depth and visual interest. The design avoids visual noise, relying instead on negative space, subtle elevation shifts, and micro-interactions to guide attention. Every element feels intentional: cards breathe, typography breathes, and whitespace is weaponized. This is a system for people who ship code and ship it fast—no ornament, no compromise.

Key Characteristics

Achromatic foundation with surgical color accents (white and indigo only)
Near-black canvas ({colors.canvas} — #08090A) creates extreme contrast with light text
Monochromatic UI with deliberate depth through layered grays and micro-shadows
Precision typography with aggressive letter-spacing compression on display sizes
Pill-shaped interactive elements (buttons and badges render at {rounded.full} — 9999px)
Minimal shadows that whisper rather than shout; elevation inferred from color and hairline borders
Highly legible body text ({colors.ink} — #F7F8F8 on dark backgrounds)
Developer-first voice communicated through technical language and clean interfaces
Responsive grid that adapts from 2 columns on mobile to 6+ on desktop without aesthetic compromise

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #FFFFFF): Primary CTA fill, brand accent, active states, and hero overlays. White is the system's signal color—it draws the eye and closes interactions.
Accent / Brand Hue ({colors.accent} — #5E6AD2): Secondary brand accent used alongside primary white for visual hierarchy, interactive elements, and accent highlights in hero sections.
Link ({colors.link} — #828FFF): Inline link color; a brighter indigo used only for inline anchors to signal interactivity without overwhelming the page.

Neutral Scale

Canvas / On Primary ({colors.canvas} — #08090A): Default page background and label color on branded surfaces; the system's foundational near-black.
Surface ({colors.surface} — #0F1011): Card and panel backgrounds; one step lighter than canvas to create layering without visible banding.
Ink ({colors.ink} — #F7F8F8): Primary heading and text color; near-white for maximum contrast against dark backgrounds.
Body ({colors.body} — #D0D6E0): Body copy and secondary text; mid-bright gray that remains highly legible while reducing visual stress.
Muted ({colors.muted} — #8A8F98): Captions, secondary text, and helper copy; the first step down the contrast ladder.
Faint ({colors.faint} — #62666D): Tertiary text, placeholders, and disabled states; the faintest legible gray before border color.

Surface & Borders

Hairline ({colors.hairline} — #E5E5E6): 1px borders and dividers; a light gray used sparingly to define contained regions without visual weight.

Semantic / Decorative

Accent Decorative ({colors.accent_1} — #23252A): No measured role; used as a decorative accent in hero patterns and visual flourishes. Treat as background-layer or texture only.
Neutral Deep ({colors.neutral_1} — #000000): Pure black; appears in edge cases and potentially as a fallback neutral.

3. Typography Rules

Font Family

Primary: Inter Variable
Fallback stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif

Secondary: Berkeley Mono
Fallback stack: "Courier New", monospace

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XL	Inter Variable	72px	510	1	-1.58px	Hero headlines; extreme compression
Display LG	Inter Variable	64px	510	1	-1.41px	Large hero text; tight tracking
Display MD Strong	Inter Variable	48px	590	1	-1.06px	Heavy weight display variant
Display MD	Inter Variable	48px	510	1	-1.06px	Mid-level hero; tightly tracked
Display SM	Inter Variable	40px	510	1.1	-0.88px	Secondary headlines
Heading XL	Inter Variable	32px	400	1.13	-0.7px	Page section heading
Heading LG	Inter Variable	24px	590	1.33	-0.29px	Heavy subheading
Heading MD	Inter Variable	20px	590	1.33	-0.24px	Standard heading
Heading SM	Inter Variable	16px	590	1.75	0px	Sub-heading, compact
Heading XS	Inter Variable	13px	510	1.5	-0.13px	Micro-heading
Body XL	Inter Variable	24px	400	1.33	-0.29px	Large body copy; feature text
Body LG Strong	Inter Variable	15px	510	1.6	-0.16px	Emphasis in body or callout text
Body LG	Inter Variable	15px	400	1.6	-0.16px	Standard large body
Body MD	Inter Variable	14px	400	1.5	-0.18px	Standard body copy
Body SM Strong	Inter Variable	13px	510	3.08	0px	Emphasized small text; often badges
Body SM	Inter Variable	13px	400	1.5	-0.13px	Small body; links, captions
Label	Inter Variable	14px	400	1.5	0px	Form labels
Button LG	Inter Variable	16px	510	2.75	0px	Large button text
Button MD Strong	Inter Variable	14px	510	—	0px	Emphasized button (medium)
Button MD	Inter Variable	14px	400	2.86	0px	Standard button
Button SM	Inter Variable	13.3333px	400	—	0px	Small button text
Button XS	Inter Variable	13px	510	3.38	0px	Extra-small button
Navigation	Inter Variable	13px	400	1.5	0px	Nav link text
Caption XS Strong	Inter Variable	12px	510	1.4	0px	Emphasized caption
Caption XS	Inter Variable	12px	400	1.17	0px	Small caption text
Code SM Tight	Berkeley Mono	14px	400	1.2	0px	Code block (compact)
Code SM	Berkeley Mono	14px	400	1.71	0px	Inline code; monospace text
Code XS	Berkeley Mono	12px	400	1.4	0px	Small code; uppercase transform

Principles

Aggressive tracking compression is a signature trait: all display and heading sizes use negative letter-spacing (ranging from -1.58px to -0.24px) to tighten headlines and create visual impact.
Inter Variable allows weight flexibility: the system uses weights 400 (regular), 510 (medium), and 590 (semibold/bold) to create nuanced hierarchy without weight explosions.
Monospace reserve: Berkeley Mono is used exclusively for code, inline technical references, and token displays; never in prose or UI labels.
Line-height is always intentional: body text uses 1.5–1.6 for breathing room; display text compresses to 1.0 for tightness; buttons use loose leading (2.75–3.38) to center content vertically within fixed heights.
Letter-spacing is exact: negative tracking on headlines is not a rounding artifact—it is part of the brand voice. Every value must be reproduced precisely.

4. Component Stylings

Buttons

Primary (Filled)

Background: {colors.primary} (#FFFFFF)
Text color: {colors.canvas} (#08090A)
Padding: {spacing.md} horizontal (16px), {spacing.xs} vertical (8px)
Font size: {typography.button-md} (14px), weight 400
Border radius: {rounded.full} (9999px)
Border: 1px solid {colors.hairline} (#E5E5E6)
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
Width: 72px, Height: 32px

Primary Large (Filled LG)

Background: {colors.primary} (#FFFFFF)
Text color: {colors.canvas} (#08090A)
Padding: {spacing.lg} horizontal (20px), {spacing.md} vertical (16px)
Font size: {typography.button-lg} (16px), weight 510
Border radius: {rounded.full} (9999px)
Border: 1px solid {colors.hairline} (#E5E5E6)
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
Width: 126px, Height: 44px

Secondary (Ghost / Low Emphasis)

Background: rgba(255, 255, 255, 0.05) (near-transparent white)
Text color: {colors.body} (#D0D6E0)
Padding: {spacing.xs} horizontal (8px), {spacing.xs} vertical (8px)
Font size: {typography.button-sm} (13.3333px), weight 400
Border radius: {rounded.lg} (8px)
Border: none
Box shadow: none
Height: 28px

Secondary Large (Ghost LG)

Background: rgba(255, 255, 255, 0.05) (near-transparent white)
Text color: {colors.ink} (#F7F8F8)
Padding: {spacing.lg} horizontal (20px), {spacing.md} vertical (16px)
Font size: {typography.button-lg} (16px), weight 510
Border radius: {rounded.full} (9999px)
Border: none
Box shadow: {shadows.lg} (compound inset + outset)
Height: 44px

Icon Button

Background: rgba(255, 255, 255, 0.02) (minimal fill)
Text color: {colors.body} (#D0D6E0)
Padding: none
Font size: {typography.button-sm} (13.3333px), weight 400
Border radius: {rounded.full} (9999px)
Border: 1px solid #242C2C (subtle dark border)
Box shadow: none
Width: 28px, Height: 28px

Icon Button Variant 2 (Inset Border)

Background: rgba(255, 255, 255, 0.02) (minimal fill)
Text color: {colors.muted} (#8A8F98)
Padding: {spacing.xs} horizontal (8px), {spacing.xs} vertical (8px)
Font size: {typography.button-sm} (13.3333px), weight 400
Border radius: {rounded.full} (9999px)
Border: none
Box shadow: rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset
Width: 28px, Height: 28px

Cards & Containers

Default Card

Background: {colors.surface} (#0F1011)
Text color: {colors.ink} (#F7F8F8)
Padding: {spacing.md} horizontal (16px), {spacing.lg} bottom, {spacing.sm} top (12px)
Font size: {typography.body-md} (14px), weight 400
Border radius: {rounded.xl} (9px)
Border: 1px solid rgba(255, 255, 255, 0.08)
Box shadow: {shadows.sm} (rgba(0, 0, 0, 0.2) 0px 0px 0px 1px)
Width: 661.766px, Height: 148.797px

Featured Card

Background: #E4F222 (bright lime-yellow; reserved for marquee content)
Text color: {colors.canvas} (#08090A)
Padding: {spacing.xl} (24px)
Font size: {typography.body-md} (14px), weight 400
Border radius: {rounded.lg} (8px)
Border: none
Box shadow: none
Width: 432px, Height: 480px

Large Container

Background: transparent
Text color: {colors.ink} (#F7F8F8)
Padding: {spacing.sm} (12px)
Font size: {typography.body-md} (14px), weight 400
Border radius: {rounded.none} (0px)
Border: none
Box shadow: none
Width: 1344px, Height: 492px

Badges

Primary Badge

Background: rgba(255, 255, 255, 0.07) (subtle fill)
Text color: {colors.body} (#D0D6E0)
Padding: 2px top/bottom, 5px left, 4px right
Font size: {typography.body-sm} (13px), weight 400
Border radius: {rounded.xs} (3px)
Border: 1px solid rgba(255, 255, 255, 0.08)
Box shadow: none
Height: 22px

Text Badge

Background: transparent
Text color: {colors.muted} (#8A8F98)
Padding: {spacing.xs} left (8px), {spacing.xs} right (4px)
Font size: {typography.caption-xs} (12px), weight 510
Border radius: {rounded.full} (9999px)
Border: none
Box shadow: none
Height: 24px

Small Badge (Primary)

Background: rgba(255, 255, 255, 0.05) (light fill)
Text color: {colors.body} (#D0D6E0)
Padding: {spacing.xs} left/right (6px left, 4px right)
Font size: {typography.caption-xs} (12px), weight 510
Border radius: {rounded.sm} (4px)
Border: 1px solid rgba(255, 255, 255, 0.08)
Box shadow: none
Height: 20px

Filled Badge

Background: #1C1C1D (dark gray)
Text color: {colors.body} (#D0D6E0)
Padding: {spacing.xs} left/right (6px left, 4px right)
Font size: {typography.caption-xs} (12px), weight 510
Border radius: {rounded.sm} (4px)
Border: 1px solid rgba(255, 255, 255, 0.08)
Box shadow: none
Height: 20px

Navigation

Default Navigation

Background: transparent
Text color: {colors.ink} (#F7F8F8)
Padding: none
Font size: {typography.nav} (13px), weight 400
Border radius: {rounded.none} (0px)
Border: none
Box shadow: none
Width: 1440px, Height: 72px
Link count visible at 1440px: 7 links

Navigation Link Hover State (from interaction stylesheet)

background-color: rgba(39, 44, 48, 0.75) (dark overlay)

Footer

Default Footer

Background: {colors.canvas} (#08090A)
Text color: {colors.ink} (#F7F8F8)
Font size: {typography.body-md} (14px), weight 400
Border radius: {rounded.none} (0px)
Border: 1px solid #232529 (subtle top border)
Box shadow: none
Width: 1440px, Height: 494px

5. Layout Principles

Spacing System

Base unit: {spacing.xs} = 8px

Scale (cumulative multiples of 8px):

{spacing.xxs} = 4px (half-unit; used for micro-spacing between icon and text)
{spacing.xs} = 8px (button padding, tight component gaps)
{spacing.sm} = 12px (card padding, compact sections)
{spacing.md} = 16px (standard button padding, body margin)
{spacing.lg} = 20px (section breaks, generative margins)
{spacing.xl} = 24px (generous component spacing)
{spacing.xxl} = 28px (inter-section padding)
{spacing.xxxl} = 32px (large container padding)
{spacing.section} = 40px (block sections, page-level rhythm)
{spacing.band} = 48px (hero bands, major visual breaks)

Usage context:

Inline icon-to-text gaps: {spacing.xxs} or {spacing.xs}
Button internal padding: {spacing.md} horizontal, {spacing.xs} to {spacing.sm} vertical
Card padding: {spacing.sm} to {spacing.xl} depending on content density
Section vertical rhythm: {spacing.section} (40px) between blocks; {spacing.band} (48px) for hero sections
Body text line-height provides implicit vertical rhythm; explicit margins are reserved for larger gaps.

Grid & Container

Content column widths by breakpoint:

375px viewport: 343px (16px padding on each side)
768px viewport: 712px (28px padding on each side)
1024px viewport: 968px (28px padding on each side)
1280px viewport: 1270px (10px padding on each side)
1440px viewport: 1344px (46px padding on each side)

Column count:

Mobile (375px): 2 columns
Tablet (768px–1024px): 2 columns for most layouts, 6-column grid available
Desktop (1024px+): 6-column grid

Maximum width: 1440px for the page container; content column width adjusts within that bound.

Section patterns:

Hero sections span full width with centered text overlay.
Card grids use CSS Grid with 2–6 columns depending on viewport, with gap: {spacing.md} (16px).
Pricing cards and feature grids stack at mobile, flex to 3–4 columns at tablet, and 4–6 at desktop.

Whitespace Philosophy

Whitespace is structural, not decorative. The system favors large breathing room around typographic content and modular card systems that snap to the spacing grid. Sections are separated by {spacing.section} (40px) or {spacing.band} (48px); content within cards never touches the edge (minimum {spacing.sm} — 12px inner padding). The near-black canvas amplifies whitespace value: empty space feels active and intentional. Hero sections use 60–80px top/bottom padding to create visual pause before information-dense sections below.

Border Radius Scale

{rounded.none} (0px) — Footer, full-width containers, large rectangular cards; used where sharpness signals structural importance.
{rounded.xs} (3px) — Badge borders only; minimalist accent.
{rounded.sm} (4px) — Small badges, compact form elements.
{rounded.md} (6px) — Avatar images, icon accents.
{rounded.lg} (8px) — Secondary / ghost buttons, medium containers.
{rounded.xl} (9px) — Primary card component; the standard card radius.
{rounded.xxl} (12px) — Featured cards, large modular containers.
{rounded.full} (9999px) — Buttons (all sizes), icon buttons, pill badges, avatars. This is the signature interactive radius—interactive elements are always pills.

Border Widths

{borders.thin} (1px) — All card borders, button borders, dividers, and hairline accents. The only border width in use; contributes to the minimal aesthetic.

6. Depth & Elevation

Level	Treatment	Use
Flat (Base)	No shadow; flat background	Canvas, body copy, transparent backgrounds
Micro (Card)	`{shadows.sm}` — `rgba(0, 0, 0, 0.2) 0px 0px 0px 1px`	Card borders; 1px outline only; signals containment without lift
Low (Navigation)	`{shadows.md}` — `rgba(0, 0, 0, 0.4) 0px 1px 0px 0px`	Navigation underline; subtle separation
Elevated (Button)	`{shadows.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`	Primary CTA buttons; compound inset + outset layers create subtle dimension

Shadow philosophy:
The system uses a layered-micro approach to depth. Shadows are primarily inset or hairline borders (1px outlines), not broad drop shadows. When elevation does occur (buttons), it is via a compound effect: inner light insets create a beveled feeling, while outer shadows add a whisper of drop. This preserves the minimal, technical aesthetic—depth is inferred from color change and hairline, not visual weight.

Opacity Levels

0.90 — Near-opaque; for backgrounds and text that must be legible.
0.80 — Prominent but not primary; secondary text or backgrounds.
0.70 — Subtle but visible; captions, tertiary text.
0.60 — Moderate transparency; hover overlays, icon states.
0.40 — Faint; disabled states, very secondary content.
0.30 — Nearly transparent; decorative overlays, underlay tints.

These levels are used to modulate color intensity (e.g., white overlays at 0.03–0.08 for button fills, dark overlays at 0.4–0.6 for hover states) and are not tied to a single color role.

Z-index / Layering

Base layer (1–3) — Body, cards, content blocks. Used for structure.
Dropdown (50) — Popovers, dropdown menus; above base content, below sticky.
Sticky (100) — Navigation bar, fixed headers; floats above scrolling content.
High sticky (995–997) — Modal overlays, toast notifications, topmost UI; stacked in reserve for edge cases.

The stacking hierarchy is shallow and explicit—z-index values range from 1 to 997, with deliberate gaps to prevent fighting. Modals and toasts occupy the 995+ range; nav occupies 100; dropdowns occupy 50.

7. Do's and Don'ts

Do

Use white ({colors.primary} — #FFFFFF) for every primary CTA. It is the signal color. Pair with dark text ({colors.canvas} — #08090A) for maximum contrast.
Preserve negative letter-spacing on display and heading text. Every px of tracking (e.g., -1.58px, -1.41px) is intentional and part of the brand. Do not round to 0 or auto.
Snap all spacing to the 8px grid ({spacing.xs}, {spacing.sm}, {spacing.md}, etc.). Do not use arbitrary px values.
Keep interactive elements pill-shaped ({rounded.full} — 9999px). Buttons, icon buttons, and pill badges are never squared.
Use the hairline color ({colors.hairline} — #E5E5E6) for 1px borders only. It is light and subtle; do not use it for large strokes or fills.
Apply {colors.body} (#D0D6E0) for body copy and {colors.muted} (#8A8F98) for secondary text. These grays are the text ramp.
Implement focus states with compound shadows: rgba(0, 0, 0, 0.1) 0px 4px 12px, rgba(0, 0, 0, 0.2) 0px 0px 0px 2px (from stylesheet).
Separate sections with {spacing.section} (40px) or {spacing.band} (48px). Large breathing room is structural.
Reserve the featured card color (#E4F222—bright lime) for exclusive, marquee content (e.g., case study showcase, VIP features). Use sparingly.
Build responsive grids with 2–6 columns, collapsing to single column only below 375px.

Don't

Never use a color other than {colors.primary} (#FFFFFF) for primary CTA fills. The indigo accent ({colors.accent} — #5E6AD2) is for decoration and depth only.
Don't invent border radius values. Use only values from the scale: {rounded.none}, {rounded.xs}, {rounded.sm}, {rounded.md}, {rounded.lg}, {rounded.xl}, {rounded.xxl}, {rounded.full}.
Don't add drop shadows where hairline borders suffice. Cards use {shadows.sm} (1px outline), not broad shadows.
Don't use body text smaller than {typography.body-sm} (13px). Anything below 13px is reserved for captions and code.
Don't override the Inter weight hierarchy: use 400 (regular), 510 (medium), or 590 (bold) only. No 700 or custom weights.
Don't apply rounded corners to full-width hero sections or footers ({rounded.none} — 0px).
Don't use {colors.link} (#828FFF) in button fills or callouts. It is for inline links only; use white for CTAs.
Don't set line-height on display text above 1.1. Tight leading (1.0) is the signature look; loose display text reads as generic.
Don't break the spacing grid. All padding, margins, and gaps must be multiples of 4px or standard scale values. Arbitrary 15px or 18px gaps break rhythm.
Don't hide interactive elements without a clear focus state. Every button, link, and input must have :focus-visible and :hover states.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport	Column Count	Grid Type	Key Changes	Content Width
Mobile	375px	2	CSS Grid	Menu toggle appears; nav links hidden; 3 links in header	343px
Tablet	768px	2–6	CSS Grid	More nav links visible (3); grid adapts to 2 columns for most sections; padding increases to 28px	712px
Large Tablet	1024px	6	CSS Grid	6-column grid available; nav shows 6 links; card grids expand to 3–4 per row	968px
Desktop	1280px	6	CSS Grid	Minimal padding (10px); nav shows 7+ links; pricing/feature cards span full 6-column width or split into 2–3 columns	1270px
Large Desktop	1440px	6	CSS Grid	Maximum width applied; padding increases to 46px; content column maxes at 1344px; full visual breathing room	1344px

Collapse points:

Navigation menu toggle appears when nav links cannot fit in header width; occurs below 768px.
Largest heading scales from 72px ({typography.display-xl}) at 1440px down to 38px at 375px (linear scaling).
Body text remains 16px on most sizes; captions stay at 12px.
Section padding (padding-x) varies: 16px at mobile, 28px at tablet, 46px on large desktop.

Touch Targets

Minimum interactive target size: 44px × 44px (buttons, links, form inputs). Standard button height is 32–44px; icon buttons are 28–32px (acceptable for dense UI).
Minimum tap spacing: {spacing.xs} (8px) between adjacent interactive elements to avoid accidental taps.
Mobile-first consideration: On 375px viewports, buttons and links are padded generously to meet 44px height; form inputs are full-width with tall padding for thumb-friendly interaction.

Collapsing Strategy

Card grids: 2 columns at ≤768px, 3–4 at tablet, 4–6 at desktop. Gap remains {spacing.md} (16px) across all sizes.
Hero text: Display heading scales linearly from 72px (1440px) to 38px (375px); line-height remains 1.0 to preserve tightness.
Hero layout: Full-width banner at all sizes; text centered; no side-by-side columns until 1024px+.
Navigation: Horizontal nav links at 768px+; menu toggle (hamburger) at <768px hiding overflow links.
Pricing/feature table: Stacks vertically at 375–768px; side-by-side columns at 1024px+.
Padding: 16px at mobile, 28px at tablet/desktop; 46px on large desktop. Reduces at 1280px to 10px to fit extreme viewport widths without horizontal scroll.
Font sizes: Typography hierarchy tightens on mobile (no Display XL; use Display MD 48px or Display SM 40px); body text and labels stay at 13–16px.

9. Agent Prompt Guide

Quick Color Reference

Use this mapping to quickly assign colors to UI roles:

Primary CTA fill & brand accent: {colors.primary} (#FFFFFF)
Secondary accent (decorative): {colors.accent} (#5E6AD2)
Inline link color: {colors.link} (#828FFF)
Page background / canvas: {colors.canvas} (#08090A)
Card / panel background: {colors.surface} (#0F1011)
Primary heading / text: {colors.ink} (#F7F8F8)
Body copy (default): {colors.body} (#D0D6E0)
Secondary / muted text: {colors.muted} (#8A8F98)
Tertiary / disabled text: {colors.faint} (#62666D)
1px borders & dividers: {colors.hairline} (#E5E5E6)

Iteration Guide

All buttons are pill-shaped (border-radius: 9999px). Primary buttons fill white; secondary buttons use semi-transparent white (rgba(255, 255, 255, 0.05)) background. Add focus and hover state shadows from stylesheet.
Typography is Inter Variable only (except code, which is Berkeley Mono). Use weights 400, 510, or 590. Never use 700 or custom weights. Negative letter-spacing on display/heading text is mandatory; reproduce exactly.
Spacing snaps to 8px multiples ({spacing.xs}, {spacing.sm}, {spacing.md}, {spacing.lg}, etc.). No arbitrary 15px or 18px gaps. Card padding is {spacing.sm} to {spacing.xl}; section gaps are {spacing.section} (40px) or {spacing.band} (48px).
Cards use {rounded.xl} (9px radius) and 1px border with rgba(255, 255, 255, 0.08) fill. Shadow is micro: {shadows.sm} (1px outline). Featured cards are #E4F222 (yellow); standard cards are {colors.surface} (#0F1011).
Responsiveness: 2 columns at ≤768px, 6-column grid at 1024px+. Content width scales: 343px (375px viewport) → 712px (768px) → 1344px (1440px). Never force content into a non-existent column.
All interactive elements have focus-visible and hover states. Buttons brighten or change background on hover; focus adds a compound shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px, rgba(0, 0, 0, 0.2) 0px 0px 0px 2px.
Text color hierarchy: {colors.ink} for headings → {colors.body} for body → {colors.muted} for secondary → {colors.faint} for disabled/placeholder. Never skip levels.
Hero sections use decorative gradients (linear/radial blends of dark overlays and light accents). Apply via background: <gradient> or pseudo-element; do not use heavy shadows.
Z-index stacking: base content (1–3) < dropdown (50) < sticky nav (100) < modal/toast (995+). Keep gaps explicit.
Badges are ultra-compact: 12–14px text, 2–6px padding, {rounded.xs} to {rounded.sm} radius. Use semi-transparent fills (rgba(255, 255, 255, 0.05–0.07)) or text-only variants.

10. Known Gaps

Interaction states not explicitly defined for all components: The extraction captured :hover, :focus-visible, and :active states, but not all UI roles may have measured state styles. Assume defaults (opacity change, brightness adjustment) where not documented.
Error, success, and warning semantic colors are not declared. The site does not expose a status color ramp in its markup; form validation colors, alerts, and system messages may use custom colors not visible in the primary palette.
Two colors have no measured role ({colors.accent_1} — #23252A and {colors.neutral_1} — #000000). They appear in edge cases, decorative patterns, or fallback contexts only; treat them as reserves, not primary roles.
Animation and transition timings were not extracted. The design system likely uses CSS transitions (e.g., transition: background-color 150ms ease) on interactive elements, but exact durations and easing functions are not documented.
Component variant coverage is incomplete. Only the most common button, card, badge, and link variants were extracted. Other components (popovers, modals, date pickers, spinners, etc.) may exist but were not measured.
Surfaces behind authentication were not visited. Logged-in dashboard UI, account settings, and protected pages may use additional colors, components, or layout rules not captured by this extraction.
Some stylesheets were cross-origin or minified, so edge-case CSS properties (e.g., filter: brightness()) were captured but may not represent the complete picture. Refer to component screenshots for visual confirmation.
Gradients used in hero sections are complex multi-layer compositions. The exact order and rendering context (pseudo-element vs. background-image) are inferred; reproduction may require testing.

Design system extraction confidence: High. The 6-page analysis captured a consistent, systematic palette and component library. Typography and spacing rules are precise and reproducible. Responsive breakpoints are measured, not estimated. Use this document as the single source of truth for implementing Linear's design system.

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

Design tokens

Extracted from linear.app

Primary

#FFFFFF

Primary CTA, brand accent, active state

Neutral

#08090A

Default page background

#0F1011

Card / panel background

#F7F8F8

Headings / primary text

#D0D6E0

Body copy

#8A8F98

Captions, secondary text

#62666D

Tertiary / placeholder text

#222222

Label colour on brand surfaces

#E5E5E6

1px borders and dividers

Typography · Inter Variable

h164px · 510 · 64px

h272px · 510 · 72px

h320px · 590 · 26.6px

h416px · 590 · 28px

body13px · 400 · 20px

link13px · 400 · 19.5px

button13.3333px · 400

nav-link13px · 400 · 19.5px

display48px · 510 · 48px

body24px · 400 · 31.92px

body15px · 400 · 24px

heading32px · 400 · 36px

body15px · 300 · 20px

body15px · 510 · 24px

caption12px · 510 · 16.8px

caption12px · 510 · 14px

body13px · 510 · 19.5px

caption12px · 400 · 14px

body14px · 400 · 21px

body13px · 400 · 20px

body13px · 400 · 16px

caption12px · 400 · 16px

body13px · 500 · 16px

caption12px · 400 · 16.8px

Typography · Berkeley Mono

input14px · 400 · 24px

code12px · 400 · 16.8px

Spacing

4px

8px

12px

16px

20px

24px

28px

32px

Elevation

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

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

Components · 6

Remixes of linear.app

Latest remixes

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

Remix it