# Neumorph — Complete Design System
> Version 1.0 · Derived from the Neumorph Theme (Theme 10)

---

## 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:** Neumorph
**Aesthetic Family:** Soft UI / Neumorphism — a single-color canvas where every element is molded from the same material via light and shadow, never borders or flat fills
**Personality:** Tactile, soft, calm, almost physical — communicates a "pressable" world of extruded and recessed surfaces
**Best Suited For:** Wellness and meditation apps, music players, smart-home control panels, settings screens, any product wanting a soft, single-hue, tactile feel

**Core Principles:**
- Every element shares the exact same background color as the page (`#e0e5ec`). There is no card-vs-page color contrast — depth comes entirely from dual-directional shadows.
- The signature technique is the **dual shadow pair**: a dark shadow to the bottom-right (`#b8c0cc`) and a light shadow to the top-left (`#ffffff`), simulating a single light source from the upper-left.
- Elements are either **raised** (extruded, "popping out" of the surface) or **inset** (sunken "into" the surface) — never flat. Every component must choose one of these two states.
- There are zero borders anywhere in the system. Definition comes exclusively from shadow, never from a stroke.
- Blue (`#5b8def`) is the single accent, used sparingly — since the base material has almost no inherent contrast, accent color is reserved for meaningfully interactive or "on" states only.
- Pressing a raised element flips its shadow to inset — literally, the element visually depresses into the surface, then springs back on release.

---

## 2. CSS Custom Properties — Master Token Sheet

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

```css
:root {

  /* ─── COLOR: BASE MATERIAL ───────────────────────────────────── */
  --color-bg-base:        #e0e5ec;   /* THE single background — page, cards, buttons, inputs all share this */
  --color-text-primary:   #3c4759;   /* Headings, primary values */

  /* ─── COLOR: SHADOW PAIR (the entire depth system) ───────────── */
  --shadow-dark:           #b8c0cc;  /* Simulated shadow, bottom-right */
  --shadow-light:          #ffffff;  /* Simulated highlight, top-left */

  /* ─── COLOR: BLUE ACCENT ─────────────────────────────────────── */
  --color-blue-100:        rgba(91, 141, 239, 0.3);  /* Focus ring tint */
  --color-blue-400:        #5b8def;   /* Primary accent */
  --color-blue-text:       #3f63b3;   /* Primary button / link text (darker, for contrast on light bg) */
  --color-red-text:        #c0392b;   /* Destructive text */

  /* ─── COLOR: TEXT ────────────────────────────────────────────── */
  --color-text-heading:    #3c4759;   /* h1, h2 */
  --color-text-body:       #3c4759;   /* Primary paragraph text */
  --color-text-secondary:  #4a5568;   /* Section headings (slightly lighter) */
  --color-text-muted:      #5b6478;   /* Section titles, field labels */
  --color-text-faint:      #7a8499;   /* Secondary/caption text */
  --color-text-disabled:   #a3acbd;   /* Disabled state */

  /* ─── COLOR: SEMANTIC (muted, low-saturation to match soft palette) ── */
  --color-success:         #2f9e63;
  --color-success-bg:      #dce7e0;
  --color-warning:         #c78a1f;
  --color-warning-bg:      #ecdfc4;
  --color-error:           #c0392b;
  --color-error-bg:        #e8d4d1;
  --color-info:            #3f63b3;
  --color-info-bg:         #d6dff0;

  /* ─── TYPOGRAPHY: FONT FAMILIES ─────────────────────────────── */
  --font-display:  'Quicksand', 'Segoe UI', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;

  /* ─── TYPOGRAPHY: SCALE ──────────────────────────────────────── */
  --text-2xs:   0.65625rem; /* 10.5px */
  --text-xs:    0.71875rem; /* 11.5px */
  --text-sm:    0.75rem;    /* 12px */
  --text-base:  0.8125rem;  /* 13px */
  --text-md:    0.84375rem; /* 13.5px */
  --text-lg:    0.9375rem;  /* 15px */
  --text-xl:    1rem;       /* 16px */
  --text-2xl:   1.4375rem;  /* 23px */
  --text-3xl:   2.375rem;   /* 38px */
  --text-4xl:   2.75rem;    /* 44px, clamp ceiling */

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

  /* ─── TYPOGRAPHY: LINE HEIGHTS ───────────────────────────────── */
  --leading-tight:   1.1;
  --leading-base:    1.5;
  --leading-relaxed: 1.7;

  /* ─── TYPOGRAPHY: LETTER SPACING ─────────────────────────────── */
  --tracking-normal: 0em;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.08em;

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

  /* ─── BORDER RADIUS ──────────────────────────────────────────── */
  --radius-sm:     10px;   /* Dropdown items, table cell rounding */
  --radius-md:     12px;   /* Table cells */
  --radius-lg:     14px;   /* Buttons, inputs, inset surfaces */
  --radius-xl:     16px;   /* Dropdown panel */
  --radius-2xl:    18px;   /* Cards / raised surfaces */
  --radius-full:   9999px; /* Badges, switch track, radio */

  /* ─── SHADOWS: THE DUAL-DIRECTION SYSTEM ────────────────────── */
  --shadow-raised-lg:  9px 9px 18px var(--shadow-dark), -9px -9px 18px var(--shadow-light);
  --shadow-raised-md:  6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
  --shadow-raised-sm:  4px 4px 8px  var(--shadow-dark), -4px -4px 8px  var(--shadow-light);
  --shadow-inset-lg:   inset 5px 5px 10px var(--shadow-dark), inset -5px -5px 10px var(--shadow-light);
  --shadow-inset-sm:   inset 3px 3px 6px  var(--shadow-dark), inset -3px -3px 6px  var(--shadow-light);
  --shadow-focus-ring: 0 0 0 3px var(--color-blue-100);

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

  --duration-fast:    100ms;
  --duration-base:    150ms;
  --duration-slow:    250ms;

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

  /* ─── Z-INDEX STACK ──────────────────────────────────────────── */
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 50;
  --z-modal:    1000;
  --z-toast:    1100;

}
```

---

## 3. Color Palette

### 3.1 The Single Base Material

| Token | Hex | Use |
|-------|-----|-----|
| `--color-bg-base` | `#e0e5ec` | Page, cards, buttons, inputs, table rows — literally everything |

This is the system's defining constraint: there is exactly **one** background color for the entire interface. All visual separation is achieved through the shadow pair below, never through a second background tone.

### 3.2 The Shadow Pair

| Token | Hex | Role |
|-------|-----|------|
| `--shadow-dark` | `#b8c0cc` | Simulated shadow — always bottom-right |
| `--shadow-light` | `#ffffff` | Simulated highlight — always top-left |

### 3.3 Blue Accent

| Token | Value | Use |
|-------|-------|-----|
| `--color-blue-400` | `#5b8def` | Toggle "on" fill, accent dots, focus ring source |
| `--color-blue-text` | `#3f63b3` | Primary button text, links, active states |
| `--color-blue-100` | `rgba(91,141,239,0.3)` | Focus ring |

### 3.4 Text Colors

| Token | Hex | Use |
|-------|-----|-----|
| `--color-text-heading` | `#3c4759` | h1, primary values |
| `--color-text-secondary` | `#4a5568` | Section headings |
| `--color-text-muted` | `#5b6478` | Section titles, field labels |
| `--color-text-faint` | `#7a8499` | Secondary/caption text |
| `--color-text-disabled` | `#a3acbd` | Disabled state |

### 3.5 Semantic Colors (Muted Palette)

| State | Text | Background |
|-------|------|------------|
| Success | `#2f9e63` | `#dce7e0` |
| Warning | `#c78a1f` | `#ecdfc4` |
| Error | `#c0392b` | `#e8d4d1` |
| Info | `#3f63b3` | `#d6dff0` |

Semantic colors in Neumorph are deliberately desaturated relative to typical systems — bright red/green/amber would break the soft, single-material illusion. Every semantic badge is rendered as an **inset** surface (see 8.6) tinted faintly toward its color, not a bold solid fill.

---

## 4. Typography System

### 4.1 Font Families

**Display — `'Quicksand'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap')`
- Weights used: 600, 700
- Character: Rounded terminals, soft geometric — visually echoes the rounded, soft-edged shadows of the UI itself
- Usage: Headings, section headings, subheadings, button labels — anything that needs a touch of warmth

**Body / UI — `'Inter'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap')`
- Weights used: 400, 500, 600
- Character: Neutral, highly legible
- Usage: Body copy, input text, table cells, captions

**Note the inversion from Glass:** in Neumorph, the rounded display font (Quicksand) extends further down the hierarchy than usual — it is also used for **buttons and badges**, not just headings, because its soft rounded letterforms visually match the soft rounded shadows better than a neutral grotesque would.

---

### 4.2 Type Scale — Full Specification

#### Display (Quicksand)

| Role | Size (px) | Weight | Color |
|------|-----------|--------|-------|
| Display Heading | 38px (clamp 28–44px) | 700 | `#3c4759` |
| Section Heading | 23px | 600 | `#4a5568` |
| Subheading | 16px | 600 | `#5b8def` |
| Button label | 14px | 600 | context-dependent |
| Badge | 11px | 700 | context-dependent |
| Section title | 12px | 700 (tracking 0.08em, uppercase) | `#5b6478` |

#### Body / UI (Inter)

| Role | Size (px) | Weight | Color |
|------|-----------|--------|-------|
| Primary text | 15px | 400 | `#3c4759` |
| Secondary text | 13px | 400 | `#7a8499` |
| Input text | 14px | 400 | `#3c4759` |
| Field label | 11.5px | 700 | `#5b6478` |
| Table header | 10.5px | 700 (tracking 0.06em, uppercase) | `#5b6478` |
| Table cell | 13.5px | 400 | `#3c4759` |

---

### 4.3 Google Fonts Import Block

```css
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
```

---

### 4.4 Heading System (HTML Mapping)

```css
h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: var(--color-text-heading);
}

h2 {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.subheading {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-blue-400);
}

.section-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 18px;
}

p {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--color-text-heading);
}

label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 7px;
  display: block;
}
```

---

## 5. Spacing System

### 5.1 Base Scale Table

| Token | Value | Common Use |
|-------|-------|------------|
| `--space-1` | 6px | Table cell rounding gap |
| `--space-3` | 8px | Badge gap |
| `--space-4` | 10px | Dropdown item padding-v |
| `--space-5` | 12px | Input/button padding-h base |
| `--space-6` | 14px | Table cell padding-v |
| `--space-7` | 16px | Input/button padding-h |
| `--space-8` | 18px | Card standard padding |
| `--space-9` | 20px | Card gap in grid |
| `--space-10` | 24px | Button padding-h |
| `--space-12` | 32px | Header padding, page section gaps |

### 5.2 Component Spacing Specifications

#### Card
```
Header card padding: 32px 36px
Standard card padding: 28px 32px
Section title margin-bottom: 18px
```

#### Button
```
Padding: 12px 24px
Border-radius: 14px
```

#### Input
```
Padding: 12px 16px
Border-radius: 14px
```

#### Badge
```
Padding: 5px 13px
Font size: 11px
Border-radius: 9999px
```

#### Table
```
Row spacing (border-spacing): 0 8px  — rows are visually separate inset "pills", not divided by rules
Cell padding: 14px 16px
```

---

## 6. Border Radius System

Neumorph uses **generous, uniform radii** — never sharp, never fully square — because hard corners would break the illusion of a softly molded material.

### 6.1 Radius Scale

| Token | Value | Use |
|-------|-------|-----|
| `--radius-sm` | 10px | Dropdown items, table cell inner rounding |
| `--radius-md` | 12px | Table cell caps (first/last child) |
| `--radius-lg` | 14px | Buttons, inputs, inset wells |
| `--radius-xl` | 16px | Dropdown panel |
| `--radius-2xl` | 18px | Cards, raised surfaces |
| `--radius-full` | 9999px | Badges, switch track, radio |

### 6.2 Quick Reference Table

| Element | Radius |
|---------|--------|
| Card / raised surface | 18px |
| Button (all variants) | 14px |
| Text input / textarea | 14px |
| Dropdown panel | 16px |
| Dropdown item | 10px |
| Badge | 9999px |
| Checkbox | 8px |
| Radio | 9999px |
| Switch track | 9999px |
| Table row (first/last cell) | 12px |
| Table row (middle cells) | 0px |

---

## 7. Shadow & Elevation System

### 7.1 The Dual-Shadow Rule — Core of the Entire System

Every raised element uses **two shadows simultaneously**: a dark one offset toward the bottom-right, and a light one offset toward the top-left, both using the same blur radius and offset magnitude:

```css
box-shadow: 9px 9px 18px #b8c0cc, -9px -9px 18px #ffffff;
```

Every inset (sunken) element inverts this same pair using the `inset` keyword:

```css
box-shadow: inset 5px 5px 10px #b8c0cc, inset -5px -5px 10px #ffffff;
```

**There must always be exactly two shadows, on opposite corners, using the same base color pair.** A single shadow, or one from the "wrong" direction, breaks the illusion immediately.

### 7.2 Elevation Scale

| Size | Raised | Inset |
|------|--------|-------|
| Large (cards) | `9px 9px 18px / -9px -9px 18px` | `5px 5px 10px / -5px -5px 10px` |
| Medium (buttons) | `6px 6px 12px / -6px -6px 12px` | `4px 4px 8px / -4px -4px 8px` |
| Small (badges, small controls) | `4px 4px 8px / -4px -4px 8px` | `3px 3px 6px / -3px -3px 6px` |

### 7.3 Raised vs. Inset — The Binary Choice

| Element | State |
|---------|-------|
| Card | Raised |
| Button (default) | Raised |
| Button (pressed/active) | Inset |
| Input | Inset (always — inputs read as "wells" you type into) |
| Badge | Inset |
| Dropdown trigger | Inset (matches input) |
| Dropdown panel | Raised |
| Table row | Inset |
| Toggle track (off) | Raised, subdued |
| Toggle track (on) | Filled blue, raised |

**Rule:** there is no third state. Every surface is either raised or inset — never flat, never bordered.

---

## 8. Component Specifications

### 8.1 Buttons

#### Base Button
```css
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  border-radius: 14px;
  padding: 12px 24px;
  cursor: pointer;
  border: none;
  background: var(--color-bg-base);
  color: var(--color-text-heading);
  box-shadow: var(--shadow-raised-md);
  transition: all var(--duration-fast) var(--ease-out);
}
.btn:active {
  box-shadow: var(--shadow-inset-sm);
}
```

#### Primary / Destructive (color via text only)
```css
.btn-primary { color: var(--color-blue-text); }
.btn-destructive { color: var(--color-red-text); }
```

Neumorph's primary and destructive buttons do **not** change background or shadow — only the text color shifts. The raised shadow shell stays identical across all filled-button variants; color-coding lives entirely in the label.

#### Outline / Dashed
```css
.btn-outline {
  background: transparent;
  box-shadow: none;
  border: 1.5px solid var(--shadow-dark);
}
.btn-dashed {
  background: transparent;
  box-shadow: none;
  border: 1.5px dashed #97a2b8;
}
.btn-filled-dashed {
  box-shadow: var(--shadow-raised-md);
  border: 1.5px dashed var(--color-blue-400);
  color: var(--color-blue-text);
}
```

---

### 8.2 Form Inputs

```css
.input {
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--color-bg-base);
  border: none;
  border-radius: 14px;
  padding: 12px 16px;
  width: 100%;
  outline: none;
  color: var(--color-text-heading);
  box-shadow: var(--shadow-inset-lg);
}
.input:focus {
  box-shadow: var(--shadow-inset-lg), var(--shadow-focus-ring);
}
```

Inputs are **always inset** — never raised. This is one of the system's strongest signals: a well you type into, versus a button you press.

---

### 8.3 Labels

```css
.field-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 7px;
  display: block;
}
```

---

### 8.4 Card / Surface

```css
.nm-raised {
  background: var(--color-bg-base);
  border-radius: 18px;
  box-shadow: var(--shadow-raised-lg);
}
.nm-inset {
  background: var(--color-bg-base);
  border-radius: 14px;
  box-shadow: var(--shadow-inset-lg);
}
```

`.nm-raised` is used for cards, header panels, dropdown shells. `.nm-inset` is used for wells: inputs, active table rows, pressed states.

---

### 8.5 Badge / Status Chip

```css
.badge {
  border-radius: 9999px;
  padding: 5px 13px;
  font-size: 11px;
  font-weight: 700;
  box-shadow: var(--shadow-inset-sm);
}
.badge-success { color: var(--color-success); }
.badge-warning { color: var(--color-warning); }
.badge-error   { color: var(--color-error); }
.badge-info    { color: var(--color-info); }
```

Badges are always **inset** pills — the color lives in the text only, the shell shadow never changes per-variant. This mirrors the button color rule (8.1) and is a core consistency principle of the system.

---

### 8.6 Checkbox, Radio & Switch

```css
.check-box {
  width: 20px; height: 20px;
  border-radius: 8px;
  background: var(--color-bg-base);
  box-shadow: var(--shadow-inset-sm);
}
.custom-check:checked + .check-box {
  box-shadow: var(--shadow-inset-sm);
  color: var(--color-blue-400); /* checkmark drawn in accent color */
}

.radio-box {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-bg-base);
  box-shadow: var(--shadow-inset-sm);
}

.switch-track {
  width: 44px; height: 26px;
  border-radius: 9999px;
  background: var(--color-bg-base);
  box-shadow: var(--shadow-inset-sm);
  position: relative;
}
.switch-track.on { background: var(--color-blue-400); box-shadow: var(--shadow-raised-sm); }
.switch-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-bg-base);
  box-shadow: var(--shadow-raised-sm);
  position: absolute; top: 3px; left: 3px;
  transition: transform var(--duration-base) var(--ease-out);
}
.switch-track.on .switch-thumb { transform: translateX(18px); }
```

Checkboxes and radios are inset wells (unchecked and checked alike) — only an accent-colored check glyph or dot appears to signal the "on" state; the shell shadow does not change. The toggle track is the *one* control that flips from inset (off) to raised+filled (on).

---

### 8.7 Table

```css
table { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-size: 13.5px; }
th {
  text-align: left;
  padding: 0 16px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
td {
  padding: 14px 16px;
  background: var(--color-bg-base);
  box-shadow: var(--shadow-inset-sm);
}
td:first-child { border-radius: 12px 0 0 12px; }
td:last-child  { border-radius: 0 12px 12px 0; }
```

**Signature detail:** rows use `border-spacing: 0 8px` (not `border-collapse`) so each row renders as its own separate inset pill, floating with an 8px gap from its neighbors — reinforcing the "everything is molded, nothing is a flat line" rule even in tabular data.

---

### 8.8 Dropdown Panel

```css
.dropdown-menu {
  background: var(--color-bg-base);
  border-radius: 16px;
  box-shadow: var(--shadow-raised-lg);
  margin-top: 10px;
  padding: 8px;
}
.dropdown-item {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  cursor: pointer;
}
.dropdown-item:hover, .dropdown-item.picked {
  box-shadow: var(--shadow-inset-sm);
  color: var(--color-blue-text);
}
```

Dropdown items have no background change on hover — instead, they **press into** the panel with an inset shadow, exactly mimicking a physical button press.

---

## 9. Layout & Grid System

### 9.1 Container Widths

| Token | Value |
|-------|-------|
| `--container-sm` | 480px |
| `--container-md` | 640px |
| `--container-lg` | 800px |
| `--container-xl` | 1040px |
| `--container-2xl` | 1200px |

### 9.2 Standard Layouts

```css
.layout-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.layout-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
```

Because there's no border or color contrast between cards and the page, cards need a **minimum 20px gap** — otherwise their shadows visually merge and the illusion of separate molded objects breaks down.

---

## 10. Animation & Transition Tokens

### 10.1 Easing Curves

| Token | Value | When to Use |
|-------|-------|-------------|
| `--ease-out` | `cubic-bezier(0,0,0.2,1)` | All shadow/transform transitions |
| `--ease-standard` | `cubic-bezier(0.16,1,0.3,1)` | Panel entry |

### 10.2 Duration Scale

| Token | Value | Use |
|-------|-------|-----|
| `--duration-fast` | 100ms | Button press (raised → inset) |
| `--duration-base` | 150ms | Toggle thumb slide |
| `--duration-slow` | 250ms | Dropdown/modal entry |

### 10.3 Signature Motion: The Press

```css
.btn { transition: box-shadow 100ms ease-out; }
.btn:active { box-shadow: var(--shadow-inset-sm); }
```

Every clickable element transitions its shadow pair from raised to inset on `:active` and instantly reverts on release — no delay, no easing overshoot. This "press" is the system's core interaction signature and must be present on every button, dropdown item, and toggle.

---

## 11. Z-Index System

| Token | Value | Layer |
|-------|-------|-------|
| `--z-base` | 0 | Normal flow |
| `--z-raised` | 10 | Cards |
| `--z-dropdown` | 50 | Dropdown menus |
| `--z-modal` | 1000 | Modal overlay |
| `--z-toast` | 1100 | Toast notifications |

---

## 12. Breakpoints

```css
--bp-sm:  480px;
--bp-md:  768px;
--bp-lg:  1024px;
```

### Responsive Padding Scale

| Breakpoint | Page horizontal padding |
|------------|-------------------------|
| < 480px | 16px |
| 480px–1023px | 24px |
| 1024px+ | 24px |

---

## 13. Icon System

- **Size scale:** 14px, 16px, 20px
- **Default size:** 16px
- **Stroke weight:** 1.75px, stroke-based, rounded caps (to match Quicksand's soft letterforms)
- **Color:** inherits text color, or `var(--color-blue-400)` for accent icons
- **Library recommendation:** Feather Icons — rounded stroke caps pair naturally with the soft shadow system

```css
.icon { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; fill: none; }
```

---

## 14. State Definitions

### 14.1 Input States

| State | Shadow |
|-------|--------|
| Default | `--shadow-inset-lg` |
| Focus | `--shadow-inset-lg` + blue focus ring |
| Disabled | `--shadow-inset-lg` at `opacity: 0.5` |

### 14.2 Button States

| State | Shadow | Notes |
|-------|--------|-------|
| Default | `--shadow-raised-md` | — |
| Hover | `--shadow-raised-md` (unchanged — no hover-shadow in this system) | Optional slight text-color deepen |
| Active/Pressed | `--shadow-inset-sm` | The core interaction |
| Disabled | `--shadow-raised-md` at `opacity: 0.5` | — |

### 14.3 Toggle States

```css
.switch-track { box-shadow: var(--shadow-inset-sm); background: var(--color-bg-base); }
.switch-track.on { box-shadow: var(--shadow-raised-sm); background: var(--color-blue-400); }
```

---

*End of Design System — Neumorph v1.0*