Loading
◇ Brand
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.
◇ Voice
How we sound.
Calm, direct, technically literate. We make claims because we've shipped the receipts. We never sell.
DO
- — 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.
DON'T
- — 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.
◇ Logo
The mark.
Three variants, one source of truth. Fill = currentColor, so the mark inherits the colour of whatever sits around it.
◇ Colour
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.
--canvasCanvas
Page background
dark #050505
light #fafafa
light #fafafa
--surfaceSurface
Raised sections
dark #070707
light #f4f4f5
light #f4f4f5
--surface-2Surface 2
Cards, images
dark #0a0a0a
light #ffffff
light #ffffff
--glassGlass
Glass surfaces
dark rgba(255,255,255,.02)
light rgba(0,0,0,.03)
light rgba(0,0,0,.03)
--text-primaryText primary
Headlines, UI
dark #fafafa
light #0a0a0a
light #0a0a0a
--text-secondaryText secondary
Body copy
dark #a1a1aa
light #3f3f46
light #3f3f46
--text-mutedText muted
Labels, eyebrows
dark #52525b
light #71717a
light #71717a
--hairlineHairline
Borders, rules
dark rgba(255,255,255,.06)
light rgba(0,0,0,.07)
light rgba(0,0,0,.07)
SIGNAL
Signal green
#34d399 · status only
GLITCH
Glitch cyan
#22d3ee · motion only
GLITCH
Glitch magenta
#ec4899 · motion only
PURPLE
Brand purple
#a78bfa · 3D rim only
◇ Typography
Three faces.
Cabinet Grotesk for display. Manrope for body. JetBrains Mono for labels. No fourth typeface — ever.
DISPLAY · CABINET GROTESK
Engineering the Impossible.
H2 · SECTION HEADING
Three pillars. One studio.
H3 · SUB SECTION
How we ship it.
BODY · MANROPE
Ulties is a boutique software studio crafting web, mobile and desktop apps, production-grade AI agents and cyber-security systems for ambitious teams.
EYEBROW · JETBRAINS MONO
◇ Services · Engineering
◇ Spacing
Generous rhythm.
Ulties uses ~2× the spacing of most agency sites. Sections breathe.
1
4 px
2
8 px
3
12 px
4
16 px
6
24 px
8
32 px
12
48 px
16
64 px
24
96 px
◇ Radius
Pills and panels.
Buttons are always pill-shaped. Cards always 2xl (16 px). Everything else picks from the scale.
lg
8 px
xl
12 px
2xl
16 px
3xl
24 px
full
9999 px
◇ Motion
Confident, never twitchy.
Easing is one custom expo-out curve. Entrances reveal, hovers respond, loops are rare and on-brand.
Tokens
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-motionRules
- — 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.
◇ Downloads
Pick up the pack.
Everything you need to build something Ulties-shaped, in one place.
LLM / Agent
design.md
Machine-readable design system. Drop into any AI agent context for on-brand output.
Open →
Mark
logo.svg
The native vector mark. currentColor fill — theme-aware out of the box.
Download ↓Logo / motion
Brand showcase
Live demos of every approved logo variant, colour treatment and motion.
Open →