# Design Reference - Linear
> Midnight Command Center: A dark, layered interface lit by precise accents, like a high-tech control panel.

## Source
- Original site: https://linear.app
- Captured: 2026-04-29T00:05:59.975Z

## Tags
- No tags captured

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Pitch Black | `#08090a` | neutral | Page background, primary surface for base elements, subtly integrated into shadows for depth. |
| Graphite | `#0f1011` | neutral | Elevated card backgrounds, slightly lighter than the canvas to denote layering. |
| Deep Slate | `#161718` | neutral | Secondary elevated card backgrounds, providing another layer of visual hierarchy. |
| Charcoal Grey | `#23252a` | neutral | Borders and some shadowed card surfaces, framing elements with a subtle distinction. |
| Muted Ash | `#323334` | neutral | Subtle borders and dividers, indicating soft separations within the dark theme. |
| Gunmetal | `#383b3f` | neutral | Tertiary background elements and input borders, a darker neutral for functional elements. |
| Porcelain | `#f7f8f8` | neutral | Primary text and icons, providing strong contrast for readability against dark backgrounds. |
| Light Steel | `#d0d6e0` | neutral | Secondary text and borders, for less prominent information or structural lines. |
| Storm Cloud | `#8a8f98` | neutral | Tertiary text, descriptive labels, and inactive states, recedes into the background for low-priority details. |
| Fog Grey | `#62666d` | neutral | Muted text for metadata, timestamps, and further de-emphasized content. |
| Alabaster | `#e5e5e6` | neutral | Informational borders and subtle fills, often seen in code blocks or explanatory components. |
| Neon Lime | `#e4f222` | brand | Primary action indicators, active states, and focus elements — a high-energy focal point. |
| Aether Blue | `#5e6ad2` | accent | Decorative highlights and occasional background elements, suggesting a technological or informational context. |
| Forest Green | `#008d2c` | semantic | Positive status indicators, success messages, and related iconography. |
| Cyan Spark | `#02b8cc` | accent | Informational highlights and unique icon fills, providing a cool accent. |
| Emerald | `#27a644` | semantic | Success and completion states, often paired with green text. |
| Warning Red | `#eb5757` | semantic | Observed in icon fill, body borderColor, other fill. Extracted usage does not support a distinct primary control color. |
| Deep Violet | `#6366f1` | accent | Background accents in specific content blocks, indicating a distinct informational category. |
| Amethyst | `#8b5cf6` | accent | Another variant of violet for backgrounds, used interchangeably with Deep Violet for visual diversity. |

## Typography
- role: Primary UI typeface for all content including headings, body text, and interactive elements. Its variable weights provide a clean, modern aesthetic with strong technical readability.; sizes: 10px, 11px, 12px, 13px, 14px, 15px, 16px, 17px, 20px, 24px, 32px, 48px, 64px, 72px; family: Inter Variable; weight: 300, 400, 510, 590; weights: 300, 400, 510, 590; lineHeight: 1.00, 1.13, 1.20, 1.33, 1.40, 1.47, 1.50, 1.60, 2.00, 2.46, 2.75; substitute: Inter; letterSpacing: -0.22, -0.15, -0.13, -0.12, -0.11, -0.1; fontFeatureSettings: "cv01", "ss03"
- role: Monospaced font for code snippets, technical details, and certain data displays, ensuring consistent character alignment and technical clarity.; sizes: 12px, 13px, 14px; family: Berkeley Mono; weight: 400; weights: 400; lineHeight: 1.30, 1.40, 1.50, 1.71; substitute: IBM Plex Mono; letterSpacing: -0.15

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "pill": "9999px",
      "tags": "2px",
      "cards": "6px",
      "badges": "4px",
      "inputs": "6px",
      "buttons": "6px",
      "default": "6px"
    },
    "elementGap": "8px",
    "sectionGap": "24px",
    "cardPadding": "12px"
  },
  "radius": {
    "pill": "9999px",
    "tags": "2px",
    "cards": "6px",
    "badges": "4px",
    "inputs": "6px",
    "buttons": "6px",
    "default": "6px"
  }
}
```

## Component Patterns
- name: Issue Card
- name: CTA Button Group
- name: Issue List Board
- name: Primary Action Button; role: Call to action button
- name: Ghost Navigation Button; role: Navigation and secondary actions
- name: Subtle Link Button; role: Tertiary actions and links
- name: Navigation Item Button; role: Sidebar navigation items
- name: Default Card; role: Content container
- name: Elevated Card; role: Prominent content container
- name: Nested Card; role: Internal content grouping
- name: Input Field; role: User input fields
- name: Subtle Input Field; role: Search or secondary input fields
- name: Badge; role: Label or tag

## Do
- Use 'Pitch Black' (#08090a) for the primary page background to establish the dark theme.
- Apply 'Porcelain' (#f7f8f8) for all primary text and important icons to ensure readability.
- Highlight primary interactive elements exclusively with 'Neon Lime' (#e4f222) as a background, restricting its use to guide user attention.
- Create depth and hierarchy by layering surfaces using 'Pitch Black' (#08090a), 'Graphite' (#0f1011), and 'Deep Slate' (#161718) backgrounds.
- Employ the Inter Variable font family with specific letter-spacing adjustments for all UI text, such as -0.22px for display sizes and -0.11px for body text, to maintain a tight, precise feel.
- Utilize 6px border-radius for all primary buttons, cards, and input fields to maintain a consistent, subtly rounded aesthetic.
- Use 'Storm Cloud' (#8a8f98) for secondary text and descriptive labels to recede into the background.

## Don't
- Do not introduce additional bright or saturated colors beyond 'Neon Lime' (#e4f222) for interactive elements; maintain its singular role.
- Avoid using harsh white backgrounds or light-themed patterns, as the system is anchored in a dark mode aesthetic.
- Do not deviate from the specified typeface choices; 'Inter Variable' and 'Berkeley Mono' are fundamental to the visual identity.
- Refrain from using strong, diffuse shadows; elevation is achieved through subtle layering and sharp, contained shadows like rgba(0, 0, 0, 0.4) 0px 2px 4px 0px.
- Do not apply broad, decorative background gradients across large sections of the UI; gradients are subtle and contained to specific functional areas.
- Do not use generic border-radii; adhere to 6px for key components like cards and buttons, and 2px for smaller tags, to preserve the signature balance of softness and precision.
- Avoid large amounts of white space; the design is compact, leveraging an 8px element gap as a standard measurement.