Colors
All color values are exposed as CSS custom properties and respond to the active theme and mode. Switch themes above to preview each palette.
/* Reference any color token */ background: var(--accent); color: var(--text); border-color: var(--border);
Typography
Type scale from 12px to 56px. Minimum visible text is 13px. All sizes use 4px-grid-aligned line heights.
-0.02em — Display headlines0em — Body text default0.03em — Subtle emphasisSpacing
All spacing is based on a 4px grid. Use these tokens for padding, margin, and gap throughout the system.
Buttons
Buttons communicate actions. Use primary for the single most important action, secondary for supporting actions, ghost for low-emphasis, and danger for destructive operations.
<button class="btn btn-primary btn-md">Primary</button> <button class="btn btn-secondary btn-sm">Secondary</button> <button class="btn btn-danger btn-lg">Delete</button> <button class="btn btn-primary btn-md btn-loading" aria-label="Loading"></button>
Inputs
Form controls for collecting user input. All inputs share consistent sizing, focus rings, and error states.
<div class="field"> <label class="field-label" for="email">Email</label> <input class="input" id="email" type="email"> <span class="field-hint">We won't share your email.</span> </div>
Cards
Cards group related content and actions. Use raised for emphasis, clickable for interactive cards.
Learn how to integrate Turbo Puffin into your project. Install the package, apply a theme, and start using components immediately.
Manages authentication credentials, display preferences, and notification settings for this account.
Browse the full component reference, design tokens, and integration guides.
Track breaking changes, new features, and bug fixes across every release.
Tables
Data tables for displaying structured information. Supports sorting, striped rows, and compact density.
| Name | Status | Role | Last Active | Actions |
|---|---|---|---|---|
| Astrid Nilsson | Active | Admin | 2 min ago | |
| Marcus Chen | Active | Editor | 1 hour ago | |
| Priya Sharma | Invited | Viewer | Never | |
| James O'Brien | Inactive | Editor | 14 days ago | |
| Yuki Tanaka | Suspended | Viewer | 30 days ago |
| Token | Value | Category |
|---|---|---|
| --tp-space-4 | 16px | Spacing |
| --tp-text-base | 15px | Typography |
| --accent | Theme-relative | Color |
| --radius-full | 9999px | Shape |
| --font-heading | Theme-relative | Typography |
Badges
Labels for conveying status, counts, and categorical metadata inline with content.
Alerts
Contextual feedback messages for system states, warnings, and user actions.
Modals
Dialogs for focused tasks that require user attention. Press Escape or click the overlay to close.
<div class="modal-overlay" id="my-modal"> <div class="modal modal-md"> <div class="modal-header"> <h2 class="modal-title">Title</h2> <button class="modal-close" onclick="closeModal('my-modal')">×</button> </div> <div class="modal-body">Content</div> <div class="modal-footer"> <button class="btn btn-primary btn-md">Confirm</button> </div> </div> </div>
Skeletons
Loading placeholders that mimic the layout of content being fetched. Reduces perceived loading time.
Empty States
Placeholder UI for when content is absent. Guide users toward the next meaningful action.
Code
Inline code, code blocks, and keyboard shortcut keys for technical documentation.
Use the var(--accent) token for interactive elements. Apply data-theme and data-mode to the root <html> element to activate a theme.
// Apply a theme programmatically function applyTheme(theme, mode) { const root = document.documentElement; root.setAttribute('data-theme', theme); root.setAttribute('data-mode', mode); localStorage.setItem('tp-theme', theme); localStorage.setItem('tp-mode', mode); } applyTheme('frost', 'dark');
npm install @turbopuffin/design-system
# or with yarn
yarn add @turbopuffin/design-system
Press ⌘ + K to open the command palette. Use ↑ ↓ to navigate, Enter to select, and Escape to dismiss.
Hero
Full-width page openers. Six layout variants — default solid, background image, accent overlay, split, stacked, and logo. All variants accept eyebrow, heading, subtext, CTA, and meta subcomponents.
Left-aligned text on surface background. The baseline hero: no image, no frills.
<div class="tp-hero"> <div class="tp-hero__inner"> <span class="tp-hero__eyebrow">New release</span> <h1 class="tp-hero__heading">The tools you need, none of the noise.</h1> <p class="tp-hero__subtext">Supporting description text here.</p> <div class="tp-hero__cta"> <button class="tp-btn tp-btn--primary tp-btn--md">Get started free</button> <button class="tp-btn tp-btn--ghost tp-btn--md">View demo</button> </div> </div> </div>
Full-bleed photo behind content. Pass --hero-bg: url(...) via inline style. A dark overlay is applied automatically.
<div class="tp-hero tp-hero--image tp-hero--tall" style="--hero-bg: url('/your-image.jpg')"> <div class="tp-hero__overlay"></div> <div class="tp-hero__inner"> <span class="tp-hero__eyebrow">Introducing v2.0</span> <h1 class="tp-hero__heading">Built for the way you actually work.</h1> <p class="tp-hero__subtext">…</p> <div class="tp-hero__cta">…</div> </div> </div>
Ambient accent-colored radial gradients in the background. No photo required — works purely with theme tokens. Great for product announcements.
<div class="tp-hero tp-hero--overlay tp-hero--centered"> <div class="tp-hero__inner"> <span class="tp-hero__badge">✦ Now in public beta</span> <h1 class="tp-hero__heading">…</h1> <p class="tp-hero__subtext">…</p> <div class="tp-hero__cta">…</div> </div> </div>
Two-column layout: text on the left, image/screenshot/visual on the right. Add .tp-hero--split-reverse to flip the order.
<div class="tp-hero tp-hero--split"> <!-- or tp-hero--split-reverse --> <div class="tp-hero__inner"> <div class="tp-hero__content"> <span class="tp-hero__eyebrow">Product tour</span> <h1 class="tp-hero__heading">…</h1> <p class="tp-hero__subtext">…</p> <div class="tp-hero__cta">…</div> </div> <div class="tp-hero__media"> <!-- screenshot, illustration, or video --> <img src="..." alt="..." style="width:100%;height:100%;object-fit:cover;" /> </div> </div> </div>
Centered text block above a full-width product screenshot or UI preview. The media card bleeds to the bottom edge — works great as a page opener.
<div class="tp-hero tp-hero--stacked"> <div class="tp-hero__inner"> <div class="tp-hero__content"> <span class="tp-hero__eyebrow">Now available</span> <h1 class="tp-hero__heading">…</h1> <p class="tp-hero__subtext">…</p> <div class="tp-hero__cta">…</div> </div> <div class="tp-hero__media"> <!-- full-width screenshot --> <img src="..." alt="App preview" style="width:100%;height:100%;object-fit:cover;object-position:top;" /> </div> </div> </div>
Centered logo mark above headline. Use for product launches, landing pages, or app homescreens where the brand itself is the hero.
<div class="tp-hero tp-hero--logo tp-hero--centered"> <div class="tp-hero__inner"> <div class="tp-hero__logo-mark"> <!-- your logo SVG or img --> </div> <h1 class="tp-hero__heading">Product Name</h1> <p class="tp-hero__subtext">…</p> <div class="tp-hero__cta">…</div> </div> </div>
.tp-heroBase — solid surface bg, left-aligned.tp-hero--centeredCenter-aligns all content.tp-hero--imageFull-bleed bg photo via --hero-bg: url(...).tp-hero--overlayAccent radial gradient wash — no photo needed.tp-hero--splitTwo-column: text left, media right.tp-hero--split-reverseTwo-column: media left, text right.tp-hero--stackedCentered text above full-width media card.tp-hero--logoCentered logo mark + headline for brand pages.tp-hero--compact48px vertical padding (interior pages).tp-hero--tall140px vertical padding (homepage openers)