Dev Dark

---
version: "1.0"
name: "Dev Dark"
description: "Dark-first design system for developer tools, CLIs, and technical dashboards. Monospace-forward, zinc palette, cyan accent, maximum 6px border-radius."

colors:
  primary: "#fafafa"
  primary-foreground: "#09090b"
  secondary: "#27272a"
  secondary-foreground: "#fafafa"
  accent: "#22d3ee"
  accent-foreground: "#09090b"
  background: "#09090b"
  surface: "#18181b"
  surface-raised: "#27272a"
  border: "#27272a"
  border-strong: "#3f3f46"
  text-primary: "#fafafa"
  text-secondary: "#a1a1aa"
  text-muted: "#71717a"
  success: "#22c55e"
  warning: "#eab308"
  error: "#ef4444"
  info: "#22d3ee"

typography:
  headline:
    family: "JetBrains Mono"
    weight: 600
    use: "Page titles, section headers, feature names — monospace gives technical authority"
  body:
    family: "Inter"
    weight: 400
    use: "Paragraph text, descriptions, documentation prose, table content"
  mono:
    family: "JetBrains Mono"
    weight: 400
    use: "Code blocks, terminal output, API references, data values, keyboard shortcuts"
  scale:
    - { label: "xs", size: "11px", lineHeight: "16px" }
    - { label: "sm", size: "13px", lineHeight: "18px" }
    - { label: "base", size: "14px", lineHeight: "22px" }
    - { label: "lg", size: "16px", lineHeight: "24px" }
    - { label: "xl", size: "18px", lineHeight: "26px" }
    - { label: "2xl", size: "22px", lineHeight: "30px" }
    - { label: "3xl", size: "28px", lineHeight: "34px" }
    - { label: "4xl", size: "34px", lineHeight: "40px" }

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96]
  unit: "px"

rounded:
  none: "0px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  full: "9999px"

components:
  button:
    variants:
      - name: "primary"
        background: "#fafafa"
        text: "#09090b"
        radius: "md"
        weight: 500
      - name: "secondary"
        background: "#27272a"
        text: "#fafafa"
        radius: "md"
        weight: 500
      - name: "outline"
        background: "transparent"
        text: "#fafafa"
        border: "#3f3f46"
        radius: "md"
        weight: 500
      - name: "ghost"
        background: "transparent"
        text: "#a1a1aa"
        radius: "md"
        weight: 500
      - name: "destructive"
        background: "#ef4444"
        text: "#ffffff"
        radius: "md"
        weight: 500
    sizes:
      - { name: "sm", height: "28px", padding: "0 10px", fontSize: "12px" }
      - { name: "md", height: "32px", padding: "0 14px", fontSize: "13px" }
      - { name: "lg", height: "36px", padding: "0 18px", fontSize: "14px" }
  input:
    background: "#18181b"
    border: "#27272a"
    radius: "md"
    height: "32px"
    focusRing: "#22d3ee"
    placeholder: "#71717a"
  card:
    background: "#18181b"
    border: "#27272a"
    radius: "lg"
    padding: "20px"
    shadow: "none"
    hoverBorder: "#3f3f46"

x-stylebase:
  version: "1.0.0"
  template: "dev-dark"
  generated-by: "stylebase"
  ai-rules:
    always:
      - "Use JetBrains Mono for headlines and code. Use Inter for body text only."
      - "Dark background (#09090b) is the default. Never generate light-mode variants."
      - "Cyan accent (#22d3ee) for interactive elements: links, focus rings, active tabs."
      - "Border-radius must never exceed 6px (lg). This is a hard constraint."
      - "Use zinc palette for all neutral surfaces. No warm grays, no cool blues."
      - "Terminal-style code blocks use surface (#18181b) background with no rounded corners (none)."
    never:
      - "Never use border-radius above 6px except on pills (full)."
      - "Never use light backgrounds. Surface hierarchy: #09090b → #18181b → #27272a."
      - "Never use serif fonts. Not even for decorative headings."
      - "Never use gradients or box-shadows for elevation."
      - "Never use colors outside the 18 defined tokens."
---

# Dev Dark Design System

## Design Philosophy

Dev Dark is built for people who live in terminals. The aesthetic is derived from code editors and CLI interfaces: dense information, sharp edges, monospace rhythm. Every design decision optimizes for scanability in long sessions — low contrast ratios for ambient text, high contrast for actionable elements.

The system uses darkness as the default, not as a "mode." There is no light theme. Surfaces layer upward through three zinc levels: background → surface → surface-raised. This creates depth without shadows.

## Color Usage

The zinc palette (#09090b through #71717a) provides all neutral tones. Zinc was chosen over pure gray for its slight warmth — cold enough to feel technical, warm enough to reduce eye strain during extended use.

Cyan (#22d3ee) is the single accent. It appears on interactive elements only: links, focus rings, active tab indicators, selected items. Using cyan on non-interactive elements destroys its signaling power.

Semantic colors follow terminal conventions: green for success/pass, yellow for warnings, red for errors/fail. These appear in badges, inline status indicators, and toast notifications — never as background fills.

## Typography Rules

JetBrains Mono serves double duty: headlines and code. This is intentional — it reinforces the developer-tool identity. Headlines at weight 600 feel authoritative without needing a display font. Body text uses Inter at weight 400 for comfortable reading in documentation and descriptions.

The type scale is tighter than typical SaaS systems. Base is 14px (not 16px) to match code editor defaults. xs goes to 11px for timestamp-density. The trade-off is readability for density — correct for this audience.

## Spacing Philosophy

Same 4px base grid as other systems, but component sizing skews smaller. Default button height is 32px, not 36px. Default input height matches. This allows more controls per viewport — critical for tool UIs with many configuration options.

Section spacing remains generous (48px-96px) to create breathing room between dense control groups.

## Component Principles

Buttons invert the typical pattern: primary is light-on-dark (#fafafa on #09090b). This makes the primary action the brightest element on screen — impossible to miss on a dark canvas.

Cards use the surface color (#18181b) with subtle zinc borders. Hover reveals a stronger border (#3f3f46). No shadow, no lift, no scale animation. Interactions are communicated through color shifts only.

Code blocks are first-class citizens. They use the rawest surface (#18181b), zero border-radius, and monospace at base size. Syntax highlighting colors should come from the editor's theme, not this system.

## What This System Is Not

This is not a consumer-facing dark theme. It has no playful accent colors, no rounded-everything friendliness, no brand personality. Use it for developer dashboards, API documentation, CLI companions, and infrastructure monitoring. If the user doesn't know what a terminal is, this system is wrong for them.