# vMLX — Midnight Steel Theme

> The official design system for vMLX, a local LLM inference app for Apple Silicon.

---

## Color Palette

### Backgrounds

| Token | Hex | RGB | Usage |
|-------|-----|-----|-------|
| `--background` | `#0a0c10` | `10 12 16` | App background, deepest layer |
| `--card` | `#111419` | `17 20 25` | Cards, panels, elevated surfaces |
| `--popover` | `#181c24` | `24 28 36` | Popovers, dropdowns, secondary surfaces |
| `--muted` | `#1e2330` | `30 35 48` | Muted backgrounds, borders, subtle fills |
| `--accent` | `#252c3b` | `37 44 59` | Hover states, active backgrounds |

### Primary

| Token | Hex | RGB | Usage |
|-------|-----|-----|-------|
| `--primary` | `#3b82f6` | `59 130 246` | Primary actions, links, active states |
| `--primary-foreground` | `#ffffff` | `255 255 255` | Text on primary backgrounds |
| `--ring` | `#3b82f6` | `59 130 246` | Focus rings |

### Text

| Token | Hex | RGB | Usage |
|-------|-----|-----|-------|
| `--foreground` | `#e2e4ea` | `226 228 234` | Primary text |
| `--muted-foreground` | `#8b90a0` | `139 144 160` | Secondary/muted text |
| `--accent-foreground` | `#ffffff` | `255 255 255` | Text on accent backgrounds |

### Semantic

| Token | Hex | RGB | Usage |
|-------|-----|-----|-------|
| `--destructive` | `#ef4444` | `239 68 68` | Errors, destructive actions |
| `--warning` | `#f59e0b` | `245 158 11` | Warnings, loading states |
| `--secondary` | `#181c24` | `24 28 36` | Secondary buttons, subtle actions |

### Borders & Inputs

| Token | Hex | RGB | Usage |
|-------|-----|-----|-------|
| `--border` | `#1e2330` | `30 35 48` | Borders, dividers |
| `--input` | `#252c3b` | `37 44 59` | Input field backgrounds |

---

## Typography

### Font Stack

```css
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
```

Uses **SF Pro** on macOS natively, falls back to **Inter** on other platforms.

### Scale

| Element | Size | Weight | Tracking |
|---------|------|--------|----------|
| Page title | `text-xl` (1.25rem) | Bold (700) | Normal |
| Section header | `text-sm` (0.875rem) | Semibold (600) | `0.05em` uppercase |
| Body text | `text-sm` (0.875rem) | Normal (400) | Normal |
| Labels | `text-xs` (0.75rem) | Medium (500) | Normal |
| Mono/code | `text-xs` (0.75rem) | Normal (400) | `font-mono` |

---

## Border Radius

```css
--radius: 10px;
```

| Size | Value | Usage |
|------|-------|-------|
| `rounded-lg` | `10px` | Cards, panels |
| `rounded-md` | `8px` | Buttons, inputs |
| `rounded-sm` | `6px` | Badges, tags |
| `rounded-full` | `9999px` | Status dots, pills |

---

## Status Colors

| State | Background | Dot | Text |
|-------|-----------|-----|------|
| Running | `bg-primary` | Blue | `text-primary` |
| Stopped | `bg-muted-foreground` | Grey | `text-muted-foreground` |
| Error | `bg-destructive` | Red | `text-destructive` |
| Loading | `bg-warning` | Amber | `text-warning` |

### Action Buttons

- **Start / Save & Restart** — `bg-emerald-600 hover:bg-emerald-700` (green = go)
- **Primary actions** — `bg-primary hover:bg-primary/90`
- **Secondary** — `border border-border hover:bg-accent`
- **Destructive** — `bg-destructive text-white`

---

## Shadows & Effects

```css
/* No heavy shadows — the theme relies on border contrast and surface layering */
/* Subtle glow for active/focus states */
focus:ring-1 focus:ring-ring

/* Scrollbar */
scrollbar-width: thin;
scrollbar-color: #252c3b #0a0c10;
```

---

## CSS Variables (Full)

```css
:root {
  --background: 10 12 16;
  --foreground: 226 228 234;
  --card: 17 20 25;
  --card-foreground: 226 228 234;
  --popover: 24 28 36;
  --popover-foreground: 226 228 234;
  --primary: 59 130 246;
  --primary-foreground: 255 255 255;
  --secondary: 24 28 36;
  --secondary-foreground: 226 228 234;
  --muted: 30 35 48;
  --muted-foreground: 139 144 160;
  --accent: 37 44 59;
  --accent-foreground: 255 255 255;
  --destructive: 239 68 68;
  --destructive-foreground: 255 255 255;
  --border: 30 35 48;
  --input: 37 44 59;
  --ring: 59 130 246;
  --warning: 245 158 11;
  --warning-foreground: 255 255 255;
  --radius: 10px;
}
```

Values are **space-separated RGB triplets** for Tailwind CSS opacity support:

```css
/* Usage in Tailwind config */
background: rgb(var(--primary) / <alpha-value>);

/* In classes */
bg-primary        /* solid */
bg-primary/90     /* 90% opacity */
bg-primary/10     /* 10% opacity */
```

---

## Prose (Markdown Content)

```css
--tw-prose-body: #e2e4ea;
--tw-prose-headings: #ffffff;
--tw-prose-links: #60a5fa;      /* blue-400 */
--tw-prose-bold: #ffffff;
--tw-prose-code: #60a5fa;
--tw-prose-pre-bg: #0a0c10;
--tw-prose-pre-code: #e2e4ea;
```

---

## Logo Colors

| Element | Color | Usage |
|---------|-------|-------|
| "v" letter | `#3b82f6` (primary blue) | Brand accent |
| "MLX" letters | `#e2e4ea` (foreground) | On dark backgrounds |
| "MLX" letters | `#0a0c10` (background) | On light backgrounds |
| Background | `#0a0c10` or transparent | App icon, favicon |

---

*Midnight Steel theme — designed for vMLX v0.3.x*
*Updated: February 2026*