Design System Architecture
Theme Style Guide & Color Tokens
Complete reference for the Parchment & Warm Dark theme palette, semantic states, CSS variables, and core component styling across ScanTheThings.
1. Core Color Swatches
These design tokens dynamically switch between Parchment Light Mode (`:root`) and Warm Dark Mode (`:root[data-theme="dark"]`).
Canvas & Surfaces
Canvas BG
Background Canvas
var(--bg-canvas)
Light: #F7E6CA | Dark: #1E1A16
Card Surface
Card & Panel Surface
var(--surface-card)
Light: #FFF8EE | Dark: #28231D
Card Hover
Surface Hover / Secondary
var(--surface-card-hover)
Light: #EFE0C7 | Dark: #332C24
Border Subtle
Subtle Borders
var(--border-subtle)
Light: #DBCAB0 | Dark: #3D352C
Typography & Accents
Neutral Main
Primary Body & Headings
var(--neutral-main)
Light: #2C2621 | Dark: #F7E6CA
Neutral Muted
Secondary & Subtitles
var(--neutral-muted)
Light: #82796b | Dark: #9E9281
Accent Flash
Brand Yellow Flash
var(--accent-flash)
Shared: #fee440
Primary Action
Interactive Primary
var(--color-primary)
Light: #1D4ED8 | Dark: #60A5FA
Semantic Status Palette
Success State
Success / Clean
--color-success & tint
Light: #235336 / #D9E6DC | Dark: #4ADE80 / #062E1B
Warning State
Warning / Pending
--color-warning & tint
Light: #8C510A / #F2DEC2 | Dark: #FBBF24 / #331E05
Danger State
Danger / Violation
--color-danger & tint
Light: #8B2626 / #F2D5D5 | Dark: #F87171 / #330C0C
Info State
Information / Notice
--color-info & tint
Light: #1D4ED8 / #D9E4F5 | Dark: #60A5FA / #0C2244
2. Core UI Component Showcase
Buttons
Status Pills & Badges
0 Issues
3 Warnings
5 Violations
Scheduled
Ignored
Scanning...
Alert Messages
Information Alert: Scheduled daily batch audits are running automatically in the background.
Success Alert: Report batch audit completed cleanly with zero accessibility violations detected.
Error Alert: Outbound target URL failed validation or exceeded daily quota limit.
AI Authenticity Slop Markers & Category Tags
legacy phrasing trope LEGACY
delve into the nuances SUPERFICIAL
game-changing paradigm shift PROMOTIONAL
tapestry of innovation VOCAB
not only... but also PARALLELISM
fast, efficient, and robust THREE
Form Controls & Switches
Enable Category Detection Rule
3. Design Token Reference Table
| Token Name | Parchment Light Value | Warm Dark Value | Target Applications |
|---|---|---|---|
--bg-canvas |
#F7E6CA |
#1E1A16 |
Main page canvas background, full-bleed body |
--surface-card |
#FFF8EE |
#28231D |
Cards, audit panels, summary tiles, metric containers |
--surface-card-hover |
#EFE0C7 |
#332C24 |
Interactive card hover states, table headers, rules toolbar |
--border-subtle |
#DBCAB0 |
#3D352C |
Panel borders, input borders, card outlines, table gridlines |
--neutral-main |
#2C2621 |
#F7E6CA |
Primary body copy, headings (H1-H4), table text, form values |
--neutral-muted |
#82796b |
#9E9281 |
Subtitles, helper labels, meta text, timestamps, footer copy |
--accent-flash |
#fee440 |
#fee440 |
Brand badges, header active indicator, toggle button hover |
--color-primary |
#1D4ED8 |
#60A5FA |
Primary buttons, hero emphasis, active navigation items |