Live brand system

Everything you need to stay on-brand—now powered by shadcn-inspired components.

Access guidelines, download tooling, and explore our growing component library without leaving the brand portal. Collapse the navigation when you need extra focus.

Explore components Browse asset kits

Asset kits

UI modules

Voice examples

Launch playbooks

Color tokens

Reference the foundation palette and associated CSS variables. Tokens are exported through @sanajong/tokens.

Primary / 600

--brand-primary-600

#5B6CF7

Primary / 700

--brand-primary-700

#3D4FE3

Accent / 500

--brand-accent-500

#22D3EE

Neutral / 900

--brand-neutral-900

#0F172A

Neutral / 100

--brand-neutral-100

#F1F5F9

Typography scale

Display pairs with headings and Sans for UI; use Mono for code and inline object names.

Display / 48px The quick brown fox --fs-3xl

Headline / 32px The quick brown fox --fs-2xl

Body / 18px The quick brown fox --fs-lg

Supporting / 14px The quick brown fox --fs-sm

Mono / 13px The quick brown fox --fs-xs

Clear over clever

Prioritise clarity and context. Avoid insider jargon and acronyms without a definition.

Confident, not cocky

Lead with evidence and empathy. Celebrate achievements without dismissing the work ahead.

Playful with purpose

Light, human language is welcome when it helps comprehension or momentum.

⚡

Remember co-branding rules

When pairing with partner logos, maintain equal visual weight and use the neutral background kit.

Brand mark

Give the mark breathing room

Maintain clear space equal to the height of the mark on every side.

Brand mark

Don't

Don’t place on busy backgrounds

Avoid textured photography or low-contrast gradients that reduce legibility.

Brand mark

Don't

Don’t adjust colors or proportions

Stick to the approved palette—no drop shadows, outlines, or stretching.