# Ulties design.md

Machine-readable design system for Ulties surfaces.

## Voice

- Calm, direct, technically literate.
- Make claims only when backed by shipped work.
- Use first-person plural: `we ship`, `we built`.
- Sentence case everywhere, including headings.
- Avoid buzzwords, exclamation marks, and padded marketing copy.

## Logo

- Approved variants: `mark`, `wordmark`, `full`.
- Fill uses `currentColor`.
- Do not stretch, tilt, rainbow-tint, or add drop shadows.
- Use the full lockup only in brand-context moments.
- Use mark or wordmark for functional UI.

## Color

- `--canvas`: dark `#050505`, light `#fafafa`
- `--surface`: dark `#070707`, light `#f4f4f5`
- `--surface-2`: dark `#0a0a0a`, light `#ffffff`
- `--glass`: dark `rgba(255,255,255,.02)`, light `rgba(0,0,0,.03)`
- `--text-primary`: dark `#fafafa`, light `#0a0a0a`
- `--text-secondary`: dark `#a1a1aa`, light `#3f3f46`
- `--text-muted`: dark `#52525b`, light `#71717a`
- `--hairline`: dark `rgba(255,255,255,.06)`, light `rgba(0,0,0,.07)`

Accent colors:

- Signal green `#34d399` for status only
- Glitch cyan `#22d3ee` for motion only
- Glitch magenta `#ec4899` for motion only
- Brand purple `#a78bfa` for 3D rim only

## Typography

- Display: Cabinet Grotesk
- Body: Manrope
- Labels / eyebrows: JetBrains Mono
- No fourth typeface

## Spacing

- `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

- `lg` = `8 px`
- `xl` = `12 px`
- `2xl` = `16 px`
- `3xl` = `24 px`
- `full` = `9999 px`

Rules:

- Buttons are pill-shaped
- Cards default to `2xl`

## Motion

- Easing: `cubic-bezier(0.22, 1, 0.36, 1)`
- Entrance: `y:30→0`, `opacity:0→1`
- Entrance duration: `0.6–0.9s`
- Hover duration: `≤0.35s`
- Stagger siblings: `0.06–0.08s`
- Scroll: smooth
- Library: framer-motion

Motion rules:

- Never animate `transition: all`
- Animate opacity, transform, and background-color
- Marquees and shimmer use CSS keyframes
- Respect `prefers-reduced-motion`