FOUNDATIONS
THEMING
Foundations
The tokens every component is drawn with. This page shows them in the Pantrix preset, the look this site wears: a brand's colours, type and shapes over Pantrix's own spacing, elevation, motion and density.
PantrixPreset
Light and dark
Contrast worked out on this page
Colour
A component asks for a role, never a hex. Each brand role is a PantrixColor of four: the colour, what is written on it, its container and what is written on that.
primary
#2264FF
onColor #FFFFFF
4.8:1 AA
container #ECF3FE
5.8:1 AA
success
#1A8556
onColor #FFFFFF
4.6:1 AA
container #E7F6EF
5.8:1 AA
info
#2264FF
onColor #FFFFFF
4.8:1 AA
container #ECF3FE
5.8:1 AA
warning
#B95D15
onColor #FFFFFF
4.5:1 AA
container #FFF2E6
6.6:1 AA
danger
#C42A55
onColor #FFFFFF
5.5:1 AA
container #FCE7EC
7.5:1 AA
neutral
#4B4F5C
onColor #FFFFFF
8.2:1 AA
container #EEF0F4
17.7:1 AA
Grounds, text and lines, light
Role
Colour
On surface
For
background
#FFFFFF
1.00:1
The window behind the surfaces
surface
#FFFFFF
1.00:1
Cards, fields, sheets
textPrimary
#05070A
20.17:1 passes
Text
textSecondary
#4B4F5C
8.16:1 passes
Help, placeholders, counts
textDisabled
#A0A5B3
2.46:1
What cannot be used now
border
#E7E9ED
1.22:1
A field at rest
borderHover
#D5D9E0
1.42:1
Under a pointer
borderStrong
#A0A5B3
2.46:1
Scroll bars, a control’s edge
divider
#ECEEF3
1.16:1
Lines between rows
focusRing
#2264FF
4.84:1 passes
The keyboard’s focus
The Pantrix palette
50
#F4F8FF
100
#ECF3FE
200
#CFDFFF
300
#8BADFF
400
#5386FF
500
#2264FF
600
#1A52D6
700
#1442B8
25
#FAFBFC
50
#F5F7F9
100
#EEF0F4
200
#E7E9ED
300
#D5D9E0
400
#A0A5B3
500
#767A8A
600
#63647B
700
#4B4F5C
800
#2C2F3A
900
#101322
Typography
Nine roles in Plus Jakarta Sans, which the library bundles, and one for code. A text given no role is a label; a field types in its style's role, the body's on a phone and the label's under a pointer.
display · 36/42 Bold
Every platform's manners
headline · 28/34 Bold
Orders this week
title · 22/28 SemiBold
Delivery address
callout · 18/26
Free returns within thirty days.
body · 16/24
The parcel leaves the warehouse today and reaches you on Thursday.
label · 14/20
E-mail address
footnote · 12/16
Prices include VAT.
caption · 11/14
Updated 2 minutes ago
code · 14/20
PantrixTheme.typography.body
Spacing
Seven steps, from PantrixTheme.spacing. A page's margins come from the window's size class.
none
0dp
xs
4dp
sm
8dp
md
12dp
lg
16dp
xl
24dp
xxl
32dp
Shape
Components ask for a ShapeRole; the preset says how round each one is. The Pantrix preset rounds more than the library's default scale.
ExtraSmall
6dp · Pantrix 2dp
Small
8dp · Pantrix 4dp
Medium
12dp · Pantrix 8dp
Large
16dp · Pantrix 12dp
ExtraLarge
20dp · Pantrix 16dp
Full
A pill, on every scale
Elevation
none
0dp, a border
sm
1dp
md
2dp
lg
4dp
xl
8dp
Motion
Three durations. Under the system's reduced motion the theme keeps what moves still and lets it change at once.
fast · 100ms
normal · 200ms
slow · 350ms
Density
Comfortable unless the app asks for another. Compact suits a pointer and never makes a touch target smaller than the platform's own; Spacious makes it larger.
Compact · 0.85
Comfortable · 1
Spacious · 1.15