ITU Docs

Colors

ITU color system built on OKLch with brand, alt, sun, jeans, and gray scales.

Color scales

The palette is built from five core scales, each with 11 shades (50--950):

  • Brand — the primary ITU blue, used for primary actions, links, and key UI elements.
  • Alt — a secondary teal-blue for supporting accents and differentiation.
  • Sun — warm amber tones for highlights, warnings, and decorative elements.
  • Jeans — a muted cool blue for backgrounds and subtle UI chrome.
  • Gray — neutral grays for text, borders, and surfaces.

Semantic tokens

Semantic tokens map to the scales above and adapt automatically in dark mode. Use semantic tokens in application code rather than raw scale values.

Dark mode

All scales and semantic tokens have dark-mode equivalents defined via the dark variant. The DarkModePreview below shows both modes side by side.

Light
Dark

Usage in Tailwind

All colors are available as Tailwind utilities via @itu/tailwind-config:

html
<!-- Scale values -->
<div class="bg-brand-500 text-brand-50">Primary</div>
<div class="bg-sun-300">Highlight</div>
 
<!-- Semantic tokens -->
<div class="bg-primary text-primary-foreground">Button</div>
<div class="bg-muted text-muted-foreground">Subtle</div>
7 lines of html code

Prefer semantic tokens (bg-primary, text-muted-foreground) over raw scale values in application code. This ensures your UI adapts correctly to dark mode and future theme changes.