Components

Welcome to TailspinSign UpLogin

Accordion

Disclosure groups with expand and active states.

Alerts

Subtle, callout, and promotional banners.

Heads up

The generated scale is anchored at shade 500 across every hue.

Saved

Your changes are live — paste the @theme block to share.

Heads up

Dark inputs may lift the entire scale toward 700+ on output.

Out of gamut

We bisected chroma so this shade is reproducible in sRGB.

Promotional banner — try the new copy-as-theme export.

Badge

Solid, soft, and outline pills across the palette.

Solid

BadgeBadgeBadgeBadgeBadgeBadge

Soft

BadgeBadgeBadgeBadgeBadgeBadge

Outline

BadgeBadgeBadgeBadgeBadgeBadge

Buttons

Default, hover, active, and disabled states.

Primary
Secondary
Ghost

Cards

Client list with menus and status pills.

  • Tuple
    Last invoice
    Amount
    $2,000.00
    Overdue
  • SavvyCal
    Last invoice
    Amount
    $14,000.00
    Paid
  • Reform
    Last invoice
    Amount
    $7,600.00
    Paid

Form

Inputs, select, checkbox, and toggle.

Scale

Generated 50–950 from your hex, anchored at 500.

Steps

Multi-step navigation in the new color.

Table

Data table with header tint, hover rows, and status pills.

NameTitleRoleStatusEdit
Lindsay Walton
lindsay@example.com
Front-end DeveloperMemberActiveEdit
Courtney Henry
courtney@example.com
DesignerAdminActiveEdit
Tom Cook
tom@example.com
Director of ProductMemberInvitedEdit
Whitney Francis
whitney@example.com
CopywriterAdminInactiveEdit

Tabs

Section navigation with selected and hover states.

A high-level look at your color system, anchored at shade 500.

Typography

Headings, body, captions, and inline accents.

A serif takes the stage

Body copy uses shade 700 for legible warmth against white. Inline links like this one sit in shade 600, with a deeper hover. Use the italic accent for emphasis instead of bold.

Captions and metadata use shade 500 — quiet but still tinted with the brand color.