Foundations

Philosophy

Canon is not a style guide. It is a philosophical commitment to tools that recede into use, revealing only the work that matters.

Zuhandenheit

/ˈtsuːˌhandənˌhaɪt/ — German: "ready-to-hand"

Martin Heidegger distinguished between two modes of encountering tools: present-at-hand (Vorhandenheit) and ready-to-hand (Zuhandenheit).

Present-at-Hand

Vorhandenheit

The hammer as an object of study. You notice its weight, its material, its construction. The tool demands attention. Work stops.

In Design Systems: Documentation you must study. Components that require memorization.

Ready-to-Hand

Zuhandenheit

The hammer disappears into hammering. You think only of the nail, the wall, the picture you're hanging. The tool recedes into transparent use.

In Design Systems: Tokens that feel inevitable. Components that just work.
"The less we just stare at the hammer-thing, and the more we seize hold of it and use it, the more primordial does our relationship to it become." — Martin Heidegger, Being and Time

Canon's goal is Zuhandenheit: a design system that disappears into use. When you reach for var(--space-md), you shouldn't think about the golden ratio—you should simply achieve the spacing that feels right.

The Subtractive Triad

Every creation exists simultaneously at three levels. Each level has its own discipline, question, and action. Applied in sequence, they reveal what truly matters.

1

DRY

Implementation Level

"Have I built this before?"
Unify

Eliminate duplication. Don't repeat patterns, tokens, or components. Every abstraction should exist exactly once.

2

Rams

Artifact Level

"Does this earn its existence?"
Remove

Dieter Rams: "Weniger, aber besser"—less, but better. Every element must justify its presence. Ornament is crime. Function is beauty.

3

Heidegger

System Level

"Does this serve the whole?"
Reconnect

The hermeneutic circle: parts must serve the whole, and the whole must illuminate the parts. Eliminate disconnection.

Application

For any design decision, ask the three questions in order:

  1. DRY: Is this pattern already defined? If so, use it. If not, should it become a pattern?
  2. Rams: Does this element justify its existence? Can it be removed without loss?
  3. Heidegger: Does this serve the system's coherence? Does it enable the whole?

Weniger, aber besser

/ˈveːnɪɡɐ ˈaːbɐ ˈbɛsɐ/ — German: "less, but better"

Dieter Rams' principle guides every Canon decision. It is not minimalism for aesthetics—it is minimalism for function. We remove what obscures.

1 Good design is innovative
2 Good design makes a product useful
3 Good design is aesthetic
4 Good design makes a product understandable
5 Good design is unobtrusive
6 Good design is honest
7 Good design is long-lasting
8 Good design is thorough down to the last detail
9 Good design is environmentally friendly
10 Good design is as little design as possible
"Indifference towards people and the reality in which they live is actually the one and only cardinal sin in design." — Dieter Rams

Mathematical Foundation

Canon's spacing and typography derive from the golden ratio (φ = 1.618033...). This is not arbitrary aestheticism—it is the recognition that proportional relationships feel natural because they occur throughout nature.

--space-xs 0.5rem φ⁻²
--space-sm 1rem φ⁻¹
--space-md 1.618rem φ⁰ × base
--space-lg 2.618rem φ¹
--space-xl 4.236rem φ²

Each step in the scale multiplies by φ. The result: spacing that relates harmoniously at every level. Adjacent elements feel balanced. The mathematics recede; the harmony remains.

Color Philosophy

Canon's palette is functional, not decorative. Black and white provide structure. Opacity creates hierarchy. Semantic colors serve specific purposes—never ornament.

Black as Canvas

Pure black (#000000) is the canvas. Everything else is light revealing form.

Opacity for Hierarchy

White at varying opacities (100%, 80%, 60%, 46%, 20%) creates text hierarchy without introducing new colors.

Semantic Only

Colors beyond black/white exist only for meaning: success, error, warning, info. Never for decoration.

"Color is not to decorate, but to communicate."

In Practice

Philosophy without application is empty. Here is how Canon's philosophy manifests in code:

subtractive-component.css 
/* The Subtractive Triad applied to a component */

/* 1. DRY: Use existing tokens, don';t reinvent */
.card {
  padding: var(--space-md);
  border-radius: var(--radius-lg);
}

/* 2. Rams: Only necessary properties */
.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  /* No shadows, gradients, or decoration */
}

/* 3. Heidegger: Serve the system';s coherence */
.card {
  transition: border-color var(--duration-micro) var(--ease-standard);
}
.card: hover {
  border-color: var(--color-border-emphasis);
  /* Consistent with all other hover states */
}