--- name: frontend-design description: Visual design for Guitar Tone Shootout - design tokens, colors, typography, component patterns, and aesthetic principles. Use for UI decisions and styling. --- # Frontend Design **Activation:** design, colors, theme, styling, tokens, UI, visual, dark mode, component style **Full Reference:** [Wiki: Design\/Style-Guide](https:\/\/github.com\/krazyuniks\/guitar-tone-shootout\/wiki\/Design-Style-Guide) --- ## Design Direction - **Aesthetic:** Professional audio tool (Quad Cortex \/ DAW inspired) - **Theme:** Dark primary - **Target:** Musicians, audio engineers, content creators - **Font:** Inter (project standard) --- ## Unified Design Token Architecture Design tokens are defined **once** in `frontend\/src\/styles\/global.css`. The Astro build compiles this CSS and generates a Jinja2 wrapper template that includes the compiled stylesheet. **Single source of truth:** ``` frontend\/src\/styles\/global.css (define tokens here) | v (Astro build) frontend\/dist\/_astro\/main.[hash].css (compiled CSS) | v (included by wrapper) Both static (Astro) and dynamic (Jinja2) pages ``` **All pages share the same compiled CSS.** Static Astro pages and dynamic Jinja2 templates both use identical design tokens through the same stylesheet. ### Usage in Templates **Jinja2 templates:** ```jinja2

{{ item.name }}<\/h3> <\/div> ``` Astro\/React components: ```tsx

{item.name}<\/h3> <\/div> ``` CSS custom property syntax (when needed): ```html
``` --- ## Design Tokens ### Background Layers Three-tier surface system for depth and hierarchy: | Token | Value | Use | |-------|-------|-----| | `--color-bg-base` | `#0a0a0a` | Page background | | `--color-bg-surface` | `#141414` | Cards, panels | | `--color-bg-elevated` | `#1f1f1f` | Modals, dropdowns, hover states | Tailwind classes: `bg-bg-base`, `bg-bg-surface`, `bg-bg-elevated` ### Text Colors | Token | Value | Use | |-------|-------|-----| | `--color-text-primary` | `#ffffff` | Primary text, headings | | `--color-text-secondary` | `#a1a1a1` | Secondary text, labels | | `--color-text-muted` | `#666666` | Disabled, placeholder text | Tailwind classes: `text-text-primary`, `text-text-secondary`, `text-text-muted` ### Accent Colors | Token | Value | Use | |-------|-------|-----| | `--color-accent-primary` | `#3b82f6` | Blue - CTAs, links | | `--color-accent-success` | `#22c55e` | Green - success states | | `--color-accent-warning` | `#f59e0b` | Amber - warnings | | `--color-accent-error` | `#ef4444` | Red - errors, destructive | Tailwind classes: `text-accent-primary`, `bg-accent-success`, `border-accent-warning`, etc. ### Block Type Colors Signal chain component identification: | Token | Value | Use | |-------|-------|-----| | `--color-block-di` | `#3b82f6` | Blue - DI\/Input blocks | | `--color-block-amp` | `#f59e0b` | Amber - Amp\/NAM blocks | | `--color-block-cab` | `#22c55e` | Green - Cabinet\/IR blocks | | `--color-block-effect` | `#a855f7` | Purple - Pre-amp pedals | | `--color-block-post-effect` | `#06b6d4` | Cyan - Post-amp effects | Tailwind classes: `bg-block-di`, `border-block-amp`, `text-block-effect`, etc. ### Typography | Use | Class | Spec | |-----|-------|------| | Body | `text-base font-normal` | 16px, 400 | | Heading | `text-2xl font-semibold` | 24px, 600 | | Caption | `text-xs font-medium` | 12px, 500 | | Mono | `font-mono` | JetBrains Mono | Font families: - `--font-sans`: Inter - `--font-mono`: JetBrains Mono --- ## Component Patterns Card: ```html
``` Button: ```html