PUBLIC REFERENCE
Linear
Midnight Command Center: A dark, layered interface lit by precise accents, like a high-tech control panel.
Colors
#08090a Page background, primary surface for base elements, subtly integrated into shadows for depth.
#0f1011 Elevated card backgrounds, slightly lighter than the canvas to denote layering.
#161718 Secondary elevated card backgrounds, providing another layer of visual hierarchy.
#23252a Borders and some shadowed card surfaces, framing elements with a subtle distinction.
#323334 Subtle borders and dividers, indicating soft separations within the dark theme.
#383b3f Tertiary background elements and input borders, a darker neutral for functional elements.
#f7f8f8 Primary text and icons, providing strong contrast for readability against dark backgrounds.
#d0d6e0 Secondary text and borders, for less prominent information or structural lines.
#8a8f98 Tertiary text, descriptive labels, and inactive states, recedes into the background for low-priority details.
#62666d Muted text for metadata, timestamps, and further de-emphasized content.
#e5e5e6 Informational borders and subtle fills, often seen in code blocks or explanatory components.
#e4f222 Primary action indicators, active states, and focus elements — a high-energy focal point.
#5e6ad2 Decorative highlights and occasional background elements, suggesting a technological or informational context.
#008d2c Positive status indicators, success messages, and related iconography.
#02b8cc Informational highlights and unique icon fills, providing a cool accent.
#27a644 Success and completion states, often paired with green text.
#eb5757 Observed in icon fill, body borderColor, other fill. Extracted usage does not support a distinct primary control color.
#6366f1 Background accents in specific content blocks, indicating a distinct informational category.
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.