The Ulties brand book.
Logo files, colour values, type styles and interface examples for creating Ulties materials.
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 #f3f8ff
--surfacelight #ffffff
--surface-2light #e8f5ff
--glasslight rgba(60,149,234,.08)
--text-primarylight #0f2147
--text-secondarylight #385987
--text-mutedlight #536f94
--hairlinelight rgba(23,62,120,.10)
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-motionacross page and shared-element transitions.
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 →