# Sharp — Complete Design System
> Version 1.0 · Derived from Theme 01: SHARP

---

## Table of Contents

1. [System Overview](#1-system-overview)
2. [CSS Custom Properties — Master Token Sheet](#2-css-custom-properties--master-token-sheet)
3. [Color Palette](#3-color-palette)
4. [Typography System](#4-typography-system)
5. [Spacing System](#5-spacing-system)
6. [Border Radius System](#6-border-radius-system)
7. [Shadow & Elevation System](#7-shadow--elevation-system)
8. [Component Specifications](#8-component-specifications)
9. [Layout & Grid System](#9-layout--grid-system)
10. [Animation & Transition Tokens](#10-animation--transition-tokens)
11. [Z-Index System](#11-z-index-system)
12. [Breakpoints](#12-breakpoints)
13. [Icon System](#13-icon-system)
14. [State Definitions](#14-state-definitions)

---

## 1. System Overview

**Design Language:** Sharp / Brutalist Editorial
**Aesthetic Family:** Zero-radius brutalism, off-white neutrals, ink-black primary, technical grid
**Personality:** Precise, authoritative, raw confidence — communicates directness, mechanical rigour, and uncompromising clarity
**Best Suited For:** Developer tools, CLI-adjacent UIs, technical dashboards, documentation systems, design systems explorers, admin consoles, SaaS productivity tools, code editors

**Core Principles:**
- Zero border-radius on all interactive and structural elements — flatness is the aesthetic
- Off-white background, not pure white — warmth without cream
- Mono font used for labels, metadata, section titles — structure through typography, not decoration
- Black as the single authoritative accent — never diluted into grey
- Hard-edge shadows (offset, no blur) for depth — the brutalist box-shadow is the elevation system
- Negative space and grid lines carry visual hierarchy

---

## 2. CSS Custom Properties — Master Token Sheet

Paste this block into the `:root` of every project using this system.

```css
:root {

  /* ─── COLOR: BACKGROUNDS ─────────────────────────────────────── */
  --color-bg-base:          #f5f5f0;   /* Page / app background */
  --color-bg-surface:       #ffffff;   /* Cards, panels, raised containers */
  --color-bg-elevated:      #ffffff;   /* Inputs, modals, popups */
  --color-bg-sunken:        #f0f0eb;   /* Inset areas, code blocks, aside */
  --color-bg-secondary:     #f0f0eb;   /* Secondary interactive surfaces */
  --color-bg-overlay:       rgba(245, 245, 240, 0.90); /* Modal backdrop */

  /* ─── COLOR: PRIMARY ─────────────────────────────────────────── */
  --color-primary:          #1a1a1a;   /* Core accent — buttons, borders, headings */
  --color-primary-fg:       #ffffff;   /* Text on primary background */
  --color-primary-hover:    #333333;   /* Hover on primary bg */
  --color-primary-active:   #000000;   /* Active/pressed primary */

  /* ─── COLOR: TEXT ────────────────────────────────────────────── */
  --color-text-primary:     #1a1a1a;   /* Headings, high-emphasis content */
  --color-text-secondary:   #3a3a3a;   /* Supporting body, secondary content */
  --color-text-tertiary:    #4a4a4a;   /* Captions, hints, reduced prominence */
  --color-text-muted:       #6b6b6b;   /* Timestamps, counters, placeholders */
  --color-text-disabled:    #9a9a9a;   /* Disabled state text */
  --color-text-inverse:     #ffffff;   /* Light text on dark backgrounds */

  /* ─── COLOR: BORDERS ─────────────────────────────────────────── */
  --color-border-light:     #e8e8e3;   /* Hairline separator, section dividers */
  --color-border-medium:    #d4d4d0;   /* Default input, card edges */
  --color-border-strong:    #1a1a1a;   /* Active/focused state, button borders */

  /* ─── COLOR: INTERACTIVE ─────────────────────────────────────── */
  --color-btn-primary-bg:   #1a1a1a;
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-hover:#333333;
  --color-btn-secondary-bg: #f0f0eb;
  --color-btn-secondary-text:#1a1a1a;
  --color-btn-secondary-hover:#e8e8e3;
  --color-btn-outline-bg:   transparent;
  --color-btn-outline-text: #1a1a1a;
  --color-btn-outline-hover-bg: #1a1a1a;
  --color-btn-outline-hover-text: #ffffff;

  /* ─── COLOR: SEMANTIC ────────────────────────────────────────── */
  --color-success:          #1e6b4a;
  --color-success-bg:       #d4edda;
  --color-warning:          #b8600a;
  --color-warning-bg:       #fff3cd;
  --color-error:            #c0392b;
  --color-error-bg:         #f8d7da;
  --color-info:             #1a3a6b;
  --color-info-bg:          #d1ecf1;

  /* ─── TYPOGRAPHY: FONT FAMILIES ─────────────────────────────── */
  --font-display:  'DM Sans', system-ui, sans-serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
  --font-mono:     'Space Mono', 'Cascadia Code', 'Consolas', monospace;

  /* ─── TYPOGRAPHY: SCALE ──────────────────────────────────────── */
  --text-2xs:   0.625rem;   /* 10px */
  --text-xs:    0.6875rem;  /* 11px */
  --text-sm:    0.75rem;    /* 12px */
  --text-base:  0.8125rem;  /* 13px */
  --text-md:    0.875rem;   /* 14px */
  --text-lg:    1rem;       /* 16px */
  --text-xl:    1.125rem;   /* 18px */
  --text-2xl:   1.25rem;    /* 20px */
  --text-3xl:   1.5rem;     /* 24px */
  --text-4xl:   2rem;       /* 32px */
  --text-5xl:   2.25rem;    /* 36px */
  --text-6xl:   3rem;       /* 48px */
  --text-7xl:   3.5rem;     /* 56px — Display */

  /* ─── TYPOGRAPHY: WEIGHTS ────────────────────────────────────── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ─── TYPOGRAPHY: LINE HEIGHTS ───────────────────────────────── */
  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-base:    1.5;
  --leading-relaxed: 1.6;
  --leading-loose:   1.8;

  /* ─── TYPOGRAPHY: LETTER SPACING ─────────────────────────────── */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.15em;

  /* ─── SPACING SCALE ──────────────────────────────────────────── */
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:   10px;
  --space-6:   12px;
  --space-7:   14px;
  --space-8:   16px;
  --space-9:   18px;
  --space-10:  20px;
  --space-12:  24px;
  --space-14:  28px;
  --space-16:  32px;
  --space-20:  40px;
  --space-24:  48px;
  --space-32:  64px;
  --space-48:  96px;

  /* ─── BORDER RADIUS ──────────────────────────────────────────── */
  --radius-none:   0px;    /* ALL interactive and structural elements */
  --radius-full:   9999px; /* Only for status dot indicators */

  /* ─── SHADOWS ────────────────────────────────────────────────── */
  --shadow-none:    none;
  --shadow-xs:      1px 1px 0 #d4d4d0;
  --shadow-sm:      2px 2px 0 #1a1a1a;
  --shadow-md:      4px 4px 0 #1a1a1a;
  --shadow-lg:      8px 8px 0 #1a1a1a;
  --shadow-modal:   8px 8px 0 #1a1a1a;
  --shadow-dropdown:4px 4px 0 #1a1a1a;

  /* ─── ANIMATION ──────────────────────────────────────────────── */
  --ease-standard:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);

  --duration-instant:  50ms;
  --duration-fast:    100ms;
  --duration-base:    150ms;
  --duration-slow:    300ms;

  /* ─── LAYOUT ─────────────────────────────────────────────────── */
  --container-xs:    380px;
  --container-sm:    480px;
  --container-md:    640px;
  --container-lg:    800px;
  --container-xl:   1040px;
  --container-2xl:  1280px;

  /* ─── Z-INDEX STACK ──────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
  --z-top:      999;

}
```

---

## 3. Color Palette

### 3.1 Background Colors

| Token | Hex | RGB | Use |
|-------|-----|-----|-----|
| `--color-bg-base` | `#f5f5f0` | 245, 245, 240 | Page-level background |
| `--color-bg-surface` | `#ffffff` | 255, 255, 255 | Cards, panels, containers |
| `--color-bg-sunken` | `#f0f0eb` | 240, 240, 235 | Code blocks, inset areas, secondary bg |
| `--color-bg-secondary` | `#f0f0eb` | 240, 240, 235 | Secondary buttons, alt surfaces |

### 3.2 Primary Ink Scale

| Token | Hex | Use |
|-------|-----|-----|
| `--color-primary` | `#1a1a1a` | **Core accent** — all buttons, borders, headings |
| `--color-primary-hover` | `#333333` | Hover on primary elements |
| `--color-primary-active` | `#000000` | Active/pressed |
| `--color-text-muted` | `#6b6b6b` | Supporting metadata, captions, placeholders |

### 3.3 Text Colors

| Token | Hex | Use |
|-------|-----|-----|
| `--color-text-primary` | `#1a1a1a` | Headings, high-emphasis, labels |
| `--color-text-secondary` | `#3a3a3a` | Section headings, subheadings |
| `--color-text-tertiary` | `#4a4a4a` | Subheadings, supplementary text |
| `--color-text-muted` | `#6b6b6b` | Captions, meta, counter, disabled labels |
| `--color-text-disabled` | `#9a9a9a` | Non-interactive disabled text |
| `--color-text-inverse` | `#ffffff` | Text on dark primary button |

### 3.4 Border Colors

| Token | Hex | Role |
|-------|-----|------|
| `--color-border-light` | `#e8e8e3` | Subtle section rules |
| `--color-border-medium` | `#d4d4d0` | Default input, card, divider |
| `--color-border-strong` | `#1a1a1a` | Active, focused, button border |

### 3.5 Semantic Colors

| State | Text | Background |
|-------|------|------------|
| Success | `#1e6b4a` | `#d4edda` |
| Warning | `#b8600a` | `#fff3cd` |
| Error | `#c0392b` | `#f8d7da` |
| Info | `#1a3a6b` | `#d1ecf1` |

---

## 4. Typography System

### 4.1 Font Families

**Display / Headings & Body — `'DM Sans'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap')`
- Fallback: `system-ui, sans-serif`
- Weights used: 300 (Light), 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)
- Character: Geometric, neutral — clean authority without personality distraction
- Usage: All headings, all body, all buttons, all navigation, all UI labels

**Mono / Metadata — `'Space Mono'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap')`
- Fallback: `'Cascadia Code', 'Consolas', monospace`
- Weights used: 400 (Regular), 700 (Bold)
- Character: Wide, blocky mechanical — not a data font; an editorial-structure font
- Usage: Section labels, eyebrow text, field labels, badges, code, counters, timestamps

---

### 4.2 Type Scale — Full Specification

#### Display / Title (DM Sans)

| Role | Size Token | Size (rem/px) | Weight | Style | Line Height | Letter Spacing |
|------|-----------|---------------|--------|-------|-------------|----------------|
| Display Hero | `--text-7xl` | 3.5rem / 56px | 700 | normal | 1.0 | -0.04em |
| Page Title | `--text-6xl` | 3rem / 48px | 700 | normal | 1.0 | -0.03em |
| Section Title | `--text-5xl` | 2.25rem / 36px | 700 | normal | 1.1 | -0.02em |
| Card Title | `--text-4xl` | 2rem / 32px | 600 | normal | 1.1 | -0.02em |
| Sub-title | `--text-3xl` | 1.5rem / 24px | 600 | normal | 1.2 | -0.01em |
| Small Title | `--text-2xl` | 1.25rem / 20px | 600 | normal | 1.2 | 0em |

#### Body / UI (DM Sans)

| Role | Size Token | Size (rem/px) | Weight | Line Height |
|------|-----------|---------------|--------|-------------|
| Large Body | `--text-lg` | 1rem / 16px | 400 | 1.6 |
| Base Body | `--text-md` | 0.875rem / 14px | 400 | 1.6 |
| Small Body | `--text-base` | 0.8125rem / 13px | 300 | 1.5 |
| Caption | `--text-sm` | 0.75rem / 12px | 300 | 1.4 |
| Button Large | `--text-lg` | 1rem / 16px | 700 | 1 |
| Button Base | `--text-md` | 0.875rem / 14px | 600 | 1 |
| Button Small | `--text-sm` | 0.75rem / 12px | 600 | 1 |
| Nav Link | `--text-md` | 0.875rem / 14px | 500 | 1 |

#### Mono / Labels (Space Mono)

| Role | Size Token | Size (rem/px) | Weight | Transform | Letter Spacing |
|------|-----------|---------------|--------|-----------|----------------|
| Section Label | `--text-xs` | 0.6875rem / 11px | 400 | uppercase | 0.12em |
| Field Label | `--text-xs` | 0.6875rem / 11px | 400 | uppercase | 0.06em |
| Badge / Chip | `--text-2xs` | 0.625rem / 10px | 700 | uppercase | 0.05em |
| Counter | `--text-2xs` | 0.625rem / 10px | 400 | none | 0.04em |
| Timestamp | `--text-xs` | 0.6875rem / 11px | 400 | none | 0.04em |
| Code Inline | `--text-sm` | 0.75rem / 12px | 400 | none | 0em |

---

### 4.3 Google Fonts Import Block

```css
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
```

---

### 4.4 Heading System (HTML Mapping)

```css
h1 {
  font-family: var(--font-display);
  font-size: var(--text-6xl);       /* 48px */
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);       /* 36px */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);       /* 32px */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
}

h4 {
  font-family: var(--font-body);
  font-size: var(--text-2xl);       /* 20px */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0em;
  color: var(--color-text-primary);
}

h5, h6 {
  font-family: var(--font-body);
  font-size: var(--text-lg);        /* 16px */
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-primary);
}

.section-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);        /* 11px */
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-medium);
  padding-bottom: 8px;
  margin-bottom: 20px;
}

p {
  font-family: var(--font-body);
  font-size: var(--text-md);        /* 14px */
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
```

---

## 5. Spacing System

Based on a 2px base unit. All spacing values are multiples or logical steps.

### 5.1 Base Scale Table

| Token | Value | Pixels | Common Use |
|-------|-------|--------|------------|
| `--space-1` | 2px | 2 | Micro gaps, icon-to-text |
| `--space-2` | 4px | 4 | Badge padding V |
| `--space-3` | 6px | 6 | Compact inline gaps |
| `--space-4` | 8px | 8 | Badge padding H, small label gap |
| `--space-5` | 10px | 10 | Button vertical padding (small) |
| `--space-6` | 12px | 12 | Label-to-input gap |
| `--space-7` | 14px | 14 | Input padding H |
| `--space-8` | 16px | 16 | Standard section padding |
| `--space-10` | 20px | 20 | Button padding H (base), card inner gap |
| `--space-12` | 24px | 24 | Card padding, section gaps |
| `--space-16` | 32px | 32 | Modal padding, large section breaks |
| `--space-20` | 40px | 40 | Page-level section spacing |
| `--space-24` | 48px | 48 | Major content sections |

---

### 5.2 Component Spacing Specifications

#### Modal
```
padding-all:         32px  (--space-16)
eyebrow-to-title:     8px  (--space-4)
title-bottom:        16px  (--space-8)
hr-rule-margin-v:    12px  top + bottom
description-bottom:  20px
label-bottom:         6px
textarea-bottom:      5px
char-counter-bottom: 18px
button-gap:          12px  (--space-6)
```

#### Card
```
padding-all:          24px  (--space-12)
inner-section-gap:    20px  (--space-10)
header-padding-v:     16px  (--space-8)
border-radius:         0px  (--radius-none)
```

#### Button
```
height-large:         44px
height-base:          40px
height-small:         32px

padding-v-large:      12px
padding-v-base:       10px
padding-v-small:       7px

padding-h-large:      28px
padding-h-base:       20px
padding-h-small:      14px

border-radius:         0px  (--radius-none)
gap-icon-text:         8px
```

#### Input / Textarea
```
padding-v:            10px
padding-h:            14px
border-radius:         0px  (--radius-none)
border-width:         1.5px
min-height-textarea:  72px
```

#### Table
```
cell-padding-v:       12px
cell-padding-h:       16px
header-padding-v:     12px
```

#### Badge
```
padding-v:             3px
padding-h:             8px
border-radius:         0px  (--radius-none)
font-size:            11px  (--text-xs)
letter-spacing:       0.05em
```

---

## 6. Border Radius System

The Sharp system is founded on a single rule: **zero border-radius on everything interactive and structural.**

| Token | Value | Where Used |
|-------|-------|-----------| 
| `--radius-none` | 0px | **EVERYTHING** — all inputs, all buttons, all badges, all cards, all modals, all tables |
| `--radius-full` | 9999px | Status dot indicators only — never buttons or badges |

**Radius Budget Rules:**
- Default to 0px for every element without exception
- `border-radius: 9999px` is reserved exclusively for circular status dot indicators (6px–8px circles)
- There is no 2px, 4px, 6px, or 8px radius in this system — they do not exist
- If you find yourself reaching for a rounded corner, reconsider the component design instead

---

## 7. Shadow & Elevation System

### 7.1 Elevation Levels

The Sharp system uses offset hard-edge shadows — no blur, no spread. These are the defining detail of the brutalist aesthetic.

| Level | Token | Value | Use |
|-------|-------|-------|-----|
| 0 — Flat | `--shadow-none` | none | Base surfaces, table rows |
| 1 — Subtle | `--shadow-xs` | `1px 1px 0 #d4d4d0` | Inactive state, light separation |
| 2 — Elevated | `--shadow-sm` | `2px 2px 0 #1a1a1a` | Focused inputs, hover cards |
| 3 — Float | `--shadow-md` | `4px 4px 0 #1a1a1a` | Dropdowns, select panels |
| 4 — Modal | `--shadow-modal` | `8px 8px 0 #1a1a1a` | Modals, dialogs |

### 7.2 The Brutalist Shadow Signature

All floating components (dropdowns, modals) use the offset hard-edge shadow. The offset is always bottom-right:

```css
box-shadow: 8px 8px 0 var(--color-primary); /* Modal */
box-shadow: 4px 4px 0 var(--color-primary); /* Dropdown */
```

### 7.3 Shadow Color Logic

All shadows use the pure primary ink color `#1a1a1a` with no transparency. This creates the hard-edge print effect. For lighter separators only, use `#d4d4d0` (border-medium) with 1px offset.

---

## 8. Component Specifications

### 8.1 Buttons

#### Primary Button
```css
.btn-primary {
  font-family: var(--font-body);
  font-size: var(--text-md);          /* 14px */
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-btn-primary-text); /* #ffffff */

  background: var(--color-btn-primary-bg); /* #1a1a1a */
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-none);       /* 0px */

  padding: 10px 20px;
  height: 40px;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out);
}
.btn-primary:hover  { background: var(--color-primary-hover); }
.btn-primary:active { transform: scale(0.98); transition: transform 50ms; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
```

#### Secondary Button
```css
.btn-secondary {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-btn-secondary-text);    /* #1a1a1a */
  background: var(--color-btn-secondary-bg); /* #f0f0eb */
  border: 1.5px solid var(--color-border-medium);
  border-radius: var(--radius-none);
  padding: 10px 20px;
  height: 40px;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out);
}
.btn-secondary:hover { background: var(--color-btn-secondary-hover); }
```

#### Outline Button
```css
.btn-outline {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-primary);
  background: transparent;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-none);
  padding: 10px 20px;
  height: 40px;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-primary-fg);
}
```

---

### 8.2 Form Inputs

#### Text Input
```css
.input {
  font-family: var(--font-body);
  font-size: var(--text-md);         /* 14px */
  font-weight: 400;
  color: var(--color-text-primary);

  background: var(--color-bg-surface);
  border: 1.5px solid var(--color-border-medium);
  border-radius: var(--radius-none); /* 0px */

  padding: 10px 14px;
  width: 100%;
  height: 42px;
  outline: none;
  transition: border-color var(--duration-base) var(--ease-out);
}
.input::placeholder { color: var(--color-text-muted); }
.input:focus        { border-color: var(--color-border-strong); }
.input:hover:not(:focus) { border-color: #b0b0aa; }
.input:disabled     { opacity: 0.5; cursor: not-allowed; background: var(--color-bg-sunken); }
```

#### Textarea
```css
.textarea {
  /* Same as .input */
  height: auto;
  min-height: 72px;
  resize: vertical;
  line-height: var(--leading-relaxed);
}
```

---

### 8.3 Labels

```css
.field-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);     /* 11px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
  display: block;
}

.section-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-medium);
  padding-bottom: 8px;
  margin-bottom: 20px;
}
```

---

### 8.4 Card

```css
.card {
  background: var(--color-bg-surface); /* #ffffff */
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-none);   /* 0px */
  padding: 24px;
  position: relative;
}

/* Brutalist accent: thick top border instead of gradient line */
.card-featured {
  border-top: 3px solid var(--color-primary);
}
```

---

### 8.5 Modal

```css
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(245, 245, 240, 0.90);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: var(--z-modal);
}

.modal {
  background: var(--color-bg-surface);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-none);    /* 0px */
  padding: 32px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-modal);      /* 8px 8px 0 #1a1a1a */
  position: relative;

  transform: translateY(12px);
  opacity: 0;
  transition:
    transform var(--duration-slow) var(--ease-standard),
    opacity   var(--duration-base) var(--ease-out);
}
.modal.open {
  transform: translateY(0);
  opacity: 1;
}
```

---

### 8.6 Badge / Tag

```css
.badge {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);   /* 10px — or 11px for readability */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-none);  /* 0px */
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.badge-success  { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning  { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-error    { background: var(--color-error-bg); color: var(--color-error); }
.badge-info     { background: var(--color-info-bg); color: var(--color-info); }
.badge-neutral  { background: var(--color-bg-secondary); color: var(--color-text-muted); }
```

---

### 8.7 Divider / Rule

```css
hr, .rule {
  border: none;
  border-top: 1px solid var(--color-border-medium);
  margin: 12px 0;
}

/* Thick accent rule — used under major headings */
.rule-heavy {
  border-top: 3px solid var(--color-primary);
}
```

---

### 8.8 Dropdown

```css
.dropdown-menu {
  background: var(--color-bg-surface);
  border: 1.5px solid var(--color-primary);
  border-top: none;
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-dropdown);  /* 4px 4px 0 #1a1a1a */
}

.dropdown-item {
  padding: 10px 14px;
  font-size: var(--text-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.dropdown-item:hover { background: var(--color-bg-secondary); }
```

---

### 8.9 Table

```css
.table-container { overflow: hidden; }
.table           { width: 100%; border-collapse: collapse; font-size: var(--text-md); }

.table thead {
  background: var(--color-primary);
}
.table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary-fg);  /* white on black */
  padding: 12px 16px;
  text-align: left;
}
.table td {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text-primary);
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-medium);
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--color-bg-secondary); }
```

---

## 9. Layout & Grid System

### 9.1 Container Widths

| Token | Value | Use |
|-------|-------|-----|
| `--container-xs` | 380px | Compact modals, alerts |
| `--container-sm` | 480px | Standard modals, narrow forms |
| `--container-md` | 640px | Content panels, medium dialogs |
| `--container-lg` | 800px | Page sections, wide panels |
| `--container-xl` | 1040px | Full dashboard content |
| `--container-2xl` | 1280px | Wide page layout |

### 9.2 Column Grid

```css
.page-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-8);       /* 16px */
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: 0 var(--space-8);
}
```

### 9.3 Standard Layouts

```css
/* Content + Sidebar */
.layout-sidebar {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-16);   /* 32px */
}

/* Two Equal Columns */
.layout-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);   /* 24px */
}

/* Three Columns */
.layout-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
}

/* Stack (Form / Modal) */
.layout-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
```

---

## 10. Animation & Transition Tokens

### 10.1 Easing Curves

| Token | Value | When to Use |
|-------|-------|-------------|
| `--ease-standard` | `cubic-bezier(0.16, 1, 0.3, 1)` | Modal entry, panel open |
| `--ease-in` | `cubic-bezier(0.4, 0, 1, 1)` | Exit transitions |
| `--ease-out` | `cubic-bezier(0, 0, 0.2, 1)` | State changes |

### 10.2 Duration Scale

| Token | Value | Use |
|-------|-------|-----|
| `--duration-instant` | 50ms | Color hover, press states |
| `--duration-fast` | 100ms | Border, opacity toggles |
| `--duration-base` | 150ms | Standard interactive state changes |
| `--duration-slow` | 300ms | Modal entry, panel slides |

### 10.3 Standard Transitions

```css
/* Interactive hover */
.interactive {
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

/* Modal entry */
.modal-enter {
  transform: translateY(12px); opacity: 0;
  transition: transform var(--duration-slow) var(--ease-standard),
              opacity var(--duration-base) var(--ease-out);
}

/* Button press */
button:active {
  transform: scale(0.98);
  transition: transform 50ms;
}
```

---

## 11. Z-Index System

| Token | Value | Layer |
|-------|-------|-------|
| `--z-below` | -1 | Background decoration |
| `--z-base` | 0 | Normal document flow |
| `--z-raised` | 10 | Slightly elevated cards |
| `--z-dropdown` | 100 | Dropdown menus |
| `--z-sticky` | 200 | Sticky nav, fixed headers |
| `--z-overlay` | 300 | Backdrop overlays |
| `--z-modal` | 400 | Modals and dialogs |
| `--z-toast` | 500 | Toast notifications |
| `--z-tooltip` | 600 | Tooltips |
| `--z-top` | 999 | Emergency override only |

---

## 12. Breakpoints

```css
--bp-sm:  480px;   /* Large mobile */
--bp-md:  768px;   /* Tablet */
--bp-lg:  1024px;  /* Laptop */
--bp-xl:  1280px;  /* Desktop */
--bp-2xl: 1440px;  /* Wide desktop */

@media (min-width: 480px)  { /* sm+ */ }
@media (min-width: 768px)  { /* md+ */ }
@media (min-width: 1024px) { /* lg+ */ }
@media (min-width: 1280px) { /* xl+ */ }
```

### Responsive Padding Scale

| Breakpoint | Page horizontal padding |
|------------|------------------------|
| < 480px | 16px |
| 480px–767px | 20px |
| 768px–1023px | 24px |
| 1024px–1279px | 40px |
| 1280px+ | 48px |

---

## 13. Icon System

- **Size scale:** 14px, 16px, 18px, 20px, 24px
- **Default size:** 16px for inline, 20px for standalone
- **Stroke weight:** 1.5px (stroke-based, never filled)
- **Color:** Inherit from parent text color
- **Library recommendation:** Lucide Icons — precise stroke geometry
- **Gap to text:** `--space-4` (8px)

```css
.icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  flex-shrink: 0;
  vertical-align: middle;
}
```

---

## 14. State Definitions

### 14.1 Input States

| State | Border | Background |
|-------|--------|------------|
| Default | `#d4d4d0` (1.5px) | `#ffffff` |
| Hover | `#b0b0aa` | `#ffffff` |
| Focus | `#1a1a1a` (1.5px) | `#ffffff` |
| Disabled | `#e8e8e3` | `#f0f0eb` |
| Error | `#c0392b` | `#f8d7da` |
| Success | `#1e6b4a` | `#d4edda` |

### 14.2 Button States

| State | Primary Bg | Primary Text | Secondary Bg |
|-------|-----------|--------------|--------------|
| Default | `#1a1a1a` | `#ffffff` | `#f0f0eb` |
| Hover | `#333333` | `#ffffff` | `#e8e8e3` |
| Active/Press | scale(0.98) | — | scale(0.98) |
| Disabled | opacity 0.4 | — | opacity 0.4 |

### 14.3 Link States

```css
a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--duration-fast) var(--ease-out);
}
a:hover { opacity: 0.7; }
```

---

*End of Design System — Sharp v1.0*