Crackle Design System
The living reference for the orchestrator UI — the brand mark, the tokens that drive every screen, and the components built from them.
Foundations
Brand & logo
The Crackle mark is an open “C” arc with a terracotta spark flying off its opening — the crackle. White stroke, round caps, always on a dark tile so the stroke reads. Hover any mark to fire the crackle.
The mark, at every scale
Lockup
Rules
Foundations
Color
Click any swatch to copy its --var. The dashboard runs on the warm neutral + terracotta ramps; the landing/marketing surface runs on the dark brand set.
Neutrals — warm greys
Text, borders, surfaces. Body copy is --n-800, secondary --n-500, hairlines --n-100.
Primary — Crackle terracotta
--p-500 #c93a2b is the brand. Tints (--p-50) for active/selected states; shades (--p-700) for hover.
Semantic
Data-viz series
Ordered categorical series for charts. Series 1 is the brand terracotta so single-series charts stay on-brand.
Dark brand — landing surface
Includes the trading up/down/warn signals used on the landing hero (--t-up / --t-down / --t-warn).
Foundations
Themes — light & dark
Use the toggle in the sidebar to flip this whole guide. The dashboard ships light-only today; the landing surface is fully dual-themed (.lp[data-theme]) with dark as the canonical default — “Charcoal Trading.” Both palettes below are the real --lp-* values from landing.css.
Accent (#c93a2b) is theme-invariant. The trading greens/reds darken in light mode for contrast on cream — the only semantic colors that shift between themes.
Foundations
Typography
Inter for everything UI; JetBrains Mono for numbers, IDs, and code. Numerics are always tabular-nums so columns align.
Foundations
Elevation, radii & spacing
Four soft, warm-tinted shadow steps. Cards sit at --sh-1; popovers/toasts at --sh-3; modals at --sh-4.
Shadows
Radii
Spacing scale
4-based scale — 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48 · 64. Component padding lands on 8/16/24; section padding on 48/64.
Foundations
Motion
Hover a card to run its easing. UI transitions use --ease-out at 120–200ms; expressive brand motion (landing, the logo) uses --ease-expo at 280–480ms.
Durations — instant 120 · snap 180 · base 280 · slow 480 · ambient 720ms. Stagger — tight 30 · base 40 · loose 80ms.
Components
Forms
Focus ring is the primary tint — border --p-500 + 3px --p-50 halo. Click a field to see it.
Components
Badges & chips
Status badges are mono, pill-shaped, tinted-on-tint. Filter chips carry a dismiss affordance.
Components
Data & tables
Numbers are mono + tabular so they align. Deltas use semantic up/down.
| Campaign | Channel | Status | Spend | Installs |
|---|---|---|---|---|
| Summer install push | App | live | ₹642,100 | 24,880 |
| Retarget — cart | App | syncing | ₹318,400 | 12,004 |
| Brand lift Q3 | App | pending | ₹324,400 | 11,317 |
Meta
Sources of truth
This guide is a mirror, not the definition. When a value here disagrees with code, code wins — fix this file in the same PR.
• Dashboard tokens (light): docs/orchestrator/assets/mockups/tokens.css
• Brand / landing tokens (dark) + motion: code/backend/resources/js/lib/brandTokens.ts ↔ code/backend/resources/css/landing.css
• The logomark: code/backend/resources/js/components/icons/LogoCrackle.vue + code/backend/public/favicon.svg
Known drift (2026-07-01): the live Vue app does not yet consume these tokens globally — --p-*/--n-* are defined only inside resources/css/wizard.css (scoped to .wizard-root), Tailwind maps only fonts, and ~160 components hardcode hex. Wiring a global :root + Tailwind color scale so components draw from these tokens is the outstanding follow-up.