Typography System

```<div class="metric my-8 p-6 bg-bg-surface border border-border rounded-md">  <span class="metric-value">43.5</span>  <span class="metric-unit">it/s</span>  <span class="metric-label">throughput</span></div>#

## Example: Status Bar

```html<div class="status-bar">  <span class="status nominal">█ NOMINAL</span>  <span class="status-item">latency: 1.2ms</span>  <span class="status-item">state: LIVE</span></div>

```<div class="status-bar my-8 p-4 bg-bg-surface border border-border rounded-md">  <span class="status nominal">█ NOMINAL</span>  <span class="status-item">latency: 1.2ms</span>  <span class="status-item">state: LIVE</span></div>--

-

## High Modernism Typography (Light Mode)> "The institution earned trust by delivering. The stamp meant something."Sans-serif typography communicates institutional authority. Weight indicates rank, size indicates importance, spacing indicates formality.#

## Font Stack

```cssfont-family: 'Helvetica Neue', 'Univers', 'Arial', 'Liberation Sans', system-ui, sans-serif;

```#

## Example: Institutional Quote

```html<blockquote class="institutional-quote">  <p>"In a well-ordered laboratory, precision is not a goal but a habit."</p>  <cite>— Bureau of Standards, 1962</cite></blockquote>

```<blockquote class="institutional-quote my-8">  <p>"In a well-ordered laboratory, precision is not a goal but a habit."</p>  <cite>— Bureau of Standards, 1962</cite></blockquote>--

-

## Utility Classes#

## Line Heights

- `.leading-tight` — 1.2 (for headlines)

- `.leading-normal` — 1.5 (for body text)

- `.leading-relaxed` — 1.7 (for long-form content)#

## Letter Spacing

- `.tracking-tight` — -0.02em

- `.tracking-normal` — 0

- `.tracking-wide` — 0.04em

- `.tracking-wider` — 0.08em#

## Special Features

- `.tabular-nums` — For aligned numeric data

- `.readable-content` — Max-width: 65ch for optimal readability

- `.truncate` — Text overflow with ellipsis--

-

## The `//` ConventionIn hypermodern typography, double slashes serve as semantic delimiters:

```// section //// render // weyl // ai// status: nominal //

```This convention:

- References C++/programming comments

- Creates visual rhythm

- Indicates machine-readable segments

- Separates navigation from content

**Do not use*

* in High Modernism contexts—use traditional punctuation.--

-

## Accessibility#

## Contrast Ratios

- Body text: **4.5:1*

* minimum (WCAG AA)

- Large text (>18px): **3:1*

* minimum (WCAG AA)

- UI components: **3:1*

* minimum (WCAG AA)#

## Font Size Minimums

- Body text: **16px*

* minimum

- Interactive elements: **14px*

* minimum

- Captions: **12px*

* minimum (sparingly)#

## Line LengthOptimal: **45-75 characters per line

**Use `.readable-content` class for max-width constraint:

```html<article class="readable-content">  <!-

- Content automatically constrained to 65ch --></article>

```--

-

## Responsive BehaviorTypography automatically scales on mobile devices:

- Hero: 48px → 32px

- Headline: 32px → 24px

- Subhead: 24px → 18px

- Body: 16px (maintains for readability)--

-

## Print StylesAll content automatically switches to High Modernism for print:

- Sans-serif typography

- Black text on white background

- No shadows or glow effects

- 11pt base size with 1.4 line height--

-

## ImplementationAll typography utilities are available globally. Simply use the classes:

```html<h1 class="font-display text-hero tracking-wide">WEYL</h1><p class="font-mono text-body leading-normal">Infrastructure for generative media.</p><span class="text-caption tracking-wider uppercase">© 2024</span>

```For custom implementations, use CSS variables:

```css.custom-header {  font-family: var(--font-display);  font-size: var(--text-headline);  line-height: var(--leading-tight);  letter-spacing: var(--tracking-wide);  color: var(--color-brand-primary);}