YolkUI playground
Design tokens. Components will appear here as they are built.
Button
default
secondary
outline
soft
ghost
destructive
accent
accent-soft
brand
brand-soft
link
Pill
default
secondary
outline
soft
ghost
destructive
accent
accent-soft
brand
brand-soft
link
Icon spacing
xs · 28
sm · 32
default · 36
lg · 40
States
Button Group
Composition
Separator and text
Orientation and size
In context · soft
Variants
default
secondary
outline
soft
ghost
destructive
accent
accent-soft
brand
brand-soft
link
With an input
Pill groups
With an input · soft buttons
Input
Sizes · same heights as Button
xs
sm
default
lg
Pill · same as the pill Button
xs
sm
default
lg
States · hover and click the first one
Field
We only use it to send receipts.
Enter a full address, like ada@yolkui.com.
Icons and add-ons
Web form fields
We won’t spam you, we promise :)
We won’t spam you, we promise :)
That’s not a valid email address
File · pick, drag over, remove
0 files in state
Textarea
Badge
neutral
brand
accent
success
info
warning
destructive
Sizes, shape and count
Icons and long labels
Avatar
sm · 24Ada LovelaceALAda LovelaceALYolk TeamYTYolk KitYK
default · 32Ada LovelaceALAda LovelaceALYolk TeamYTYolk KitYK
lg · 40Ada LovelaceALAda LovelaceALYolk TeamYTYolk KitYK
xl · 48Ada LovelaceALAda LovelaceALYolk TeamYTYolk KitYK
2xl · 64Ada LovelaceALAda LovelaceALYolk TeamYTYolk KitYK
Fallback · a broken photo ends in initials
Alan TuringATCN
Status · the words are read with the name
Ada LovelaceAL(Online)Grace HopperGH(Away)Margaret HamiltonMH(Busy)Mary ShelleyMS(Offline)Alan KayAK(Verified)
Notification · the dot at the top
Alan KayAK(3 unread)Alan KayAK(3 unread)Alan KayAK(3 unread)Alan KayAK(3 unread)Alan KayAK(3 unread)Yolk TeamYT(New activity)
A real photo · top notification and bottom presence
Yolk ProfileYP(3 unread)Yolk ProfileYP(3 unread)Yolk ProfileYP(3 unread)Yolk ProfileYP(3 unread)Yolk ProfileYP(3 unread)
Yolk ProfileYP(Online)Yolk ProfileYP(Online)Yolk ProfileYP(Online)Yolk ProfileYP(Online)Yolk ProfileYP(Online)Yolk ProfileYP(3 unread)
Group
Ada LovelaceALGrace HopperGHMargaret HamiltonMHAlan KayAK3 more people
Ada LovelaceALGrace HopperGHMargaret HamiltonMHAlan KayAK3 more people
Ada LovelaceALGrace HopperGHMargaret HamiltonMHAlan KayAK3 more people
In context · the name is printed, so the avatar is hidden
- Owner
Ada Lovelace
ada@yolkui.com · online
- Editor
Grace Hopper
grace@yolkui.com · away
- Viewer
Margaret Hamilton
margaret@yolkui.com
Colors
primaryAa text
secondaryAa text
mutedAa text
accentAa text
accent-primaryAa text
brandAa text
destructiveAa text
successAa text
warningAa text
infoAa text
cardAa text
popoverAa text
Surfaces
background / border
input border
Radius
rounded-xs
rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-3xl
rounded-4xl