BuildItToday · Design Studio
Layer 1 · Day Colors
Step 1 of 20 · 1a
Color Theme
Pick the 3-color palette that defines your brand.
1 / 20
Live Preview
Typography Specimen — Editorial Serif
Websites that work as hard as you do.
This is the body text in 'Inter', sans-serif. Headlines use 'Instrument Serif', serif. Every heading, button, and paragraph across your site inherits this pairing.
Heading: 'Instrument Serif', serifBody: 'Inter', sans-serif
@shadcn/ui primitivesReal-time token inheritance applied
1. Button Variants & States
Form Fields & Controls
Checkbox CheckedUnchecked
Radio Radio
Switch Toggle
Badges, Cards & Feedback
Default TagActive TagOutline Tag
⚠️System Alert / Toast Box
72% Progress
Navigation & Structure
Tab 1Tab 2Tab 3
Accordion Item — Open
Accordion Item — Closed
Breadcrumbs:Home/Products/Detail
Overlays & Dialogs
Modal Dialog✕
Dialog content with actions and description placeholder text.
SheetAlertDialogBottom Drawer
Tables & Data Display
NameStatusValue
Row 1Active$100
Row 2Active$200
Row 3Active$300
Selected component groups
Actions & Buttons: Primary ButtonForm Inputs & Controls: Text InputData Display & Typography: CardFeedback & Status: Toast NotifNavigation & Structure: TabsOverlays & Dialogs: Modal DialogTables & Data Display: Data Table