--- version: alpha name: Temporary Liveness description: Radical editorial minimalism — pure white canvas, black ink, a single muted gray as the only secondary color, set entirely in Helvetica (Black/Bold/Medium) with enormous fluid display type (up to 12vmin), uppercase headings, tight sub-1.0 line-height, and a narrow 600px reading column. colors: # Canvas + ink background: "#ffffff" surface: "#ffffff" ink: "#000000" ink-pure: "#000000" # The single secondary — used for inactive/muted state and captions muted: "#949494" inactive: "#949494" active: "#949494" # Neutral scale (derived for chrome — site itself is two-tone) gray-700: "#404040" gray-500: "#949494" gray-300: "#cccccc" gray-100: "#ebebeb" # On-color on-ink: "#ffffff" on-background: "#000000" typography: display-hero: fontFamily: "HelveticaBlack, Helvetica, Arial, sans-serif" fontSize: 130px fontWeight: 900 lineHeight: 0.75 letterSpacing: 0px textTransform: uppercase display-large: fontFamily: "HelveticaBlack, Helvetica, Arial, sans-serif" fontSize: 96px fontWeight: 900 lineHeight: 0.8 letterSpacing: 0px textTransform: uppercase display: fontFamily: "HelveticaBlack, Helvetica, Arial, sans-serif" fontSize: 72px fontWeight: 900 lineHeight: 0.85 letterSpacing: 0px textTransform: uppercase heading: fontFamily: "HelveticaBold, Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0px sub-heading: fontFamily: "HelveticaBold, Helvetica, Arial, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0px body: fontFamily: "HelveticaMedium, Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0px body-small: fontFamily: "HelveticaMedium, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0px caption: fontFamily: "HelveticaMedium, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0px caption-uppercase: fontFamily: "HelveticaBold, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0px textTransform: uppercase nav-link: fontFamily: "HelveticaBold, Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0px textTransform: uppercase spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 48px 2xl: 96px 3xl: 160px rounded: none: 0px micro: 2px sm: 4px pill: 9999px components: # Primary CTA — black on white, sharp edges button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.on-ink}" typography: "{typography.caption-uppercase}" rounded: "{rounded.none}" padding: 12px 20px # Secondary — outlined black button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.caption-uppercase}" rounded: "{rounded.none}" padding: 12px 20px borderColor: "{colors.ink}" # Navigation link — uppercase Helvetica Bold nav-link: textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 0px 0px nav-link-inactive: textColor: "{colors.inactive}" typography: "{typography.nav-link}" # Image caption block caption: backgroundColor: "{colors.background}" textColor: "{colors.muted}" typography: "{typography.caption}" padding: 4px 0px # Reading column / article block article: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" width: 600px # Image — flat, no border, no radius image: backgroundColor: "{colors.background}" rounded: "{rounded.none}" # Email / link inline link: textColor: "{colors.ink}" typography: "{typography.body}" # Footer / metadata footer: backgroundColor: "{colors.background}" textColor: "{colors.muted}" typography: "{typography.caption}" padding: 24px 0px --- # Temporary Liveness Design System ## Overview The School for Temporary Liveness site is editorial minimalism pushed to its structural extreme. There are exactly two colors that matter — pure black (`{colors.ink}`) on pure white (`{colors.background}`) — plus a single muted gray (`{colors.muted}`) that handles every secondary, inactive, and caption role. No accent hue, no gradient, no tint. The page reads like a printed program or a risograph zine rendered for the web, where the only expressive variable is type size and weight. Typography is the entire identity. Everything is set in Helvetica, loaded as three self-hosted weights — HelveticaBlack for display, HelveticaBold for headings and navigation, HelveticaMedium for body. Display type is fluid and gigantic, scaling with the viewport from 9vmin up to 12vmin, and it sits on aggressively tight line-heights (0.75–0.85) so headlines stack into dense, almost architectural blocks. Display and navigation are uppercase; body text relaxes to mixed case at a comfortable 24px. The layout is deliberately narrow and document-like. A `{spacing.2xl}`-scale rhythm (built on `rlh`/`vmin` units) governs vertical spacing, and the reading content is capped at roughly 600px wide. Images run flat — no border, no radius, no shadow — captioned in small gray Helvetica. Nothing is rounded; nothing floats. Sharp corners and hard edges throughout reinforce the printed-matter feeling. What makes the system distinctive is its restraint as a statement. By collapsing the palette to black, white, and one gray, and by refusing every decorative affordance, the site lets the photography and the oversized typographic headers carry all the energy. It is a design that gets out of the way of its content. **Key Characteristics:** - Two-tone palette — black `{colors.ink}` on white `{colors.background}` — with a single muted gray `{colors.muted}` for all secondary roles - Helvetica everywhere, in three self-hosted weights: Black (display), Bold (headings/nav), Medium (body) - Enormous fluid display type — 9vmin to 12vmin — with sub-1.0 line-height (0.75–0.85) - Uppercase display and navigation; mixed-case body at 24px - Narrow ~600px reading column, document/program-like layout - Zero border-radius — hard edges and sharp corners throughout - Flat images: no border, no shadow, no radius; small gray captions - No accent color, no gradient — restraint as the design statement ## Colors ### Primary - **Black** (`{colors.ink}`): All primary text, headings, navigation, body copy. True black, maximum contrast. - **White** (`{colors.background}`): Page background and every surface. ### Secondary - **Muted Gray** (`{colors.muted}`): The single secondary color. Captions, inactive nav links, metadata, footer text. Equivalent to `hsl(0,0%,58%)`. - **Inactive** (`{colors.inactive}`): Inactive/hover navigation state — same gray. - **Active** (`{colors.active}`): Active navigation state — same gray (the site deliberately uses one gray for both). ### Neutral Scale (derived for chrome) - **Gray 700** (`{colors.gray-700}`): Optional darker secondary text. - **Gray 500** (`{colors.gray-500}`): The site's native muted gray. - **Gray 300** (`{colors.gray-300}`): Hairline dividers if needed. - **Gray 100** (`{colors.gray-100}`): Faint surface separation. ### On-color - **On Ink** (`{colors.on-ink}`): White text on black fills. - **On Background** (`{colors.on-background}`): Black text on white. ## Typography ### Font Family - **Display**: `HelveticaBlack` (weight 900), fallbacks `Helvetica, Arial, sans-serif` - **Headings / Navigation**: `HelveticaBold` (weight 700) - **Body**: `HelveticaMedium` (weight 500) - All three are self-hosted `.otf` files. There is no monospace and no serif — the system is single-family by design. ### Hierarchy The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.). | Token | Use | |---|---| | `display-hero` | 12vmin uppercase hero — maximum impact, line-height 0.75 | | `display-large` | 10vmin display, tablet/large headers | | `display` | 9vmin display, mobile and smaller headers | | `heading` | 24px bold section headings | | `sub-heading` | 20px bold sub-headings | | `body` | 24px medium reading text | | `body-small` | 18px medium secondary text | | `caption` | 14px gray captions, metadata | | `caption-uppercase` | 14px bold uppercase labels | | `nav-link` | 24px bold uppercase navigation | ### Principles - **Type IS the design**: With color stripped to two-tone, scale and weight do all the expressive work. - **Tight display leading**: Display sizes use line-height 0.75–0.85 so headlines compress into solid blocks. - **Fluid, viewport-driven display**: Headers scale with `vmin`, never fixed px, so they stay enormous across devices. - **Uppercase for structure**: Display and navigation are uppercase; body stays mixed-case for readability. - **One family, three weights**: Black / Bold / Medium — no italics, no fourth weight, no second typeface. ## Layout ### Spacing System The complete scale lives in the `spacing:` token block above. The live site builds vertical rhythm from line-height-relative units (`rlh`) and `vmin`; the px tokens here approximate that rhythm. Spacing collapses on mobile (the `--space-md` step drops from 3rlh to 1rlh). ### Grid & Container - Max reading width: ~600px (`{components.article}` width) - Single-column, document-like flow - Image galleries stack full-column with captions beneath - Navigation is a simple uppercase link row ### Whitespace Philosophy - **Program-like rhythm**: Generous vertical gaps (`{spacing.2xl}`+) between sections echo a printed schedule. - **Narrow measure**: The 600px column keeps line length tight and bookish. - **Flat everything**: No cards, no elevation — separation comes from whitespace and type scale alone. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, no border | Everything — the system is fully flat | | Hairline (optional) | 1px solid `{colors.gray-300}` | Optional dividers if structure is needed | **Shadow Philosophy**: There is none. The site has no shadows, no elevation, no depth cues. Hierarchy is created entirely through type scale, weight, and whitespace. Images sit directly on the white canvas with no frame. ## Shapes | Token | Value | Use | |---|---|---| | `none` | 0px | Everything — buttons, images, blocks all have sharp corners | | `micro` | 2px | Reserved, rarely used | | `sm` | 4px | Reserved | | `pill` | 9999px | Reserved for optional tag pills | The native site rounds nothing. Hard edges are a core part of the printed-matter identity. ## Components The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.nav-link}`, `{components.caption}`). ### Buttons - **`button-primary`** — Black fill, white uppercase Helvetica Bold label, sharp corners. - **`button-secondary`** — White with a 1px black outline, uppercase label. ### Navigation - **`nav-link`** — 24px uppercase Helvetica Bold, black. Inactive state uses `{colors.inactive}` gray. ### Content - **`article`** — The ~600px reading column, 24px Helvetica Medium body. - **`caption`** — Small gray Helvetica beneath images. - **`image`** — Flat, no border, no radius, no shadow. - **`footer`** — Gray metadata and credits. ## Do's and Don'ts ### Do - Keep the palette to black, white, and the one gray `{colors.muted}` - Set everything in Helvetica — Black for display, Bold for headings/nav, Medium for body - Use enormous fluid display type (9–12vmin) with tight sub-1.0 line-height - Uppercase display and navigation - Keep the reading column narrow (~600px) - Keep every corner sharp — `{rounded.none}` everywhere - Run images flat with no frame, captioned in gray ### Don't - Don't introduce any accent color, gradient, or tint - Don't add border-radius to buttons, images, or blocks - Don't add shadows or elevation - Don't mix in a second typeface or a monospace - Don't widen the reading column past ~600px - Don't use fixed-px display headers — keep them fluid (vmin) - Don't loosen display line-height above ~0.85 --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <600px | `--font-size` 18px, display 9vmin, `--space-md` 1rlh | | Tablet | 600–900px | `--font-size` 20px, display 10vmin | | Desktop | >900px | `--font-size` 24px, display 12vmin, full vertical rhythm | ### Touch Targets - Navigation links at 24px uppercase with generous spacing - Body text never drops below 18px on mobile - Captions hold at 14px ### Collapsing Strategy - Display type scales fluidly with `vmin` — stays large at every size - Body font-size steps 24px → 20px → 18px down the breakpoints - Vertical spacing compresses (3rlh → 1rlh) on mobile - Single column at all sizes — nothing reflows into grids ### Image Behavior - Images run full reading-column width, flat, no border at all sizes - Captions stay in gray Helvetica beneath each image - Aspect ratios preserved; no cropping or rounding --- ## Agent Prompt Guide ### Quick Color Reference - Primary text: Black `{colors.ink}` - Background: White `{colors.background}` - Secondary / captions / inactive: Muted Gray `{colors.muted}` - Borders: none (or 1px `{colors.gray-300}` hairline if required) ### Example Component Prompts - "Create a hero: white background, uppercase headline in Helvetica Black at 12vmin, line-height 0.75, color `{colors.ink}`. No accent color." - "Build a navigation row: uppercase Helvetica Bold 24px links in black `{colors.ink}`, inactive links in `{colors.muted}` gray. No background, no underline, no radius." - "Design an image block: flat photo with no border or radius, caption beneath in Helvetica Medium 14px, color `{colors.muted}`." - "Set a reading column: max-width 600px, body in Helvetica Medium 24px, line-height 1.2, black on white." ### Iteration Guide 1. Two-tone first — black on white; the single gray `{colors.muted}` handles everything secondary 2. Helvetica only — Black / Bold / Medium, no other family 3. Display type is fluid (vmin) and huge with tight leading 4. Uppercase display and nav; mixed-case body 5. Zero radius, zero shadow — flat printed-matter aesthetic 6. Keep the measure narrow (~600px) --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Temporary Liveness. Brand names and trademarks belong to their respective owners.