Perceptual Design System

The Perceptual Design System is built around perceptual scales—notably z0a (typographic notation) and L-Scale (luminance-first color).

Developed by Simon Yates, it defines a unified framework for constructing visual systems based on human perception. Each scale can be adopted independently.

It introduces a small set of interoperable scales—typography, spacing, and luminance—so visual hierarchy and relationships can be expressed without arbitrary values or one-off exceptions.

The system is intentionally finite at the point of use, but derivable beyond the documented range when new constraints or contexts demand it.

Typographic Scale

Type sizes are derived from a tritonic modular scale (three equal steps per 2:1 “octave”).

The scale is defined in rem for digital and ptfor print, with a shared step ratio so the relationships remain stable across media.

The reference (or “clef”) is z0a. In this system, z tokens descend and a tokens ascend away from the reference, and the token itself encodes direction and magnitude.

The naming rules are documented in Typographic Scale Notation.

Each step uses a constant ratio:

Tokens follow a simple grammar:

• z0a is the reference (“clef”)
• Ascenders are a1, a2, …
• Descenders are z1, z2, …

The benefit of tokenized sizing is that it decouples semantic HTML choices from typographic intent: the scale can express hierarchy without forcing naming to track specific elements such as h1–h3.

The scale is also extendable: when a context requires sizes outside the documented band, the naming remains stable and the values are mechanically derivable rather than introduced as arbitrary new  tokens.

In the following table, the HTML-relevant band is shown, plus one step above and below. The standard h1–h3, body, and small body sizes have been labelled and highlighted.

For a complete table across the full scale, see the Typographic Scale Table.

Orthogonal Hierarchy

In addition to vertical hierarchy through typographic scale, the system defines an orthogonal hierarchy that operates independently of size.

Changes in letterform case and weight allow elements at the same scale to express different levels of authority.

Luminance Scale (L-Scale)

This luminance scale is part of a broader system, “L-Scale: A Lightness-First Colour System”, which documents the full methodology and research. This page focuses on how the system is used in practice.

Rather than distributing colours evenly across a numeric range, L-Scale is built around how luminance is perceived in real use—especially in typography. The goal is not theoretical balance, but consistent legibility across sizes, densities, and contexts.

At the core of the system is a perceptual midpoint:

• L55 (#717176) serves as the middle gray
• Values below L55 are designed for use on light surfaces
• Values above L55 are designed for use on dark surfaces

This midpoint anchors the entire scale and allows contrast decisions to be made predictably.

Perceptual Anchors

The scale is bounded by two softened extremes:

• L25 (#212126) — a soft black, reducing the harshness of pure black while maintaining strong contrast
• L97 (#F4F4FB) — a soft white, avoiding the glare of pure white

These anchors create a more stable and comfortable contrast range for extended reading and interface use.

Size-Aware Luminance (L40, L45, L48)

Between these anchors, luminance is adjusted based on size and role.

A key property of L-Scale is that luminance is not treated as size-independent.

Smaller text requires stronger contrast to remain legible, while larger text can support lighter tones. As text size increases, perceived weight also increases—causing darker values to visually collapse toward stronger anchors like L25.

To account for this, the scale currently defines a narrow middle register that adapts based on size, role, and hierarchy:

• L40 (#47474C) — used when text functions as body copy, even at larger sizes (e.g. text-a1).In this role, L40 behaves as a softened extension of L25, preserving readability while avoiding the visual weight of a true heading.
• L45 (#55555A) — used for smaller, de-emphasized supporting text such as captions, UI labels, helper text, and metadata (commonly text-z0aor text-z1).At these sizes, L48 can feel too light, while L45 maintains clarity without competing with primary content.
• L48 (#5D5D62) — used for subtitles and subheadings where the intent is to sit clearly below L25 headings but above body copy (often text-a2 or larger).L40 can read too close to L25, especially at larger sizes or when used alongside it, reducing perceptual separation. L48 provides a lighter register that preserves distinction from L25 while still appearing before L55, without competing with it.

This range is intentionally tight. The goal is not to introduce more options, but to allow precise control over hierarchy without breaking the perceptual continuity of the scale.

Extended Range for Surfaces

Beyond the core ramp, additional high-luminance values extend the scale to support:

• Background tints
• Subtle highlights
• Layered surfaces

These values are intentionally spaced to remain visually distinct while preserving the overall rhythm of the scale.

Visual Representation

L-Scale is displayed to reflect its intended usage:

• Core values are presented uniformly
• Values intended for smaller text are visually reduced
• Values intended for larger applications are emphasized

This representation makes the scale self-documenting—communicating not just what the values are, but howthey should be used.

Key Characteristics

• The darkest value functions as a soft black
• The lightest value functions as a soft white
• L55 acts as the perceptual midpoint of the system
• Contrast decisions are anchored around real-world readability, not just compliance
• The scale adapts to typography size, not just colour relationships

Print

For print, the approach shifts toward higher contrast and simpler tonal structure.

• Blacks are set to true black
• Whites remain crisp and un-tinted
• Middle grays are used sparingly, if at all
• Intermediate tones are avoided

Instead of relying on semi-tones, depth is created through:

• Line weight
• Spacing
• Negative space

This results in output that is sharper, more consistent, and more reliable across typical printing conditions.

There are also practical considerations. Black ink is more economical, and mid-tone grays produced by laser printers can appear uneven or washed out. A high-contrast approach avoids these issues while producing a more defined and intentional result.

Proximity Scale

The proximity scale defines how visual relationships are expressed through spacing and luminance.

As the site migrates toward z0a-based sizing for everything, more of this behavior becomes implicit in the system. The section remains here to describe the model and vocabulary—and will be revised once the sizing migration is complete.

Scale

Proximity as a Fibonacci Scale

Proximity levels follow the Fibonacci sequence, consistent with the broader system where values scale either by the typographic scale or by Fibonacci growth.

Rather than using evenly spaced increments, distance increases according to perceptual significance:

• 1 → tight grouping
• 2 → related separation
• 3 → sectional break
• 5 → complete separation

This allows small differences to remain subtle, while larger separations expand more aggressively—matching how visual relationships are perceived.

How It’s Applied

Proximity is applied as a multiplier of the local typographic scale.

For example:

• Paragraph spacing → 1× the current font size (e.g. z0a * 1)
• Subheading spacing → relative to the heading size (e.g. mt-a1)
• Section spacing → 2×–3× the relevant typographic scale
• Major breaks → 5× to signal a complete separation

Because spacing is derived from typography, the system remains consistent across different sizes and layouts.

Luminance and Separation

With the L-Scale, adjacent values are sufficiently distinct that strict rules like “skip a shade” are no longer required.

Instead, luminance is selected based on:

• The role of the element
• Its size
• Its relationship to surrounding content

In most cases:

• L25 establishes the primary reading layer
• L40 / L45 / L48 provide local separation within that layer

This creates a stable working range where hierarchy can be expressed without introducing unnecessary contrast.

Navigation and System Contrast

L55operates outside the primary content range.

It is used for navigation and system-level elements, where it should remain visually distinct from the main reading layer.

To preserve this distinction:

• Body content remains within L25 and L4x values
• Separation is achieved through proximity and spacing, not by stepping into L55

In practice, L55can also be used to indicate de-emphasized or inactive states, where a clear shift away from primary content is intended.

Key Idea

Proximity is not a fixed measurement—it is a perceptual signal.

• Spacing defines how far apart things are
• Luminance defines how closely they are related

Together, they create a system where relationships are immediately understood without relying on rigid rules or arbitrary values.

Core Components

• z0a — Typographic Scale Notation
• L-Scale — Luminance-first colour system
• Typographic Scale Table — Complete reference