# 07 · Iconography and imagery

---

## 7.1 The icon system

**Line icons. 24×24 grid, 2px stroke, round caps and joins, no fill.**

```tsx
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
     strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"
     aria-hidden="true">
```

This is the Lucide geometry, and the app's `Icon` component ships a curated
subset of it. Two consequences worth stating:

- **`stroke="currentColor"`, always.** An icon inherits the colour of the text it sits with. An icon with a hard-coded fill will be wrong the first time it lands on a dark surface.
- **`aria-hidden="true"`, almost always.** An icon next to a label is decoration. An icon that is the *only* content of a button needs `aria-label` on the button, not on the svg.

### Sizes

| Size | Use |
|---|---|
| 14px | Inline with 12.5px text; chevrons in breadcrumbs |
| 16px | Inline with body text; card actions |
| **18px** | **The default.** Nav rows, buttons, most chrome |
| 20px | Mobile top bar, larger touch targets |
| 24px | Empty-state and feature icons |

Never scale an icon above 24px — the 2px stroke goes spindly. For a larger
graphic, put the icon in a filled tile.

### Adding an icon

Add the path data to the platform `Icon` map. Do not import an icon library
component into a page — a one-off `<SomeIcon />` is how two visually different
chevrons end up on the same screen.

---

## 7.2 Product icons are emoji

Apps on the platform are identified by an **emoji**, not a bespoke glyph. Sora
is `🏗️`.

This is a deliberate decision, and the reasoning is worth keeping:

- An app can be added by anyone, in one line of a manifest, with no designer in the loop.
- Emoji are legible at 16px in a launcher list, where a custom monoline glyph is a smudge.
- They are instantly distinguishable from each other, which is what a ⌘K list actually needs.
- They cost nothing to maintain and never go stale.

**Rules**

- One emoji, never two.
- Choose a **concrete object**, not an abstraction — `🏗️` for permits and construction, not `⚡` for "fast".
- No faces, no flags, no hands (they carry skin tone and gesture meaning nobody intended).
- The emoji sits on a `surface-mist` or `accent-soft` rounded tile — `9px` at 30px, `11px` at 44px.
- Default for an app with no icon: `📦`.

---

## 7.3 The `//` device

Distinct from the logo. Set in **Geist Mono, bold, terracotta**, `//` can prefix
an eyebrow, open a deck section, or mark a stat callout.

**One per surface.** See [logo § 3.7](/guide/logo/#the-as-a-typographic-device).

---

## 7.4 Imagery

### What we use

- **Real screenshots** of real workflows, real registers, real agent output. Cropped tight, on a paper or ink ground, with a 12px radius and a hairline border.
- **Numbers as the image.** The brand's hook is proof. A large tabular figure with a one-line label outperforms any photograph we could commission.
- **Simple charts.** Before/after, a ranked bar list, a single trend line. See [colour § 4.6](/guide/color/#data-visualisation).
- **People, when they are our people.** Founders, clients, a job site. Natural light, warm tones, no corporate staging.

### What we never use

- ❌ Glowing brains, neural-network meshes, circuit boards
- ❌ Humanoid robots, android hands touching human hands
- ❌ Blue/purple gradient tech abstractions
- ❌ Generic "team in a bright office" stock photography
- ❌ AI-generated hero images. We are a lab that tests AI; using a fake image to sell honesty is the exact wrong trade
- ❌ Anything with a lens flare

If a picture could sit on any AI company's homepage, it does not belong on ours.

### Screenshot treatment

1. Crop to the thing being shown. No browser chrome, no OS chrome, no cursor.
2. Real data or realistic data. Never `Lorem ipsum`, never `Test User 1`.
3. Scrub every real name, email, org and ID before publishing.
4. Frame: 12px radius, 1px `border`, `raised` shadow.
5. Provide 1× and 2×. Never upscale.

---

## 7.5 Illustration

Since Labs does not have an illustration style, and **should not acquire one
casually**. If a concept needs a picture, the order of preference is:

1. A screenshot of the real thing
2. A diagram — boxes, hairlines, one terracotta highlight, labels in DM Sans
3. A number set large
4. Nothing

A diagram follows the same rules as everything else: `border` hairlines,
`surface-mist` fills, one accent, sentence case labels, 11px floor.

---

## 7.6 Do and don't

**Do**
- ✅ `currentColor` on every icon
- ✅ 18px as the default icon size
- ✅ Concrete-object emoji for apps
- ✅ Real screenshots with scrubbed data

**Don't**
- ❌ Mix icon libraries or stroke weights
- ❌ Give a product its own logo
- ❌ Scale a line icon past 24px
- ❌ Ship a glowing brain, ever