# Blueprint — Complete Design System
> Version 1.0 · Derived from the Blueprint Theme (Theme 11)

---

## 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:** Blueprint
**Aesthetic Family:** Technical drafting / architectural blueprint — cyan ink on a deep navy grid, bracketed corner marks, zero curves
**Personality:** Precise, technical, drafted, engineering-grade — communicates specification and measurement, not decoration
**Best Suited For:** CAD/engineering tools, API documentation sites, network topology dashboards, developer specs, hardware configuration panels, technical drawing apps

**Core Principles:**
- The page background is a deep navy (`#0b3d63`) overlaid with a faint cyan graph-paper grid (`28px × 28px`), rendered via two repeating linear gradients — this grid is a permanent, structural part of the canvas, never removed.
- Every card is drawn like an architectural drafting sheet: a translucent navy fill, a thin cyan border, and open **corner brackets** (`::before`/`::after` pseudo-elements) at the top-left and bottom-right — mimicking the registration marks on a technical drawing.
- Border-radius is `0` everywhere, without exception. This is a drafted system; nothing is curved.
- Cyan (`#4fd1ff`) is the single ink color — used for headings, primary actions, focus states, table rules, and every structural line.
- Every section title is prefixed with a literal `// ` comment marker, reinforcing the "annotated technical document" metaphor alongside the grid background.
- Two monospace-adjacent fonts divide the system: Space Grotesk (a geometric sans with technical character) for headings, and JetBrains Mono (true monospace) for everything measured, coded, or tabular.

---

## 2. CSS Custom Properties — Master Token Sheet

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

```css
:root {

  /* ─── COLOR: BACKGROUND & GRID ───────────────────────────────── */
  --color-bg-base:        #0b3d63;   /* Page background — deep navy */
  --color-bg-card:        rgba(11, 40, 66, 0.7);   /* Card fill — translucent, grid shows through */
  --color-bg-card-solid:  #0e2c47;   /* Dropdown panel — more opaque */
  --grid-line:            rgba(79, 209, 255, 0.08); /* Graph-paper grid lines */
  --grid-size:            28px;

  /* ─── COLOR: CYAN INK ────────────────────────────────────────── */
  --color-cyan-100:        rgba(79, 209, 255, 0.08);  /* Row hover / subtle tint */
  --color-cyan-200:        rgba(79, 209, 255, 0.12);  /* Filled-dashed button bg */
  --color-cyan-300:        rgba(79, 209, 255, 0.15);  /* Dropdown item hover bg */
  --color-cyan-400:        #4fd1ff;   /* Primary ink / accent */
  --color-cyan-500:        #7de0ff;   /* Primary button hover */

  /* ─── COLOR: TEXT ────────────────────────────────────────────── */
  --color-text-primary:    #e8f4fc;   /* Headings, high-emphasis */
  --color-text-secondary:  #cfe9fb;   /* Body copy */
  --color-text-tertiary:   #bcdff0;   /* Section headings (dimmer white) */
  --color-text-muted:      #7fa9c4;   /* Labels, captions, secondary text */
  --color-text-disabled:   #4a6b85;   /* Disabled / border-only text */
  --color-text-inverse:    #0b3d63;   /* Text on solid cyan button */

  /* ─── COLOR: BORDERS ─────────────────────────────────────────── */
  --color-border-default:  #365a76;   /* Input border */
  --color-border-medium:   #4a6b85;   /* Secondary button border */
  --color-border-accent:   #4fd1ff;   /* Card / focus / primary border */

  /* ─── COLOR: SEMANTIC ────────────────────────────────────────── */
  --color-success:         #4fd1ff;   /* Shares the ink color — see instructions §3.4 */
  --color-error:           #ff8080;
  --color-error-bg:        rgba(255, 128, 128, 0.12);
  --color-warning:         #ffd166;
  --color-warning-bg:      rgba(255, 209, 102, 0.12);
  --color-info:            #4fd1ff;
  --color-info-bg:         rgba(79, 209, 255, 0.12);

  /* ─── TYPOGRAPHY: FONT FAMILIES ─────────────────────────────── */
  --font-display:  'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Consolas', monospace;

  /* ─── TYPOGRAPHY: SCALE ──────────────────────────────────────── */
  --text-2xs:   0.65625rem; /* 10.5px */
  --text-xs:    0.6875rem;  /* 11px */
  --text-sm:    0.75rem;    /* 12px */
  --text-base:  0.8125rem;  /* 13px */
  --text-md:    0.84375rem; /* 13.5px */
  --text-lg:    0.875rem;   /* 14px */
  --text-xl:    0.9375rem;  /* 15px */
  --text-2xl:   1.375rem;   /* 22px */
  --text-3xl:   2.375rem;   /* 38px */
  --text-4xl:   2.75rem;    /* 44px, clamp ceiling */

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

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

  /* ─── TYPOGRAPHY: LETTER SPACING ─────────────────────────────── */
  --tracking-normal: 0.02em;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.14em;
  --tracking-widest: 0.16em;

  /* ─── SPACING SCALE ──────────────────────────────────────────── */
  --space-1:   6px;
  --space-2:   7px;
  --space-3:   9px;
  --space-4:   10px;
  --space-5:   11px;
  --space-6:   12px;
  --space-7:   14px;
  --space-8:   18px;
  --space-9:   22px;
  --space-10:  26px;
  --space-11:  30px;
  --space-12:  32px;

  /* ─── BORDER RADIUS ──────────────────────────────────────────── */
  --radius-none:   0px;    /* Universal — every single element */

  /* ─── SHADOWS ────────────────────────────────────────────────── */
  --shadow-none:      none;
  --shadow-focus:     0 0 0 1px #4fd1ff;
  --shadow-dropdown:  0 12px 28px rgba(0, 0, 0, 0.45);

  /* ─── 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: 100;
  --z-modal:    1000;
  --z-toast:    1100;

}
```

---

## 3. Color Palette

### 3.1 Background & Grid

| Token | Value | Use |
|-------|-------|-----|
| `--color-bg-base` | `#0b3d63` | Page background — deep navy |
| Grid overlay | `linear-gradient` at `28px × 28px`, `rgba(79,209,255,0.08)` lines | Permanent graph-paper texture |
| `--color-bg-card` | `rgba(11,40,66,0.7)` | Card fill — translucent so the grid shows through |
| `--color-bg-card-solid` | `#0e2c47` | Dropdown panel — a more opaque navy |

### 3.2 Cyan Ink Scale

| Token | Value | Use |
|-------|-------|-----|
| `--color-cyan-100` | `rgba(79,209,255,0.08)` | Row hover tint |
| `--color-cyan-200` | `rgba(79,209,255,0.12)` | Filled-dashed button background |
| `--color-cyan-300` | `rgba(79,209,255,0.15)` | Dropdown item hover background |
| `--color-cyan-400` | `#4fd1ff` | **Primary ink** — headings, borders, buttons, focus |
| `--color-cyan-500` | `#7de0ff` | Primary button hover |

### 3.3 Text Colors

| Token | Hex | Use |
|-------|-----|-----|
| `--color-text-primary` | `#e8f4fc` | Headings, display text |
| `--color-text-secondary` | `#cfe9fb` | Body copy |
| `--color-text-tertiary` | `#bcdff0` | Section headings |
| `--color-text-muted` | `#7fa9c4` | Labels, captions, secondary text |
| `--color-text-disabled` | `#4a6b85` | Disabled / borders |

### 3.4 Semantic Colors

| State | Text | Background | Note |
|-------|------|------------|------|
| Success / Info | `#4fd1ff` | `rgba(79,209,255,0.12)` | Shares the ink color — see instructions §3.4 for rationale |
| Warning | `#ffd166` | `rgba(255,209,102,0.12)` | The only warm color in the system |
| Error | `#ff8080` | `rgba(255,128,128,0.12)` | Muted coral, not pure red — stays legible on navy |

---

## 4. Typography System

### 4.1 Font Families

**Display — `'Space Grotesk'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap')`
- Weights used: 600
- Character: Geometric grotesque with slightly technical, drafted proportions
- Usage: h1, h2, card titles, button labels, badge-adjacent structural text

**Mono — `'JetBrains Mono'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap')`
- Weights used: 400, 500, 600, 700
- Character: True monospace, annotation-grade legibility
- Usage: Body copy, subheadings (prefixed with `>`), inputs, labels, badges, tables, captions — the dominant font by character count

Unlike Mono (Theme 06), Blueprint splits differently: Space Grotesk claims headings *and* buttons (structural UI elements), while JetBrains Mono claims everything measured or read (body, tables, inputs, badges).

---

### 4.2 Type Scale — Full Specification

#### Display (Space Grotesk)

| Role | Size (px) | Weight | Color |
|------|-----------|--------|-------|
| Display Heading | 38px (clamp 28–44px) | 600 | `#e8f4fc` |
| Section Heading | 22px | 600 | `#bcdff0` |
| Button label | 13px | 600 | context-dependent |
| Section title | 11px | 600 (tracking 0.14em, uppercase, `// ` prefix) | `#4fd1ff` |

#### Mono (JetBrains Mono)

| Role | Size (px) | Weight | Color |
|------|-----------|--------|-------|
| Subheading (`> ` prefix) | 15px | 400 | `#4fd1ff` |
| Primary text | 14px | 400 | `#cfe9fb` |
| Secondary text | 12px | 400 | `#7fa9c4` |
| Input text | 13.5px | 400 | `#e8f4fc` |
| Field label | 10.5px | 600 (tracking 0.08em, uppercase) | `#7fa9c4` |
| Badge | 10.5px | 600 | context-dependent |
| Table header | 10.5px | 600 (tracking 0.08em, uppercase) | `#4fd1ff` |
| Table cell | 13px | 400 | `#cfe9fb` |

---

### 4.3 Google Fonts Import Block

```css
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono: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: 600;
  color: var(--color-text-primary);
}

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

.subheading::before { content: '> '; }
.subheading {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--color-cyan-400);
}

.section-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-cyan-400);
  margin-bottom: 18px;
}
.section-title::before { content: '// '; opacity: 0.6; }

p {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: 7px;
  display: block;
}
```

**Signature detail:** the `// ` comment prefix on section titles and the `> ` prompt prefix on subheadings are both mandatory, not decorative flourishes — they are the system's core "annotated document" signal, appearing on every single card.

---

## 5. Spacing System

### 5.1 Base Scale Table

| Token | Value | Common Use |
|-------|-------|------------|
| `--space-1` | 6px | Corner bracket size |
| `--space-3` | 9px | Badge padding-h |
| `--space-4` | 10px | Dropdown item padding-v |
| `--space-6` | 12px | Table cell padding-h |
| `--space-7` | 14px | Input padding-h |
| `--space-8` | 18px | Field group gap |
| `--space-9` | 22px | Button padding-h |
| `--space-10` | 26px | Card standard padding |
| `--space-11` | 30px | Card padding-h |

### 5.2 Component Spacing Specifications

#### Card
```
Padding: 26px 30px
Corner bracket size: 10px × 10px, 1.5px border
Section title margin-bottom: 18px
```

#### Button
```
Padding: 11px 22px
Border-radius: 0 (always)
```

#### Input
```
Padding: 11px 14px
Border-radius: 0
```

#### Badge
```
Padding: 3px 9px
Font size: 10.5px
Border-radius: 0
Border: 1px solid currentColor
```

---

## 6. Border Radius System

Blueprint is the most extreme radius statement in the collection: **`0px`, with zero exceptions.** Not "nearly square" like Mono's `2px` — genuinely, completely sharp on every element.

### 6.1 Radius Scale

| Token | Value | Use |
|-------|-------|-----|
| `--radius-none` | `0px` | Every element: cards, buttons, inputs, badges, dropdowns, checkboxes, toggles, tables |

### 6.2 Quick Reference Table

| Element | Radius |
|---------|--------|
| Card | 0px |
| Button (all variants) | 0px |
| Text input / textarea | 0px |
| Dropdown panel | 0px |
| Badge | 0px |
| Checkbox | 0px |
| Radio | 0px (drafted as a square with a diagonal or dot mark, not a circle) |
| Switch track | 0px |
| Table | 0px |
| Modal | 0px |

**Because there is no radius to differentiate elements, all shape distinction comes from border weight, dash pattern, and the corner-bracket motif described in §7.**

---

## 7. Shadow & Elevation System

### 7.1 No Ambient Shadows — Structure Is Drawn, Not Lit

Blueprint uses almost no `box-shadow`. Instead of shadow-based elevation, every card is drawn with:
1. A `1px solid rgba(79,209,255,0.35)` border
2. Two open corner brackets (`::before` top-left, `::after` bottom-right) at `10px × 10px`, `1.5px solid #4fd1ff`, each missing two of its four sides so it reads as an "L" bracket rather than a full square

```css
.bp-card::before, .bp-card::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border: 1.5px solid #4fd1ff;
}
.bp-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.bp-card::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }
```

### 7.2 The Only Two Elevation Signals

| What You're Building | Signal |
|---------------------|--------|
| Card | Border + corner brackets — no shadow |
| Dropdown panel | `1px solid #4fd1ff` border + `--shadow-dropdown` (the one component allowed a real shadow, since it floats above content) |
| Input focus | `box-shadow: 0 0 0 1px #4fd1ff` — a hairline ring, not a soft glow |

### 7.3 Never Add a Soft/Diffuse Shadow

Any shadow in this system must be either absent, a hard 1px ring, or the dropdown's functional drop shadow. A soft blurred shadow (e.g., `0 8px 24px rgba(0,0,0,0.2)`) on a card or button breaks the "flat technical drawing" illusion.

---

## 8. Component Specifications

### 8.1 Buttons

#### Primary Button
```css
.btn-primary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  border-radius: 0;
  padding: 11px 22px;
  background: #4fd1ff;
  color: #0b3d63;
  border: 1px solid #4fd1ff;
  cursor: pointer;
  transition: all 150ms;
}
.btn-primary:hover { background: #7de0ff; }
```

#### Secondary / Outline / Destructive / Dashed
```css
.btn-secondary { background: transparent; color: #cfe9fb; border: 1px solid #4a6b85; }
.btn-outline   { background: transparent; color: #4fd1ff; border: 1px solid #4fd1ff; }
.btn-destructive { background: transparent; color: #ff8080; border: 1px solid #ff8080; }
.btn-dashed    { background: transparent; color: #4fd1ff; border: 1px dashed #4fd1ff; }
.btn-filled-dashed { background: rgba(79,209,255,0.12); color: #4fd1ff; border: 1px dashed #4fd1ff; }
```

All non-primary buttons share a `background: transparent` base — only the border style (solid/dashed) and text color differ. This is a deliberately minimal, "line-drawing" button system.

---

### 8.2 Form Inputs

```css
.input {
  font-family: var(--font-mono);
  font-size: 13.5px;
  background: rgba(255,255,255,0.03);
  border: 1px solid #365a76;
  border-radius: 0;
  padding: 11px 14px;
  width: 100%;
  outline: none;
  color: #e8f4fc;
}
.input:focus { border-color: #4fd1ff; box-shadow: 0 0 0 1px #4fd1ff; }
```

---

### 8.3 Labels

```css
.field-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: #7fa9c4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 7px;
  display: block;
}
```

---

### 8.4 Card / Surface (with Corner Brackets)

```css
.bp-card {
  background: rgba(11, 40, 66, 0.7);
  border: 1px solid rgba(79, 209, 255, 0.35);
  position: relative;
  padding: 26px 30px;
}
.bp-card::before, .bp-card::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border: 1.5px solid #4fd1ff;
}
.bp-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.bp-card::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }
```

---

### 8.5 Badge / Status Chip

```css
.badge {
  border-radius: 0;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: var(--font-mono);
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-info    { color: #4fd1ff; }
.badge-warning { color: #ffd166; }
.badge-error   { color: #ff8080; }
```

Badges are outline-only (`border: 1px solid currentColor`, transparent background) — there is no filled/solid badge variant in this system, consistent with the "line-drawing" button philosophy.

---

### 8.6 Table

```css
table { width: 100%; border-collapse: collapse; font-size: 13px; font-family: var(--font-mono); }
th {
  text-align: left;
  padding: 10px 14px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4fd1ff;
  border-bottom: 1px solid #4fd1ff;
}
td { padding: 10px 14px; border-bottom: 1px solid rgba(79,209,255,0.15); }
```

The header row's border-bottom uses full-opacity cyan (`#4fd1ff`), while body row dividers use a faint `0.15` opacity tint — this creates a clear "ruled sheet" hierarchy.

---

### 8.7 Dropdown Panel

```css
.dropdown-menu {
  background: #0e2c47;
  border: 1px solid #4fd1ff;
  border-radius: 0;
  margin-top: 6px;
}
.dropdown-item {
  padding: 10px 14px;
  font-size: 13px;
  font-family: var(--font-mono);
  cursor: pointer;
  border-bottom: 1px solid rgba(79,209,255,0.12);
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover, .dropdown-item.picked {
  background: rgba(79,209,255,0.15);
  color: #4fd1ff;
}
```

---

## 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 The Background Grid

```css
background-image:
  linear-gradient(rgba(79,209,255,0.08) 1px, transparent 1px),
  linear-gradient(90deg, rgba(79,209,255,0.08) 1px, transparent 1px);
background-size: 28px 28px;
```

This grid must be present on the page background at all times — it is the primary visual cue that establishes the "drafting table" metaphor before any component is even read.

### 9.3 Standard Layouts

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

---

## 10. Animation & Transition Tokens

### 10.1 Easing Curves

| Token | Value | When to Use |
|-------|-------|-------------|
| `--ease-out` | `cubic-bezier(0,0,0.2,1)` | Button/input state changes |

### 10.2 Duration Scale

| Token | Value | Use |
|-------|-------|-----|
| `--duration-fast` | 100ms | Dropdown item hover |
| `--duration-base` | 150ms | Button/input transitions |

Motion in Blueprint is minimal and utilitarian — this is a drafting tool, not a consumer app. No entrance animations beyond a quick opacity fade for dropdowns/modals.

---

## 11. Z-Index System

| Token | Value | Layer |
|-------|-------|-------|
| `--z-base` | 0 | Normal flow |
| `--z-raised` | 10 | Cards |
| `--z-dropdown` | 100 | 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:** 12px, 14px, 16px
- **Default size:** 14px
- **Stroke weight:** 1.5px, stroke-based, always outline (never filled) — icons should look like they were drawn with technical pens
- **Color:** `var(--color-cyan-400)` for functional icons, inherits otherwise
- **Library recommendation:** Lucide or Feather — thin geometric strokes suit the drafting aesthetic

```css
.icon { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; }
```

---

## 14. State Definitions

### 14.1 Input States

| State | Border | Background |
|-------|--------|------------|
| Default | `#365a76` | `rgba(255,255,255,0.03)` |
| Focus | `#4fd1ff` + 1px ring | `rgba(255,255,255,0.03)` |
| Disabled | `#365a76` | `rgba(255,255,255,0.03)` at opacity 0.5 |

### 14.2 Button States

| State | Primary | Secondary/Outline |
|-------|---------|-------------------|
| Default | `#4fd1ff` fill, `#0b3d63` text | transparent, bordered |
| Hover | `#7de0ff` fill | `rgba(79,209,255,0.08)` fill appears |
| Disabled | opacity 0.4 | opacity 0.4 |

### 14.3 Table Row Hover

```css
tr:hover td { background: rgba(79,209,255,0.08); }
```

---

*End of Design System — Blueprint v1.0*