principles
Confident
Lead with strong hierarchy, direct language and generous space. Make important information easy to see and act on.
UJ design system
Guidance
Approved decisions explain how UJ foundations and components should be applied. Each record retains its evidence source and governance history.
principles
Human
Balance institutional authority with warmth, clarity and an inclusive voice that welcomes every audience.
principles
Progressive
Use bold contrast and flexible components to express momentum without sacrificing accessibility or trust.
Foundations
Colour use and contrast
Use semantic UJ colour tokens so brand expression, text contrast, status meaning, themes and forced-colour behaviour remain governed together.
Foundations
Typography and font distribution
Use system Georgia for editorial headings and Arial for interface and body text; do not redistribute font binaries without recorded licence evidence.
Identity
Institutional mark use
Use the checksum-verified UJ mark through the approved Brand Lockup and institutional shell contracts, with controlled institutional-use terms.
Layout
Responsive layout and reflow
Build from stable containers, spacing and grid contracts so information reflows without overlap or loss at phone, tablet and desktop widths.
Themes
Light, dark and user preference
Use one semantic theme contract for light, dark, system, print and forced-colour modes, and preserve the visitor's explicit choice.
Accessibility
Keyboard, focus and target size
Every action and navigation path must be operable by keyboard, expose visible focus and provide stable targets that meet the approved WCAG 2.2 contract.
Accessibility
Motion and reduced motion
Use motion only to clarify state or continuity, keep it within the approved duration and easing tokens, and honour reduced-motion preference.
Governance
Component contribution and promotion
Promote a component only when it is useful, unique, usable, consistent and versatile, with evidence across UJ application families.
Governance
Release, adoption and deprecation
Deliver immutable semantic releases, verify every registered application, and announce replacements before removing a public contract.
Content
Content hierarchy and language
Lead with clear hierarchy and direct language, use generous space, and make the next meaningful action easy to identify.