text link
Approved semantic colour from DTCG token set 5.
UJ design system
Foundations
Approved foundations define the visual and interaction language used by every UJ digital application.
Released
Colour
A restrained, accessible palette
Semantic tokens separate institutional intent from individual CSS declarations.
text soft
Approved semantic colour from DTCG token set 5.
text muted
Approved semantic colour from DTCG token set 5.
text default
Approved semantic colour from DTCG token set 5.
text inverse
Approved semantic colour from DTCG token set 5.
brand orange
Approved semantic colour from DTCG token set 5.
brand orange Hover
Approved semantic colour from DTCG token set 5.
border strong
Approved semantic colour from DTCG token set 5.
border default
Approved semantic colour from DTCG token set 5.
status danger
Approved semantic colour from DTCG token set 5.
status success
Approved semantic colour from DTCG token set 5.
status warning
Approved semantic colour from DTCG token set 5.
surface page
Approved semantic colour from DTCG token set 5.
surface strong
Approved semantic colour from DTCG token set 5.
surface subtle
Approved semantic colour from DTCG token set 5.
surface default
Approved semantic colour from DTCG token set 5.
Typography
Institutional type roles
System Georgia carries editorial character without redistributing unlicensed font files. Arial keeps interfaces and long-form information direct.
body / Arial, Helvetica, sans-serif
Knowledge that moves society forward.
display / Georgia, Times New Roman, serif
The future is ours.
System scales
One vocabulary across applications
Spacing, layout, focus, motion, appearance and curated design presets are published from the same immutable system.
- Content maximum
- 77.5rem
- Responsive gutter
- 1.5rem
- Focus indicator
- 0.1875rem
- Appearance
- System, light, dark, print and forced colours
Design presets
Four ways to experience the same UJ system
A preset changes the visual expression of governed components. It does not change UJ content, meaning, navigation or accessibility.
- UJ Standard
- The balanced default for every site
- Editorial
- More expressive hierarchy for stories
- Contemporary
- A crisp, spacious digital expression
- Compact
- Higher information density for work
Appearance and design are independent preferences. People can use any preset in system, light or dark appearance. UJ Standard remains the default, and every preset keeps the same institutional brand, semantic structure and accessible interaction contract.