# Sorted.fund Brand Kit

## Quick Start

**Philosophy:** "Utility Sublime" — invisible infrastructure aesthetics. Warm, functional, dense but organized.

**Primary colors:**
- Background: `#0e0e10`
- Surface: `#16151a`
- Text: `#e4e1e8`
- Green (signal): `#22c55e`
- Gray (mark): `#52505a`

**Fonts:**
- UI: Inter (500 for headings, 400 for body)
- Code: JetBrains Mono

---

## Files

### Logo
- `sorted-mark-final.svg` — The mark (wave + green dot)
- `sorted-favicon.png` — 32px favicon

### Wordmarks
- `sorted-wordmark-final.svg` — Mark + "sorted.fund" (primary)
- `sorted-wordmark-short.svg` — Mark + "sorted" (compact)

### Documentation
- `sorted-design-guidelines.md` — Full design system (colors, typography, spacing, components)
- `sorted-philosophy.md` — Brand narrative and voice
- `sorted-utility-sublime-philosophy.md` — Visual design philosophy

### Reference
- `sorted-utility-sublime-v2.png` — Visual reference canvas

---

## Key Principles

1. **Green means go** — Use `#22c55e` for success, active, healthy states. Not decoration.
2. **Warm neutrals** — Background isn't cold black. Use `#0e0e10` and `#16151a`.
3. **Functional density** — Information-rich, Stripe-style. No wasted space.
4. **Sans + mono** — Inter for UI, JetBrains Mono for code/data.
5. **No hype** — Brief, confident copy. No exclamation points or superlatives.

---

## CSS Variables

```css
:root {
  --bg-deep: #0e0e10;
  --bg-warm: #16151a;
  --bg-surface: #201e24;
  --border: #37343e;
  --text-primary: #e4e1e8;
  --text-secondary: #a8a2b2;
  --text-muted: #625e6c;
  --green: #22c55e;
  --green-dim: #187840;
  --amber: #cf9a37;
  --red: #dc2626;
  --font-sans: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
}
```

---

*Utility Sublime: The beauty of things that disappear into function.*