Foundational Research for a Visual Design Knowledge Base

The preliminary nine-category taxonomy maps well to how foundational design education is structured at RISD, Parsons, and CMU. Colour theory, typography, and layout-composition receive universal standalone treatment across every program and textbook examined. Visual perception, interaction design, and accessibility have strong support. Information architecture, design systems, and brand identity have moderate support but sit at different abstraction levels.

Orthogonality issues to address. An ontology engineer would flag three concerns. First, visual-perception and layout-composition overlap significantly — gestalt principles are the perceptual laws governing layout. Keep them separate but cross-reference heavily. Second, accessibility operates as a cross-cutting quality attribute touching every other category, not a peer domain. Model it as a facet dimension or ensure each category has accessibility subconcepts. Third, brand-identity sits at a higher abstraction level — it's an application context drawing on colour, typography, and design systems rather than a knowledge domain of equal granularity. Consider renaming it "visual-identity-systems."

Cross-cutting principles that span categories. Hierarchy, contrast, rhythm/repetition, scale/proportion, and balance appear in every textbook and design system but belong to no single category. The knowledge base should model these as cross-cutting concept cards that reference multiple domains, similar to how mathematical theorems reference multiple branches.

Universal visual style categories across all five systems: colour, typography, spacing/layout, motion, icons, and elevation/depth. The W3C Design Tokens Community Group published its first stable specification (October 2025) defining seven primitive types (colour, dimension, fontFamily, fontWeight, duration, cubicBezier, number) and six composite types (shadow, typography, border, gradient, transition, strokeStyle).

Research into design education assessment, professional certification criteria, senior designer interview processes, and developer knowledge gaps produced 55 competency questions across five types and three tiers. The questions specifically bridge "I can see it" and "I can build it" — connecting visual perception to systematic implementation.

Josef Albers, Interaction of Color (1963). The canonical colour education text. Central thesis: "In visual perception a colour is almost never seen as it really is." Key extractable concepts: colour relativity, simultaneous contrast, one colour appearing as two (and vice versa), vibrating boundaries, transparency illusion. 272 pages, paperback, no ebook. Standing: universally canonical.

Johannes Itten, The Art of Color (1961). Complements Albers with a classification-based approach. The seven colour contrasts (hue, light-dark, cold-warm, complementary, simultaneous, saturation, extension/proportion) are individually card-worthy concepts. The contrast of extension is particularly mathematical: Goethe's balance ratios (yellow:violet = 1:3, orange:blue = 1:2, red:green = 1:1). Condensed version Elements of Color (~96 pages, Wiley) is more accessible.

OKLCH/OKLAB (Björn Ottosson, 2020). The most important modern colour space for web design. Mathematical structure: XYZ → LMS via matrix M₁ → cube-root nonlinearity → opponent-colour transform via M₂. Superior to HSL because equal L changes produce equal perceived brightness across all hues — critical for accessible palette generation. CSS support is now baseline: oklch(L C H). The relative colour syntax oklch(from var(--base) calc(l + 0.15) c h) enables dynamic palette manipulation from a single token.

CIE colour science provides the mathematical foundation. Colour difference formulas progress from simple Euclidean distance in CIELAB (ΔE*₇₆) through the sophisticated CIEDE2000 with its five correction terms. For the target user: colour space conversions are 3×3 matrix multiplications — this is literally linear algebra, not metaphor.

Robert Bringhurst, The Elements of Typographic Style (v4.0, 2012, 398 pages). The "typographers' bible." Organised around principles (rhythm, proportion, harmony) rather than tutorials. Its mathematical content on proportional systems directly inspired Tim Brown's modular scale work. Standing: canonical but print-focused.

Tim Brown's modular scale is the critical bridge between typographic tradition and web implementation. A modular scale generates font sizes through repeated multiplication by a ratio — the ratios are explicitly musical intervals: minor second (15:16 ≈ 1.067), major third (4:5 = 1.250), perfect fourth (3:4 ≈ 1.333), perfect fifth (2:3 = 1.500). Brown explicitly quotes Bringhurst: "A modular scale, like a musical scale, is a prearranged set of harmonious proportions."

Every Layout (Heydon Pickering & Andy Bell) defines 13 layout primitives — Stack, Box, Center, Cluster, Sidebar, Switcher, Cover, Grid, Frame, Reel, Imposter, Icon, Container — that are intrinsically responsive without media queries. Philosophy: "composition over inheritance" applied to CSS. This directly maps the GoF software engineering principle to front-end architecture.

Utopia (James Gilyead & Trys Mudford) provides the mathematical framework for fluid responsive design. Core math: CSS clamp() performs linear interpolation between viewport widths. Define a modular scale ratio at minimum and maximum viewports; each scale step gets its own clamp() declaration, causing headings to grow faster than body text as the viewport widens.

Don Norman, The Design of Everyday Things (revised 2013, 368 pages). The foundational text of interaction design. Six concepts for discoverability: affordances, signifiers, mapping, feedback, constraints, conceptual models. The 2013 revision introduced "signifiers" to resolve the widespread misuse of "affordance."

Laws of UX (Jon Yablonski, lawsofux.com) compiles 30 laws organised into heuristics (Fitts's Law, Hick's Law, Jakob's Law, Miller's Law, Doherty Threshold), gestalt principles, cognitive biases, and principles. Freely accessible, each law includes psychological foundations and practical applications — ideal for concept card extraction.

Refactoring UI (Adam Wathan & Steve Schoger, ~218 pages, PDF). The definitive developer-to-designer bridge. Core insight: design is a set of systematic, repeatable decisions, not artistic intuition. Key tactical patterns: constrained spacing scales, HSL-based palette construction, "start with too much whitespace," design in greyscale first.

Brad Frost, Atomic Design (free at atomicdesign.bradfrost.com). Five levels: atoms → molecules → organisms → templates → pages. Maps directly to React/Vue component architecture.

Where MT is movement time, D is distance to target, W is target width, and the Index of Difficulty ID = log₂(1 + D/W) is measured in bits. Fitts drew directly from Shannon's channel capacity theorem. Throughput TP = ID/MT ≈ 10 bits/s for mouse pointing. The Steering Law for path-following is derived by integral calculus: T = a + b × (A/W).

The +1 represents the null event (temporal uncertainty of stimulus onset). General form uses Shannon entropy: RT = a + b × H where H = −Σ pᵢ log₂(pᵢ). Breaks down critically when stimulus-response compatibility is high (Leonard, 1959: NO set-size effect with highly compatible mappings).

Explains why design systems use geometric spacing scales: visual area has exponent n ≈ 0.7 (compressive), meaning doubling physical area does NOT double perceived size — you need ~2.7× the area. Brightness has n ≈ 0.33, explaining why gamma correction and perceptually uniform colour spaces are necessary.

Just-noticeable differences are proportional to stimulus intensity. For line length, k ≈ 0.03 (3%). This is why spacing scales must be geometric (multiplicative) rather than arithmetic (additive) to create perceptually equal steps.

The 17 wallpaper groups (proven by Fedorov, 1891) constitute a complete mathematical classification of every possible two-dimensional repeating pattern. The 7 frieze groups do the same for border/strip patterns. The crystallographic restriction theorem proves that only 2-, 3-, 4-, and 6-fold rotational symmetries are compatible with periodic lattices — which is why 5-fold symmetry (Penrose tilings) requires aperiodic structures. This is not a heuristic but a mathematical absolute: any CSS background-repeat pattern, textile, or tile design must conform to one of these groups.

Kubovy & Wagemans (1995, 1998) established the Pure Distance Law: grouping by proximity follows an exponential decay function of relative inter-element distance — log[p(b)/p(a)] = −α × (|b|/|a| − 1), where α ≈ 3 is the attraction constant. Crucially, only relative distances matter, not absolute ones. Recent work using persistent homology (Chen et al., 2024) provides a unified computational framework where proximity appears as 0-dimensional persistence and closure as 1-dimensional persistence in Vietoris-Rips filtrations.

Modern CSS has undergone a transformation comparable to the introduction of Flexbox. Container queries (96%+ global support) let components respond to their own available space. :has() enables parent selection based on children, previously requiring JavaScript. Subgrid (97% support) solves nested alignment. CSS Nesting eliminates the need for preprocessors. Scroll-driven animations replace GSAP ScrollTrigger for parallax and reveal effects.

For colour: oklch(), color-mix(), relative colour syntax, and color(display-p3) are all baseline. Wide-gamut displays (Display P3 covers ~50% more colours than sRGB) are standard on Apple devices and OLED screens. Variable fonts provide continuous weight, width, and optical size adjustment from a single file.

Figma has matured its variables system with multi-mode support (light/dark, brand variants), native DTCG JSON import/export, and Code Connect for mapping Figma components to production code. Style Dictionary v4 provides first-class DTCG format support for transforming tokens to any platform.

This research reveals that visual design is not a flat collection of tips but a layered discipline with formal mathematical structure at its foundation.

The cross-domain Rosetta Stone should be woven throughout rather than isolated in a separate section. When a concept card explains modular type scales, it should note the identical mathematical structure to musical intervals. When it explains OKLCH's perceptual uniformity, it should reference the temperament analogy. When it explains design tokens, it should map directly to software engineering abstraction.

The target user's existing expertise in mathematics, music theory, and software engineering isn't a gap to be bridged — it's the foundation on which the entire knowledge base should be built.