Skip to content
Jadwigo docs

Tokens

These tables are generated from Zeszyt’s stylesheet when the docs are built. A token renamed or changed in the code shows here on the next build, with no edit to this page.

The Overview explains the 3 tiers. The System page shows them drawn on real parts.

Roles

Section titled “Roles”

What each colour means, and the value it comes to in each theme. “From” names the primitive the role reads.

RoleLightDark
--jw-ground#ffffff
from --jw-p-white		#1d1e22
from --jw-p-night-25
--jw-card#ffffff
from --jw-p-white		#1d1e22
from --jw-p-night-25
--jw-prompt-card#ffffff
from --jw-p-white		#1d1e22
from --jw-p-night-25
--jw-ink#22252d
from --jw-p-paper-900		#ece8de
from --jw-p-night-900
--jw-ink-soft#50535c
from --jw-p-paper-600		#b9b4a7
from --jw-p-night-600
--jw-placeholder#726f68
from --jw-p-paper-500		#918c83
from --jw-p-night-450
--jw-line#e8e2d5
from --jw-p-paper-200		#373941
from --jw-p-night-200
--jw-line-strong#50535c
from --jw-p-paper-600		#b9b4a7
from --jw-p-night-600
--jw-act#9fbaeb
from --jw-p-ink-300		#3a5fa8
from --jw-p-ink-600
--jw-on-act#0f285a
from --jw-p-ink-900		#e6eeff
from --jw-p-ink-50
--jw-act-edge#6585c2
from --jw-p-ink-500		#24407a
from --jw-p-ink-750
--jw-act-quiet#f2eee6
from --jw-p-paper-100		#2a2c33
from --jw-p-night-100
--jw-on-act-quiet#55565c
from --jw-p-paper-650		#b3aea2
from --jw-p-night-550
--jw-focus#3a5fa8
from --jw-p-ink-600		#93b6ff
from --jw-p-ink-350
--jw-on-focus#ffffff
from --jw-p-white		#0f1a33
from --jw-p-ink-950
--jw-pick#dce8fb
from --jw-p-ink-100		#1d3157
from --jw-p-ink-850
--jw-pick-edge#2f63b8
from --jw-p-ink-650		#7aa6f0
from --jw-p-ink-400
--jw-pick-ink#163a78
from --jw-p-ink-800		#d9e6ff
from --jw-p-ink-150
--jw-help#fbf1d2
from --jw-p-sun-100		#3a3016
from --jw-p-sun-900
--jw-help-edge#a07c14
from --jw-p-sun-600		#b8973a
from --jw-p-sun-500
--jw-help-ink#5a4300
from --jw-p-sun-800		#ffe7a3
from --jw-p-sun-200
--jw-right#e3eedc
from --jw-p-green-100		#26452a
from --jw-p-green-850
--jw-right-edge#3f8a46
from --jw-p-green-600		#6fc477
from --jw-p-green-400
--jw-right-ink#25522a
from --jw-p-green-800		#cbe9c8
from --jw-p-green-150
--jw-right-act#a6cf9c
from --jw-p-green-300		#2f6a36
from --jw-p-green-700
--jw-on-right-act#123a17
from --jw-p-green-950		#e2f5e0
from --jw-p-green-50
--jw-right-act-edge#6b9a61
from --jw-p-green-500		#1b4320
from --jw-p-green-900
--jw-miss#f8e5e0
from --jw-p-red-100		#682b23
from --jw-p-red-850
--jw-miss-edge#c4402f
from --jw-p-red-600		#ff8a7a
from --jw-p-red-400
--jw-miss-ink#90321f
from --jw-p-red-800		#ffdcd5
from --jw-p-red-150
--jw-on-miss-edge#ffffff
from --jw-p-white		#18191d
from --jw-p-night-0
--jw-miss-act#f0b2a6
from --jw-p-red-300		#8f3a2e
from --jw-p-red-700
--jw-on-miss-act#4a130b
from --jw-p-red-950		#ffe6e1
from --jw-p-red-50
--jw-miss-act-edge#c27a6d
from --jw-p-red-500		#5c231b
from --jw-p-red-900
--jw-rest#ffffff
from --jw-p-white		#24262c
from --jw-p-night-75
--jw-rest-ink#22252d
from --jw-p-paper-900		#ece8de
from --jw-p-night-900

Aliases

Section titled “Aliases”

The names the components read. Each one reads a role, so it follows the theme.

AliasLightDark
--background#ffffff
from --jw-ground		#1d1e22
from --jw-ground
--foreground#22252d
from --jw-ink		#ece8de
from --jw-ink
--card#ffffff
from --jw-prompt-card		#1d1e22
from --jw-prompt-card
--card-foreground#22252d
from --jw-ink		#ece8de
from --jw-ink
--popover#ffffff
from --jw-card		#1d1e22
from --jw-card
--popover-foreground#22252d
from --jw-ink		#ece8de
from --jw-ink
--primary#3a5fa8
from --jw-focus		#93b6ff
from --jw-focus
--primary-foreground#ffffff
from --jw-on-focus		#0f1a33
from --jw-on-focus
--secondary#f2eee6
from --jw-act-quiet		#2a2c33
from --jw-act-quiet
--secondary-foreground#22252d
from --jw-ink		#ece8de
from --jw-ink
--muted#f2eee6
from --jw-act-quiet		#2a2c33
from --jw-act-quiet
--muted-foreground#50535c
from --jw-ink-soft		#b9b4a7
from --jw-ink-soft
--accent#dce8fb
from --jw-pick		#1d3157
from --jw-pick
--accent-foreground#163a78
from --jw-pick-ink		#d9e6ff
from --jw-pick-ink
--border#e8e2d5
from --jw-line		#373941
from --jw-line
--input#50535c
from --jw-line-strong		#b9b4a7
from --jw-line-strong
--ring#3a5fa8
from --jw-focus		#93b6ff
from --jw-focus
--kid-correct#3f8a46
from --jw-right-edge		#6fc477
from --jw-right-edge
--kid-correct-foreground#123a17
from --jw-on-right-act		#e2f5e0
from --jw-on-right-act
--kid-correct-action#a6cf9c
from --jw-right-act		#2f6a36
from --jw-right-act
--kid-correct-action-foreground#123a17
from --jw-on-right-act		#e2f5e0
from --jw-on-right-act
--kid-correct-action-edge#6b9a61
from --jw-right-act-edge		#1b4320
from --jw-right-act-edge
--kid-correct-soft#e3eedc
from --jw-right		#26452a
from --jw-right
--kid-correct-ink#25522a
from --jw-right-ink		#cbe9c8
from --jw-right-ink
--kid-try-again#c4402f
from --jw-miss-edge		#ff8a7a
from --jw-miss-edge
--kid-try-again-foreground#ffffff
from --jw-on-miss-edge		#18191d
from --jw-on-miss-edge
--kid-try-again-soft#f8e5e0
from --jw-miss		#682b23
from --jw-miss
--kid-try-again-ink#90321f
from --jw-miss-ink		#ffdcd5
from --jw-miss-ink
--kid-try-again-action#f0b2a6
from --jw-miss-act		#8f3a2e
from --jw-miss-act
--kid-try-again-action-foreground#4a130b
from --jw-on-miss-act		#ffe6e1
from --jw-on-miss-act
--kid-try-again-action-edge#c27a6d
from --jw-miss-act-edge		#5c231b
from --jw-miss-act-edge
--kid-help#fbf1d2
from --jw-help		#3a3016
from --jw-help
--kid-help-edge#a07c14
from --jw-help-edge		#b8973a
from --jw-help-edge
--kid-help-ink#5a4300
from --jw-help-ink		#ffe7a3
from --jw-help-ink
--kid-rest#ffffff
from --jw-rest		#24262c
from --jw-rest
--kid-rest-ink#22252d
from --jw-rest-ink		#ece8de
from --jw-rest-ink
--kid-action#9fbaeb
from --jw-act		#3a5fa8
from --jw-act
--kid-action-foreground#0f285a
from --jw-on-act		#e6eeff
from --jw-on-act
--kid-action-edge#6585c2
from --jw-act-edge		#24407a
from --jw-act-edge
--kid-action-quiet#f2eee6
from --jw-act-quiet		#2a2c33
from --jw-act-quiet
--kid-action-quiet-foreground#55565c
from --jw-on-act-quiet		#b3aea2
from --jw-on-act-quiet
--kid-press4px
from --jw-press		4px
from --jw-press
--kid-bar-height6rem
from --jw-bar-height		6rem
from --jw-bar-height
--kid-selected#2f63b8
from --jw-pick-edge		#7aa6f0
from --jw-pick-edge
--kid-selected-soft#dce8fb
from --jw-pick		#1d3157
from --jw-pick
--kid-selected-ink#163a78
from --jw-pick-ink		#d9e6ff
from --jw-pick-ink
--kid-say-size2rem
from --jw-size-prompt		2rem
from --jw-size-prompt
--kid-answer-size1.625rem
from --jw-size-option		1.625rem
from --jw-size-option
--kid-math-size2.25rem
from --jw-size-math		2.25rem
from --jw-size-math
--font-body'Andika', 'Nunito Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
from --jw-font		'Andika', 'Nunito Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
from --jw-font
--font-sans'Andika', 'Nunito Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
from --jw-font		'Andika', 'Nunito Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
from --jw-font
--radius-sm0.625rem
from --jw-radius-small		0.625rem
from --jw-radius-small
--radius1rem
from --jw-radius-control		1rem
from --jw-radius-control
--radius-lg1rem
from --jw-radius-card		1rem
from --jw-radius-card
--radius-xl1rem
from --jw-radius-card		1rem
from --jw-radius-card
--radius-2xl1rem
from --jw-radius-card		1rem
from --jw-radius-card
--shadow-xsnone
from none		none
from none
--shadow-smnone
from none		none
from none
--shadow-elevationnone
from none		none
from none
--duration-slow320ms
from --jw-dur-step		320ms
from --jw-dur-step
--theme-icon-stroke2
from 2		2
from 2

Primitives

Section titled “Primitives”

The only literal colours. Nothing outside the roles reads them.

PrimitiveValue
--jw-p-paper-100#f2eee6
--jw-p-paper-200#e8e2d5
--jw-p-paper-500#726f68
--jw-p-paper-600#50535c
--jw-p-paper-650#55565c
--jw-p-paper-900#22252d
--jw-p-white#ffffff
--jw-p-night-0#18191d
--jw-p-night-25#1d1e22
--jw-p-night-75#24262c
--jw-p-night-100#2a2c33
--jw-p-night-200#373941
--jw-p-night-450#918c83
--jw-p-night-550#b3aea2
--jw-p-night-600#b9b4a7
--jw-p-night-900#ece8de
--jw-p-ink-50#e6eeff
--jw-p-ink-100#dce8fb
--jw-p-ink-150#d9e6ff
--jw-p-ink-300#9fbaeb
--jw-p-ink-350#93b6ff
--jw-p-ink-400#7aa6f0
--jw-p-ink-500#6585c2
--jw-p-ink-600#3a5fa8
--jw-p-ink-650#2f63b8
--jw-p-ink-750#24407a
--jw-p-ink-800#163a78
--jw-p-ink-850#1d3157
--jw-p-ink-900#0f285a
--jw-p-ink-950#0f1a33
--jw-p-sun-100#fbf1d2
--jw-p-sun-200#ffe7a3
--jw-p-sun-500#b8973a
--jw-p-sun-600#a07c14
--jw-p-sun-800#5a4300
--jw-p-sun-900#3a3016
--jw-p-green-50#e2f5e0
--jw-p-green-100#e3eedc
--jw-p-green-150#cbe9c8
--jw-p-green-300#a6cf9c
--jw-p-green-400#6fc477
--jw-p-green-500#6b9a61
--jw-p-green-600#3f8a46
--jw-p-green-700#2f6a36
--jw-p-green-800#25522a
--jw-p-green-850#26452a
--jw-p-green-900#1b4320
--jw-p-green-950#123a17
--jw-p-red-50#ffe6e1
--jw-p-red-100#f8e5e0
--jw-p-red-150#ffdcd5
--jw-p-red-300#f0b2a6
--jw-p-red-400#ff8a7a
--jw-p-red-500#c27a6d
--jw-p-red-600#c4402f
--jw-p-red-700#8f3a2e
--jw-p-red-800#90321f
--jw-p-red-850#682b23
--jw-p-red-900#5c231b
--jw-p-red-950#4a130b

Type, shape, space and motion

Section titled “Type, shape, space and motion”

The same in light and dark. On a phone, under 600 px wide, the type steps take smaller values: the prompt stays at 28 px or more and an option at 24 px or more. Under reduced motion every duration is 0.

TokenValue
--jw-font'Andika', 'Nunito Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
--jw-weight-text400
--jw-weight-strong700
--jw-leading1.3
--jw-size-instruction1.375rem
--jw-size-prompt2rem
--jw-size-option1.625rem
--jw-size-math2.25rem
--jw-size-verdict1.375rem
--jw-size-body1.125rem
--jw-size-small0.9375rem
--jw-size-key1.875rem
--jw-size-key-sign1.75rem
--jw-size-key-strip1.625rem
--jw-size-unit1.625rem
--jw-size-target2.5rem
--jw-control-height3rem
--jw-control-height-sm2.75rem
--jw-math-op-space0.2em
--jw-radius-card1rem
--jw-radius-control1rem
--jw-radius-small0.625rem
--jw-radius-chip9999px
--jw-border2px
--jw-press4px
--jw-focus-width3px
--jw-space-10.25rem
--jw-space-20.5rem
--jw-space-30.75rem
--jw-space-41rem
--jw-space-51.5rem
--jw-space-62rem
--jw-space-73rem
--jw-space-84rem
--jw-dur-fast120ms
--jw-dur-mark120ms
--jw-dur-band260ms
--jw-dur-step320ms
--jw-step-shift1.5rem
--jw-dur-scroll320ms
--jw-dur-tools200ms
--jw-dur-tick400ms
--jw-ease-outcubic-bezier(0.22, 1, 0.36, 1)
--jw-bar-height6rem