<!-- source: openspec/current/home/typography.md -->

---
title: Home — Typography
status: stable
owner: pavel
audience: [pavel, ai, engineer]
tldr: Cross-block audience tag system for the homepage — the Chip skill component used across ForFounders and WhoWeWorkWith.
---
# Home — typography and audience tags

> Per-block typography rules (token stacks, forbidden patterns, Visual contract tables) live in `blocks.md` under each block's **§ Visual contract** section. This file documents the cross-block audience tag system introduced by the Founder Track.

---

## Audience tag system

> Extracted from the Founder Track delta amendment (see `blocks.md § Founder Track delta`). The `<Chip kind="skill">` component is used across ForFounders and WhoWeWorkWith to render geo-markers and persona identifiers as typographic tags.

### Chip rendering convention

Geo-marker and segment tags render as `<Chip kind="skill" />` from `@rapoport-studio/ui/components/chip`:

```
rounded-full border font-mono text-xs uppercase tracking-[0.15em]
```

The chip appears **above the segment title** in ForFounders, and **above the cohort name** in WhoWeWorkWith.

### ForFounders segment geo-tags

| Segment slug | Geo string (English, all locales) | Notes |
|---|---|---|
| `seriesA` | `Tel Aviv · London · NYC` | Series-A AI-native founders |
| `aiRetrofit` | `Paris · Berlin · Tel Aviv` | Mid-cap SaaS AI-orchestration retrofit |
| `reservist` | `Tel Aviv` | Israeli reservist founders (unhidden RAP-265) |

City names and language abbreviations (`EN · RO · RU · HE`) are language-invariant proper nouns — preserved in English across all three locales.

### WhoWeWorkWith cohort geo-tags

Four cohort geo-markers use the same Chip component. Geo strings are preserved in English across all locales. Cohort slugs: `seriesABAi`, `midCapSaas`, `deepTech`, `diaspora`. Exact geo strings are defined in `home.whoWeWorkWith.cohorts.{slug}.geo` in the i18n catalog.

### Forbidden patterns on audience tags

- No raw hex on chip borders or text — always tokens.
- No colored chip variants for negative/excluded audiences (the chip is informational, not evaluative).
- No named client references within a cohort tag.

---

## May 2026 home audit batch (RAP-744) — typography amendments

### Display-xl token clamp (HAF, archive `2026-05-14-tighten-home-above-fold-mobile`)

`--text-display-xl` token value: `clamp(34px, 8vw, 64px)`. Bakes fluid scaling into the canonical display token so all consumers (Hero h1, ClosingCTA h2) reflow on mobile-to-desktop without per-site clamp wrapping.

### Mono-label floor (HMA, archive `2026-05-14-fix-home-mobile-a11y`; HMR mass-replace executed `2026-05-14-home-mobile-rhythm-and-density`)

Mono labels (eyebrows, status pills, micro-captions, step numerals) render at 12 px CSS minimum on mobile. Letter-spacing on mono caps at `tracking-[0.15em]`. Sites with `text-[10px]` or `text-[11px]` violate this contract; HMR's mass-replace pass cleared the eight audit-cited sites.

### SVG text label readability on mobile (RAP-755 follow-up, PR #1060)

SVG `<text>` elements that participate in mobile layouts use CSS `font-size` (via Tailwind class such as `text-sm`) rather than the SVG `fontSize` attribute. The SVG attribute is in viewBox user-units and scales with viewBox-to-viewport ratio, producing sub-readable text on narrow viewports; CSS `font-size` is in CSS pixels and renders at constant size regardless of SVG scale. Source: `apps/web/src/components/shared/orchestra-diagram.tsx`.
