ScanTheThings Design System & Component Specs
The official design system, interactive component specs, and WCAG-compliant token system for ScanTheThings. Built with pure Tailwind CSS utilities, adaptive CSS custom properties, and technical viewfinder aesthetic motifs.
Color Palette & Contrast Specs
Click any swatch to copy its CSS token to clipboard.
Primary Accent & Status Colors
The 5-Rule "Laser & Housing" System for Uncompromising #ff4c24
Because #ff4c24 represents an emissive barcode targeting laser (relative luminance L ≈ 0.265), darkening it into brick/rust variants (#D32405, #C51F0C, #9e1b04) strips away its luminance and creates clashing reds on the same page. Instead of muting the beam, control what the beam touches using these 5 strict rules:
Always pair pure bg-[#ff4c24] with obsidian ink (text-[#121213]), never white text (3.33:1 fail). Preserves 100% neon laser saturation on primary CTAs and badges.
Uses the Native System Monospace Stack (Consolas / SF Mono at font-medium) inside a skewed parallelogram (-skew-x-12) with counter-skewed upright text (skew-x-12). Top page headers use the Orange Beam Slash; section kickers use the Obsidian Slash with a #ff4c24 hard offset shadow.
Never color small body copy or table values on white cards in brick-red. Keep text in crisp neutral ink and apply a 2px decoration-[#ff4c24] laser underline.
| UI Role | Light & Dark Pattern | WCAG Rule | Verified Contrast |
|---|---|---|---|
| Primary CTA / Solid Badge | bg-[#ff4c24] hover:bg-[#ff623d] text-[#121213] font-extrabold |
1.4.3 Normal Text (4.5:1) | 5.63:1 (WCAG AA) |
| Page Header Kicker (Top) | bg-[#ff4c24] text-[#121213] -skew-x-12 shadow-[3px_3px_0px_#121213] font-medium |
1.4.3 Normal Text (4.5:1) | 5.63:1 (WCAG AA) |
| Section Kicker (Numbered) | bg-[#121213] text-[#ff4c24] -skew-x-12 shadow-[3px_3px_0px_#ff4c24] font-medium |
1.4.3 Normal Text (4.5:1) | 5.63:1 (WCAG AA) |
| Inline Code / Prose Chips | bg-[#fff8f5] dark:bg-[#1c1715] text-black dark:text-stone-100 border border-[#ff4c24]/30 font-medium |
1.4.6 Enhanced (7.0:1) | 18.2:1 (WCAG AAA) |
| Emphasized Data & Links | text-stone-900 dark:text-stone-100 underline decoration-[#ff4c24] decoration-2 |
1.4.6 Enhanced (7.0:1) | 14.5:1+ (WCAG AAA) |
| Large Display Price (≥24px) | text-[#ff4c24] font-extrabold (on bg-white / dark:bg-[#18181c]) |
1.4.3 Large Text (3.0:1) | 3.33:1 Light / 5.1:1 Dark (AA) |
| Reticles, Borders & Meters | border-[#ff4c24] / bg-[#ff4c24] |
1.4.11 Non-Text UI (3.0:1) | 3.33:1+ (WCAG AA) |
Accessible Success Options // WCAG AA & AAA Emerald Audit Tiers
High-contrast compliant on light canvas (#efeeec / #ffffff)Primary audit pass indicators, progress bars, and positive status messaging.
Table report status chips (`Clean (0)`), directive pass chips, and badges.
Zero-privilege tags, quota badges, and high-visibility compliance status chips.
Adaptive Neutral Tokens (Inverted in Dark Mode)
Heading Hierarchy (H1–H4) & Type System Specs
Systematic heading tiers, responsive scaling, explicit linespacing (leading), and letterspacing (tracking) guardrails.
leading-snug (1.375). Default unconstrained line-height on text-2xl/text-3xl collapses to 1.20, causing multi-line titles to look cramped and squished.
Inter (for content hierarchy, headings, form labels, and UI controls) and the Native System Monospace Stack (ui-monospace / Consolas on Windows / SF Mono on macOS—providing hand-tuned ClearType pixel hinting at 10px–13px with zero webfont ink-trap blotching and zero network overhead). Bebas Neue / Oswald is strictly isolated as a display face for the Homepage Hero display (.hero-headline-text).
Notice how the wrapped second line maintains clean, breathable vertical spacing (leading-snug) without colliding.
| Level | Role & Context | Font Family | Tailwind Classes | Linespacing (Leading) | Tracking | Casing |
|---|---|---|---|---|---|---|
| H1 | Homepage Hero Title | Bebas Neue / Oswald | .hero-headline-text |
0.92 | -0.015em | Uppercase |
| H1 | Editorial Docs / Style Guide | Inter (font-sans) | text-3xl sm:text-5xl font-bold |
leading-tight (1.2) | tracking-tight | Title Case |
| H1 | Dashboard HUD Header | Inter (font-sans) | text-2xl sm:text-3xl font-extrabold |
leading-tight (1.2) | tracking-tight | Title Case |
| H2 | Public Major Section | Inter (font-sans) | text-3xl sm:text-4xl md:text-5xl font-bold |
leading-tight (1.2) | tracking-tight | Sentence Case |
| H2 | Dashboard Reticle Panel Title | Inter (font-sans) | text-xl sm:text-2xl font-bold |
leading-snug (1.35) | tracking-tight | Title Case |
| H3 | Multi-Line FAQ Questions | Inter (font-sans) | text-2xl sm:text-3xl font-bold |
leading-snug (1.375) | tracking-normal | Sentence Case |
| H3 | Narrative Feature Rows | Inter (font-sans) | text-2xl sm:text-3xl font-bold |
leading-snug (1.375) | tracking-tight | Sentence Case |
| H3 | Capability Cards (3-Col Grid) | Inter (font-sans) | text-xl sm:text-2xl font-bold |
leading-snug (1.35) | tracking-normal | Title Case |
| H3 | Pricing Tier Card Name | Inter (font-sans) | text-xl sm:text-2xl font-bold |
leading-snug (1.35) | tracking-tight | Title Case |
| H4 | Micro-Headings & Sub-Cards | Inter (font-sans) | text-base sm:text-lg font-bold |
leading-snug (1.375) | tracking-normal | Sentence Case |
| Kicker | Skewed Slash Kickers & Telemetry | System Monospace (Consolas / SF Mono) | font-mono text-xs sm:text-[13px] font-medium |
leading-normal (1.5) | tracking-wider | Uppercase |
Viewfinder Clamps & Laser Accents
// Flush 90° Corner Clamps
Anchored with -top-[1px] -left-[1px] w-4 h-4 border-t-2 border-l-2 border-[#ff4c24] directly on outer perimeter corners. Used on Pro tier cards, sample report drawers, and high-priority callouts.
// Precision Viewfinder Ticks
Inset corner brackets top-1.5 left-1.5 w-2.5 h-2.5 border-t-2 border-l-2 with hover scale transition. Used across 10-Engine Capabilities Cards.
Option 3: Defined Border Reticle Callout
Buttons, Badges & Status Chips
Official Action Button System
Reserved strictly for launching a scan or primary conversion. Uses pure #ff4c24 with dark obsidian ink (#121213), a 2px tactile border, and a 3px hard offset drop shadow.
bg-[#ff4c24] hover:bg-[#ff623d] text-[#121213] border-2 border-[#121213] shadow-[3px_3px_0px_#121213]
Used for routine workspace creation, form saves, invites, and clipboard actions so users never mistake data-entry saves for destructive actions.
bg-[#121213] hover:bg-stone-800 text-white dark:bg-stone-100 dark:hover:bg-white dark:text-[#121213]
Used on pricing cards, tier selection lists, secondary in-page tools, and modal options.
border border-[#ff4c24] bg-[#fff8f5] dark:bg-[#1c1715] text-stone-900 dark:text-stone-100 text-[#ff4c24]
Used for Delete, Stop Scan, and Remove actions. Stays a quiet rose outline at rest (never solid red next to #ff4c24) and fills solid rose only on hover.
border border-rose-300 dark:border-rose-800 bg-white/80 text-rose-700 hover:bg-rose-600 hover:text-white
Primary CTA Hover State Explorations (Zero-Blur)
No colored box-shadow. Razor-sharp vector edges that lift subtly with pure #ff4c24 laser brightness.
Solid directional bottom edge that depresses on click like a mechanical switch. Zero diffuse blur.
A razor-sharp 1px bright specular line illuminates around the perimeter on hover. Clean and crisp.
Translucent specular gleam sweeps diagonally across the surface like a scanner glass reflection.
100% hard vector offset shadow. Expands sharply without a single fuzzy or blurred pixel.
The button body stays completely static. The arrow pill inverts into a dark scanner housing on hover.
Terminal Blocks & DOM Snippets
Complete Purchase ($49.00)
</button>