# Sorted: Brand Philosophy

## The Invisible Layer

Every city runs on infrastructure you never see. Water pressure that just works. Electricity that's simply *there*. Sewage that disappears. The best infrastructure is the kind you forget exists — until it doesn't.

Sorted is the gas line for Web3 games. Players click. Things happen. The blockchain is an implementation detail, handled somewhere in the basement.

---

## "Sorted"

British slang. *"Don't worry about it — it's sorted."*

The word carries quiet confidence. Not boastful. Not technical. Just: *handled*. The transaction went through. The gas was paid. The player kept playing. Sorted.

This is the emotional core of the brand: **the relief of not having to think about it.**

---

## Visual Philosophy: Functional Infrastructure

### The Aesthetic

Think utility corridors. Server rooms. The back-of-house at a data center. Not glamorous, but deeply satisfying in its order. Cable runs labeled and organized. Status lights blinking green. Everything in its place.

This isn't the shiny frontend — it's the machinery that makes the frontend possible.

**References:**
- Stripe's dashboard: information-dense but never cluttered
- Linear's UI: functional minimalism with personality
- Vercel's deployment logs: monospace clarity
- The Tokyo Metro system map: complex made legible

### Not Terminal Cosplay

The current green-on-black aesthetic signals "hacker" but tips into costume. Real infrastructure doesn't try to look cool — it just works. The new direction keeps the developer credibility but drops the Matrix roleplay.

---

## Color Philosophy

### The Base: Warm Neutrals

Pure black (#000) feels cold, digital, empty. Infrastructure has warmth — the hum of servers, the heat of computation. The palette uses **warm darks** as the foundation:

- Near-black with slight warmth
- Dark grays that don't feel sterile
- Surfaces that suggest depth, not void

### The Signal: Functional Green

Green means *go*. In infrastructure, in traffic lights, in terminal output. But it's not decoration — it's **information**.

Green appears when:
- A transaction succeeds
- A system is healthy
- An action is available
- Something is *on*

The green is earned, not sprayed everywhere. When you see it, it means something.

### The Flourish: Infrastructure Tones

Pure grayscale is clinical. Real infrastructure has color:
- Copper of electrical conduits
- Blue of ethernet cables
- Amber of warning states
- The subtle warmth of brushed metal

These aren't primary colors — they're **accents that suggest physicality**. A hint of copper in a border. A warm amber for pending states. Colors that say "this is real machinery, not a flat interface."

---

## Typography Philosophy

### The Split Personality

**Interface text**: Clean sans-serif. Inter, Geist, or similar. The typography of modern tools — legible, neutral, gets out of the way.

**Code and data**: Monospace. JetBrains Mono or similar. When you're showing API keys, transaction hashes, or code snippets, the font signals "this is technical, this is precise."

The combination says: *professional tool for developers*, not *hacker aesthetic for vibes*.

### Hierarchy Through Weight, Not Decoration

No fancy display fonts. No decorative elements. Hierarchy comes from:
- Weight (light to medium, never bold)
- Size (subtle scale, not dramatic)
- Spacing (generous but not wasteful)
- Case (uppercase for labels only, sparingly)

---

## The Mark: Abstract Flow

### What It Represents

The logo should suggest:
- **Flow** — gas moving through a system
- **Connection** — pipes linking components
- **Direction** — energy going somewhere
- **Simplicity** — infrastructure reduced to essence

### What It Avoids

- Literal fuel pumps or gas stations (too on-the-nose, too emoji)
- Blockchain imagery (cubes, chains, nodes)
- Gaming imagery (controllers, pixels)
- Anything that needs explanation

The mark should work at 16px favicon size. It should be geometric, not organic. It should feel like it belongs on a system diagram.

---

## UI Philosophy: Functional Density

### Information First

Developers want to see their data:
- Current balance (the number, big and clear)
- Recent transactions (scannable list)
- API keys (copy-ready)
- Status (green = good, that's it)

The UI serves the information. Cards, borders, and chrome exist to organize — not to decorate.

### Density Without Clutter

**Functional density** means:
- Compact spacing (not sprawling hero sections)
- Multiple data points visible at once
- Scannable tables and lists
- No scroll-to-find-the-thing

**Not clutter** means:
- Clear visual hierarchy
- Consistent alignment grid
- Breathing room between sections
- One action per context, clearly marked

### The Stripe Standard

Stripe's dashboard is the benchmark: information-rich, professionally dense, but never overwhelming. Study how they:
- Use subtle backgrounds to group related items
- Keep actions discoverable but not shouty
- Make data the hero, not the interface

---

## Voice & Tone

### How Sorted Speaks

**Confident but not arrogant:**
> "One API call. Zero wallet friction."

**Technical but accessible:**
> "We sponsor the gas. Players just click."

**Brief:**
> "Gasless transactions for Web3 games."

Not:
> "Revolutionizing the blockchain gaming experience through innovative gasless transaction infrastructure solutions."

### The Sorted Vocabulary

**Use:**
- Transaction (not "tx" in UI, ok in docs)
- Sponsor, fund, cover (for gas payment)
- Balance, usage, limits
- API key, integration

**Avoid:**
- Blockchain jargon in user-facing UI
- "Web3" where "game" works
- Exclamation points
- Marketing superlatives

---

## Summary: The Sorted Feeling

When a developer uses Sorted, they should feel:

1. **Relief** — "I don't have to build this myself"
2. **Trust** — "This looks like serious infrastructure"
3. **Clarity** — "I understand exactly what's happening"
4. **Speed** — "I can integrate this in an hour"

When a player uses a game powered by Sorted, they should feel:

**Nothing.** They shouldn't know we exist. That's the point.

---

## Design Principles (TL;DR)

1. **Invisible until needed** — The best infrastructure disappears
2. **Green means go** — Color carries information, not decoration
3. **Warm, not cold** — Infrastructure hums with energy
4. **Dense, not cluttered** — Respect developer's time and screen
5. **Sorted, not revolutionary** — Quiet confidence, not hype