A design system is a communication tool that happens to ship as code. Every component is a symbol. Every token is a primitive of a visual alphabet. Every consistency decision is a governance choice that human cultures have already faced — usually centuries ago, often catastrophically.
This series traces the long arc from the first known visual communication through the present, and finds that the problems Arbor solves day-to-day — abstraction vs. expressiveness, scale vs. coherence, standardisation vs. richness — were solved (and broken, and re-solved) by previous generations working in stone, clay, ink, and steel. None of this is metaphor. The same forces apply.
Each section below pairs a historical moment with a principle, then connects the principle to a specific decision Arbor has made.
1. Sound to Symbol (~40,000 BCE)
The historical moment
The oldest known visual communication survives in the caves of southern France. The Chauvet cave paintings, dated to approximately 36,000 years ago, depict lions, mammoths, and rhinoceroses rendered in charcoal and ochre. The Lascaux cave paintings, roughly 17,000 years old, show horses, aurochs, and deer in elaborate polychrome compositions. Artists applied natural pigments — ochre, manganese, and charcoal — using techniques including hollow bone spray application, direct finger painting, and brush-like tools made from plant fibres.
These are not idle doodles. Creating a cave painting requires a specific cognitive leap: the maker must understand that a mark on a wall can stand for something that is not physically present. A drawing of a bison is not a bison. It is a symbol that a viewer can decode. This marked the birth of symbolic communication — the foundational act that every design system inherits.
The progression followed a consistent pattern across cultures: realistic pictures (a drawing of a bird) evolved into pictograms (a simplified bird symbol) and then into ideograms (a bird symbol meaning “to fly”). Each step traded visual fidelity for communicative power.
The principle: Visual communication exists to bridge gaps
Between people. Across time. Across distance. The cave painter at Lascaux was not decorating a wall. They were encoding information — about hunting, ritual, identity — in a form that could outlast the painter, reach people who were not present, and communicate without speech.
Connection to design systems
Every component in a design system is a communication tool. A button says “you can act here.” A toast says “something happened.” A skeleton loader says “content is coming, stay with me.” None of these are the thing they represent — they are symbols that users decode, exactly as a cave painting viewer decoded a charcoal bison. The question for a DS engineer is the same question the Lascaux painter faced: does this mark communicate what I intend, to someone who is not me, in a context I cannot control?
2. Symbol to Alphabet (~3,200 BCE)
The historical moment
Writing was independently invented at least four times: in Mesopotamia (c. 3400–3100 BCE), in Egypt (c. 3250 BCE), in China (before c. 1250 BCE), and in Mesoamerica (before c. 1 CE). The Mesopotamian path is the best documented and illustrates the principle most clearly.
Cuneiform emerged in southern Mesopotamia during the late 4th millennium BCE as a means of keeping accounts. Proto-cuneiform began as a numeral system: a round stylus was pressed into clay tablets, with distinct shapes made by applying the stylus at different angles. Pictographic marks were gradually added to indicate what was being counted. By the 29th century BCE, these marks incorporated phonetic elements representing syllables of the Sumerian language, transforming a record-keeping system into a general-purpose writing system.
The archaeologist Denise Schmandt-Besserat traced cuneiform’s origins to a system of clay tokens used to track and exchange commodities in southern Mesopotamia from approximately 8,000 BCE. For over four thousand years, traders used small clay shapes — cones, spheres, discs — each representing a specific quantity of a specific good. Writing began when someone realised they could press those tokens into wet clay and remove them, leaving an impression that carried the same information as the token itself. The token became unnecessary. The mark was enough.
The Phoenician alphabet (c. 1050 BCE) was the decisive breakthrough. The first known alphabet consisted of just 22 consonant symbols. For the first time, a visual symbol (a letter) represented a single sound (a phoneme) rather than a word or concept. This was a radical act of abstraction: the letter “A” descends from the Proto-Sinaitic symbol for an ox head (aleph), but it carries no meaning of “ox.” It is pure sound made visible.
Twenty-two symbols, recombined infinitely.
The principle: Abstraction enables scale
Pictographs were rich but limited. You needed a new symbol for every new concept. Alphabets are simple but infinite. A small set of abstract primitives, governed by combinatorial rules, can express any thought a human can have. The tradeoff is that each individual symbol carries less intrinsic meaning — the letter “B” tells you nothing on its own — but the system as a whole is unbounded.
Connection to design systems
Tokens are the alphabet of a design system. A colour primitive like color-green-700 carries no inherent UI meaning, just as the letter “B” carries no inherent word meaning. But when composed through semantic layers — color-green-700 becomes color-success-base becomes “this action completed” — a small set of primitives expresses infinite interface states.
Arbor’s four-tier token architecture (primitive, composite, semantic, component) mirrors the historical evolution from pictographic concreteness to alphabetic abstraction. Each tier trades specificity for composability, just as cuneiform evolved from “three cones = three measures of grain” to “these wedge marks can spell any word in any language that adopts this script.”
3. Manuscript to Print (1440)
The historical moment
In Germany, around 1440, the goldsmith Johannes Gutenberg invented the movable-type printing press. The machine itself was modelled on existing screw presses used for wine and olive oil. Gutenberg’s genius was not the press mechanism but the system he built around it: metal movable type cast from a lead-tin-antimony alloy, a hand mould for fast precise duplication of letterforms, oil-based ink suitable for metal type, and the integration of paper manufacture, ink-making, the screw press, and the codex book format into one workflow.
His type case contained approximately 290 separate letter boxes. The Gutenberg Bible used roughly 270 sorts: 6 punctuation marks, about 55 basic sorts, 60 ligatures, 120 abbreviations. This complexity existed so that printed pages would look familiar to readers accustomed to handwritten manuscripts. Standardisation did not mean simplification — it meant consistency.
The numbers tell the story of scale. A single Renaissance printing press could produce up to 3,600 pages per workday, compared to 40 by hand-printing and a few by hand-copying. By 1500 — just 60 years after Gutenberg’s invention — presses in operation throughout Western Europe had produced more than 20 million volumes.
The principle: Reproducibility requires standardisation
Every letter in Gutenberg’s type case had to be identical to every other instance of the same letter. A lowercase “e” on page 1 had to match the lowercase “e” on page 500. This was not an aesthetic preference — it was a mechanical requirement. If the type blocks varied in height, the ink would not transfer evenly. If they varied in width, the lines would not justify. Consistency was not a constraint imposed on the system; it was what made the system work at all.
Gutenberg also understood that standardisation does not preclude richness. His 290-character type case — with its ligatures, abbreviations, and variant forms — was far more complex than strictly necessary. He standardised the units while preserving the expressiveness of the whole.
Connection to design systems
Components are movable type. A <Button> in one feature team’s code must render identically to a <Button> in another’s — not because uniformity is an end in itself, but because inconsistency at the component level undermines communication at the product level. Users decode interface patterns the way readers decode letterforms: unconsciously, at speed, with the expectation of consistency.
Gutenberg’s type case also teaches that standardisation and richness coexist. Arbor’s component variants (size, emphasis, shape) are the modern equivalent of his ligatures and abbreviations — controlled variation within a consistent system.
4. Craft to Industry (1760–1840)
The historical moment
The Industrial Revolution began in the second half of the 18th century in Britain. For typography and visual communication, industrialisation created an explosion. The rising tide of literacy, plunging production costs, and the growth of advertising revenues pushed the number of newspapers and magazines published in the United States alone from 800 to 5,000 between 1830 and 1860.
The result was visual chaos. Victorian-era typography is characterised by what design historians describe as a “smorgasbord of fonts.” Printers used whatever typefaces happened to be available. Designers invented any letterform that suited their fancy. Letterforms were condensed and extended to outrageous extremes, festooned with spurs, serifs, and dimensional effects. A single poster might use a dozen or more typefaces, each competing for attention, none creating coherent hierarchy.
This was not incompetence. It was the natural consequence of scale without governance. When anyone can add a new typeface to the compositor’s case, and no one is responsible for the coherence of the whole, the result is an ever-expanding inventory of parts that undermine rather than support communication.
The principle: Scale creates new problems
A medieval scriptorium had one style because one scribe wrote the whole book. A Gutenberg press had consistency because one craftsman cut the type. An industrial press had chaos because a hundred foundries competed to sell the most novel typeface, and a hundred printers mixed them freely. Scale without principles produces inconsistency.
Connection to design systems
Victorian typography is what happens when you add components without principles. A codebase that imports buttons from four different libraries, uses six different spacing scales, and defines colours in three different formats is the digital equivalent of an 1850s circus poster. The problem is not the quantity of parts — Gutenberg had 290 sorts — but the absence of a governing system that makes those parts coherent.
Design systems exist because the Industrial Revolution taught us what happens without them. The lesson: governance is not bureaucracy. It is what prevents scale from destroying the communicative clarity that design is supposed to create.
5. Industry to Craft Reaction (1880–1910)
The historical moment
The Arts and Crafts movement was an international trend in the decorative and fine arts that flourished in Europe and North America between about 1880 and 1920. Initiated as a reaction against “the perceived impoverishment of the decorative arts and the conditions in which they were produced,” the movement stood for traditional craftsmanship and advocated economic and social reform.
William Morris (1834–1896) was the towering figure. Morris was a textile designer, poet, artist, writer, and socialist activist. In 1891, Morris founded the Kelmscott Press to publish limited-edition books of great beauty. He employed hand-operated presses, rich dense inks, handmade paper, and hand-cut woodblock illustrations. He created three distinctive typefaces — Golden, Troy, and Chaucer — based on 15th-century designs, each emphasising readability and historical awareness.
Morris’s most famous dictum, from his lecture “The Beauty of Life” delivered on 19 February 1880, captures the philosophy:
“If you want a golden rule that will fit everybody, this is it: Have nothing in your houses that you do not know to be useful, or believe to be beautiful.”
The principle: Quality over quantity, form follows purpose
Morris’s revolution was not a rejection of technology per se. The cultural historian Fiona McCarthy noted that “unlike later zealots like Gandhi, William Morris had no practical objections to the use of machinery per se so long as the machines produced the quality he needed.” C. R. Ashbee, a central figure in the movement, said in 1888: “We do not reject the machine, we welcome it. But we would desire to see it mastered.”
The revolution was about intention. Every element in a Kelmscott Press book earned its place: the typeface, the border, the initial letter, the paper stock, the ink density. Nothing was added because it was available, trendy, or easy. Everything was added because it served the whole.
Connection to design systems
YAGNI in design. Every token, every component, every variant must earn its place. Morris would have been a design system minimalist — not because he valued simplicity for its own sake (the Kelmscott Chaucer is magnificently complex), but because he insisted that complexity serve a purpose.
The practical test Morris applied — “useful or beautiful” — maps directly to component governance. Before adding a new variant, a new token, or a new component, the question is: does this serve a real user need (useful), or does it elevate the coherence and craft of the system (beautiful)? If the answer to both is no, it does not belong.
6. Communication at Distance (1860–1876)
The historical moment
The 19th century compressed the distance that information could travel and the time it took to arrive. The postal system (formalised in Britain with the Penny Post in 1840) enabled anyone to send a letter anywhere for a fixed, affordable price. The Pony Express (April 1860 – October 1861) carried mail nearly 2,000 miles from St. Joseph, Missouri, to Sacramento, California, in roughly 10 days via a relay of riders. The telegraph transmitted information electrically across any distance, effectively instantly, but Morse code required each word to be spelled out in dots and dashes — every word cost money. The telephone (Bell’s patent, 1876) restored the human voice but limited communication to two parties connected by wire, with no persistent record.
Each new medium did not simply replace the old — it reshaped what communication meant. A letter was reflective, a telegram was urgent, a phone call was personal. The same information — “I am arriving Tuesday” — carried different weight, context, and connotation depending on how it was delivered.
The principle: The medium shapes the message
Marshall McLuhan would later formalise this as “the medium is the message” (1964), but the 19th century lived it first. A telegram had to be brief because transmission was expensive. A letter could be long because paper was cheap and the postal service charged by the piece, not the word. The medium was not a neutral carrier of information — it actively shaped what information could be communicated and how it was received.
The constraints were not bugs. A telegram’s brevity made it powerful: receiving one meant something urgent had happened. A letter’s length made it intimate: someone had spent time composing their thoughts for you specifically. The physical properties of the medium became part of the message itself.
Connection to design systems
Screen size, pixel density, input method, and interaction model shape what components can communicate. A toast notification on mobile and a toast on desktop carry different constraints, just as a telegram and a letter do. The mobile toast must be brief — screen real estate is scarce, attention is divided, the thumb is the primary input. The desktop toast can carry more detail.
This is why responsive design is not just “make it fit smaller screens.” It is about understanding that the medium changes the message. Container queries, responsive variants, and adaptive density are Arbor’s tools for acknowledging that the medium shapes the message, just as the telegraph operator’s key shaped the telegram.
What this means in Arbor
Six inflection points, six principles, six anchors for decisions Arbor makes every week:
| Era | Principle | Arbor anchor |
|---|---|---|
| Cave painting | Visual communication bridges gaps | Components are communication tools |
| Cuneiform → alphabet | Abstraction enables scale | Tokens are the alphabet |
| Gutenberg | Reproducibility requires standardisation | Components = movable type |
| Industrial Revolution | Scale creates new problems | Governance prevents chaos |
| Arts and Crafts | Quality over quantity | YAGNI for every token and variant |
| Telegraph era | The medium shapes the message | Responsive design as medium-awareness |
This series continues. Part 2 picks up at the Bauhaus and Swiss modernism — the moment design becomes a discipline with rules and grids. Part 3 lands in the digital era and traces the design system as a recognisable artefact from Xerox PARC forward.
The point of the series isn’t historical literacy for its own sake. It’s the recognition that every design system question — “should this token exist?”, “should this component have another variant?”, “should responsive behaviour fork on viewport?” — has been asked before, by people working in different materials but on the same problems. Arbor inherits their answers.
Source: This article is the first in a three-part series. Raw research lives at
docs/design-system/research/design-literacy-part1-origins.md, with sources and bibliography.