# spectr.irung.me — Design System

## 1. Visual Theme & Atmosphere

Spectr is a color palette exploration tool, and its own design reflects that mission directly. The interface is clean and light — a near-white background that steps back and lets the subject matter (color) do the talking. The primary accent is a confident indigo-violet, built from a carefully calibrated hue-locked color system where every scale shares the same underlying hue (`hsl(239, 69%, ...)`) with only lightness varying. The result is a tool-like precision aesthetic with a hint of personality from the violet brand color.

## 2. Color Palette & Roles

| Role | Value | Usage |
|---|---|---|
| Canvas | `rgb(250,250,250)` | Page background — barely off-white |
| White panel | `rgb(255,255,255)` | Cards, inputs, links |
| Border/divider | `rgb(228,228,231)` | Subtle gray borders throughout |
| Primary CTA | `rgb(113,115,229)` | Indigo-violet brand color |
| Lavender soft | `rgb(233,227,248)` | Secondary/ghost button bg |
| Deep purple | `rgb(36,44,61)` | Dark variant surface |
| Blue accent | `rgb(29,86,165)` | Alternative interaction color |
| Focus ring | `rgb(52,55,218)` | Keyboard focus indicator |

The extended palette swatches (displayed as product content) range from `rgb(225,225,249)` through `rgb(17,18,90)` — a full 10-step indigo ramp that is both the app's output and its visual identity.

## 3. Typography Rules

System sans-serif throughout — `ui-sans-serif, system-ui`. This is an intentional choice: the tool itself is about color, so typography recedes into pure utility. No custom typeface loaded.

- `h1`: 24px / weight 700 — the only bold heading
- `h3/h4`: 14–18px / weight 500 — card labels and section titles
- `body/a/button/input`: 16px / weight 400 — consistent and flat
- `p`: 14px / weight 400 — supporting text slightly smaller

No letter-spacing, no text-transform. Clean and unadorned.

## 4. Component Stylings

Buttons come in two clear variants: filled indigo `rgb(113,115,229)` and lavender-tinted ghost `rgb(233,227,248)`. Border radius ranges from 4px to 24px and pill (`3.35544e+07px`) — suggesting a mix of sharp-edged data UI and pill-shaped badges. Card shadow system uses a stacked multi-layer approach with border ring `rgb(228,228,231)` plus diffused drop shadows.

## 5. Layout Principles

Simple vertical stacking — a single breakpoint at 600px suggests a focused, app-like layout that is primarily two states: compact mobile and wider desktop. No complex grid system. Content likely centered with max-width constraint.

## 6. Depth & Elevation

A layered shadow system combining:
- `1px solid rgb(228,228,231)` border ring
- `rgba(0,0,0,0.1)` subtle drop shadows
- Indigo-tinted shadow variants for hovered/active color swatches

Cards use `0px 1px 3px 0px` drop shadow for basic elevation.

## 7. Do's and Don'ts

**Do:** Use the indigo scale for interactive elements. Keep backgrounds near-white and let the color swatches command attention. Use system fonts — no custom typeface competes with the product's color content.

**Don't:** Add warm accent colors — the entire identity is cool indigo. Don't use bold weights beyond h1. Don't add decorative gradients or background patterns.

## 8. Responsive Behavior

A single breakpoint at 600px — desktop-to-mobile only. The tool likely reflows to a single column below that threshold.

## 9. Agent Prompt Guide

> "Design in the style of spectr.irung.me: near-white canvas with system sans-serif, indigo-violet primary `#7173e5`, lavender ghost buttons, clean 1px border cards with subtle drop shadows, pill and rectangular radius mix, precise color-tool UI aesthetic."

*Generated by Sparkbites — extracted from live CSS analysis*