Developer Dark

# Developer Dark

## Design Philosophy

Developer Dark is designed **by developers, for developers**. The philosophy is uncompromising utility: every design decision optimizes for information density, scanability, and long-session comfort.

The design assumes its users are technically sophisticated, visually literate, and impatient with anything that wastes their time. No decorative elements. No marketing fluff. Just clean, dense, perfectly organized information that developers can consume at terminal speed.

## Design Goals

- Maximize information density without sacrificing readability
- Use syntax-highlighting color conventions developers already know
- Support long reading sessions with carefully tuned contrast
- Work at both 13px and 16px base font sizes
- Feel like a natural extension of the developer's terminal

## Visual Language

The visual language is **terminal-native**. Backgrounds match GitHub's dark theme (`#0d1117`), surfaces are slightly elevated (`#161b22`), and the color palette borrows directly from popular syntax highlighters: green for strings, blue for keywords, orange for warnings.

Monospace is not just for code — it's the primary typeface for everything. This creates a cohesive, "everything is code" aesthetic that developers find natural and comfortable.

## Color System

| Token           | Value     | Usage                       |
|-----------------|-----------|-----------------------------|
| background      | `#0d1117` | Page/terminal background    |
| surface         | `#161b22` | Card/panel backgrounds      |
| primary         | `#22c55e` | Success, strings, primary   |
| secondary       | `#3b82f6` | Links, keywords, info       |
| accent          | `#f0883e` | Warnings, alerts            |
| text            | `#e6edf3` | Primary text                |
| text-muted      | `#7d8590` | Comments, secondary         |
| border          | `#30363d` | Borders, dividers           |
| syntax-red      | `#f85149` | Errors, deletions           |
| syntax-purple   | `#d2a8ff` | Functions, decorators       |
| syntax-cyan     | `#79c0ff` | Types, constants            |
| syntax-yellow   | `#e3b341` | Numbers, constants         |

## Typography

- **Primary Font:** JetBrains Mono
- **Fallback:** Fira Code, Consolas, monospace
- **Heading Scale:** `clamp(1.5rem, 3vw, 2.5rem)` — smaller than typical, dense
- **Body Size:** 14px (0.875rem), line-height 1.6
- **Font Weights:** 400 (body), 500 (labels), 700 (headings)
- **Ligatures:** Enabled for supported fonts (`font-variant-ligatures: contextual`)

## Spacing System

Base unit: 4px — compact spacing for density

| Token | Value  | Usage                    |
|-------|--------|--------------------------|
| xs    | 2px    | Inline micro gaps        |
| sm    | 4px    | Tight spacing            |
| md    | 8px    | Component padding        |
| lg    | 16px   | Card padding             |
| xl    | 24px   | Section padding          |
| 2xl   | 32px   | Major sections           |
| 3xl   | 48px   | Hero area                |

## Border Radius

| Token | Value | Usage                    |
|-------|-------|--------------------------|
| sm    | 4px   | Inputs, code blocks      |
| md    | 6px   | Cards                    |
| lg    | 8px   | Modals                   |
| xl    | 12px  | Feature panels           |
| full  | 9999px| Badges, pills            |

## Shadows

```css
.card-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.elevated-shadow {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.terminal-inset {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
```

## Gradients

```css
.bg-gradient {
  background: linear-gradient(180deg, #0d1117 0%, #161b22 100%);
}
.code-gradient {
  background: linear-gradient(135deg, #22c55e 0%, #3b82f6 100%);
}
```

Gradients are minimal — used only for occasional emphasis, never for large surfaces.

## Layout

- **Container:** max-width 1280px, centered
- **Sidebar:** 280px fixed, collapsible
- **Content:** fluid with max-width 800px for readability
- **Code Blocks:** full-width, overflow-x scroll
- **Breakpoints:**
  - Mobile: < 640px (single column, bottom nav)
  - Tablet: 640px–1024px (collapsed sidebar)
  - Desktop: > 1024px (full sidebar + content)

## Components

### Navbar
- Solid dark background `#161b22`
- 48px height, compact
- Logo + search bar + user menu
- Terminal-style status indicators

### Hero
- Split: content left, code preview right
- Code preview with syntax highlighting
- Copy button on code blocks
- Terminal prompt style for headings

### Buttons
- Primary: green (`#22c55e`) fill, dark text
- Secondary: dark with `#30363d` border
- Ghost: text-only with hover background
- Size: 32px height compact, 40px standard

### Cards
- `#161b22` background
- 1px `#30363d` border
- 16px padding
- Terminal-style header with colored dots

### Code Blocks
- `#0d1117` background
- Syntax highlighting with 12+ colors
- Line numbers in muted color
- Copy button in top-right

### Forms
- Dark inputs with `#30363d` border
- Focus: green border
- Monospace text
- Inline validation with syntax colors

### Footer
- Dark background, minimal
- Link grid, monospace text
- Status indicators

## Animation

- **Duration:** 100ms for interactions
- **Easing:** `linear` — mechanical, precise
- **Hover Effects:** Background color shift, border color change
- **Entrance:** None — content appears immediately
- **Terminal Cursor:** Blinking cursor animation for focus states
- **Transitions:** `background-color 100ms linear, border-color 100ms linear`

## Responsive Rules

- **Mobile (< 640px):** Single column, bottom tab nav, code blocks scroll horizontally
- **Tablet (640px–1024px):** Collapsible sidebar, two-column where appropriate
- **Desktop (> 1024px):** Full sidebar, dense multi-column layouts
- **Code blocks:** Always scroll horizontally, never wrap

## Accessibility

- Green on dark: 5.2:1 contrast (WCAG AA)
- Focus indicators: 2px green outline
- All code blocks have language labels
- Screen reader: line numbers hidden, code content accessible
- Keyboard: full navigation without mouse

## Performance

- Zero image dependencies
- Monospace font loads from system stack
- No JavaScript for visual effects
- CSS-only syntax highlighting for static content
- Minimal CSS — dense but efficient

## Implementation Rules

1. Always use monospace font — no exceptions
2. Color palette must match syntax highlighting conventions
3. Spacing must be compact — developers prefer density
4. Code blocks must support horizontal scroll, never wrap
5. All interactive elements must work with keyboard only
6. Test at 13px base font size — many developers prefer smaller text