# Design System: Astra UI v2
## **Light Theme: "Titanium Dawn"**

> **Core Concept:** *Precision Engineering Meets Digital Luxury*
> Inspired by aerospace control rooms, luxury automotive HMI, and data centers.
> Source of truth: `astra_ui/lib/src/features/theme/shadcn_theme.dart`

---

### 1. Visual Philosophy

*   **The Vibe:** Industrial New-Age — High-Performance, Architectural, Trustworthy.
*   **The Texture:** Titanium, Anodized Aluminum, Precision Glass.
*   **The Approach:** Clean surfaces, monochromatic blue palette, professional precision.

---

### 2. Color Palette: "Titanium Dawn"

#### Backgrounds & Surfaces

| Role | Token Name | Hex Code | Color Name | Usage |
| :--- | :--- | :--- | :--- | :--- |
| **Scaffold Background** | `lightBackground` | `#F1F5F9` | Mist | Global scaffold background via `scaffoldBackgroundSchemeColor: surfaceContainerLow` |
| **Surface** | `lightSurface` | `#FAFBFC` | Titanium White | App bar, cards, dialogs, nav rail |
| **Surface Alt** | `lightSurfaceAlt` | `#FFFFFF` | Pearl | Card backgrounds, elevated surfaces |
| **Surface Dim** | `lightSurfaceDim` | `#E2E8F0` | Fog | Disabled backgrounds, dimmed areas |

#### Primary Palette

| Role | Token Name | Hex Code | Color Name | Usage |
| :--- | :--- | :--- | :--- | :--- |
| **Primary** | `lightPrimary` | `#2563EB` | Cobalt | Key actions, active states, brand accent, FAB, filled buttons |
| **Primary Hover** | `lightPrimaryHover` | `#1D4ED8` | Royal | Hover state for primary elements |
| **Primary Container** | `lightPrimaryContainer` | `#DBEAFE` | Light Blue | Nav rail indicator, drawer indicator, selected chips, list tile selection |

#### Secondary & Tertiary

| Role | Token Name | Hex Code | Color Name | Usage |
| :--- | :--- | :--- | :--- | :--- |
| **Secondary** | `lightSecondary` | `#64748B` | Slate | Secondary text, muted actions, "away" status |
| **Secondary Container** | `lightSecondaryContainer` | `#F1F5F9` | — | Secondary container surfaces |
| **Tertiary** | `lightTertiary` | `#0891B2` | Cyan-600 | AI/special features accent (WCAG AA 3.65:1 on white) |
| **Tertiary Container** | `lightTertiaryContainer` | `#CFFAFE` | — | Tertiary container surfaces |

#### Text Colors

| Role | Token Name | Hex Code | Color Name | Usage |
| :--- | :--- | :--- | :--- | :--- |
| **Text Primary** | `lightTextPrimary` | `#0F172A` | Graphite | Headings, body text, primary on-surface |
| **Text Secondary** | `lightTextSecondary` | `#475569` | Steel | Descriptions, secondary labels |
| **Text Muted** | `lightTextMuted` | `#94A3B8` | Zinc | Placeholders, hints, disabled text |

#### Borders

| Role | Token Name | Hex Code | Color Name | Usage |
| :--- | :--- | :--- | :--- | :--- |
| **Border** | `lightBorder` | `#E2E8F0` | Silver | Dividers, card borders, outlined buttons, segmented button sides |
| **Border Focus** | `lightBorderFocus` | `#2563EB` | Cobalt | Focus rings (2px width) |

#### Status Colors

| Role | Token Name | Hex Code | Color Name | Usage |
| :--- | :--- | :--- | :--- | :--- |
| **Success** | `lightSuccess` | `#10B981` | Emerald | Online status, success states |
| **Warning** | `lightWarning` | `#F59E0B` | Amber | Busy status, warning states |
| **Error** | `lightError` | `#EF4444` | Rose | Offline status, error states, destructive actions |
| **On Error** | `onError` | `#FFFFFF` | White | Text on error surfaces |

#### Glass Effect (Semantic)

| Role | Hex Code | Description |
| :--- | :--- | :--- |
| **Glass Background** | `rgba(255, 255, 255, 0.80)` | White at 80% opacity |
| **Glass Border** | `#E2E8F0` | Same as lightBorder |

#### Data Visualization Palette

| Color | Hex Code | Hue |
| :--- | :--- | :--- |
| Blue | `#3B82F6` | H217° |
| Orange | `#F97316` | H25° |
| Emerald | `#10B981` | H160° |
| Rose | `#EF4444` | H0° |
| Violet | `#8B5CF6` | H258° |
| Amber | `#F59E0B` | H38° |
| Pink | `#EC4899` | H330° |
| Cyan | `#22D3EE` | H188° |

#### Priority Colors

| Priority | Hex Code | Token |
| :--- | :--- | :--- |
| Critical | `#EF4444` | Rose |
| High | `#F59E0B` | Amber |
| Medium | `#3B82F6` | Blue |
| Low | `#94A3B8` | Slate-400 |

---

### 3. Typography

**Font:** Inter (locally bundled, all weights — offline support)

*   **All text styles** (display, headline, title, body, label) use `Inter`.
*   No secondary display font — single font family for consistency.

---

### 4. Spacing Tokens (`AstraSpacing`)

| Token | Value | Usage |
| :--- | :--- | :--- |
| `windowMargin` | 12px | Layout margins |
| `elementGap` | 12px | Gap between elements |
| `contentPadding` | 24px | Content area padding |
| `sectionGap` | 24px | Gap between sections |
| `cardPadding` | 20px | Internal card padding |
| `listItemGap` | 8px | Gap between list items |
| `iconTextGap` | 12px | Gap between icon and text |

---

### 5. Border Radii (M3 Expressive Scale)

| Token | Value | Usage |
| :--- | :--- | :--- |
| `radiusXs` | 8px | Inputs, chips, small controls |
| `radiusSm` | 10px | Buttons, list items |
| `radiusMd` | 16px | Cards, panels |
| `radiusLg` | 20px | Dialogs, sheets |
| `radiusXl` | 24px | Bottom sheets, large containers |

#### Component-Specific Radii

| Component | Radius | Notes |
| :--- | :--- | :--- |
| **Default (global)** | 12px | `defaultRadius` |
| **Cards** | 16px | `cardRadius` |
| **Dialogs** | 20px | `dialogRadius` |
| **Bottom Sheets** | 24px | `bottomSheetRadius` |
| **Buttons (all types)** | 10px | text, filled, elevated, outlined |
| **Input Fields** | 8px | shadcn borderless filled style |
| **Chips** | 8px | — |
| **FAB** | 16px | — |
| **Menus/Popups** | 12px | — |
| **Tooltips** | 8px | — |
| **Snackbars** | 10px | — |
| **Nav Rail Indicator** | 12px | — |
| **Drawer Indicator** | 12px | — |
| **Nav Bar Indicator** | 12px | — |
| **Segmented Buttons** | 10px | — |
| **Toggle Buttons** | 10px | — |

---

### 6. Motion Tokens (`AstraMotion`)

| Token | Value | Usage |
| :--- | :--- | :--- |
| `fast` | 150ms | Micro-interactions, hover effects |
| `normal` | 200ms | Standard transitions |
| `slow` | 400ms | Complex animations, page transitions |

#### Spring Configurations

| Spring | Mass | Stiffness | Damping | Feel |
| :--- | :--- | :--- | :--- | :--- |
| `snappy` | 1.0 | 400 | 30 | Quick, responsive |
| `smooth` | 1.0 | 200 | 25 | Balanced, natural |
| `gentle` | 1.0 | 120 | 20 | Slow, ease-in |

#### Curves

| Curve | Value | Usage |
| :--- | :--- | :--- |
| `snapIn` | `Cubic(0.32, 0.72, 0, 1)` | Snappy enter animations |
| `emphasized` | `Cubic(0.2, 0, 0, 1)` | M3 emphasized motion |

---

### 7. Component Theme Summary (Light)

| Component | Background | Elevation | Key Detail |
| :--- | :--- | :--- | :--- |
| **Scaffold** | `surfaceContainerLow` | — | `#F1F5F9` tinted |
| **App Bar** | `surface` | 0 (no scroll shadow) | Clean flat bar |
| **Nav Rail** | `surface` | — | Indicator: `primaryContainer`, opacity 1.0 |
| **Drawer** | `surface` | 0 | Width: 280px |
| **Dialogs** | `surface` | — | — |
| **Bottom Sheet** | `surface` | 4 / 8 (modal) | — |
| **Menus/Popups** | `surface` | 4 | — |
| **Cards** | — | — | 16px radius |
| **Input Fields** | Filled (alpha 15) | — | No unfocused border, 2px focus ring |
| **Segmented Button** | Primary (selected), Transparent (unselected) | — | White text on selected, border: `lightBorder` |

#### Splash & Adaptive

*   **Splash type:** `inkSparkle` (all platforms)
*   **Visual density:** `comfortablePlatformDensity`
*   **Text selection:** cursor, selection, handles all use `lightPrimary` (`#2563EB`)
*   **Divider:** `lightBorder` (`#E2E8F0`), 1px thickness

---

### 8. Implementation Reference (Dart)

```dart
// AstraColors — Light Mode
static const Color lightBackground    = Color(0xFFF1F5F9); // Mist
static const Color lightSurface       = Color(0xFFFAFBFC); // Titanium White
static const Color lightSurfaceAlt    = Color(0xFFFFFFFF); // Pearl
static const Color lightSurfaceDim    = Color(0xFFE2E8F0); // Fog
static const Color lightPrimary       = Color(0xFF2563EB); // Cobalt
static const Color lightPrimaryHover  = Color(0xFF1D4ED8); // Royal
static const Color lightPrimaryContainer = Color(0xFFDBEAFE);
static const Color lightSecondary     = Color(0xFF64748B); // Slate
static const Color lightTertiary      = Color(0xFF0891B2); // Cyan-600
static const Color lightTextPrimary   = Color(0xFF0F172A); // Graphite
static const Color lightTextSecondary = Color(0xFF475569); // Steel
static const Color lightTextMuted     = Color(0xFF94A3B8); // Zinc
static const Color lightBorder        = Color(0xFFE2E8F0); // Silver
static const Color lightBorderFocus   = Color(0xFF2563EB); // Cobalt
static const Color lightSuccess       = Color(0xFF10B981); // Emerald
static const Color lightWarning       = Color(0xFFF59E0B); // Amber
static const Color lightError         = Color(0xFFEF4444); // Rose
static const Color onError            = Color(0xFFFFFFFF); // White
```