Foundations
Every visual decision in Kanto resolves to a CSS custom property. Components hard-code no colour, no size and no duration — which is what makes the light theme possible without a single line of theme-specific CSS.
Surfaces
Elevation in Kanto is a lighter surface, not a shadow. The only real shadow in the system is on toasts.
dark-8
--color-dark-8
dark-12
--color-dark-12
dark-14
--color-dark-14
dark-15
--color-dark-15
dark-16
--color-dark-16
dark-18
--color-dark-18
dark-19
--color-dark-19
dark-20
--color-dark-20
dark-22
--color-dark-22
dark-23
--color-dark-23
dark-24
--color-dark-24
Semantic colours
Each colour ships in three variants: -base opaque, -soft at 12%
and -hover at 16%.
primary
--color-primary-base
danger
--color-danger-base
info
--color-info-base
warning
--color-warning-base
success
--color-success-base
primary soft
--color-primary-soft
danger soft
--color-danger-soft
info soft
--color-info-soft
warning soft
--color-warning-soft
success soft
--color-success-soft
Text
text-100
--color-text-100
text-400
--color-text-400
text-500
--color-text-500
text-600
--color-text-600
text-700
--color-text-700
text-800
--color-text-800
text-900
--color-text-900
Typography
Studio · 48/58 Manrope
Heading H1 · 36/43 Manrope 600
Heading H4 · 24/29 Manrope 400
Heading H6 · 18 Manrope 600
Body medium · 14 Mulish 500
Body regular · 14 Mulish 400
Body small · 12 Mulish 400
Code · 14 Source Code Pro