components.*Components
Live interactive demos with token annotations. Every component is assembled from the Design Better token set — no hardcoded values outside this file.
01 — Buttons
Sizes — Primary
color.brand.signalcolor.brand.signal-brightcolor.text.primarycolor.bgmotion.duration.fast02 — Form controls
Text input
Please enter a valid email address.
Select menu
Textarea
Checkbox · Radio · Toggle
Email notifications
Download automatically
color.brand.signalcolor.border.subtlecolor.surface.raisedcolor.text.primarycolor.text.dimcolor.error03 — Badges & Tags
Content type
PodcastVideoNewsletterBook
Status
NewFeaturedFree
Tags (click × to dismiss)
Design leadershipSystems thinkingProduct designCareer growth
Count badge
31299
color.content-type.podcastcolor.content-type.videocolor.content-type.newslettercolor.content-type.bookcolor.brand.signalborderRadius.pill04 — Alerts & Feedback
New episodes available
Three new episodes have been added to your playlist since your last visit.
Subscription confirmed
You're now subscribed to Design Better. Your first issue arrives Tuesday.
Your trial ends soon
Your free trial expires in 3 days. Upgrade to keep full access.
Payment failed
We couldn't process your card. Please update your payment method.
color.podcast-fg/bgcolor.newsletter-fg/bgcolor.book-fg/bgcolor.video-fg/bg05 — Navigation patterns
Tabs
Breadcrumb
Pagination
…
color.brand.signalcolor.border.subtlecolor.text.primarycolor.text.faintcolor.surface.raised06 — Content cards
color.surface.raisedcolor.surface.hovercolor.video-fg/bgcolor.podcast-fg/bgfont.displayfont.editorialmotion.duration.normal07 — Quotes & Attribution
Pull quote
“Good design is the quiet confidence of something that has removed everything unnecessary.”
Testimonial
“Design Better changed how I think about craft. Every episode leaves me with something actionable.”
SR
Sara Rodriguez
Design Lead · Stripe
Byline
AW
Aarron Walter
Co-founder, Design Better · May 18, 2026
font.editorialcolor.brand.signalfont.displayfont.monocolor.text.dimcolor.text.faint08 — Marketing patterns
Feature rows
◈
Structured for depth
Every episode goes past the surface. We unpack process, tradeoffs, and the thinking behind the work.
◎
From practitioners, not pundits
Guests are the people doing the work — not talking heads. Real projects, real decisions, real outcomes.
color.brand.signalfont.displaycolor.surface.raisedcolor.border.subtlefont.editorial09 — Avatar & Identity
Initials — sizes
AW
AW
AW
EW
JL
MK
Presence indicators
AW
SR
JL
Avatar stack
AW
SR
JL
MK
System photo avatars
/avatars/avatar-01.png → avatar-12.png
color.brand.signalcolor.presence.onlinecolor.presence.awaycolor.presence.offlinecolor.bg.ink10 — Disclosure & Overlay
Accordion
We publish new episodes on a bi-weekly schedule, with bonus content and newsletter issues filling the weeks in between. Paid members get early access.
Tooltip (static demo)
Opens in new tab
Dropdown menu (static open state)
color.surface.raisedcolor.border.subtlecolor.border.strongcolor.text.primarycolor.text.dimcolor.error11 — Data display
Table
| Episode | Guest | Date | Duration |
|---|---|---|---|
| Frank Chimero on design problems | Frank Chimero | May 2026 | 48 min |
| The craft of simplicity with Jason Fried | Jason Fried | Apr 2026 | 52 min |
| Systems thinking at Figma | Rasmus Andersson | Apr 2026 | 41 min |
Divider variants
or continue with
color.border.subtlecolor.surface.raisedcolor.text.primarycolor.text.dimcolor.text.faintfont.mono12 — Loading & Progress
Progress bar
Progress30%
Progress75%
Skeleton loaders
Spinners
color.brand.signalcolor.surface.raisedcolor.border.subtlemotion.duration.normalmotion.easing.standard13 — Stat blocks
Single stat
Episodes published
Single stat — with suffix
,,+
Total downloads
Stat group
font.displaycolor.text.primarycolor.text.dimcolor.brand.signalcolor.surface.raisedmotion.easing.standard14 — Frosted nav
—position: sticky; top: 0; backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: ...
—Background: rgba(10,10,10,0.85) dark · rgba(245,242,236,0.85) light — 0.85 opacity minimum
—CTA: pill radius · signal orange bg · dark text (#0A0A0A) — never white on signal
—Nav links: body font · 14px · text-2 · hover text-1 · 120ms transition
color.brand.signalcolor.brand.inkcolor.border.subtlemotion.duration.fastmotion.easing.standard15 — Logo grid
Design Better subscribers work at
Source: 2025 listener survey · 235,000+ subscriber list analysis
—Text wordmarks when SVG unavailable: display font · weight 500 · 13px · text-3 → text-1 on hover
—Image logos: filter: brightness(0) invert(0.95) dark · brightness(0) light — never full-color
—Grid: auto-fill · minmax(100px, 1fr) · gap 4px vertical / 16px horizontal
—Label: mono · 11px · uppercase · 0.12em tracking · text-3 · centered
font.displayfont.monocolor.text.dimcolor.text.faintmotion.duration.normal16 — Key-value card
American Giant
Bonus episode + always-on mid-roll campaign
Goal
Drive brand awareness and trust for premium made-in-America apparel.
Format
1-hour bonus episode with the founder, followed by a host-read mid-roll campaign with a discount code across the full catalog.
Outcome
Strong audience response on social and direct listener feedback to the hosts.
"Thank you for making time to offer an episode that honored the manufactured and tactile roots in my love of design."
Carlo Blackmore · listener
—Eyebrow: signal-text · mono · 11px · uppercase · 0.12em tracking
—Key column: mono · 11px · uppercase · 0.08em tracking · text-3 · fixed 80px
—Value column: body font · 15px · text-2 · 1.5 line-height
—Blockquote: border-left 3px #FF4725 · editorial italic · 16px · text-1 — no outer border on card
—Hover: surface-2 bg + translateY(-2px) · 240ms standard easing
font.displayfont.editorialfont.monocolor.brand.signalcolor.surface.raisedmotion.duration.normal