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.fast

02 — Form controls

Text input

Episode search

Please enter a valid email address.

Select menu

Content type

Sort by

Episode season

Textarea

Your note

Checkbox · Radio · Toggle

Subscribe to newsletter

Download for offline

All content

Free only

Email notifications

Download automatically

color.brand.signalcolor.border.subtlecolor.surface.raisedcolor.text.primarycolor.text.dimcolor.error

03 — 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.pill

04 — Alerts & Feedback

Static alert

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.

Flash alert — one-shot attention animation

ℹ

Your export is ready. Download will start in a moment.

✓

Episode published. Changes are live.

▲

Draft has unsaved changes. Save before leaving.

Upload failed. File size exceeds 50 MB limit.

Info

Success

Warning

Error

▶Spec notes

—── Static alert ──

—Background: content-type bg token (podcast-bg, newsletter-bg, book-bg, video-bg) — never a custom tint.

—Left edge: no explicit border — background alone carries the variant signal.

—Icon: Phosphor bold weight, 18px, variant accent color. Title: body 16px / 600, accent color. Message: body 15px / text-2, paddingLeft 26px to align with title text.

—No border-radius — ever.

—── Flash alert ──

—One-shot keyframe on mount — fires once, never loops. Duration: 900ms, easing: ease-out.

—Animation peaks at 18% (≈162ms) — background and inset border flare to ~22% opacity, then decay to the 6% resting tint.

—Use CSS class 'db-flash-alert' + data-variant attribute. Never set animation properties inline.

—Left accent bar: 2px solid, variant color — no border-radius.

—To replay the animation: remount the component (change the key prop).

—Do not show more than 3 stacked flash alerts at once. If a fourth arrives, replace the oldest.

—Do not use flash alerts for persistent banners, marketing messages, or onboarding tips.

color.podcast-fg/bgcolor.newsletter-fg/bgcolor.book-fg/bgcolor.video-fg/bgmotion.duration.normal

05 — Navigation patterns

Tabs

Breadcrumb

Pagination

…

color.brand.signalcolor.border.subtlecolor.text.primarycolor.text.faintcolor.surface.raised

Content & Editorial

06 — Content cards

Video

34:28

Designing for Emotion with Jason Fried

What it looks like when a product actually cares about feeling right, not just working right.

Jason Fried•Apr 2026

Podcast

Austin Kleon on stealing like an artist

Ep. 231•54 min•Mar 2026

Newsletter#183

The case for doing less, better

Feature bloat is a design failure. This week we look at products that earned trust by saying no.

May 12, 2026

PodcastEp. 247

Frank Chimero on the shape of design problems

How constraints become creative fuel, and why the best design work feels inevitable in hindsight.

48 min•May 2026

Podcast

Ellen Lupton on typography as design material

How letterforms carry meaning beyond language, and the craft of choosing type with intention.

Ep. 219•48 min•Jan 2026

Book

Design Systems Handbook

SuperFriendly

“Form and content are inseparable — the way something is said shapes what is being said.”

color.surface.raisedcolor.surface.hovercolor.video-fg/bgcolor.podcast-fg/bgfont.displayfont.editorialmotion.duration.normal

07 — Quotes & Attribution

Pull quote

“Good design is the quiet confidence of something that has removed everything unnecessary.”
— Aarron Walter, Design Better

Testimonial

“Design Better changed how I think about craft. Every episode leaves me with something actionable.”

Sara Rodriguez

Design Lead · Stripe

Byline

Aarron Walter

Co-founder, Design Better · May 18, 2026

font.editorialcolor.brand.signalfont.displayfont.monocolor.text.dimcolor.text.faint

08 — Marketing patterns

Start designing better today

Join 230,000+ designers and leaders who get practical craft advice every week — free forever.

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.editorial

09 — Avatar & Identity

Initials — sizes

Presence indicators

Avatar stack

System photo avatars

/avatars/avatar-01.png → avatar-12.png

color.brand.signalcolor.presence.onlinecolor.presence.awaycolor.presence.offlinecolor.bg.ink

Layout & Overlay

10 — 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)

▶View episode

⎘Copy link

+Add to playlist

×Remove

color.surface.raisedcolor.border.subtlecolor.border.strongcolor.text.primarycolor.text.dimcolor.error

Data & Display

11 — 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

▶Spec notes

—Header: body · 11px · 500 · uppercase · 0.08em tracking · text-3 · borderBottom divider

—Body cell (text): body font · 15px · text-1 (primary column) or text-2 (secondary) · 12px 14px padding

—Body cell (numeric): mono · 13px · text-2 · right-aligned — always mono for scannable columns

—Negative numbers: content.video.fg (#E06060) — not red, not text-1

—Alternating rows: surface-alt on even rows — only when density requires it

—Row hover: surface-1 background · 120ms transition — add on interactive tables

—Overflow: overflowX auto on the wrapper — never truncate numbers, truncate text with ellipsis

color.border.subtlecolor.surface.raisedcolor.text.primarycolor.text.dimcolor.text.faintfont.mono

12 — Loading & Progress

Progress bar

Progress30%

Progress75%

Labeled — goal progress

Revenue goal$142K of $201K

71% — 5 months remaining

Inline — list row context

Partnerships

64%$91,400

Advertising

18%$25,700

Workshops

11%$15,700

Substack

7%$9,900

Skeleton loaders

Spinners

▶Spec notes

—Track: 4px height (default) · 6px (goal) · 3px (inline row) · divider color · no border-radius

—Fill: signal orange — use content-type color when the bar maps to a typed data series

—Label: body 13px text-2 left · mono 12px text-3 right · gap 6px below label, above bar

—Goal variant: show 'X of Y' in text-3 at half opacity after 'of' — never show raw fraction on its own

—Inline variant: 3px height · no labels · sits inside a list row between name and value columns

—Animate fill on mount: width transition 400ms standard easing

color.brand.signalcolor.surface.raisedcolor.border.subtlemotion.duration.normalmotion.easing.standard

13 — Stat blocks

Single stat

012345678901234567890123456789

Episodes published

Single stat — with suffix

0123456789.0123456789M+

Total downloads

Stat group

012345678901234567890123456789

Episodes

012345678901234567890123456789K+

Subscribers

01234567890123456789%

Satisfaction

01234567890123456789

Seasons

font.displaycolor.text.primarycolor.text.dimcolor.brand.signalcolor.surface.raisedmotion.easing.standard

14 — Frosted nav

AudienceChannelsPricing

Get in touch

▶Spec notes

—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.standard

15 — Logo grid

Design Better subscribers work at

Source: 2025 listener survey · 235,000+ subscriber list analysis

▶Spec notes

—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.normal

16 — 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

▶Spec notes

—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

17 — Selection cards

▶Spec notes

—Grid: auto-fill minmax(280px, 1fr) · 1px gap on wrapper with divider bg — creates hairlines between cells

—Default: surface-1 bg · transparent left border (3px, invisible) · 1px divider border

—Selected: surface-2 bg · 3px signal orange left border — left border always occupies 3px, prevents layout shift

—Index: mono · 11px · text-3 · top-left — gives each option a numbered identity

—Radio: 18px circle · 2px border · filled signal orange + dark center dot on selected

—Transition: background-color + border-color · 120ms ease

color.brand.signalcolor.surface.raisedcolor.surface.elevatedcolor.border.subtlemotion.duration.fast

18 — Filter pills

Active filters

RoleDesignerStageEarly careerDesign Systems

Topic selection (pick up to 3)

01 selected · pick up to 3

▶Spec notes

—Key:value pill — label: 10px · uppercase · 0.1em tracking · text-3 / value: 13px · semibold · text-1

—Value-only pill — 13px · 0.08em tracking · uppercase — used for standalone topics/tags

—Toggle variant — selected: signal orange border + 10% signal bg · deselected: divider border

—Counter: signal orange number + muted text · mono · 11px — reinforces selection constraint

—All variants share: 100px border-radius · 1px border · 5px 12px padding

color.brand.signalcolor.text.primarycolor.text.dimcolor.text.faintcolor.border.subtleborderRadius.pill

19 — Editorial step numeral

Role

01/ 04

Goal

02/ 04

Stage

03/ 04

Topics

04/ 04

▶Spec notes

—Step label: body font · 11px · uppercase · 0.14em tracking · signal orange — names the dimension being answered

—Numeral: display font (F37 Lineca) · clamp(80px, 12vw, 120px) · weight 800 · -0.02em tracking · text-1

—Counter: body · 13px · text-3 · positioned absolute top-right of numeral block

—Grid: auto-fill minmax(160px, 1fr) · 1px gap divider technique — stays 4-up on wide, 2-up mid, 1-up mobile

—Used as wayfinding in multi-step flows — not decorative; always pairs with a question or content section

font.displaycolor.brand.signalcolor.text.primarycolor.text.faintcolor.surface.raised

20 — Pullquote

Standard — left rule

"Design is not just what it looks like and feels like. Design is how it works."
— Steve Jobs · Co-founder, Apple

Signal panel — editorial feature

"I've always been interested in this intersection of Science and Engineering and art and the humanities."
— Andrew Evans · Founder, The Magic Patio

▶Spec notes

—Standard variant: 3px signal orange left rule · 24px padding-left · max-width 640px

—Quote text: editorial italic · 22px · 1.45 line-height · text-1 — use font-editorial if available, else display

—Attribution: body · 11px · uppercase · 0.12em tracking · text-3 · em-dash prefix · Name · Title format

—Signal panel variant: signal orange bg · display font (not italic) · 24px · ink (#0A0A0A) text — high-impact editorial moments only

—Attribution on signal panel: ink at 55% opacity — never pure white on signal orange

font.editorialfont.displaycolor.brand.signalcolor.brand.inkcolor.text.primarycolor.text.faint

Analytics

21 — KPI card

Dashboard grid — 4 cards

Revenue YTD

$142,800

↑ 18% vs last year

Expenses YTD

$38,540

64% of annual budget

Net Income

$104,260

72.9% margin

Goal progress

71%

$201K annual target

Negative value treatment

Net change

+$8,200

Month over month

Refunds

-$1,340

3 transactions

Overdue

-$4,000

Invoice #0041

Runway

14 mo

At current burn rate

▶Spec notes

—Label: mono · 11px · 500 · uppercase · 0.10em tracking · text-3 — never display font

—Value: mono · 26px · 700 · text-1 · -0.02em letter-spacing · line-height 1

—Negative values: content.video.fg (#E06060) — not arbitrary red, not text-1

—Sub-label: body · 12px · text-3 — trend, context, or timeframe only; one clause max

—Card surface: surface-1 · 0 border-radius · borderTop 2px divider-color — use signal orange top border for featured metric

—Grid gap: 2px between cards reads as a hairline grid on a dark bg — preferred over border on each card

—Never put currency symbols in the label — put them in the value string

font.monocolor.text.primarycolor.content.video.fgcolor.surface.raisedcolor.border.subtle

22 — Data visualization

Sequential chart palette — always apply in this order

S1Signal#FF4725

Primary series · revenue · key metric

S2Podcast#9D90F8

Second series · categorical

S3Newsletter#4DB87A

Third series · positive trend

S4Video#E06060

Fourth series · negative / warning

S5Amber#C8973A

Fifth series · caution / neutral

S6Teal#0D8880

Sixth series — extended use only

Chart type selection

Bar — compare discrete categories

Max 6 categories · always baseline 0 · border-radius 0

Line / area — trends over time, multi-series

Podcast

Newsletter

Max 4 series · area fill at 12–18% opacity · legend below or right

Axis, tooltip & legend spec

Jun 2026

84.2kPodcast

63.7kNewsletter

Tooltip — border-radius: 0

Tooltip bgvar(--surface-2)

Tooltip border1px solid rgba(255,255,255,0.08)

Tooltip radius0

Axis ticksmono 9–10px · rgba(242,240,236,0.38)

Gridlines1px dashed rgba(255,255,255,0.06)

Baseline1px solid rgba(255,255,255,0.12)

Bar radius0 — never round data bars

Area opacity12–18% of series color

Legend: ≤3 seriesright-aligned · 16px swatch

Legend: 4+ seriesbelow chart · wrap row

Accessibilityalways pair color with label text

Axis baselinealways start at 0 (bar & area)

▶Spec notes

—Use the sequential palette in order — never skip colors or invent new ones for a 6-or-fewer series chart

—Signal (#FF4725) is always series 1 — it is the primary or total metric

—Bar charts: border-radius 0 — rounding data bars undermines precision reading

—Gridlines: 1px dashed rgba(255,255,255,0.06) — subtle, never compete with data

—Axis ticks: mono 10px · text-3 (0.38 opacity) — same token as stat sub-labels

—Tooltips: surface-2 bg · rgba(255,255,255,0.08) border · mono font for values · 0 border-radius

—Chart background: surface-1 or transparent — never surface-2 (too much contrast lift)

—Area fills: 18–25% opacity of the series color — matches the content-type bg token pattern

color.brand.signalcolor.content.podcast.fgcolor.content.newsletter.fgcolor.content.video.fgcolor.content.book.fgcolor.surface.raised

23 — Empty state

Default — first-run / zero state

No episodes yet

Episodes you publish will appear here. Start by recording your first conversation.

Search / filter — no results

No results for “Braun”

Try different keywords or clear filters

Inline — table or list context

TransactionCategoryDateAmount

No transactions match your filters.

▶Spec notes

—Default (zero state): icon + headline + body + optional CTA — centered, 56px vertical padding

—Icon container: 44×44px · 1px divider border · text-3 color — use a Phosphor outline icon

—Headline: display font · 18px · 600 · text-1 — name what's missing, not what to do

—Body: body font · 14px · text-3 · max-width 280px · 1.5 line-height — one sentence, action-oriented

—CTA: primary button if creating is the next step · ghost/secondary if navigating elsewhere

—Search/filter variant: no icon · display 16px text-2 headline · body 13px text-3 with inline signal link to clear

—Inline (table) variant: single centered body line · 36px vertical padding · borderBottom divider — no icon, no CTA

—Never say 'Nothing here yet' — say what specifically is absent and what to do about it

font.displayfont.bodycolor.text.primarycolor.text.faintcolor.border.subtlecolor.brand.signal

24 — App shell / Sidebar navigation

App sidebar

◈Dashboard

◎Content

◻Audience

◇Revenue

◁Settings

Aarron Walter

admin

Active state — 0 border-radius

◈Dashboard

◎Content hover

◻Audience

active bg#FF4725

active text#0A0A0A

hover bgvar(--surface-2)

default textrgba(255,255,255,0.65)

border-radius0 — always

Logo placement

← 28px height

src/Logos/SVG/DesignBetterWhite.svg

height28px

filterbrightness(0) invert(1)

opacity0.9

zone padding0 16px 16px

zone border-bottom1px solid rgba(255,255,255,0.06)

▶Spec notes

—Sidebar background: #111111 · 1px right border rgba(255,255,255,0.06) — slightly lifted from app bg (#0A0A0A)

—Logo: <img src='/Logos/SVG/DesignBetterWhite.svg'> · height 28px · filter: brightness(0) invert(1) · opacity: 0.9

—Logo zone: padding 0 16px 16px · border-bottom 1px solid rgba(255,255,255,0.06) — always the SVG asset, never plain text

—Nav items: padding 7–8px 10px · gap 2px between items · full-width rows

—Active state: background #FF4725 · text #0A0A0A · font-weight 500 · border-radius 0 — no rounding, ever

—Hover state: background var(--surface-2) · text rgba(255,255,255,0.65) · 120ms transition · border-radius 0

—Default state: transparent background · text rgba(255,255,255,0.65)

—User footer: border-top rgba(255,255,255,0.06) · avatar circle (border-radius 50% is correct for avatar only) · name body 12px/500 · role body 11px text-3

—Do NOT use border-radius on nav items, active states, or any status indicator in the sidebar — pills are for avatars only

color.brand.signalcolor.surface.basecolor.border.subtlefont.bodyfont.monomotion.duration.normal

25 — Date pickers

Preset ranges — segment control

Selected: 30D

In context — dashboard toolbar

Subscriber growth

Input + calendar popover

June 2026

Calendar — anatomy reference

June 2026

▶Spec notes

—── Segment control (preset ranges) ──

—Pattern: connected segment control — not individual pills. Buttons flush with 1px gap (hairline divider via wrapper bg).

—Active segment: background #FF4725 · text #0A0A0A · weight 600 — never white text on signal

—Inactive segment: background var(--surface-1) · text var(--text-2) — use var(--surface-2) inside a surface-1 container

—Hover (inactive only): background var(--surface-2) · text var(--text-1) · 120ms standard easing

—Labels: mono · uppercase · 0.08em tracking · 12px standalone / 11px compact toolbar

—No border-radius anywhere — not on the group, not on individual segments

—Preset values: Today · 7D · 30D · 90D · 1Y · All — keep this set unless the product needs different granularity

—Never use for multi-select — use Filter pills (s-18) instead

—── Calendar picker (single date) ──

—Trigger input: surface-1 bg · hairline border → signal orange on open · mono 14px · calendar icon left · border-radius 0

—Popover: surface-2 bg · hairline border · 4px below trigger · 296px wide · no border-radius anywhere

—Month header: body 16px / 600 · text-1 · ↑↓ nav buttons · text-2 → text-1 hover

—Day headers: S M T W T F S · mono 11px · uppercase · 0.1em tracking · text-3

—Day cells: mono 13px · 2px gap grid · no border-radius — never round cells, not even today or selected

—Today (unselected): transparent bg · signal orange text · weight 600

—Selected: signal orange bg · ink text (#0A0A0A) · weight 700 — never white on signal

—Adjacent month days: text-3 · clicking navigates to that month

—Footer: Clear (left) · Today (right) · body 14px / 500 · signal orange · hover #e03d1e

color.brand.signalcolor.surface.raisedcolor.surface.elevatedcolor.border.hairlinefont.monofont.bodymotion.duration.fast

Feedback & State

26 — Loading states

Spinner — sm · md · lg

sm · 16px

md · 28px

lg · 44px

Skeleton — card placeholder

▶Spec notes

—── Spinner ──

—Track ring: var(--divider-strong) · Active arc: #FF4725 hardcoded (not var — animation contexts need a static value)

—sm 16px / 1.5px border · md 28px / 2px · lg 44px / 2.5px — always border-radius: 50%

—Keyframe: @keyframes db-spin { to { transform: rotate(360deg); } } · clockwise only

—Never embed a spinner inside a primary button — disable the button and show the spinner adjacently

—── Skeleton ──

—Skeleton blocks: var(--surface-1) on var(--surface-2) card bg — one step of surface contrast

—border-radius 2px for text-line shapes; match the card border-radius for image/cover placeholders

—Keyframe: @keyframes db-skeleton-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } } · 1.4s ease-in-out

—Stagger animationDelay by 0.12–0.15s per sibling block — avoids all blocks pulsing in lockstep

—Remove skeleton immediately when data arrives — never fade out; the content replaces it instantly

color.brand.signalcolor.border.strongcolor.surface.raisedcolor.surface.elevatedmotion.duration.normalmotion.easing.standard

27 — Toast notifications

Changes saved

Your settings have been updated.

Connection lost

Check your network and try again.

Approaching limit

You've used 90% of your monthly quota.

Update available

A new version is ready to install.

desktop → position: fixed · top: 24px · right: 24px · z-index: 9000

mobile → position: fixed · bottom: 24px · left/right: 16px · full-width

auto-dismiss → 4 s (success / info) · never auto-dismiss errors

▶Spec notes

—Structure: left 3px accent stripe · semantic fill bg · border-radius 4px · padding 12px 14px

—Title: body · 14px · weight 700 · variant accent color · margin-bottom 2px

—Body: body · 14px · text-2 · line-height 1.4 — one sentence max

—Dismiss: × button top-right · text-3 default · text-1 hover · no border · no bg

—Success (newsletter-fg/bg) · Error (video-fg/bg) · Warning (book-fg/bg) · Info (podcast-fg/bg)

—Never use signal orange (#FF4725) as a toast accent — it conflicts with primary CTA semantics

—Desktop position: fixed · top: 24px · right: 24px · z-index: 9000 · max-width: 380px

—Mobile position: fixed · bottom: 24px · left/right: 16px · full-width — never top-right on mobile

—Auto-dismiss: 4 s for success and info · Errors and warnings persist until manually dismissed

—Stack newest on top with 8px gap · maximum 3 visible · oldest exits automatically

—Enter: translateY(-8px) opacity 0 → 0 opacity 1 · 240ms decelerate easing

color.content.newsletter.fgcolor.content.video.fgcolor.content.book.fgcolor.content.podcast.fgmotion.duration.normalmotion.easing.decelerate

28 — Selected card state

selected outline: 2px solid #FF4725; outline-offset: -1px;

unselected outline: 2px solid transparent; /* enables transition */

transition outline-color 120ms cubic-bezier(0.4, 0, 0.2, 1);

▶Spec notes

—Technique: outline: 2px solid #FF4725; outline-offset: -1px — outline does not affect layout, border does

—Unselected state must declare: outline: 2px solid transparent — enables CSS transition (not 'none')

—Transition: outline-color 120ms cubic-bezier(0.4,0,0.2,1) — fast micro-interaction speed

—Price / key metric: change color from var(--text-1) to var(--signal-text) on selection — one reinforcing signal touch

—The selected state is not hover — do not combine translateY(-2px) lift with selection outline

—Never use border for selection — border changes the box model and shifts adjacent cards on toggle

—Never use box-shadow alone for selection — fails in high-contrast mode, invisible on dark bg at low opacity

—Minimum card border-radius when using this pattern: 8px — outline on a 0-radius card reads as a focus ring

color.brand.signalcolor.signal.textcolor.surface.raisedmotion.duration.fastmotion.easing.standard