MZA

# MZA — Style Reference
> Archival document on pristine white paper.

**Theme:** light

The MZA visual system embodies a stark, archival aesthetic, presenting information directly on a pristine white canvas. Typography is foundational, relying on system fonts with minimal styling to convey historical gravitas. Interactive elements are stripped-back, favoring ghosted borders and plain text over vibrant fills, emphasizing content over decorative flair. The absence of color and elevation directs focus solely to the textual narrative and navigation.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas White | `#ffffff` | `--color-canvas-white` | Page backgrounds, primary surface for content |
| Ink Black | `#000000` | `--color-ink-black` | Primary text, borders, icons, heading accents |
| Ghost Button Fill | `#efefef` | `--color-ghost-button-fill` | Background for subtle, low-emphasis buttons |

## Tokens — Typography

### Times — Primary content font for body text, headings, and lists. Its classic serif style reinforces the historical and archival nature of the content. · `--font-times`
- **Substitute:** serif
- **Weights:** 400, 700
- **Sizes:** 16px, 19px, 24px
- **Line height:** 1.20
- **Role:** Primary content font for body text, headings, and lists. Its classic serif style reinforces the historical and archival nature of the content.

### Arial — Used for functional text within buttons, navigation links, and smaller body annotations, providing a utilitarian contrast to the serif headings. · `--font-arial`
- **Substitute:** sans-serif
- **Weights:** 400
- **Sizes:** 13px
- **Line height:** 1.20
- **Role:** Used for functional text within buttons, navigation links, and smaller body annotations, providing a utilitarian contrast to the serif headings.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 16px | 1.2 | — | `--text-caption` |
| body-sm | 19px | 1.2 | — | `--text-body-sm` |
| body | 24px | 1.2 | — | `--text-body` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 6 | 6px | `--spacing-6` |
| 13 | 13px | `--spacing-13` |
| 16 | 16px | `--spacing-16` |
| 19 | 19px | `--spacing-19` |
| 20 | 20px | `--spacing-20` |
| 40 | 40px | `--spacing-40` |

### Border Radius

| Element | Value |
|---------|-------|
| buttons | 0px |

### Layout

- **Section gap:** 40px
- **Card padding:** 0px
- **Element gap:** 16px

## Components

### Ghost Action Button
**Role:** Interactive element for secondary actions, designed as a minimal, border-based control.

Background: Ghost Button Fill (#efefef). Text: Ink Black (#000000), Arial 13px weight 400. Border: 0px. Padding: 1px top/bottom, 6px left/right. Radius: 0px.

### Text Link
**Role:** Standard inline navigations and references.

Content: Times 16px weight 400, Ink Black (#000000), underlined by default (browser default). Hover state implied by browser default underline/color change.

### Section Heading Times
**Role:** Primary content organization at a section level, using the distinct serif font.

Font: Times, sizes 19px or 24px, typical weight 400 or 700. Color: Ink Black (#000000). Margin: 19px or 20px top/bottom.

### Body Text
**Role:** Main informational text blocks.

Font: Times 16px weight 400. Color: Ink Black (#000000). Line height: 1.2. Margin: 13px or 16px top/bottom.

## Do's and Don'ts

### Do
- Prioritize Ink Black (#000000) for all text and borders, reserving lighter tones only for subtle background elements.
- Maintain a stark, minimalist aesthetic with Canvas White (#ffffff) as the dominant background color for all content areas.
- Use Times as the primary typeface for all headings and substantial body text to convey a traditional, historical feel.
- Ensure all interactive elements, including buttons, maintain a 0px border radius for a sharp, angular appearance.
- Apply 1px vertical and 6px horizontal padding to ghost buttons for a subtle interactive hit area without visual bulk.
- Employ a base unit of 4px for all spacing measurements, translating to 16px for element gaps and 40px for section gaps.
- Keep page layout full-bleed without a maximum content width to maximize visual space.

### Don't
- Avoid using any vibrant or saturated colors; chromatic tones are not part of this visual system.
- Do not introduce elevated elements with shadows or complex layer effects; the design should remain flat.
- Refrain from utilizing decorative graphical elements or imagery with rounded corners; all visuals should be sharp and contained.
- Do not vary typography significantly in terms of letter-spacing or font-feature-settings; rely on font family, size and weight for distinction.
- Avoid unnecessary visual hierarchies through color gradients or heavy fills; use text size and weight changes for emphasis.
- Do not introduce complex animations or transitions; interactions should be direct and instantaneous.
- Refrain from using any button fills other than Ghost Button Fill (#efefef) when an action requires a discreet background.

## Imagery

This design system predominantly avoids complex imagery, favoring a text-dominant display. When visuals are present (e.g., icons), they are simple, contained, and monochrome, usually in Ink Black. There is no evidence of photography, illustrations, or 3D renders. Icons are typically outlined with a light stroke weight, serving a purely functional role rather than decorative. The density is image-light, with visual space primarily dedicated to text and minimal interface elements.

## Layout

The page exhibits a full-bleed layout, lacking a defined maximum content width, allowing text and elements to span the full browser width. The hero pattern is not explicitly present; instead, content begins directly with text and navigation. Section rhythm is dictated by consistent vertical spacing of 40px between distinct blocks, with visual separation achieved primarily through headings and text hierarchy rather than distinct background bands. Content arrangement is primarily stacked, with text-heavy blocks, lists, and occasional interactive elements vertically aligned. There is no evidence of complex grid usage for features or cards, favoring a more document-like, linear flow. The layout is spacious with significant vertical margins between text blocks. Navigation appears as simple text links and ghost buttons, primarily embedded within the content flow rather than a prominent, persistent top or side bar.

## Agent Prompt Guide

Quick Color Reference:
text: #000000
background: #ffffff
border: #000000
accent: no distinct accent color
primary action: no distinct CTA color

Example Component Prompts:
Create a section title: Times 24px weight 700, Ink Black (#000000), 20px margin-top, 20px margin-bottom. Content follows.
Create a list item: Times 16px weight 400, Ink Black (#000000), with 16px margin-bottom, prefixed by a simple black bullet icon.
Create a Ghost Button: background Ghost Button Fill (#efefef), text Arial 13px weight 400 Ink Black (#000000), padding 1px top/bottom, 6px left/right, no border, 0px radius.

## Similar Brands

- **New York Times (Archive)** — Similar focus on text-heavy content, a strong serif typeface, and minimal color usage, evoking an archival feel.
- **Wikipedia** — Plain white background, prominent black text, and reliance on system fonts for conveying factual information with minimal visual chrome.
- **Academic Journal sites** — Strict adherence to a monochrome palette, emphasis on readability of text, and no decorative imagery, presenting information in a formal, scholarly manner.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas-white: #ffffff;
  --color-ink-black: #000000;
  --color-ghost-button-fill: #efefef;

  /* Typography — Font Families */
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 16px;
  --leading-caption: 1.2;
  --text-body-sm: 19px;
  --leading-body-sm: 1.2;
  --text-body: 24px;
  --leading-body: 1.2;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-6: 6px;
  --spacing-13: 13px;
  --spacing-16: 16px;
  --spacing-19: 19px;
  --spacing-20: 20px;
  --spacing-40: 40px;

  /* Layout */
  --section-gap: 40px;
  --card-padding: 0px;
  --element-gap: 16px;

  /* Named Radii */
  --radius-buttons: 0px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas-white: #ffffff;
  --color-ink-black: #000000;
  --color-ghost-button-fill: #efefef;

  /* Typography */
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 16px;
  --leading-caption: 1.2;
  --text-body-sm: 19px;
  --leading-body-sm: 1.2;
  --text-body: 24px;
  --leading-body: 1.2;

  /* Spacing */
  --spacing-6: 6px;
  --spacing-13: 13px;
  --spacing-16: 16px;
  --spacing-19: 19px;
  --spacing-20: 20px;
  --spacing-40: 40px;
}
```