Iconography and imagery

7.1 The icon system

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

<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

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.

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.
• 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