Core concepts

Design tokens

Every value an sx prop takes, read straight from @hzblj/kara-theme when this page was built. Colours are named by what they are for; whose colour each one is — the platform’s, or a hex kara owns — is the value’s business.

Colours

A system name resolves on the device — so it follows the user’s appearance, contrast setting and, on Android, the Material scheme. Swatches show light, then dark, for the colours kara owns. Any colour can be overridden in the theme.

border

Token	iOS	Android
`border.accent`	#ff5700	#ff5700
`border.destructive`	UIKit systemRedColor	Material error
`border.quinary`	UIKit quaternarySystemFillColor	Material surfaceContainerHighest
`border.secondary.base`	UIKit opaqueSeparatorColor	Material outline
`border.secondary.muted`	UIKit separatorColor	Material outlineVariant
`border.tertiary`	UIKit separatorColor	Material outlineVariant

btn

Token	iOS	Android
`btn.bg.glass.base`	#ffffff29	#ffffff29
`btn.bg.glass.disabled`	#ffffff0a	#ffffff0a
`btn.bg.secondary.base`	UIKit secondarySystemFillColor	Material secondaryContainer
`btn.bg.secondary.disabled`	UIKit quaternarySystemFillColor	Material surfaceContainerHighest
`btn.content.disabled`	UIKit tertiaryLabelColor	Material outline

content

Token	iOS	Android
`content.accent`	#ff5700 / #ff6e39	#ff5700 / #ff6e39
`content.destructive`	UIKit systemRedColor	Material error
`content.on.bg`	#ffffff	#ffffff
`content.on.destructive`	#ffffff	Material onError
`content.on.high.contrast`	UIKit systemBackgroundColor	Material inverseOnSurface
`content.primary`	UIKit labelColor	Material onSurface
`content.quaternary`	UIKit quaternaryLabelColor	Material outlineVariant
`content.secondary`	UIKit secondaryLabelColor	Material onSurfaceVariant
`content.success`	UIKit systemGreenColor	#00cc68 / #00d68a
`content.tertiary`	UIKit tertiaryLabelColor	Material outline

fill

Token	iOS	Android
`fill.accent.base`	#ffe8e1 / #ff45001f	#ffe8e1 / #ff45001f
`fill.accent.disabled`	#ffdccf / #ff45001f	#ffdccf / #ff45001f
`fill.accent.primary`	#ff5700	#ff5700
`fill.destructive.base`	#ffeff0 / #ff00001f	#ffeff0 / #ff00001f
`fill.destructive.disabled`	#ffdfe2 / #ff00001f	#ffdfe2 / #ff00001f
`fill.destructive.primary`	UIKit systemRedColor	Material error
`fill.quaternary`	UIKit quaternarySystemFillColor	Material surfaceContainerHighest
`fill.success.base`	#e3faf1 / #00c7561f	#e3faf1 / #00c7561f
`fill.success.primary`	UIKit systemGreenColor	#00c756 / #00cc68
`fill.tertiary`	UIKit tertiarySystemFillColor	Material surfaceVariant

surface

Token	iOS	Android
`surface.base`	UIKit systemGroupedBackgroundColor	Material surface
`surface.depth`	#f5f5f5 / #000000	#f5f5f5 / #000000
`surface.high.contrast`	UIKit labelColor	Material inverseSurface
`surface.primary`	UIKit secondarySystemGroupedBackgroundColor	Material surfaceContainerLow

Spacing

Padding, margins, gap, spacing, an icon’s size. Points on iOS, dp on Android.

Token	Value
`s0`	0
`s1`	1
`s2`	2
`s4`	4
`s6`	6
`s8`	8
`s10`	10
`s12`	12
`s16`	16
`s20`	20
`s24`	24
`s28`	28
`s32`	32
`s36`	36
`s40`	40
`s48`	48
`s56`	56
`s64`	64
`s72`	72
`s80`	80
`s96`	96

Radii

Token	Value
`none`	0
`small`	8
`medium`	12
`large`	16
`full`	999

Typography

Every variant is set in the platform’s face unless the theme names one, and grows with the user’s text size the way the platform style beside it does.

Variant	Size / line	Weight	Grows with	Sample
`displayXl`	56 / 64	medium · display	largeTitle	Order summary
`displayL`	48 / 56	medium · display	largeTitle	Order summary
`headingXl`	40 / 48	medium · display	largeTitle	Order summary
`headingL`	32 / 40	medium · display	title	Order summary
`headingM`	28 / 36	medium · display	title	Order summary
`headingS`	24 / 32	medium · display	title2	Order summary
`headingXs`	20 / 28	medium	title3	Order summary
`headline`	18 / 28	medium	headline	Order summary
`body`	16 / 24	medium	body	Order summary
`cardTitle`	14 / 24	regular	subheadline	Order summary
`subheadline`	14 / 20	regular	subheadline	Order summary
`subheadlineMedium`	14 / 20	medium	subheadline	Order summary
`footnote`	13 / 18	regular	footnote	Order summary
`footnoteMedium`	13 / 18	medium	footnote	Order summary
`cardSubtitle`	12 / 16	regular	caption	Order summary
`label`	12 / 16	regular	caption	Order summary
`labelMedium`	12 / 16	medium	caption	Order summary
`caption`	11 / 16	regular	caption2	Order summary
`captionMedium`	11 / 16	medium	caption2	Order summary

Opacity

For opacity, and after a colon on a colour token: fill.accent.base:o50.

Token	Value
`o0`	0
`o5`	0.05
`o10`	0.1
`o20`	0.2
`o25`	0.25
`o30`	0.3
`o40`	0.4
`o50`	0.5
`o60`	0.6
`o70`	0.7
`o75`	0.75
`o80`	0.8
`o85`	0.85
`o90`	0.9
`o95`	0.95
`o100`	1

Durations

Token	Value
`d0`	0 ms
`d50`	50 ms
`d100`	100 ms
`d150`	150 ms
`d200`	200 ms
`d250`	250 ms
`d300`	300 ms
`d350`	350 ms
`d400`	400 ms
`d450`	450 ms
`d500`	500 ms
`d600`	600 ms
`d700`	700 ms
`d800`	800 ms
`d1000`	1000 ms
`d1500`	1500 ms
`d2000`	2000 ms
`d3000`	3000 ms
`d5000`	5000 ms
`d10000`	10000 ms

Breakpoints

For responsive layout values, mobile first. base is everything narrower than sm.

Token	Value
`sm`	576 pt
`md`	768 pt
`lg`	992 pt
`xl`	1200 pt