---

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

---

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 astro/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:

Copyastro/src/styles/global.css (define tokens here)
    |
    v (Astro build)
astro/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:

Copy<div class="bg-bg-elevated text-text-primary rounded-lg p-4">
  <h3 class="text-accent-primary font-semibold">{{ item.name }}</h3>
</div>

Astro/React components:

Copy<div className="bg-bg-elevated text-text-primary rounded-lg p-4">
  <h3 className="text-accent-primary font-semibold">{item.name}</h3>
</div>

CSS custom property syntax (when needed):

Copy<div style="background-color: var(--color-bg-elevated);">

---

Design Tokens

Background Layers

Three-tier surface system for depth and hierarchy:

Tailwind classes: bg-bg-base, bg-bg-surface, bg-bg-elevated

Text Colors

Tailwind classes: text-text-primary, text-text-secondary, text-text-muted

Accent Colors

Tailwind classes: text-accent-primary, bg-accent-success, border-accent-warning, etc.

Block Type Colors

Signal chain component identification:

Tailwind classes: bg-block-di, border-block-amp, text-block-effect, etc.

Typography

Font families:

• --font-sans: Inter
• --font-mono: JetBrains Mono

---

Component Patterns

Card:

Copy<div class="bg-bg-surface border border-[#333333] rounded-lg p-4
            hover:bg-bg-elevated transition-colors">

Button:

Copy<button class="px-4 py-2 bg-accent-primary text-white rounded-md font-medium
               hover:bg-blue-700 disabled:opacity-50">

Block Card (signal chain blocks):

Copyconst blockStyles = {
  di:          { border: 'border-block-di/50',          bg: 'bg-block-di/10' },
  amp:         { border: 'border-block-amp/50',         bg: 'bg-block-amp/10' },
  cab:         { border: 'border-block-cab/50',         bg: 'bg-block-cab/10' },
  effect:      { border: 'border-block-effect/50',      bg: 'bg-block-effect/10' },
  postEffect:  { border: 'border-block-post-effect/50', bg: 'bg-block-post-effect/10' },
};

---

Aesthetic Principles

Do

• Intentional choices - Bold maximalism and refined minimalism both work
• Dominant colors with sharp accents - Not timid, evenly-distributed palettes
• Atmosphere and depth - Gradients, textures, layered transparencies
• Purposeful motion - High-impact moments over scattered micro-interactions

Avoid ("AI Slop")

• Overused fonts without character
• Cliched color schemes (purple gradients on white)
• Predictable layouts and component patterns
• Cookie-cutter design lacking context-specific character

---

Full Documentation

• Style Guide - All tokens, accessibility
• Tools & Workflow - Showcase, MCP usage
• Inspiration - Reference applications