Developers | yuicss | the foundation of every screen
yuicss
How Yui looks, as one stylesheet. An agent writes a bare h1, a button, a card, and it already looks like Yui in that agent's colors. The agent writes only what is different. Pick a look and watch every token, element and component move with it, light and dark.
A whole screen, no classes to speak of
The plan's example: ten lines of YL. Every element below is a bare tag, and it already looks like Yui in the agent's colors.
Your week
A check-in
Tokens
One JSON file. An agent look sets these and nothing else: color, type, shape and motion. Pick a look above to see every token move.
Elements, finished with no class
Headings, text, buttons, inputs, lists, tables, folds and bars. Write the HTML tag and stop.
Type
Buttons
The first button is the primary one. Siblings after it step down to a tint on their own.
Inputs
Lists and tables
Folds, bars and code
Utilities, Tailwind's names
For the one thing that is different. Layout, spacing, size, color, type, shape and motion. Colors only from tokens, so contrast holds whatever the agent writes.
Layout
Color and type
Shape and motion
Components
Ready-made parts with Yui's defaults. One class each.
card, hero
chips, options
tabs, segmented, stepper, toggle, slider
progress, ring, badge, avatar
field, sheet, toast, empty
Every preset, as a part
What used to be 49 dead ends. Each one is a component now, so an agent can put a timer next to a chart next to a list.
say, list, table
stat, chart
timer
map, shapes, sketch
math, steps, calc
gallery, image, compare, camera, mic
page, deck, timeline
game
The contract
One stylesheet, generated from tokens.json. The app bundles it; the renderer and the channel guide use these names and no others.
64elements styled with no class
1054classes: utilities and components
189classes this gallery uses, all of them real
101 KBraw, about 19 KB gzipped
yuicss.css · tokens.json · source · how it fits together · the plan
Every class name
-m-1
-m-10
-m-12
-m-16
-m-2
-m-3
-m-4
-m-5
-m-6
-m-8
-m-px
-mb-1
-mb-10
-mb-12
-mb-16
-mb-2
-mb-3
-mb-4
-mb-5
-mb-6
-mb-8
-mb-px
-ml-1
-ml-10
-ml-12
-ml-16
-ml-2
-ml-3
-ml-4
-ml-5
-ml-6
-ml-8
-ml-px
-mr-1
-mr-10
-mr-12
-mr-16
-mr-2
-mr-3
-mr-4
-mr-5
-mr-6
-mr-8
-mr-px
-mt-1
-mt-10
-mt-12
-mt-16
-mt-2
-mt-3
-mt-4
-mt-5
-mt-6
-mt-8
-mt-px
-mx-1
-mx-10
-mx-12
-mx-16
-mx-2
-mx-3
-mx-4
-mx-5
-mx-6
-mx-8
-mx-px
-my-1
-my-10
-my-12
-my-16
-my-2
-my-3
-my-4
-my-5
-my-6
-my-8
-my-px
absolute
accent
after
area
arrow
ask
aspect-photo
aspect-portrait
aspect-square
aspect-video
avatar
avatars
axis
bad
badge
balance
bar
bars
basis-0
bg-accent
bg-accent-100
bg-accent-200
bg-accent-300
bg-accent-400
bg-accent-50
bg-accent-500
bg-accent-600
bg-accent-700
bg-accent-800
bg-accent-900
bg-accent-ink
bg-accent-soft
bg-accent-text
bg-bad
bg-bad-ink
bg-bad-soft
bg-bad-text
bg-black
bg-good
bg-good-ink
bg-good-soft
bg-good-text
bg-gradient
bg-gradient-soft
bg-ink
bg-line
bg-muted
bg-paper
bg-surface
bg-transparent
bg-warn
bg-warn-ink
bg-warn-soft
bg-warn-text
bg-white
big
bleed
block
board
bold
border
border-0
border-1
border-2
border-4
border-accent
border-accent-100
border-accent-200
border-accent-300
border-accent-400
border-accent-50
border-accent-500
border-accent-600
border-accent-700
border-accent-800
border-accent-900
border-accent-ink
border-accent-text
border-b
border-bad
border-bad-ink
border-bad-soft
border-bad-text
border-dashed
border-dotted
border-good
border-good-ink
border-good-soft
border-good-text
border-ink
border-l
border-line
border-muted
border-paper
border-r
border-surface
border-t
border-transparent
border-warn
border-warn-ink
border-warn-soft
border-warn-text
bottom-0
bottom-2
bottom-4
bounce
box
break-words
bubble
button
calc
camera
cap
capitalize
caption
card
cell
center
center-x
center-xy
chart
check
chev
chip
chips
choose
circle
clamp-2
clamp-3
col
col-span-2
col-span-3
col-span-4
col-span-full
compare
content-center
contents
controls
count
danger
dark
deck
delay-1
delay-10
delay-11
delay-12
delay-2
delay-3
delay-4
delay-5
delay-6
delay-7
delay-8
delay-9
delta
diamond
divide-x
divide-y
divider
done
donut
dot
dots
down
duration-fast
duration-slow
empty
ends
enter
enter-drop
enter-fade
enter-pop
enter-rise
enter-slide
error
eyebrow
f
fab
feed
field
fill
fill-accent
fill-accent-100
fill-accent-200
fill-accent-300
fill-accent-400
fill-accent-50
fill-accent-500
fill-accent-600
fill-accent-700
fill-accent-800
fill-accent-900
fill-accent-ink
fill-accent-text
fill-bad
fill-bad-ink
fill-bad-soft
fill-bad-text
fill-current
fill-good
fill-good-ink
fill-good-soft
fill-good-text
fill-ink
fill-line
fill-muted
fill-paper
fill-surface
fill-warn
fill-warn-ink
fill-warn-soft
fill-warn-text
fixed
flat
flex
flex-1
flex-auto
flex-col
flex-col-reverse
flex-none
flex-nowrap
flex-row
flex-row-reverse
flex-wrap
float
flow
font-black
font-bold
font-extrabold
font-heading
font-heavy
font-medium
font-mono
font-normal
font-rounded
font-sans
font-semibold
font-serif
form
full
gallery
game
gap-0
gap-1
gap-10
gap-12
gap-16
gap-2
gap-3
gap-4
gap-5
gap-6
gap-8
gap-px
gap-x-0
gap-x-1
gap-x-10
gap-x-12
gap-x-16
gap-x-2
gap-x-3
gap-x-4
gap-x-5
gap-x-6
gap-x-8
gap-x-px
gap-y-0
gap-y-1
gap-y-10
gap-y-12
gap-y-16
gap-y-2
gap-y-3
gap-y-4
gap-y-5
gap-y-6
gap-y-8
gap-y-px
ghost
glass
glyph
good
grid
grid-1
grid-2
grid-3
grid-4
grid-5
grid-6
grid-7
grid-cols-1
grid-cols-2
grid-cols-3
grid-cols-4
grid-cols-5
grid-cols-6
grid-cols-7
gridline
grow
grow-0
h
h-0
h-1
h-1/2
h-1/3
h-1/4
h-1/5
h-10
h-12
h-16
h-2
h-2/3
h-2/5
h-20
h-24
h-3
h-3/4
h-3/5
h-32
h-4
h-4/5
h-40
h-48
h-5
h-56
h-6
h-64
h-8
h-auto
h-fit
h-full
h-px
h-screen
hand
heavy
hero
hi
hidden
hidden-card
hint
icon
image
inline
inline-block
inline-flex
inset-0
inset-x-0
inset-y-0
italic
items-baseline
items-center
items-end
items-start
items-stretch
justify-around
justify-between
justify-center
justify-end
justify-evenly
justify-start
knob
label
leading-none
leading-normal
leading-relaxed
leading-snug
leading-tight
left-0
left-2
left-4
legend
lg
light
line
line-through
line2
link
list
lowercase
m-0
m-1
m-10
m-12
m-16
m-2
m-3
m-4
m-5
m-6
m-8
m-auto
m-px
map
math
max-h-0
max-h-1
max-h-10
max-h-12
max-h-16
max-h-2
max-h-20
max-h-24
max-h-3
max-h-32
max-h-4
max-h-40
max-h-48
max-h-5
max-h-56
max-h-6
max-h-64
max-h-8
max-h-px
max-w-0
max-w-1
max-w-10
max-w-12
max-w-16
max-w-2
max-w-20
max-w-24
max-w-3
max-w-32
max-w-4
max-w-40
max-w-48
max-w-5
max-w-56
max-w-6
max-w-64
max-w-8
max-w-full
max-w-md
max-w-prose
max-w-px
max-w-sm
max-w-xs
mb-0
mb-1
mb-10
mb-12
mb-16
mb-2
mb-3
mb-4
mb-5
mb-6
mb-8
mb-auto
mb-px
me
medium
mic
min-h-0
min-h-1
min-h-10
min-h-12
min-h-16
min-h-2
min-h-20
min-h-24
min-h-3
min-h-32
min-h-4
min-h-40
min-h-48
min-h-5
min-h-56
min-h-6
min-h-64
min-h-8
min-h-full
min-h-px
min-h-screen
min-w-0
min-w-1
min-w-10
min-w-12
min-w-16
min-w-2
min-w-20
min-w-24
min-w-3
min-w-32
min-w-4
min-w-40
min-w-48
min-w-5
min-w-56
min-w-6
min-w-64
min-w-8
min-w-px
ml-0
ml-1
ml-10
ml-12
ml-16
ml-2
ml-3
ml-4
ml-5
ml-6
ml-8
ml-auto
ml-px
mr-0
mr-1
mr-10
mr-12
mr-16
mr-2
mr-3
mr-4
mr-5
mr-6
mr-8
mr-auto
mr-px
mt-0
mt-1
mt-10
mt-12
mt-16
mt-2
mt-3
mt-4
mt-5
mt-6
mt-8
mt-auto
mt-px
muted
mx-0
mx-1
mx-10
mx-12
mx-16
mx-2
mx-3
mx-4
mx-5
mx-6
mx-8
mx-auto
mx-px
my-0
my-1
my-10
my-12
my-16
my-2
my-3
my-4
my-5
my-6
my-8
my-auto
my-px
n
next
no-enter
no-underline
normal-case
not-italic
now
nowrap
num
o
object-contain
object-cover
object-top
on
opacity-0
opacity-10
opacity-100
opacity-25
opacity-50
opacity-75
opacity-90
options
orb
order-first
order-last
overflow-auto
overflow-hidden
overflow-visible
overflow-x-auto
overflow-y-auto
p-0
p-1
p-10
p-12
p-16
p-2
p-3
p-4
p-5
p-6
p-8
p-px
page
pb-0
pb-1
pb-10
pb-12
pb-16
pb-2
pb-3
pb-4
pb-5
pb-6
pb-8
pb-px
phase
phone
pick
pie
pill
pin
ping
pl-0
pl-1
pl-10
pl-12
pl-16
pl-2
pl-3
pl-4
pl-5
pl-6
pl-8
pl-px
place-center
plain
pointer
pointer-events-none
points
pr-0
pr-1
pr-10
pr-12
pr-16
pr-2
pr-3
pr-4
pr-5
pr-6
pr-8
pr-px
pretty
primary
progress
prompt
pt
pt-0
pt-1
pt-10
pt-12
pt-16
pt-2
pt-3
pt-4
pt-5
pt-6
pt-8
pt-px
pulse
px-0
px-1
px-10
px-12
px-16
px-2
px-3
px-4
px-5
px-6
px-8
px-px
py-0
py-1
py-10
py-12
py-16
py-2
py-3
py-4
py-5
py-6
py-8
py-px
q
regular
relative
result
right-0
right-2
right-4
ring
ring-accent
ring-line
road
round
rounded
rounded-2xl
rounded-3xl
rounded-b
rounded-b-full
rounded-b-none
rounded-control
rounded-full
rounded-l
rounded-l-full
rounded-l-none
rounded-lg
rounded-md
rounded-none
rounded-r
rounded-r-full
rounded-r-none
rounded-sm
rounded-t
rounded-t-full
rounded-t-none
rounded-xl
rounds
row
row-span-2
row-span-3
s
safe
safe-top
say
score
screen
scroll-x
secondary
segmented
select-none
self-center
self-end
self-start
self-stretch
semibold
shadow
shadow-lift
shadow-none
shadow-soft
shape
shapes
sheet
shimmer
shrink-0
shutter
size-0
size-1
size-10
size-12
size-16
size-2
size-20
size-24
size-3
size-32
size-4
size-40
size-48
size-5
size-56
size-6
size-64
size-8
size-full
size-px
sketch
slide
slider
sm
snake
soft
solid
space-x-0
space-x-1
space-x-10
space-x-12
space-x-16
space-x-2
space-x-3
space-x-4
space-x-5
space-x-6
space-x-8
space-x-px
space-y-0
space-y-1
space-y-10
space-y-12
space-y-16
space-y-2
space-y-3
space-y-4
space-y-5
space-y-6
space-y-8
space-y-px
spark
spin
spinner
sr-only
stack
stagger
stat
static
stats
step
stepper
steps
sticky
still
storyboard
stroke-accent
stroke-accent-100
stroke-accent-200
stroke-accent-300
stroke-accent-400
stroke-accent-50
stroke-accent-500
stroke-accent-600
stroke-accent-700
stroke-accent-800
stroke-accent-900
stroke-accent-ink
stroke-accent-text
stroke-bad
stroke-bad-ink
stroke-bad-soft
stroke-bad-text
stroke-current
stroke-good
stroke-good-ink
stroke-good-soft
stroke-good-text
stroke-ink
stroke-line
stroke-muted
stroke-paper
stroke-surface
stroke-warn
stroke-warn-ink
stroke-warn-soft
stroke-warn-text
table
tabs
tabular
tag
tap
text
text-2xl
text-3xl
text-4xl
text-accent
text-accent-100
text-accent-200
text-accent-300
text-accent-400
text-accent-50
text-accent-500
text-accent-600
text-accent-700
text-accent-800
text-accent-900
text-accent-ink
text-accent-text
text-bad
text-bad-ink
text-bad-soft
text-bad-text
text-base
text-black
text-center
text-current
text-good
text-good-ink
text-good-soft
text-good-text
text-ink
text-left
text-lg
text-line
text-muted
text-paper
text-right
text-sm
text-surface
text-warn
text-warn-ink
text-warn-soft
text-warn-text
text-white
text-xl
text-xs
then
thick
thin
tick
time
timeline
timer
title
toast
toggle
top-0
top-2
top-4
topbar
tracking-normal
tracking-tight
tracking-wide
tracking-wider
transition
truncate
underline
unit
uppercase
value
var
w-0
w-1
w-1/2
w-1/3
w-1/4
w-1/5
w-10
w-12
w-16
w-2
w-2/3
w-2/5
w-20
w-24
w-3
w-3/4
w-3/5
w-32
w-4
w-4/5
w-40
w-48
w-5
w-56
w-6
w-64
w-8
w-auto
w-fit
w-full
w-px
w-screen
warn
wave
when
whitespace-nowrap
whitespace-pre
wiggle
win
window
working
wrap
x
xl
z-0
z-10
z-20
z-30
z-40
z-50