Foundations
Color
One canonical palette. Cream dominates the canvas, midnight-eagle carries text and dark sections, opal is the surgical accent — its base and ramp terminus (opal/100) is the coral for CTAs, eyebrows, and buttons. Two named semantic tokens live outside the ramp: --color-accent-strong (#E25E5A) and --color-splootpack (#E25E5A, the SplootPack promo red — its deep variant #D6422A is retired, D14). The mint family — merged green + mint, adopted from Figma's middle-mint — is the soft secondary accent. Families carry Figma's 40 → 100 shade steps.
Brand color ramps — Figma 40 / 60 / 80 / 100 steps
Coded bases sit at /100; mint uses Figma’s exact values. Opal stops at 100 — its two former ramp extensions now live as named semantic tokens (--color-accent-strong, --color-splootpack), not ramp steps. Teal stays a single dark core with an opacity ramp for muted text + borders.
The Midnight Eagle theme mode (see Theme modes) layers on two more solid steps as surface tokens — not part of the public brand-core ramp above, only in play when [data-theme="midnight-eagle"] is active:
Two former ramp members live on outside the public ramp: #E25E5A backs --color-accent-strong (hover/emphasis); --color-splootpack (SplootPack promo accent) also resolves to #E25E5A — its former deep value #D6422A is retired (D14) — see the semantic table below.
Semantic aliases — use these in components
Tailwind tokens (mirrored in each page's tailwind.config)
sploot-teal #1B4B4B /* text, dark sections */ sploot-opal #E07A6A /* primary accent (coral = legacy alias) */ sploot-cream #F2EAE4 /* page canvas */ sploot-paper #FAF7F4 /* header & dropdown surfaces */ sploot-mint #EBF8F3 /* mint 40 — soft accent tiles */ sploot-mint-strong #7FD1B9 /* merged into the mint family */ sploot-fire #E25E5A /* opal 120 — SplootPack red */
Reconciled with Figma
This section used to carry a separate “Figma alternate” toggle. We’ve committed to one canonical palette: coded bases everywhere, with mint adopted from Figma’s middle-mint and the cream ramp absorbing Figma’s timberwolf. Code and Figma now share the same 40 → 100 step names.
Foundations
Semantic families
Role-based token families that build on the color ramps — forms, badges, status, links, and surfaces. Added to reach parity with the Figma variable set; every value resolves to a palette token.
Input · --input-*
As it appears on records.
Enter a valid email address.
Badge · --badge-{tone}-bg / -text
Status · --status-*
Link · --link-*
Surface / border · --surface-* · --border-*
Foundations
Theme modes
:root is the default light look; [data-theme="…"] re-points the semantic vars in scope. Click a mode — it's the same component, re-themed by one attribute.
One component, re-themed by a single data-theme attribute.
Foundations
Typography
New Spirit for display and headings (max weight 500 — the typeface doesn't go heavier; italics are used for accent words). Outfit for body and UI, full 300–700 range.
Scale
Families & weights
New Spirit
--font-heading
Regular 400 — body of display
Medium 500 — headings (max)
Medium Italic 500 — accent words
Outfit
--font-sans
Light 300
Regular 400 — body
Medium 500 — nav, labels
Semibold 600 — buttons
Bold 700 — eyebrows
Foundations
Spacing
A 4px base scale. Card padding lands on --space-7 (28px), large panels on --space-8 (32px), and section rhythm on 56/64px. Use the scale rather than arbitrary pixel values.
Foundations
Radius
Soft, generous corners are core to the brand. Cards sit at 18–24px, promo bands at 24–28px, and every button/chip is a full pill.
Foundations
Elevation
Shadows are soft and teal-tinted, never neutral gray. Most cards are flat until hover, then lift with --shadow-card-hover. Deep, wide shadows are reserved for the phone mockup and feature cards.
Foundations
Motion
One signature easing curve — --ease-out-expo — drives reveals and card lifts. Hovers and color shifts use a quick 0.2s. Motion respects prefers-reduced-motion.
cubic-bezier(0.16, 1, 0.3, 1)
hovers, color & border shifts
Durations
Foundations
Layout
Content is capped at --container-max (1280px, Tailwind max-w-7xl) with a 24px mobile gutter that widens to 40px on desktop (px-6 lg:px-10). Sections breathe with 56–64px of vertical padding.
--container-max
80rem
--gutter / --gutter-lg
24 / 40px
--section-pad-y
56px
Foundations
Iconography
Line icons on a 24×24 viewBox with a 1.8 stroke, round caps and joins (Heroicons-style). Icons usually sit in a rounded tile — cream with a midnight-eagle stroke, or mint/coral for accent.
<svg fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="…"/> </svg>
Using tokens
How to use
Link the token sheet (and, for components, the component sheet) in the page head — tokens first. Then reference variables instead of hardcoding brand values.
<!-- in <head>, tokens before components --> <link rel="stylesheet" href="/styles/sploot-tokens.css"> <link rel="stylesheet" href="/styles/sploot-components.css"> /* in your CSS */ .promo { background: var(--color-surface-inverse); color: var(--color-text-inverse); border-radius: var(--radius-2xl); padding: var(--space-8); box-shadow: var(--shadow-lift); }
Tailwind utility classes (e.g. text-sploot-teal/70) mirror these tokens via each page's tailwind.config. Keep the two in sync — when a value changes in sploot-tokens.css, update the config too.