TheUltiesbrandbook.
The visual companion to /design.md — everything that makes a screen look like Ulties. Voice, mark, colour, type, motion, components. Read this before shipping any Ulties-facing surface.
How we sound.
Calm, direct, technically literate. We make claims because we've shipped the receipts. We never sell.
- — Short sentences. One claim at a time.
- — First-person plural: "we ship", "we built".
- — Sentence case everywhere — including headings.
- — Em-dash for emphasis. Oxford commas always.
- — Italicise one word for cadence: recently.
- — Title Case In Headings.
- — Buzzwords: "synergy", "robust", "world-class".
- — Exclamation marks. Ellipses for drama.
- — "Our team", "the team" — write "we".
- — Walls of text. Break for breath.
The mark.
Three variants, one source of truth. Fill = currentColor, so the mark inherits the colour of whatever sits around it.
Dark-first palette.
Every visual decision must work in dark mode first. The light theme is a faithful inversion — same hierarchy, same contrast, opposite ends.
--canvaslight #fafafa
--surfacelight #f4f4f5
--surface-2light #ffffff
--glasslight rgba(0,0,0,.03)
--text-primarylight #0a0a0a
--text-secondarylight #3f3f46
--text-mutedlight #71717a
--hairlinelight rgba(0,0,0,.07)
Three faces.
Cabinet Grotesk for display. Manrope for body. JetBrains Mono for labels. No fourth typeface — ever.
Generous rhythm.
Ulties uses ~2× the spacing of most agency sites. Sections breathe.
Pills and panels.
Buttons are always pill-shaped. Cards always 2xl (16 px). Everything else picks from the scale.
Confident, never twitchy.
Easing is one custom expo-out curve. Entrances reveal, hovers respond, loops are rare and on-brand.
easing cubic-bezier(0.22, 1, 0.36, 1)
entrance y:30→0, opacity:0→1
duration 0.6–0.9s entrance
≤0.35s hover
stagger 0.06–0.08s siblings
scroll lenis smooth
library framer-motion- — Never animate
transition: all. - — Target opacity, transform, background-color.
- — Marquees and shimmer = CSS keyframes only.
- — Three.js scenes re-mount via
key={theme}on flip. - — Respect
prefers-reduced-motion(TODO).
Pick up the pack.
Everything you need to build something Ulties-shaped, in one place.
design.md
Machine-readable design system. Drop into any AI agent context for on-brand output.
Open →
logo.svg
The native vector mark. currentColor fill — theme-aware out of the box.
Download ↓Brand showcase
Live demos of every approved logo variant, colour treatment and motion.
Open →