BUREAU / Documentation / Visual language

Visual language

Pantone, OKLCH, typography, motion, and technological proof.

Logo sources (15 collections and tools, with licence and size as of 2026-10-27) and how to use third-party marks with permission: skill/references/37-logo-sources.md. Open font platforms, foundries and families (19, with licence as of 2026-10-27) and how to check a font before it ships: skill/references/38-open-fonts.md.

Stock photo and video sources (30, with licence and status as of 2026-10-27) and how to find, license and verify an asset before and after the build: skill/references/36-stock-media.md.

UI build libraries by layer (styling, components, behaviour), how to choose them before the build and verify them after it: skill/references/35-build-libraries.md.

Colour libraries by phase (generation and extraction before the build; contrast, gamut and theme checks after it) are in skill/references/34-color-tooling.md. None is a BUREAU dependency.

For a practical vocabulary of visual styles and their trade-offs, use skill/references/32-visual-style-vocabulary.md. Select a lens from the brief and test it with real content; a style label does not establish usability or conversion.

For each concept, record UI, UX and innovation decisions and an evidence plan using skill/references/16-review-circuit.md. These are BUREAU interpretations of the CSS Design Awards definitions, not official subcriteria or an award prediction.

BUREAU has no fixed style. It has a method for building a style that belongs to the subject.

1. Pantone as an anchor, not a palette

Pantone is a standardized color language for print, textiles, and brand. It is not a CSS color space.

• PMS / Solid — print inks.
• TCX / TPG — textiles.
• Pantone Connect — licensed libraries.
• Hex/sRGB — screen approximations.

Use Pantone to name and anchor the palette in the brief; implement in OKLCH and verify contrast. Never claim a screen color is Pantone. For print, use licensed libraries and a physical proof.

Color of the Year — reference

Full 2000–2026 table in skill/references/05-color-pantone.md. Values are BUREAU approximations, not official conversions.

2026 direction: Cloud Dancer as ground

:root{
  --ground: oklch(95.2% 0.008 85);
  --surface: oklch(97.5% 0.006 85);
  --ink: oklch(18% 0.012 70);
  --muted: oklch(52% 0.014 70);
  --line: oklch(30% 0.01 70 / .14);
  --accent: oklch(56% 0.19 32);      /* terracotta */
  --accent-ink: oklch(97% 0.01 80);
  --signal: oklch(78% 0.16 92);
}

Cloud Dancer is not "white". It is material: paper, plaster, linen, diffused light. Pair it with one hard dark section and one saturated accent to avoid monotony.

2. Color as a system

• 60/30/10 with intent: ground, ink/surfaces, accent/signal.
• 5–7 semantic roles, not 30 loose hex values.
• OKLCH for perceptually even scales.
• Contrast AA in every state.
• Dark mode recomputed, not inverted.
• Gradient only when it represents light, heat, depth, or material. Never on text.
• Data with a colorblind-safe palette and labels; color never alone.

Starting palettes:

3. Typography

• Max 2 families + 1 mono.
• Display with voice; body with legibility.
• Fluid scale with clamp, tested 320–2560.
• Display: leading 0.9–0.98, tracking -0.02 to -0.04em.
• Body: 55–75ch, leading 1.55–1.7.
• Tabular figures in data.
• PT/ES accents tested: ã, ç, é, ñ, ü.
• Self-hosted, subset, font-display: swap.

Pairings that work:

1. Bodoni Moda + Archivo + JetBrains Mono
2. Instrument Serif + Libre Franklin + IBM Plex Mono
3. Fraunces + Public Sans + Space Mono
4. Newsreader + Archivo + IBM Plex Mono
5. Syne + Archivo + Space Mono
6. Cormorant Garamond + Work Sans + JetBrains Mono

Avoid Inter + Space Grotesk as the entire identity.

4. Motion

One character per project:

Rules:

• one entrance sequence;
• one scroll narrative;
• one interaction signature;
• transform and opacity;
• reduced motion designed;
• 60 fps at 4× CPU throttle;
• no scroll hijack.

5. Technological proof

Choose one per project:

The proof serves the argument. A shader on a bakery site is not ambition; it is confusion.

6. Signature

A signature move is the one thing someone would describe to a friend. It must be:

• legible without explanation;
• ownable by the brand;
• repeatable at other viewports;
• performant;
• accessible.

Types of move (never copy literally):

• a product that assembles on scroll with labeled parts;
• a typographic hero that behaves like a printing press;
• live data as a sculpture;
• video that becomes UI at the moment the story needs it;
• navigation as a map of the argument;
• a color system that shifts with the time of day, within a designed range.

7. Reference library

Calibrate, do not assemble:

• land-book.com — landing structure;
• minimal.gallery — restraint;
• godly.website — ambition;
• mobbin.com — real app flows;
• refero.design — product patterns;
• 60fps.design — motion timing;
• vibrant.design — UI and interaction;
• recent.design — daily radar;
• backgrounds.supply — material;
• footer.design — closing;
• promptmotionsite.com — motion vocabulary;
• april-zhu.com/colorfigures — isometric objects with cutaways;
• Font Awesome — icon fallback;
• Impeccable — detection and artifact discipline.

Extraction protocol: impression → structure → craft → behavior → transferable principle. Never open a reference and code immediately.

Full list and ethics in skill/references/20-reference-library.md.

8. Lineage and blend

BUREAU never copies a single source. Every direction is a blend of three documented lineages, each owning a different axis, pushed through the subject until no single source can be named.

Recipe: dominant 50–60% (structure) × counter 25–35% (expression, pulling against it) × accent 10–20% (one behaviour), plus one ingredient only the subject has. Write it in .bureau/comps/blend.md (Gate 1).

The thirteen templates are worked examples, each with a LINEAGE.md. They count as sources too:

A project scaffolded from a template starts as a copy. Before Gate 2 it must be at or below 0.35 against every template:

node skill/scripts/divergence.mjs index.html --templates --out .bureau/evidence/divergence.json

Canon, rules and originality tests in skill/references/23-lineage-and-blend.md.

9. Refinement passes

Between the first build and QA, seven passes from structure to detail. One at a time; re-shoot after each.

Thresholds and evidence in skill/references/24-refinement-passes.md.