# Waitingzimmer Design Specification

## Overview

**Creative North Star: The Orbital Index**

Waitingzimmer behaves like an index in motion. Experience, projects, tools, and principles occupy one shared field and become legible through orbit, proximity, and selection. The visual character is precise, quiet, and exploratory.

English uses a dark graphite canvas; Chinese switches to warm paper while preserving hierarchy, geometry, and interaction. The system is built around three qualities:

- **Order:** disciplined grid, hairline dividers, deliberate alignment, restrained type scales.
- **Relationship:** smooth orbital curves, pass-through nodes, contextual links instead of boxed collections.
- **Human signal:** one violet selection color, authored motion, and personal identity artifacts.

## Colors

### English / dark

| Role | Value |
| --- | --- |
| Canvas | `#1E1E1E` |
| Primary text | `#F4F3ED` |
| Secondary text | `#999990` |
| Structural line | `rgba(244,243,237,.20)` |
| Soft graph line | `rgba(244,243,237,.09)` |
| Selection | `#C3A3FF` |
| Selection glow | `rgba(155,99,255,.72)` |

### Chinese / light

| Role | Value |
| --- | --- |
| Canvas | `#F4F4F0` |
| Primary text | `#1E1E1E` |
| Secondary text | `#666660` |
| Structural line | `rgba(30,30,30,.18)` |
| Selection | `#7135D6` |
| Selection glow | `rgba(113,53,214,.30)` |

Violet is a state color, not a decorative wash. Blue is not part of the shipped palette.

## Typography

- Display/editorial: Helvetica Neue / Helvetica. Light weight for the name and large headings; regular for body copy.
- Labels/metadata: IBM Plex Mono for navigation, nodes, tags, dates, counts, and compact actions.
- Chinese: PingFang SC, Noto Sans SC, Microsoft YaHei, then system sans-serif.
- Identity heading: `clamp(30px, 3.2vw, 46px)`, weight `300`, line-height `1`, tracking `-0.025em`.
- Section headings: `34–42px`; body: `14–16px` at `1.5`; metadata: `9–11px` with `0.04–0.12em` tracking.

Use tabular numerals for dates and counts. Do not use monospace for paragraphs or large identity headings.

## Layout

- Page padding: `clamp(24px, 6.25vw, 80px)`.
- Maximum content width: `1440px`.
- Header: `84px` desktop, `78px` tablet, `72px` mobile.
- Desktop: above `900px`; tablet: `681–900px`; mobile: up to `680px`.
- Touch targets: minimum `44px`.

The home page is a full-width relationship field. Title, controls, graph, detail strip, and footer share the same margins. The About page moves from a full-viewport identity-card reveal into a structured card + designer position + taste-map scene. Project pages use a flat editorial grid with facts and summary before large visual evidence.

## Elevation & Depth

Most surfaces are flat. Use hairlines and tonal contrast instead of card shadows. Reserve soft, vertically offset shadows for physical identity cards. Active graph nodes may use a local violet glow.

The header uses a translucent current-canvas color: `rgba(30,30,30,.88)` in dark mode and `rgba(244,244,240,.90)` in light mode.

## Shapes

- Relationship nodes: circles.
- Focus controls: compact pills with a `1px` dashed border and `999px` radius.
- Identity cards: source aspect ratio and approximately `3%` radius.
- Structural containers: rectangular and usually borderless.
- Graph connections: smooth curves, never angular polylines.
- Grid texture: extremely low contrast and restricted to the map canvas.

## Components

### Header

Waiting Wong at left; language, map, and contact at right. Active navigation uses a short underline.

### Relationship graph

Smooth orbital paths, pass-through nodes, project labels, and six focus pills. Selection promotes one relationship in violet while preserving surrounding context. Default flow is slow; selecting a node accelerates its dashed relationship. Internal project nodes open their project page directly when clicked or keyboard-activated; the detail-strip link remains available as a second route.

### Graph detail strip

Sits beneath the map and reports the selected tag, category, or project. Hairlines and quiet typography keep it subordinate to the graph.

### Identity card

Use the supplied artwork without redesigning its information. First center it in a full-viewport scene; then pair it with designer positioning and the taste map. Hover and tap may turn between front and back.

### Taste map

Uses dashed orbital rings and matching pill nodes. The center “Waiting” uses the same oval treatment as the other principles. Hover or tap reveals a principle, project tag, and link.

### Project page

Begin with a compact facts-and-description grid followed by large imagery. Keep copy grounded in supplied project material.

## Do's and Don'ts

### Do

- Preserve the graphite/off-white and warm-paper/ink pairing.
- Use violet only for current selection and focus.
- Keep curves continuous, sparse, and slow enough to inspect.
- Align editorial content to shared margins and hairline rules.
- Support hover, keyboard focus, and tap.
- Respect `prefers-reduced-motion`.

### Don't

- Do not restore the old dense map or blue selection border.
- Do not use angular connections, excessive endpoints, or decorative particles.
- Do not add generic shadowed cards, gradients, glass, emoji icons, or unrelated accents.
- Do not let animation obscure labels.
- Do not alter home or About content when building standalone project pages.