This design system treats aesthetic decisions not as matters of taste but as engineering problems — constrained, measurable, and composable. It is built on the observation that the three most influential design systems of the current era — Google's Material Design, IBM's Carbon, and Shopify's Polaris — were developed independently and yet converged on the same fundamental architecture. That convergence is evidence of underlying mathematical structure, not fashion.
Every decision in this system derives from a small set of interlocking convictions. Human perception is logarithmic, so scales must be geometric. Colour harmony requires perceptual uniformity, so the colour space must be OKLCH. Spatial relationships carry structural meaning, so spacing must encode hierarchy. Layout should be composed from tested primitives, not built bespoke for every page. Type, space, and grid should flow from a single mathematical root. And the browser is a collaborator, not an adversary — our CSS should suggest constraints within which good outcomes are inevitable, not prescribe blueprints that work in one context and break in all others.
The manifesto articulates seven engineering principles. The layout philosophy articulates seven compositional precepts. Together, they form the intellectual skeleton of the system.
The entire colour system is built in OKLCH — a perceptually uniform colour space where equal changes in the L (lightness) parameter produce equal perceived brightness changes across all hues. This is not an aesthetic preference; it is a mathematical requirement for accessible palette generation. In the older HSL space, a "50% lightness" yellow looks dramatically brighter than a "50% lightness" blue. In OKLCH, they match.
The brand brown scale (11 steps, 50–950) was extracted from the logo artwork and anchored to a hue angle of ~50°. The warm neutral scale carries a subtle chromatic tint at hue 55° rather than being pure grey, giving the system warmth without sacrificing versatility. Three accent palettes serve the three C&B sites: Ink Blue (hue 255°) for the bookshop, Sage Green (hue 155°) for the gallery, and Terracotta (hue 35°) for the parent brand.
Colours follow a three-tier token architecture aligned with the DTCG specification: primitive tokens (brand-700), semantic tokens (interactive-primary), and component tokens (button-primary-bg). This mirrors the separation of concerns in software engineering — a brand colour change propagates through the semantic and component layers automatically.
Three typefaces, three roles, one mathematical skeleton.
Fraunces handles display and headlines. A soft-serif with four variable axes (weight, optical size, softness, and the distinctive "wonk" that tilts certain letterforms), it carries the hand-painted warmth of the C&B visual identity without being a novelty font. Per-site axis settings give each property its own typographic voice: sharp and editorial for books, light and airy for the gallery, bold and characterful for the parent brand.
Literata handles body text and long-form reading. Designed by TypeTogether as the custom typeface for Google Play Books, it was literally engineered for reading on screens. Its optical size axis adjusts stroke contrast, x-height, and spacing automatically — high-contrast elegance at display sizes, sturdy openness at caption sizes.
IBM Plex Mono handles system UI, metadata, captions, ISBNs, code, and everything functional. A monospace that balances technical precision with human warmth.
The modular type scale uses a perfect fourth ratio (4:3 = 1.333), made fluid via Utopia's clamp() interpolation. At the smallest viewport (360px), the ratio tightens to 1.2 (minor third). At the largest (1440px), it opens to the full perfect fourth. This means headings grow faster than body text as the viewport widens — a mathematically inevitable consequence of interpolating between two geometric progressions, producing a visual hierarchy that intensifies on larger screens without anyone having to specify that behaviour.
The layout system is a synthesis of two bodies of work. Every Layout (Pickering & Bell) defines thirteen composable primitives — Stack, Box, Center, Cluster, Sidebar, Switcher, Cover, Grid, Frame, Reel, Imposter, Icon, Container — that handle spatial relationships without media queries. Utopia (Gilyead & Mudford) provides the fluid mathematics that sizes everything continuously across viewports via clamp().
The two systems connect at a clean interface: Utopia produces fluid spacing tokens, Every Layout's primitives consume them. One decides where things go; the other decides how big they are. Together, they form a complete layout architecture that requires zero breakpoints, derives column counts from content rather than prescribing them, and scales harmoniously from 320px to 4K.
Above this foundation, CUBE CSS (Andy Bell) provides the organisational methodology — Composition, Utility, Block, Exception — that structures how primitives, utilities, and component-specific styles interact in the stylesheet. And modern CSS features (container queries, subgrid, :has(), scroll-driven animations, view transitions) layer progressively on top as enhancement, not dependency.
The philosophy's deepest connection is to the Arts & Crafts movement. William Morris didn't design wallpapers; he designed systems for generating patterns. Our layout system doesn't produce "a layout"; it produces an infinite family of layouts — all consistent, all fluid, all grounded in the same mathematical structure, and every one of them different. Mission chairs, not metal folding chairs.
Cowboys & Beans is a small independent publishing and arts collective operating three digital properties, each with its own personality but sharing a unified design foundation.
The three-logo identity system (primary wordmark, publisher's stamp, monogram) adapts across contexts. The brand guidelines document covers the complete specifications: logo usage, colour application, typography rules, spacing principles, and the DTCG token architecture that makes it all implementable in code.
This design system didn't emerge from nothing. It is grounded in a substantial body of research — deep dives into the academic literature, source analysis of 25+ canonical design texts, synthesis across six domains (colour theory, typography, layout, UI/UX, perception science, and design systems), and an investigation into why the web looks the way it does and what can be done about it.
The Foundations of Visual Design research document traces the intellectual lineage from perception science (Arnheim, Ware, gestalt research) through design principles (Norman, Nielsen, Laws of UX) through practical patterns (Krug, Refactoring UI) through system architecture (Frost, Curtis) to CSS implementation (Comeau, Eckles, Every Layout, Utopia). It maps the cross-domain bridges — the places where music theory, software engineering, and colour science share rigorous mathematical structure with visual design, not just metaphor.
Breaking the Layout Monoculture asks why all websites look the same and what can be done about it. It synthesises the CHI 2021 research measuring web homogenisation, cognitive science on banner blindness and inattentional filtering, modern CSS capabilities, museum wayfinding design, and editorial layout traditions into seven concrete, CSS-implementable strategies for building layouts that break free from template thinking. Its key insight: breaking layout conventions effectively requires stronger principles, not weaker ones.