A design system that sparks joy

Delightful draws from neo-brutalist typography and warm editorial design. Every decision serves both comprehension and delight. Color is used confidently. Motion earns its place and makes you smile.

Warm Boldness

Cream backgrounds, near-black text, generous whitespace. Bold 2px borders and solid shadows create depth. Typography drives hierarchy through size, weight, and confidence.

Neo-brutalist · Editorial warmth

Confident Color

Three brand colors — pink for energy, gold for warmth, cyan for cool balance. Green for success. Red for danger. Color is used with purpose and joy, never timidly.

Intentional · Maximum impact

Neo-Brutalist Expression

Playful and confident. Spring-based motion under 240ms. Solid shadows everywhere. Every interaction should feel satisfying, like a physical button press.

Tactile · Controlled delight

What we do

Warm cream base

Not pure white, not cool. OKLCH cream-tinted backgrounds that feel like sunlight on paper.

Typography-driven hierarchy

Size, weight, spacing — Inter at 800 weight for headings. Visual order through confidence.

Solid shadows everywhere

Zero-blur offset shadows in black or brand colors. Every element has tactile depth.

Motion with purpose

Sub-240ms springs for movement. CSS ease-out for color. prefers-reduced-motion respected.

What we avoid

Gradients & glassmorphism

No frosted glass aesthetics, no gradient backgrounds, no heavy decoration.

Rainbow palettes

Three brand colors — pink, gold, cyan. Green for success, red for danger. That's it.

Generic SaaS energy

No cookie-cutter templates. Every interface should feel crafted for its context.

Placeholder text

Real content always. No lorem ipsum. Words carry meaning and inform design.

02 — Color System

oklch color tokens

Every color defined in oklch — perceptually uniform, wide-gamut ready. Click any swatch to copy its value.

Neutral Scale — Warm (hue ~70°)

100

150

200

300

400

500

600

700

800

900

950

Accent Families

Pink — Actions (350°)

pink-100

oklch(0.920 0.060 350)

pink-200

oklch(0.840 0.140 350)

pink-300

oklch(0.720 0.220 350)

pink-400

oklch(0.640 0.270 350)

pink-500

oklch(0.560 0.280 350)

Red — Emphasis (20°)

red-100

oklch(0.930 0.050 20)

red-200

oklch(0.850 0.110 20)

red-300

oklch(0.720 0.180 20)

red-400

oklch(0.620 0.220 20)

red-500

oklch(0.540 0.230 20)

Gold — Highlight (85°)

gold-100

oklch(0.960 0.050 85)

gold-200

oklch(0.920 0.110 85)

gold-300

oklch(0.870 0.160 85)

gold-400

oklch(0.840 0.175 85)

gold-500

oklch(0.820 0.165 84)

Cyan — Brand Accent (210°)

cyan-100

oklch(0.930 0.038 210)

cyan-200

oklch(0.850 0.085 210)

cyan-300

oklch(0.740 0.125 210)

cyan-400

oklch(0.650 0.148 210)

cyan-500

oklch(0.570 0.155 210)

Green — Success (148°)

green-100

oklch(0.930 0.042 148)

green-200

oklch(0.840 0.095 148)

green-300

oklch(0.730 0.145 148)

green-400

oklch(0.630 0.170 148)

green-500

oklch(0.540 0.165 148)

Purple — Accent (300°)

purple-100

oklch(0.940 0.040 300)

purple-200

oklch(0.860 0.080 300)

purple-300

oklch(0.720 0.160 300)

purple-400

oklch(0.640 0.220 300)

purple-500

oklch(0.560 0.260 300)

Semantic Token Mapping

Token	Light	Dark	Usage
--bg-page	neutral-25	0.140 0.012 60	Page background
--bg-surface	neutral-0	0.165 0.014 60	Cards, panels
--text-primary	neutral-900	0.940 0.008 70	Body text
--text-secondary	neutral-600	0.700 0.010 70	Reduced emphasis
--accent-primary	pink-400	0.700 0.220 350	Primary actions
--accent-danger	red-400	0.680 0.190 20	Danger / emphasis
--accent-gold	gold-400	0.810 0.160 80	Highlights / warnings
--accent-cyan	cyan-400	0.720 0.140 210	Tertiary brand / cool accent
--accent-green	green-400	0.680 0.155 148	Success / positive / safe
--text-muted	neutral-500	0.560 0.012 70	Placeholder, hints
--bg-elevated	neutral-0	0.185 0.014 60	Dropdowns, popovers
--bg-muted	neutral-150	0.175 0.010 90	Skeleton, hover bg
--border-default	neutral-300	0.260 0.012 90	Default borders
--border-strong	neutral-400	0.330 0.012 90	Active borders
--border-subtle	neutral-200	0.210 0.010 90	Dividers, separators

Token Architecture

Click a color family to trace its journey from raw OKLCH primitives through semantic mapping to component tokens.

1 Primitives

Raw OKLCH values. Named by family and lightness. No semantic meaning.

maps to

2 Semantic

Theme-aware. Light and dark values hand-tuned independently.

used by

3 Component

UI-specific. Buttons, badges, toggles. Always reference semantic tokens.

Contrast Checker

Background Foreground

Sample Text

AA Pass

03 — Typography

Fluid type scale

Minor Third (1.2) ratio with clamp()-based fluid sizing. Inter variable for body, JetBrains Mono for code. Two fonts, infinite flexibility.

Type Scale

step-5 · Hero

Design with conviction

step-4 · Page title

Build interfaces that last

step-3 · Section title

Tokens drive consistency

step-2 · Subsection

Components as building blocks

step-1 · Large body

Every interaction earns its place

step-0 · Body

The best interfaces feel inevitable. They guide without announcing themselves, creating flow states where the tool disappears and only the work remains.

step--1 · Small

Metadata, captions, and supporting details that inform without competing.

step--2 · Caption

Overlines, labels, and system annotations

Inter Variable — Weight Showcase (100–900)

100Thin — The lightest expression of a thought

200ExtraLight — Barely there, almost floating

300Light — Gentle and undemanding

400Regular — The comfortable default

500Medium — Subtle emphasis emerges

550SemiBold — Labels, navigation, UI text

600SemiBold — Card titles, subsection headers

700Bold — Section titles and page headers

760ExtraBold — Hero subheadings

800Heavy — Display headlines only

900Black — Maximum impact, use sparingly

Monospace — JetBrains Mono

const tokens = {
  bg: 'oklch(0.982 0.008 70)',
  text: 'oklch(0.200 0.015 60)',
  accent: 'oklch(0.640 0.270 350)',
}; // warm boldness

Live Type Tester

Weight Size Tracking

The quick brown fox jumps over the lazy dog

Text Animations

Typewriter

--accent-primary: oklch(0.64 0.27 350);

Word Reveal

Click the hero headline above to see it replay — each word fades up with a blur-to-clear spring animation.

04 — Spacing & Layout

8px grid system

Base grid of 8px with 4px sub-grid for fine adjustments. Spacing scale from 4px to 80px.

Spacing Scale

4px

--space-1

8px

--space-2

12px

--space-3

16px

--space-4

24px

--space-6

32px

--space-8

48px

--space-12

64px

--space-16

80px

--space-20

Border Radius

6px · sm

10px · md

12px · lg

16px · xl

full

Concentric Radius Rule

Inner radius = outer radius − padding. This maintains visual consistency when elements nest inside each other.

Correct — Concentric radii

Inner: 8px = 16px − 8px

outer: 16px, padding: 8px, inner: 8px

Incorrect — Matching radii

Inner: 16px (too round)

outer: 16px, padding: 8px, inner: 16px ✗

Grid Layout Switcher

Analytics

Real-time metrics

Components

UI building blocks

Tokens

Design variables

Motion

Spring physics

Typography

Fluid type scale

Color

oklch system

05 — Components

Interactive building blocks

Every component starts from shadcn/ui primitives. Five button variants, full form elements, cards, tables, badges, and navigation — all with live micro-interactions.

Buttons

Buttons come in 8 color variants with 3 sizes. Each supports hover, active, focus, and disabled states with solid shadow micro-interactions.

Variants

Interactive State Toggle

Use the controls below to apply forced states to the demo button.

Sizes

Icon Buttons

Loading State

Button States

Static demonstration of the five interactive states applied to the primary button variant.

Default

Hover

Active

Focus

Disabled

Button CSS Variables

/* Button tokens */
--btn-py: var(--space-2);
--btn-px: var(--space-5);
--btn-gap: var(--space-2);
--btn-primary-bg: var(--accent-primary);
--btn-primary-text: var(--text-on-accent);
--btn-danger-bg: var(--accent-danger);
--btn-danger-text: var(--text-on-accent);
--btn-gold-bg: var(--accent-gold);
--btn-gold-text: var(--text-on-gold);

Form Elements

Text inputs, selects, textareas, multi-select tags, and date pickers. Each supports default, focus, error, and disabled states.

Input State Toggle

Toggle forced states on the demo input below.

Text Inputs

Full name

Email address

Error state

Please enter a valid email address

Disabled

Select, Date & Tags

Date

Project type

Cards

Three card variants: default, featured (pink accent), and featured-cyan. Interactive cards lift on hover with shadow escalation.

Design Tokens

Centralized design decisions expressed as data — colors, typography, spacing, motion.

47 tokens · Updated today

Component Library

Production-ready building blocks built on shadcn/ui with Radix primitives.

24 components · v3.0

Animation System

Spring-based motion, scroll-driven effects, and signature interactions.

10 prototypes · Stable

Card CSS Variables

/* Card tokens */
--card-padding: var(--space-6);
--card-radius: var(--radius-md);
--card-bg: var(--bg-surface);
--card-border: var(--border-default);
--card-shadow: var(--shadow-md);
--card-shadow-hover: var(--shadow-lg);
--card-featured-bg: var(--accent-primary-subtle);
--card-featured-border: var(--accent-primary);

Data Table

Sortable, selectable data table with row highlighting. Click column headers to sort, checkboxes for bulk selection.

Component	Status	Variants	Last Updated
Button	Stable	5	Feb 22, 2026
Input	Stable	4	Feb 20, 2026
Card	Stable	3	Feb 18, 2026
Toast	Beta	4	Feb 22, 2026
Drawer	Draft	2	Feb 15, 2026

Badges

Status indicators in 6 color variants with optional dot prefix. Pop animation on mount for attention.

Production Draft Active Stable New Breaking With Dot

Badge CSS Variables

/* Badge tokens */
--badge-py: var(--space-1);
--badge-px: var(--space-3);
--badge-radius: var(--radius-full);
--badge-font-size: var(--ui-text-2xs);
--badge-pink-bg: var(--accent-primary-subtle);
--badge-pink-text: var(--accent-primary-text);
--badge-gold-bg: var(--accent-gold-subtle);
--badge-gold-text: var(--accent-gold-text);

Divider

Horizontal rules for separating content sections. Strong and subtle variants, plus a text-inset option for labeled breaks.

Content above the divider

Subtle divider (default)

Strong divider

or continue with

Divider with inline text

Segmented Control

Mode-switching control for toggling between mutually exclusive views. Distinct from tabs — used for filtering or display mode, not navigating between content panels.

Notification Badge

Count overlay for avatars and icon buttons. Uses danger red for urgency, tabular-nums for stable width as counts change.

Dropdown Menu

Contextual action menus using the Popover API. Supports keyboard navigation (arrow keys), grouping with labels, separators, and danger items.

Navigation

Sidebar with icon items, horizontal tabs, breadcrumb trails, and numeric pagination. All patterns use active-state highlighting.

Sidebar

Tabs

Breadcrumbs

Home/Design System/Components

Pagination

Popover / Dropdown

Lightweight menus and contextual content using the native Popover API. No JS needed for basic show/hide — just popovertarget.

Accordion

Collapsible disclosure sections using native <details>/<summary> elements. Fully accessible with keyboard support built-in.

What is the Delightful Design System?

A comprehensive design system built with OKLCH color, neo-brutalist aesthetics, and modern CSS features. Every token, component, and interaction is designed to spark joy.

How are colors defined?

All colors use the OKLCH color space exclusively. The 3-tier token architecture maps raw primitives to semantic tokens to component-level values, ensuring perceptual consistency across the palette.

Does it support dark mode?

Yes. Dark mode uses warm amber-tinted backgrounds with adjusted accent colors. The toggle cycles between light, dark, and system preference modes. All semantic tokens have dark-mode equivalents.

Stepper / Wizard

Multi-step progress indicator with connecting lines, accent colors, and checkmarks for completed steps.

Account

Profile

Preferences

Review

06 — Iconography

Lucide icon system

24px default, 1.5–2px stroke, never mix outline and filled. Below are representative icons from the Lucide library.

Icon Grid — 24px, stroke-width 2

home

user

settings

mail

bell

star

heart

check

plus

arrow-left

arrow-right

chevron-down

minus

code

terminal

palette

layers

zap

eye

lock

globe

Size Comparison

16px

20px

24px

Icon + Text Alignment

Icons should vertically center with text. Use inline-flex with align-items:center for consistent alignment across sizes.

Dashboard — 16px icon with small text

Settings — 20px icon with body text

Performance — 24px icon with heading text

07 — Motion & Easing

Duration and easing tokens

Default: no motion. Motion only for users who haven't opted out. Under 240ms for most interactions.

Duration Tokens

100msInstant

160msFast

240msBase

360msSlow

500msDeliberate

Easing Curves

ease-out · cubic-bezier(0.16, 1, 0.3, 1)

Color and opacity transitions

ease-bounce · cubic-bezier(0.34, 1.56, 0.64, 1)

Toggle, checkbox, playful bounces

ease-smooth · cubic-bezier(0.22, 1, 0.36, 1)

Entrance animations, hover lifts

ease-slam · cubic-bezier(0.55, 0.06, 0.68, 0.19)

Hard stops, dismissals, stamp-like impacts

ease-elastic · cubic-bezier(0.68, -0.55, 0.265, 1.55)

Springy overshoots, playful entrances

Spring Physics Comparison

Snappy · 500/30

Buttons, toggles

Standard · 400/35

Modals, cards

Gentle · 300/28

Large elements

Motion Guidelines

Use ease-out for...

Color changes, opacity fades, border transitions. Anything that responds immediately and decelerates naturally.

100–160ms · CSS transitions

Use ease-bounce for...

Toggle switches, checkboxes, small interactive elements. Creates playful overshooting that adds personality.

160–240ms · Spring-like feel

Use ease-smooth for...

Entrance animations, page transitions, modal reveals. Smooth deceleration creates a natural, controlled feel.

240–360ms · Entrance/exit

Never animate...

Layout shifts that cause content reflow, font-size changes, or anything that blocks user interaction. Keep the thread clear.

Avoid transform + layout simultaneously

Use ease-slam for...

Hard stops, dismissals, and stamp-like impacts. Decelerates sharply for a weighty, definitive feel.

160–360ms · Exits and impacts

Use ease-elastic for...

Springy overshoots and playful entrances. Pulls back before springing forward for lively, energetic motion.

240–500ms · Entrances and emphasis

Component Motion Recipes

Component	Entrance	Exit	Feedback
Toast	slide-slam	fling-right	confirm-thud
Modal	stamp-in	press-away	--
Card	brick-stack	trapdoor	spotlight
Alert	info-slide	press-away	error-jolt

See the full Motion System showcase for 59 named animations across 10 categories.

08 — Micro-Interactions

Feel every interaction

Button press scale, toggle spring, checkbox draw, input focus glow, error shake, success feedback — all live and interactive below.

Button Press

Scale to 0.97 on press, 1.03 on hover. Try clicking.

Toggle Switch

Spring-based knob with bounce easing.

Animated Checkbox

SVG checkmark scales in with bounce.

Check this

Focus Ring

Pink border + 3px glow ring on focus.

Error Shake

Horizontal oscillation, 240ms, ease-out.

Success Feedback

Scale-in checkmark, 160ms.

09 — Loading & Transitions

Skeleton loading and staggered reveals

Shimmer and pulse skeleton patterns for loading states. Staggered content reveals with spring physics.

Skeleton Loading

Shimmer and pulse placeholder patterns for content loading states. Toggle between animation modes or load real content.

Simulated Page Transition

A contained frame simulating crossfade and slide page transitions. In production, use the CSS View Transitions API.

Dashboard Overview

View your project metrics, team activity, and recent deployments.

Team Settings

Manage team members, roles, and workspace preferences.

Staggered Entry

Three spring configs at different stiffness/damping. Watch how they feel different.

Snappy (500/30) · 30ms delay

Analytics

Reports

Settings

Profile

Standard (400/35) · 50ms delay

Analytics

Reports

Settings

Profile

Gentle (300/28) · 80ms delay

Analytics

Reports

Settings

Profile

10 — Overlays & Feedback

Toasts, modals, drawers, alerts

Spring-powered overlays with stack management, swipe-to-dismiss, and progress-based auto-dismiss.

Toast Notifications

Stackable notifications in four severity levels. Auto-dismiss with progress indicator, swipe to dismiss on touch.

Modal & Drawer

Spring-animated overlays using the native dialog element. Modal centers content with backdrop blur; drawer slides from the right edge.

Alert Banners

A new version of the design system is available with improved tokens.

All components passed accessibility audits with WCAG AA compliance.

Some tokens are deprecated and will be removed in the next major version.

Scheduled maintenance window: Saturday 2am–4am UTC. No downtime expected.

Build failed: 3 type errors found in component library. Check logs for details.

Animation system v0.4.5 now available with spring physics and gesture support.

Progress Bars

Track-and-fill bars with brand color variants. 2px solid borders, full-radius tracks, smooth transitions.

Design Tokens92%

Component Library68%

Documentation45%

Test Coverage78%

Avatar

Initials-based avatars with accent color variants and an overlap group pattern. Uses control height tokens for consistent sizing.

Avatar Group

Tooltip

Minimal floating labels that appear on hover or focus. Pure CSS — no JavaScript required.

Empty State

Centered placeholder for zero-data screens with icon, title, description, and optional CTA.

No results found

Try adjusting your search or filter criteria to find what you're looking for.

Code Block — Warm Syntax

Dark code blocks with pink keywords, gold strings, cyan functions, and green numbers. Warm neutral background with solid shadow.

const createToken = (name, value) => {
  const token = {
    name: `--${name}`,
    value: value,
    tier: 2,
    immutable: true,
  };
  // Register in the design system catalog
  return Object.freeze(token);
};

Command Palette

A searchable command palette for quick navigation. Press the button or use ⌘K to open.

11 — Signature Effects

The last 2% of polish

Distinctive interactions that define the brand. Each effect pushes boundaries while staying tasteful.

Blur Focus Grid

Hover any card. Siblings blur gently, creating depth-of-field focus. Pure CSS — no JavaScript.

Analytics Dashboard

Real-time metrics visualization with interactive filtering and drill-down capabilities.

Production

Design Token Pipeline

Automated generation from Figma variables to CSS custom properties via Style Dictionary.

Active

Component Storybook

Interactive documentation with visual testing, accessibility audits, and usage examples.

Beta

Marketing Site

Brand-forward landing pages with scroll-driven narratives and view transitions.

Planning

Magnetic Button

The button pulls toward your cursor within a 120px range.

Bonus — Sample Compositions

Components in context

Full page layouts demonstrating how components work together in realistic contexts.

Bento Grid

Design System

OKLCH tokens, neo-brutalist components, and signature interactions — all in one self-contained file.

v0.4.5

Color Primitives

Token Tiers

Motion System

5 duration tokens, 5 easing curves, scroll-driven animations, spring physics, and 59 CSS animations.

Color Families

OKLCH Only

No hex, no rgb, no hsl. Perceptually uniform color throughout.

Dashboard

2,847

Active Users

94.2%

Uptime

1.2s

Avg Load

Recent Activity

Button component updated to v3.02m ago

New color tokens added for data viz1h ago

Motion prototype review scheduled3h ago

Profile

Alex Morgan

Design Systems Engineer

Admin Pro

Components

156

Tokens

Prototypes

Activity Timeline

Published v3.0 of the component library

2 hours ago

Merged dark mode token refinements

Yesterday

Added signature effects prototypes

3 days ago

Initial design system architecture

1 week ago

Settings

Appearance

Dark mode

Reduce motion

High contrast

Notifications

Email notifications