6 colors. Extract from any site. Apply to every Thing. Built on shadcn/ui. Simplified to 6 extractable tokens. Things override their own brand.
Extract from any website. Map to these 6 tokens. Apply everywhere.
background
Card surface · Sidebar color
Light: 0 0% 93%Dark: 0 0% 10%foreground
Content area inside card
Light: 0 0% 100%Dark: 0 0% 13%font
Text color · Readable in both modes
Light: 0 0% 13%Dark: 0 0% 100%primary
Main CTA · Buttons
216 55% 25%secondary
Supporting actions
219 14% 28%tertiary
Accent · Was "accent"
105 22% 25%✨ Auto-Generated Variants
System creates: primary-light, primary-dark, secondary-light, etc. Ring = primary-dark.
Cards use background/foreground. Buttons use primary/secondary/tertiary.
background (gray) with foreground (white) content area
Content Area
This uses foreground color (white)
✨ Primary/Secondary/Tertiary use brand colors · Outline/Ghost are neutral variants
💎 Thing-Level Override
Each Thing (product, course, token) can define its own 6 colors. Same card structure, different brand.
thing.colors = {
background: "270 50% 92%", // Card surface (gray)
foreground: "270 50% 98%", // Content area (white)
font: "270 50% 15%", // Text color
primary: "280 100% 60%", // Purple button
secondary: "200 100% 50%", // Blue button
tertiary: "150 80% 40%" // Green button
}AI scans any website and extracts the 6 core colors
Maps to background, foreground, font, primary, secondary, tertiary
Generates CSS vars. All shadcn components adapt instantly.
States, Elevation, Radius, and Motion work together to create cohesive, interactive experiences. Every card and button inherits these properties.
Default
shadow-lgBase state with strong elevation (shadow-lg)
Hover
shadow-xlDarken 5% + elevate to shadow-xl
Focus
ring-22px primary ring with 2px offset
Active
shadow-mdDarken 7% + reduce to shadow-md
Disabled
opacity-5555% opacity + cursor not-allowed
shadow-none
Flat surfaces, nested cards
No shadow
shadow-sm
Cards, inputs, subtle depth
Subtle elevation
shadow-md
Dropdowns, active states
Medium depth
shadow-lg
Buttons, important cards
Strong depth
shadow-xl
Hover states, modals
Maximum depth
rounded-sm (6px)
Pills, badges, tight components
Small radius
rounded-md (8px)
Cards, buttons - DEFAULT
Default radius
rounded-lg (12px)
Large cards, containers
Large radius
rounded-xl (16px)
Modals, hero surfaces
XL radius
rounded-full (pill)
Avatars, circular icons
Full radius
instant (0ms)
No animation, immediate
fast (150ms)
Hovers, quick feedback
normal (300ms)
Default, component transitions
slow (500ms)
Page transitions, modals
✨ Motion Demo
Watch all timing speeds animate simultaneously
All animations use ease-in-out easing for natural feel
See how States, Elevation, Radius, and Motion work together in real components
Default Card (shadow-sm + rounded-md)
Subtle elevation, 8px corners
Elevated Card (shadow-md + rounded-md)
Medium depth, same corners
Featured Card (shadow-lg + rounded-lg)
Strong depth, 12px corners
✨ Card Formula
Card = background/foreground colors + elevation (shadow-sm/md/lg) + radius (rounded-md/lg)
Try Interactive Button
Hover: darken + shadow-xl + scale(1.02)
Active: darken more + shadow-md + scale(0.98)
Focus: 2px primary ring
Outline Variant
Same states, different visual style
✨ Button Formula
Button = brand color + elevation (shadow-lg → xl → md) + radius (rounded-md) + motion (150ms ease-in-out)
3 colors adapt (background, foreground, font) · 3 stay constant (primary, secondary, tertiary)
Light Mode
0 0% 93%Dark Mode
0 0% 10%Light Mode
0 0% 100%Dark Mode
0 0% 13%Light Mode
0 0% 13%Dark Mode
0 0% 100%primary
216 55% 25%Main CTA buttons
secondary
219 14% 28%Supporting actions
tertiary
105 22% 25%Accent actions
A typographic system rooted in humanist forms and consistent rhythm. Use the documented scale—never improvise.
56px / 3.5rem · line-height 1.1 · Hero statements
40px / 2.5rem · line-height 1.2 · Section titles
28px / 1.75rem · line-height 1.3 · Card titles
20px / 1.25rem · line-height 1.5 · Supporting copy
16px / 1rem · line-height 1.7 · Paragraphs
14px / 0.875rem · line-height 1.6 · Metadata & labels
Use `max-w-prose` for copy blocks. Avoid center-aligned paragraphs longer than two lines.
Headlines use tight leading (`leading-tight`). Body copy uses `leading-7`. Increase letter-spacing for uppercase.
Mix weight sparingly: bold for emphasis, medium for actionable labels, regular for long-form reading.
Always include smart quotes, en/em dashes, and proper apostrophes in editorial content.
Grid systems, gutters, and container rules keep experiences aligned and effortless to scan.
Content
max-w-3xl · 48px section padding
Articles, docs, knowledge
Application
max-w-5xl · 64px section padding
Dashboards & workflows
Wide
max-w-6xl · responsive gutters
Data dense screens
Fluid
full width · clamp(24px, 5vw, 80px)
Marketing & storytelling
Grid Example
Each column aligns to 72px at desktop with 24px gutters. Collapse to two columns on tablet, one on mobile.
Components combine tokens, layout, and interaction rules. Build new experiences by composing, not reinventing.
Atomic → Pattern → Experience
Compose experiences from documented atoms. Never duplicate markup when a primitive exists.
Statefulness Baked In
Every component ships with hover, focus, active, loading, and disabled states out of the box.
Content-Aware Layouts
Components adapt to variable content through flexible spacing, min/max widths, and responsive typography.
Button Variants
Primary (blue), Secondary (gray-blue), Tertiary (green) use brand colors · Outline/Ghost are neutral
Card anatomy
Every interaction respects purpose, speed, and inclusivity. Design emotionally confident interfaces that everyone can use.
Visible Focus
Focus states use a 2px outline with primary color and 2px offset. Never remove focus for aesthetics.
Purposeful Motion
Pair animations with motion tokens and respect `prefers-reduced-motion`. Motion should communicate spatial change.
Immediate Feedback
Hover within 80ms, active within 40ms, and show result states or loaders within 200ms.
Try hovering and clicking - feedback is instant (150ms transition)
Contrast AA+
Maintain 4.5:1 contrast for body text and 3:1 for large headings. Validate all token combinations.
Readable Typography
Limit line length to 60–70 characters, set body copy to leading-7, and avoid center-aligned paragraphs over 3 lines.
Motion Preferences
Wrap transitions in `motion-safe` classes and provide alternatives like color or elevation for motion-reduced users.
Design and engineering stay in lockstep through shared tooling, documentation, and QA rituals.
Step 1
Tokens as Source of Truth
Update Tailwind config and CSS variables first. UI code must consume tokens—not hard coded values.
Step 2
Composable Primitives
Extend components via props and slots. If structure diverges, create a new primitive and document it here.
Step 3
Design QA Loop
Pair every UI change with screenshots, contrast checks, and accessibility notes before merging.
:root {
--color-primary: 216 55% 25%;
--color-primary-foreground: 36 8% 96%;
--color-surface: 36 8% 88%;
--color-accent: 105 22% 25%;
--space-2: 0.5rem;
--space-4: 1rem;
--radius-md: 12px;
--shadow-md: 0 14px 32px -18px hsl(216 55% 25% / 0.32);
--ease-snappy: cubic-bezier(0.4, 0, 0.2, 1);
}
Tokens sync to Tailwind via `theme.extend`. Run `pnpm lint && pnpm test` before release.
Ship with intention. Every commit should strengthen clarity, trust, and velocity. When in doubt, return to the tokens, principles, and checklists above—or propose updates so the system evolves together.