Sidestep

Tokens

Every decision has a name.

Every color, size, and animation is a named role. Components use only roles, so changing what a role points to changes everything at once.

Motion roles

Pick a role by what is happening, not by how it should look. Values shown are for the playful personality.

feedbackThe person pressed, hovered, or toggled something.
enterSomething appears.
exitSomething leaves. Always quicker than the enter.
state-changeThe same element changes state.
navigationMoving between screens, or a large surface.
attentionPointing at something, once.
celebrationThe learner achieved something.

Items that arrive together are delayed by the sequence stagger. How long something waits before the app moves on is a dwell time: 3 seconds for a few words, 6 for a sentence.

Color roles

The day theme. Every allowed text pairing reaches 4.5 to 1, and every outline and fill 3 to 1.

bg.page#FFF4DC
bg.surface#FFFBF0
bg.raised#FFFFFF
bg.sunken#F3E6C4
bg.hover#FFF4DC
text.primary#1E2A24
text.muted#56635C
text.brand#1F6B45
text.error#A3301B
action.primary#1F6B45
action.on-primary#FFFFFF
action.primary-hover#185537
brand.fill#2F8F5B
accent.fill#F2B93B
accent.on-fill#1E2A24
status.wrong-fill#FBDDD3
status.on-wrong#1E2A24
disabled.bg#F3E6C4
disabled.text#77857D
disabled.border#B9B08F
inverse.bg#1E2A24
inverse.text#FFFBF0
border.strong#1E2A24
border.subtle#E2D5B0
focus.ring#1F6B45
overlay.scrim#1E2A2466
character.shell#2F8F5B
character.shell-shade#1F6B45
character.claw#F2B93B
character.claw-shade#D39A1F
character.body#FAE3B7
character.outline#1E2A24

Text styles

Hubert tucks into his shell
display · Rubik 600 · 40 px
Hubert tucks into his shell
heading · Rubik 600 · 32 px
Hubert tucks into his shell
title · Rubik 600 · 20 px
Hubert tucks into his shell
body · Atkinson Hyperlegible Next 400 · 16 px
Hubert tucks into his shell
body-small · Atkinson Hyperlegible Next 400 · 14 px
Hubert tucks into his shell
label · Atkinson Hyperlegible Next 700 · 16 px
Hubert tucks into his shell
caption · Atkinson Hyperlegible Next 600 · 12 px
motion.role.celebration
code · JetBrains Mono 400 · 14 px

Shape and size