DESIGN.md@packs/bergside-awesome-design-skills/roku git:20260921.cdae51fA

Immutable. This exact content never changes and is served at /api/v1/blob/5349c99fb33f3699.

---
name: Roku
colors:
  primary: "#9333ea"
  secondary: "#a855f7"
  success: "#10b981"
  warning: "#f59e0b"
  danger: "#ef4444"
  surface: "#FFFFFF"
  text: "#09090b"
  neutral: "#FFFFFF"
typography:
  h1:
    fontFamily: "Inter"
    fontSize: 2rem
  body-md:
    fontFamily: "Inter"
    fontSize: 1rem
  label-caps:
    fontFamily: "JetBrains Mono"
    fontSize: 0.75rem
  sourceScale: "12/14/16/20/24/32"
  weights: "Inter 100/200/300/400/500/600/700/800/900; JetBrains Mono 100/200/300/400/500/600/700/800"
rounded:
  sm: 4px
  md: 8px
spacing:
  sm: 4px
  md: 8px
  sourceScale: "4/8/12/16/24/32"
---

## Overview

App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows.

## Style Foundations

- **Visual style:** modern, clean, high-contrast, glass-like panels, soft shadows, rounded components
- **Typography scale:** 12/14/16/20/24/32
- **Typography fonts:** primary=Inter, display=Inter, mono=JetBrains Mono
- **Typography weights:** Inter 100/200/300/400/500/600/700/800/900; JetBrains Mono 100/200/300/400/500/600/700/800 (as shipped on Google Fonts, checked 2026-09-20)
- **Color palette:** primary (purple), neutral, success, warning, danger
- **Spacing scale:** 4/8/12/16/24/32

## Colors

- **Primary (#9333ea):** Token from style foundations.
- **Secondary (#a855f7):** Token from style foundations.
- **Success (#10b981):** Token from style foundations.
- **Warning (#f59e0b):** Token from style foundations.
- **Danger (#ef4444):** Token from style foundations.
- **Surface (#FFFFFF):** Token from style foundations.
- **Text (#09090b):** Token from style foundations.
- **Neutral (#FFFFFF):** Derived from the surface token for official format compatibility.