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 headingh3/h4: 14–18px / weight 500 — card labels and section titlesbody/a/button/input: 16px / weight 400 — consistent and flatp: 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 ringrgba(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
