Skip to content

Component sheet

Every state, every theme. Switch:
.is-hover .is-focus .is-active .is-disabled .is-loading mirror real pseudo-states

Physical color swatches

The same chip, card and ring family used in every live hero. Change Style to see each material treatment.

Type

displayDesign systems
h1Heading one
h2Heading two
h3Heading three
lead

Lead paragraph that sets up a section.

body

Body copy at 16px, 1.55 line height, max 64ch.

labelField label
kickerSection kicker
monoK7Q2-M9XD
flagStatus flag

Button, primary

default
is-hover
is-focus
is-active
is-disabled
is-loading

Button, primary with icon (Seat)

default
is-hover
is-focus
is-active
is-disabled
is-loading

Button, secondary (default)

default
is-hover
is-focus
is-active
is-disabled
is-loading

Button, ghost

default
is-hover
is-focus
is-active
is-disabled
is-loading

Button sizes and shapes

sm
md
lg
icon
with icon
kbd hint
split
block

Text input

default

Helper text sits here.

hover

Helper text sits here.

focus

Helper text sits here.

error

That does not look like an email address.

valid

Looks good

disabled

Helper text sits here.

read only

Helper text sits here.

key
search
textarea
0 / 600
select

Checkbox

off
on
hover
focus
indeterminate
disabled
disabled on

Radio and switch

radio off
radio on
radio focus
radio disabled
switch off
switch on
switch focus
switch disabled
switch lg

Segmented, tabs, chips, tags

segmented
tabs
chipAlias
chip onFocus
choice chip
tagTokens
tag accentv2.0
lock tagPrivate
badge3
avatarsBDAP+4
kbd⌘ K

Slider, stepper, progress, meter, loaders

slider
Density62
slider hover
Density62
slider focus
Density62
slider drag
Density62
slider disabled
Density62
stepper
12
stepper min
0
progress
indeterminate
meter
spinner
skeleton
rating

Tooltip, toast, alert, accordion, pagination, breadcrumb

tooltipLine the tools up (A)
toast
Tokens published
toast error
Key did not match
alert
Enter the password you were sent.
alert error
That key did not match.
accordion
What is a private key?
A one-person code that opens a case study.
How long is it valid?
Until revoked.
pagination
breadcrumb

Nav, card, tile, logo cell, event row

nav links (in nav bar)
case card
Private
Figma-first, federated system

I built a federated token architecture that lets Lilly brands share one foundation.

Eli Lilly needed one design system that could support dozens of brands without each one drifting into its own version.

Figma-first · Singularity at OneMain is the code-first counterpart
Key required
case card, earlier
Private
Figma and code system, with processEarlier foundation

Building the systems foundation behind Sling TV

From 2021 to 2023, I rebuilt Sling TV's design system in Figma and code, then built the process around it so the work could keep moving.

Key required
tile

Design systems

Tokens, components, documentation and governance.

TokensTheming
logo cell
event
12 Nov 2026Example event nameDetails

Control bar (six controls)

Lives at the bottom center of the hero. Style first. Sound long-press or right-click opens Music/Effects. Arrow keys move across; T M S A X G are shortcuts.

bar

Style popover (open)

menu
Site style
sound menu

Modal (lock), inline

default

Enter your key

Singularity at OneMain Financial is private.

error

Enter your key

That key did not match. Check for extra spaces.

loading

Enter your key

success

You are in

Opening the case study.

Dark surface scope (.bd-dark) for Modern: used when a modal or popover sits on a dark ground

buttons
input focus

Helper text sits here.

input error

That does not look like an email address.

switch, check
segmented
toast
Saved