Brand kit & assets
Colours, type, logo and mascot art for anyone making something about Norby - grab what you need.
Colour palette
Every colour in the product, pulled straight from the design tokens. Copy the hex codes or CSS variables into your own mockups - nothing here is approximate.
Ocean & surfaces
--color-bg#001A33--color-bg-alt#01407C--color-water-mid#0C67A6--color-surface#F7F7F5--color-surface-alt#EEEDE6--color-surface-inverse#003162Brand accents
--color-primary#FAC810--color-primary-contrast#001A33--color-accent#EC3876--color-accent-text#DD155A--color-accent-2#8958BE--color-accent-3#0E95CEText
--color-text#001A33--color-text-on-dark#F7F7F5--color-text-muted#696C68--color-text-muted-on-dark#7F827DBorders & status
--color-border#001A33--color-border-soft#E2E0D8--color-success#45A043--color-warning#F7D854--color-danger#EC3876Gradients & glass
--gradient-oceanlinear-gradient(180deg,#01407C 0%,#0C67A6 28%,#01407C 62%,#001A33 100%)--glass-fillrgba(0,49,98,.72)--glass-borderrgba(247,247,245,.14)--divider-on-darkrgba(247,247,245,.12)Typography
Three typefaces, three jobs. Luckiest Guy shouts, Baloo 2 leads, Poppins reads.
Luckiest Guy
NORBY
Display · --font-display
The loud, bouncy display face - reserved for the wordmark and big splash moments like the page loader.
Weights: 400 (its only weight)
Baloo 2
Make waves
Headings · --font-heading
Every heading on the site: uppercase, skewed -8°, and always bold.
Weights: 800 (the only weight used, everywhere)
Poppins
The friendliest narwhal on Solana.
Body · --font-body
Body copy, labels, buttons and captions - the workhorse face, from 11px micro text up to 18px hero descriptions.
Weights: 400, 500, 600, 700
Logo
Minimum clear space: 20% of the mark’s width on every side (dashed line above).
The logo mark is a self-contained badge - it never needs the wordmark next to it to read as Norby.
- Keep at least 20% of the mark's width as clear space on every side
- Scale it proportionally - never stretch or squash it
- Place it on solid Ocean navy (#001A33) or Paper white (#F7F7F5) for the cleanest contrast
- Use the transparent PNG as-is - no added shadows, outlines or recolouring
- Keep it at 32px or larger - the tusk detail is lost below that
Mascot poses
Seven ready-to-use poses, transparent PNGs, full resolution. Credit the project when you use them - memes encouraged.
