This shows exactly what the Components tab renders when a user has a palette selected. Each section shows the component styled with the design system tokens.
All button variants rendered with palette colors. Shown at actual size.
Sizes:
smlgStates: hover, focus ring, disabled (50% opacity), loading (spinner)
Text fields, textareas, selects. Border color from palette border token, focus ring from primary.
Default
With error
Invalid email format
Disabled
Surface background, border from palette. Three variants shown side by side.
bg-surface, border-border, rounded with palette borderRadius
Same as default + shadow from palette shadowStyle
Hover: shadow increases, border turns primary/30
Small labels using palette semantic colors at 10% opacity background.
Full-width alert banners using semantic colors. Left border accent + tinted background.
Heading font, body font, mono font. Rendered at each step of the type scale.
Body text (16px, Inter, 400, 1.6 line-height). This is how your main content will look with the selected design system.
Secondary text (14px, foregroundMuted). Used for descriptions and helper text.
Caption (12px, foregroundMuted). Used for timestamps and metadata.
Data table with header row, alternating stripe, hover states. Full palette integration.
Name
Role
Status
Jane Cooper
jane@example.com
Admin
ActiveJohn Smith
john@example.com
Member
PendingSurface background, border, shadow. Header with title, body content, footer with action buttons.
Are you sure you want to delete this project? This action cannot be undone.
Nav bar: surface background, border-bottom. Sidebar: w-64, surface bg, grouped items with icons. Tabs: border-bottom, active tab has primary underline.
Logo / Product Name
Dashboard
Settings
Profile
Progress: track in muted bg, fill in primary. Avatars: circle with initials or image. Tooltips: dark bg with white text on hover.
Upload progress: 67%
primary fill on muted track
The iPhone frame renders at 390 x 844px (iPhone 14 proportions) scaled to fit the preview panel. At 60% scale, that is roughly 234 x 506px. The frame includes status bar, navigation bar, and home indicator.
iPhone Frame (scaled)
Font: SF Pro (system-ui) instead of palette heading/body fonts
Navigation: Large title nav bar with back chevron
Tab bar: Bottom with SF Symbol icons + labels
Lists: Grouped cells with disclosure chevrons (no cards)
Toggles: iOS-style switches (not checkboxes)
Corners: Continuous (squircle), not standard border-radius
Modals: Sheet from bottom (not centered overlay)
The preview panel is roughly 500-700px wide (60% of viewport).
iPhone frame at 60% scale = 234px wide. Fits easily.
In the Screens tab, 3 frames side by side = 3 x 234px = 702px. Tight but fits.
Components tab: phone frame scrollable vertically. All components stack inside.
Click to expand: opens full-size (390x844) in a modal overlay.
The Android frame renders at 412 x 892px (Pixel 7 proportions) scaled to fit. At 60% scale, roughly 247 x 535px. Includes status bar, Material TopAppBar, and gesture navigation bar.
Android Frame (scaled)
Font: Roboto / Google Sans instead of palette fonts
Top App Bar: Material 3 large or medium
FAB: Floating action button in bottom-right corner
Bottom Nav: 3-5 destinations with Material icons + labels
Cards: Surface tint elevation (Material 3 tonal system)
Inputs: Outlined or filled text fields (Material spec)
Chips: Material filter/input chips instead of badges
Switches: Material 3 toggle switch style
3 columns: Web (full width) | iOS (phone) | Android (phone)
4 rows: Landing | Auth | Dashboard | Settings
= 12 total thumbnails in a grid
Web thumbnails: scaled-down browser window (500px wide)
Phone thumbnails: 234-247px wide at 60% scale
Grid total width: ~500 + 234 + 247 = ~981px. Fits in preview panel.
Click any thumbnail to expand full-size in modal overlay.