Swiss Typographic Monochrome

# Swiss Typographic Monochrome

## Philosophy

A monochrome interface language rooted in Swiss International Style: asymmetric grid composition, rigorous typographic hierarchy, and disciplined use of black rules on white fields so information feels editorial, objective, and exact rather than decorative.

### Values

- clarity through typographic structure instead of ornamental interface chrome
- asymmetric grid logic that creates tension while preserving order and scanability
- monochrome restraint where contrast, spacing, and rule lines do the expressive work

### Anti-Values

- soft decorative gradients or atmospheric effects
- playful rounded consumer-app styling that dilutes editorial authority

### Visual Character

- Large black typographic headlines sit in wide white fields with strict left alignment, using abrupt line breaks and compressed vertical spacing to create poster-like tension.
- Content modules are organized on an asymmetric editorial grid with oversized outer margins, narrow vertical gutters, and visible black hairline dividers that expose the underlying structure.
- Section labels and metadata appear in uppercase monospace microtype, often rotated vertically or isolated in small index blocks to contrast with the grotesk reading text.
- Cards and panels stay flat white with black 1px to 2px rules, letting negative space, line weight, and scale shifts carry hierarchy instead of shadows or color.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#111111` |
| secondary | `#2B2B2B` |
| accent | `#000000` |
| background | `#F7F7F2` |
| surface | `#FFFFFF` |
| text | `#111111` |
| muted | `#6D6D68` |
| border | `#141414` |
| error | `#7A0F0F` |
| success | `#0F3D22` |
| warning | `#6B5200` |
| info | `#202A44` |

### Typography

- **Heading Font**: Archivo
- **Body Font**: Archivo
- **Mono Font**: IBM Plex Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.25
- **Line Height**: 1.5
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64]

### Radii

- **None**: 0
- **Sm**: 0
- **Md**: 0
- **Lg**: 0
- **Full**: 9999px

### Shadows

- **Sm**: none
- **Md**: none
- **Lg**: none

### Surfaces

- **Treatment**: paper
- **Card Style**: Flat white paper panels separated by black rules, generous margins, and occasional tinted paper bands for index areas.
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Borders behave like editorial rule lines: thin, exact, and structural rather than decorative, used to expose the grid and separate information zones.

### Motion

- **Duration**: 160ms
- **Easing**: cubic-bezier(0.2,0.8,0.2,1)
- **Philosophy**: snappy

## Rules

### Composition

Compose screens like a Swiss poster merged with a data dashboard: one dominant headline zone, one dense information rail, and modular content blocks locked to a visible column rhythm.

### Hierarchy

Use scale contrast first, then weight, then rule lines and spacing. Headlines should feel commanding, labels quiet, and data values precise and sharply aligned.

### Density

Medium-high density with disciplined whitespace: content can be plentiful, but every cluster must live inside a measured grid and preserve breathing room around major headlines.

### Signature Patterns

- Every major section begins with a monospace index label in a dedicated narrow column, separated from content by a vertical rule that stays visible across breakpoints.
- Primary cards use strong top borders and bottom-aligned metadata rows so panels feel like editorial slices of a larger composition instead of floating app widgets.
- Display statistics are rendered as oversized numerals with tightly tracked grotesk type, paired with tiny uppercase explanatory captions for stark scale contrast.
- Navigation and filters use rectangular controls with zero radius, black borders, and invert-on-hover states so interaction feels typographic and print-derived rather than skeuomorphic.

## Layout

### Grid

A 12-column desktop editorial grid with a narrow index rail and wide content spans, collapsing to 8 columns on tablet and a single stacked column with retained rule lines on mobile.

### Breakpoints

Desktop 1440+, tablet 768-1439, mobile 375-767; preserve the index rail as a horizontal band on smaller screens rather than removing it.

### Whitespace

Use generous page margins and deliberate vertical rhythm, but compress spacing inside data clusters so contrast between macro-space and micro-density stays visible.

## Guidance

### Do

- Use black rules, scale contrast, and alignment as the primary expressive tools.
- Keep components rectangular, flat, and grid-locked with visible structural seams.
- Pair large editorial headlines with restrained monospace metadata to clarify reading order.

### Don't

- Do not introduce colorful accents, soft neumorphism, or glass effects.
- Do not center everything; preserve asymmetric tension and left-anchored reading flow.
- Do not hide structure behind oversized cards, rounded corners, or decorative shadows.