Color palette
Click on a color to copy the hex color value
Primary
#1C2B58
#1C2B58
Secondary
#D7288B
#D7288B
Alt
#F9F7F4
#F9F7F4
Alt 2
#FFFDFB
#FFFDFB
Highlight
#213BC6
#213BC6
Focus
#FFDD00
#FFDD00
Dark
#000000
#000000
Light
#ffffff
#ffffff
Navy 80
#4B5576
#4B5576
Navy 60
#6E7691
#6E7691
Navy 8
#EDEEF5
#EDEEF5
Navy 4
#F5F6FC
#F5F6FC
Border
#D3D5E3
#D3D5E3
Contrast
#DDDDDD
#DDDDDD
navy-80
#4B5576
#4B5576
navy-60
#798099
#798099
navy-40
#A5AABE
#A5AABE
navy-20
#D3D5E3
#D3D5E3
navy-8
#EDEEF5
#EDEEF5
navy-4
#F5F6FC
#F5F6FC
magenta-80
#DE50A3
#DE50A3
magenta-60
#E779BB
#E779BB
magenta-40
#EFAAD5
#EFAAD5
magenta-20
#FCD5EE
#FCD5EE
magenta-8
#FDECF7
#FDECF7
Font families
System Font
Public Sans
Monospace
Font sizes
Size Body — Velit gravida aliquet conubiaMin - font-size: 16px
Max - font-size: 18px
Max - font-size: 18px
Size Heading — Velit gravida aliquet conubiaMin - font-size: 20px
Max - font-size: 22px
Max - font-size: 22px
Size Small — Velit gravida aliquet conubiafont-size: 16px
Size Medium — Velit gravida aliquet conubiafont-size: 19px
Size Large — Velit gravida aliquet conubiafont-size: 24px
Size Extra Large — Velit gravida aliquet conubiafont-size: 28px
Size Extra Small — Velit gravida aliquet conubiafont-size: 12px
Size Extra Small — Velit gravida aliquet conubiafont-size: 14px
Size Small — Velit gravida aliquet conubiafont-size: 16px
Size Medium — Velit gravida aliquet conubiafont-size: 19px
Size Large — Velit gravida aliquet conubiaMin - font-size: 19px
Max - font-size: 24px
Max - font-size: 24px
Size Extra Large — Velit gravida aliquet conubiaMin - font-size: 24px
Max - font-size: 28px
Max - font-size: 28px
Size Huge — Velit gravida aliquet conubiaMin - font-size: 28px
Max - font-size: 38px
Max - font-size: 38px
Size Massive — Velit gravida aliquet conubiaMin - font-size: 38px
Max - font-size: 50px
Max - font-size: 50px
Spacing
space-2xs — 0.25rem
space-xs — 0.5rem
space-sm — 1rem
space-md — 1.5rem
space-lg — 2rem
space-xl — 2.5rem
space-2xl — 3rem
space-3xl — 4rem
space-4xl — 5rem
space-5xl — 6rem
space-gutter — var(--wp--custom--spacing--md)
space-xs — 0.5rem
space-sm — 1rem
space-md — 1.5rem
space-lg — 2rem
space-xl — 2.5rem
space-2xl — 3rem
space-3xl — 4rem
space-4xl — 5rem
space-5xl — 6rem
space-gutter — var(--wp--custom--spacing--md)
Lists
- Ordered list item - Eiusmod eu mollit cillum.
- Ordered list item - Deserunt pariatur ea ad enim pariatur non minim anim adipiscing ea laborum eu commodo deserunt id culpa ipsum laborum eu
- Ordered list item - Voluptate cupidatat lorem, aliquip in.
- Ordered list item - Non amet voluptate tempor nostrud sunt.
- Unordered list item - Nisi veniam ex sint.
- Unordered list item - Irure officia sed, quis lorem.
- Unordered list item - Sed sed lorem culpa ullamco commodo consectetur cupidatat laboris commodo cupidatat sit mollit lorem et enim eiusmod deserunt et voluptate
- Unordered list item - Veniam, exercitation enim amet id sit consequat consequat.
Buttons
Default buttons
Pagination
Cards
Components
Page headers
These can only be viewed in the context of a page so we link to them directly below.
Clause callout
The clause
- Item 1
- Item 2
Clause example wording
Example wording
Party A shall…
- Item 1
- Item 2
Clause updates
Updates
Patterns
Call to action – subscribe
Subscribe to our newsletter
Get the latest news and updates to your inbox. View the archive to see what we send.
Call to action – clause
Make this clause better
Tell us about your experience with this clause so we can improve it.
Call to action – generic
Get involved in our work
Receive our newsletter, hear about the latest Pro Bono opportunities and take part in research.
Logo gallery
Statistics
123.1%
Irure amet velit anim exercitation. Velit anim exercitation laborum tempor mollit, cillum. Laborum tempor mollit cillum dolore.
123.1%
Irure amet velit anim exercitation. Velit anim exercitation laborum tempor mollit, cillum. Laborum tempor mollit cillum dolore.






