Tokens

Every value below is read from design/tokens.json when the site is built, the same file that generates the Android, iOS and web themes. How to use them is on the design system page.

Components

light

SQGoblet squat4 × 8 at 16 kg

Rest

90 s

The treadmill stopped answering. Recording resumes when it's back.

dark

SQGoblet squat4 × 8 at 16 kg

Rest

90 s

The treadmill stopped answering. Recording resumes when it's back.

Base fields

The fields every form is built from, drawn with the tokens above. Each entry of the Base fields table links to its sample here.

light

Text fieldName

Shown to you only, on this phone.

Select field

Option sheet

Pronouns

They / them

She / her

Custom

Number field

bpm

reps

Step sliderGetting going

Just startingVery experienced

Line chart

1 Aug1 Nov

Empty chart card

No weight yetLog it once to see your chart. It stays on this phone, and only you see it.

dark

Text fieldName

Shown to you only, on this phone.

Select field

Option sheet

Pronouns

They / them

She / her

Custom

Number field

bpm

reps

Step sliderGetting going

Just startingVery experienced

Line chart

1 Aug1 Nov

Empty chart card

No weight yetLog it once to see your chart. It stays on this phone, and only you see it.

Colour roles

Each role with its text colour, in light and dark.

light

primary#1574B0

primaryContainer#DDF0FB

grumpy#B4471C

grumpyContainer#FFE6D6

background#F4F9FC

surface#FFFFFF

surfaceVariant#E6EFF5

outline#D3E0E9

success#2E9E6A

error#C8264A

heat1#FFE3C7

heat2#FBA45E

heat3#E2620F

pain#7B3FD1

dark

primary#5BBEF0

primaryContainer#123A52

grumpy#FF9A66

grumpyContainer#3A1E12

background#0A1520

surface#112230

surfaceVariant#17303F

outline#21394A

success#4CC38A

error#FF6B85

heat1#4A2A12

heat2#B8601F

heat3#FFA45C

pain#C8A6FF

Mood spectrum

proud#2C9CE0

happy#3AA6E0

recovering#5DB4E6

annoyed#E8873F

grumpy#D9622B

fuming#C0352B

Palette

poulpy

blue#3AA6E0

ember#D9622B

ink#141A26

lagoon

50#EAF6FD

100#CDEBFA

300#7FCBF0

400#3AA6E0

600#1574B0

800#0C4A73

900#082F4A

ember

50#FFF1E8

100#FFDCC7

300#F4A473

400#E8873F

500#D9622B

600#B4471C

800#7A2C12

neutral

0#FFFFFF

50#F4F9FC

100#E6EFF5

300#B6C4D0

500#6B7C8C

700#374555

900#141A26

Type

displayLeg day, Poulpy approves40 / 44 · 800

titleLeg day, Poulpy approves28 / 32 · 700

headlineLeg day, Poulpy approves21 / 25 · 700

bodyLeg day, Poulpy approves16 / 24 · 500

labelLeg day, Poulpy approves12.5 / 16 · 800

timer01:2764 / 64 · 800

Space and radius

xs4

sm8

md12

lg16

xl24

xxl32

xxxl48

sm · 10

md · 16

lg · 24

pill · 999

Motion

Token	Duration	Easing
flip	700 ms	cubic-bezier(0.5, -0.35, 0.35, 1.4)
mood	300 ms	standard
quick	200 ms	standard