# Flaghand design foundation

One stylesheet for every Flaghand page. Light only: one scheme, the bright red. Every Flaghand web page is built from these tokens and components.

- Page: https://flaghand.com/foundation
- Tokens as JSON (Design Tokens format): https://flaghand.com/foundation.json
- Tokens as CSS (fonts and tokens): https://flaghand.com/assets/tokens.css
- The whole stylesheet (tokens, base and components): https://flaghand.com/assets/flaghand.css

## Type

Familjen Grotesk 400 to 700, self-hosted, one family set tight.

| Step | CSS | Size (px, largest) | Leading | Tracking |
|---|---|---|---|---|
| Display | `.display` | 96 | .95 | -0.045em |
| Hold | `.hold` | 144 | .92 | -0.045em |
| Title | `.title` | 72 | .98 | -0.04em |
| Heading | `.heading` | 48 | 1 | -0.035em |
| Head | `.head` | 24 | 1.15 | -0.025em |
| Lede | `.lede` | 19 | 1.45 | -0.01em |
| Read | `.article p` | 17 | 1.6 | -0.005em |
| Body | `body` | 16 | 1.5 | -0.005em |
| Small | `.small` | 14.5 | 1.45 | -0.005em |
| Meta | `.meta` | 13 | 1.35 | -0.005em |
| Mono | `.term` | 15 | 1.6 | 0 |

## Colour

Colour roles. Light only: one scheme, the bright red.

| Token | Value | For |
|---|---|---|
| `--field` | `#c8321e` | The page: the bright red field. |
| `--on` | `#fff5e9` | Type and the button on the field. |
| `--on-2` | `#fff5e9` | Second type on the field. |
| `--on-hair` | `rgba(255, 245, 233, .28)` | Hairlines on the field. |
| `--on-line` | `rgba(255, 245, 233, .5)` | Edges on the field, as on a text field. |
| `--sheet` | `#fffaf3` | A sheet: the cream where work happens. |
| `--well` | `#f6ebdf` | A well on a sheet: code blocks and tool results. |
| `--ink` | `#24110c` | Type on a sheet. |
| `--ink-2` | `#5a3f37` | Second type on a sheet. |
| `--muted` | `#7a6159` | Quiet type on a sheet: labels and times. |
| `--hair` | `rgba(36, 17, 12, .11)` | Hairlines on a sheet. |
| `--act` | `#c8321e` | The pennant: the one button that sends something out. |
| `--act-on` | `#fff5e9` | Type on the pennant. |
| `--act-text` | `#c8321e` | The act red as text on a sheet. |
| `--ok` | `#2f6b45` | Done. |
| `--bad` | `#a12a16` | A problem. |
| `--night` | `#0d0807` | The near-black posts sit on, as in the launch video. |
| `--on-night` | `#f6ece4` | Type on night. |
| `--on-night-2` | `rgba(246, 236, 228, .62)` | Second type on night. |
| `--night-hair` | `rgba(246, 236, 228, .14)` | Hairlines on night. |
| `--scrim` | `rgba(60, 10, 4, .42)` | Behind a sheet laid over the page. |

## Shadow

One shadow, for sheets, phones and posts. None on night.

| Token | Value | For |
|---|---|---|
| `--shadow` | `0 0 0 .5px rgba(60, 10, 4, .22), 0 1px 2px rgba(60, 10, 4, .10), 0 10px 24px rgba(70, 8, 0, .14), 0 32px 72px rgba(70, 8, 0, .20)` | The one shadow. |

## Fonts

Familjen Grotesk, self-hosted, 400 to 700.

| Token | Value | For |
|---|---|---|
| `--font` | `"Familjen Grotesk", "Familjen Grotesk Arial", "Familjen Grotesk Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif` | Familjen Grotesk, then its Arial and Roboto stand-ins, scaled so no line moves when it loads. |
| `--ios` | `-apple-system, BlinkMacSystemFont, system-ui, sans-serif` | The system’s own type, for screens drawn as Apple draws them. |
| `--mono` | `ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace` | Code, and Claude Code. |

## Type sizes

Each step’s size; the larger ones scale with the page.

| Token | Value | For |
|---|---|---|
| `--fs-display` | `clamp(46px, 6.6vw, 96px)` | Display: a page’s headline. |
| `--fs-hold` | `clamp(52px, 10vw, 144px)` | Hold: a step’s one held line. |
| `--fs-title` | `clamp(38px, 4.8vw, 72px)` | Title: a section. |
| `--fs-heading` | `clamp(34px, 3.4vw, 48px)` | Heading: a guide’s title. |
| `--fs-head` | `24px` | Head: a small heading. |
| `--fs-lede` | `19px` | Lede: the line under a headline. |
| `--fs-read` | `17px` | Read: a guide’s running text. |
| `--fs-body` | `16px` | Body. |
| `--fs-small` | `14.5px` | Small. |
| `--fs-meta` | `13px` | Meta: labels, times and counts. |

## Space

On 4 px. A section has --sec at each end.

| Token | Value | For |
|---|---|---|
| `--s-1` | `4px` |  |
| `--s-2` | `8px` |  |
| `--s-3` | `12px` |  |
| `--s-4` | `16px` |  |
| `--s-5` | `20px` |  |
| `--s-6` | `24px` |  |
| `--s-7` | `32px` |  |
| `--s-8` | `44px` |  |
| `--s-9` | `56px` |  |
| `--s-10` | `84px` |  |
| `--s-11` | `120px` |  |
| `--sec` | `120px` | A section’s space at each end. |

## Grid

12 columns.

| Token | Value | For |
|---|---|---|
| `--page` | `1440px` | The page at its widest. |
| `--margin` | `56px` | The page’s side margins. |
| `--gutter` | `24px` | Between the 12 columns. |
| `--measure` | `680px` | Running text at its widest, about seventy characters. |
| `--sheet-w` | `880px` | A sheet at its widest. |

## Radii

One small set.

| Token | Value | For |
|---|---|---|
| `--r-inline` | `4px` | Inline code and focus rings. |
| `--r-control` | `12px` | Buttons and fields. |
| `--r-card` | `14px` | Cards, posts and code blocks. |
| `--r-sheet` | `22px` | Sheets. |

## Motion

Fast and quiet, never on scroll; off when reduced motion is on.

| Token | Value | For |
|---|---|---|
| `--ease` | `cubic-bezier(.2, 0, 0, 1)` | Every transition’s curve. |
| `--fast` | `150ms` | Hovers and fields. |
| `--base` | `220ms` | Buttons and loops. |
| `--slow` | `400ms` | The longest. |

## Breakpoints

- Up to 959 px: `--sec: 84px`, `--gutter: 16px`
- Up to 759 px: `--sec: 64px`, `--margin: 20px`, `--fs-display: min(46px, 11.6vw)`, `--fs-hold: min(52px, 13.3vw)`, `--fs-lede: 17px`, `--fs-head: 22px`
- Up to 359 px: `--margin: 16px`

## Surfaces

- The field: the page, red, with cream type.
- `.sheet`: where work happens, cream with ink type, the sheet radius and the one shadow.
- `.paper` and `.night` bands: the sheet's cream and the posts' near-black, edge to edge with hard edges.

Components read the surface roles (`--fg`, `--fg-2`, `--line`, `--edge`, `--btn-bg`, `--btn-fg`), so one class moves a
component from the field onto a sheet.

## Components

- `.nav`: The header: the mark and the wordmark, then a few words.
- `.btn`: The button: cream on the field, ink on a sheet. No outlined second button; a link does that job.
- `.pen`: The pennant: the one button that sends something out, a swallowtail cut into its fly.
- `.link`: A link in running text, underlined in the text’s own colour.
- `.field`: A text field, 52 px, its edge in the surface’s line colour.
- `.sheet`: A sheet: cream, the sheet radius and the one shadow. Components on it read the sheet’s roles.
- `.band`: A full-bleed band with hard edges: the field, .paper or .night, cut one after another.
- `.sec`: A section: a hairline across the grid, a title and a small label naming what follows.
- `.grid`: The 12-column grid; .span-3 to .span-12 place things on it.
- `.phone`: A phone: the real screen at the iPhone’s own corner radius, no drawn bezel.
- `.desk`: A desktop screen on cream.
- `.shot`: A sheet cut from the app at its own size and corners.
- `.term`: Claude Code as itself: its mark, the prompt band, ● steps and ⎿ results, only the session’s own lines.
- `.post`: A real post on its own network, under that network’s mark.
- `.index`: An index: big names on hairlines, one short line each.
- `.table`: A table of hairlines, figures tabular; wide ones scroll in .table-wrap.
- `.faq`: Questions: each a details element on a hairline, closed until asked.
- `.tool`: A tool: one sheet, its controls on top, the result on the well.
- `.tool-head`: A tool's name, headline and one line on the field.
- `.tool-sec`: A section under a tool: its title left, its rows right.
- `.rows`: A long list: a name per row on hairlines, the whole row the link.
- `.article`: A guide: one sheet, text on the 680 px measure.
- `.foot`: The footer: the company on the left, the site’s pages on the right.