Design System

Cubism

A design language of fragmentation, simultaneity, and multiple perspectives. Analytical earth tones meet Synthetic boldness.

"Every act of creation is first an act of destruction."
-- Pablo Picasso

I

Color Palette

The muted earth tones of Analytical Cubism -- ochre, umber, slate -- anchored by the collage textures of Synthetic Cubism. Like Braque's palette knife dragging pigment across layered newsprint.

Ochre #c8a55a
Raw Umber #6b4e2e
Slate Blue #4a5a7a
Terracotta #b85c3a
Charcoal #2a2a2a
Newspaper #f0ead6
Olive #5a6a3a
Wine #6a2a3a

Analytical vs. Synthetic

Analytical Cubism (1909-1912) favored a restrained palette of browns, greys, and ochres -- the better to dissect form without the distraction of color. Synthetic Cubism (1912-1919) reintroduced bolder hues alongside collaged materials: newspaper, wallpaper, sand. This palette bridges both phases.

II

Typography

Three typefaces in dialogue: Archivo Black for angular display, Space Grotesk for geometric headings, Source Serif 4 for body text that echoes newspaper columns in a Braque collage.

Display Archivo Black / 96px / uppercase
Aa
Heading 1 Archivo Black / 48px / uppercase
Les Demoiselles
Heading 2 Space Grotesk / 36px / 700
Multiple Viewpoints
Heading 3 Space Grotesk / 22px / 600
Faceted Surfaces
Body Source Serif 4 / 16px / 400
The object is not to reproduce recognizable aspects of nature but to construct an experience of nature that is independent of the individual instance. In Cubism, truth is not optical but conceptual.
Caption Space Grotesk / 11px / 700 / uppercase
Labels, tags, and collage fragments

JOURNAL

In Synthetic Cubism, Picasso and Braque pasted fragments of newspaper directly onto their canvases. Typography became material -- no longer merely communicating words, but existing as texture, plane, and collage element. The letterforms themselves became objects to be seen from multiple angles.

III

Spacing

A geometric progression from 4px to 128px. Like the faceted planes of a Juan Gris still life, each interval creates depth through measured relationships.

--space-xs
4px
--space-sm
8px
--space-md
16px
--space-lg
32px
--space-xl
64px
--space-2xl
96px
--space-3xl
128px

Geometric progression visualized as faceted planes, each step doubling the previous -- a Cubist rhythm in space.

IV

Buttons

Faceted and angular, as if carved from intersecting planes. Hover effects shift perspective, echoing the Cubist principle that no single viewpoint reveals the whole truth.

Standard Actions

Outlined

Sizes

Faceted Variants

"I do not seek, I find. The object is to show what I have found, not what I am looking for." -- Pablo Picasso
V

Forms

Inputs offset and slightly rotated, as if fragments of a collage laid upon the canvas. The form itself becomes a composition of intersecting planes, recalling the papiers colles of Braque and Gris.

Checkboxes

Radio Buttons

VI

Cards

Multi-plane overlapping panels, each card a composition of layered surfaces. Like a Cubist still life, the viewer perceives depth not through perspective but through the overlap and offset of planes.

Picasso

Les Demoiselles d'Avignon shattered classical perspective. Five figures rendered from simultaneous viewpoints -- a revolution on canvas.

Braque

Houses at l'Estaque reduced architecture to geometric facets. Cezanne's lesson taken to its ultimate conclusion -- nature as cylinder, sphere, cone.

Juan Gris

The most methodical Cubist. Gris began with abstract geometric structures and derived recognizable forms from them -- Cubism in reverse.

Fernand Leger

Leger's "tubism" translated Cubist ideas through cylindrical forms. His figures became machines -- robust, industrial, built from interlocking volumes. Where Picasso fragmented, Leger solidified.

Robert Delaunay

Orphic Cubism brought color back to the center. Delaunay's Simultaneous Windows series proved that pure chromatic contrasts could create form without line -- Cubism set free from monochrome.

"The world is not what I see but what I know. I paint objects as I think them, not as I see them." -- Pablo Picasso
VII

Alerts & Badges

Geometric fragments communicating status and category. Each alert is a shard of information, angular and direct. Badges mark and classify like the stenciled letters Braque painted onto his collages.

Alerts

Simultaneity: Multiple perspectives are presented at once -- rotate your viewpoint, do not abandon it.
Composition: The geometric planes have been successfully interlocked. Structural integrity achieved.
Fragmentation: Caution -- the subject has been deconstructed beyond recognition. Reassemble with care.
Destruction: The classical perspective has been irreversibly shattered. There is no going back.

Filled Badges

Default Ochre Slate Terracotta Wine Olive

Outlined Badges

Analytical Synthetic Crystal

Shard Badges

Picasso Braque Gris Leger Delaunay
VIII

Design Principles

The philosophical foundations of Cubist design: deconstruction, simultaneity, the rejection of a single fixed viewpoint. These principles, born in the studios of Montmartre, remain radical over a century later.

Multiple Perspectives

Reject the tyranny of a single viewpoint. Show an object from above, below, and beside simultaneously. In design, this means presenting information through multiple lenses -- never assume one angle tells the whole story.

Deconstruction

Break the whole into geometric fragments to understand how the parts relate. Deconstruct interfaces into their essential planes, then rebuild them with intention. As Picasso said: "Every act of creation is first an act of destruction."

Simultaneity

Present multiple states, views, or moments at once. Cubism collapsed time and space onto a flat plane. In UI, this translates to layered information, where context and detail coexist without hiding one behind the other.

Flatness with Depth

Cubism abolished Renaissance perspective but created a new kind of depth through overlapping planes and shifting angles. Design can achieve the same: layers and offsets suggest dimensionality without illusionistic shadow or gradient.

Material Truth

Synthetic Cubism introduced real materials -- newspaper, wallpaper, sand -- into painting. Embrace the materials of your medium. A screen is flat; do not pretend otherwise. Let texture come from honest use of type, color, and geometry.

Geometric Essence

Cezanne advised treating nature as "the cylinder, the sphere, the cone." Cubism took this literally, reducing the visible world to angular facets. In design, strip away the decorative until only the geometric skeleton remains.

"The goal I proposed myself in making Cubism? To paint and nothing more. And to paint seeking a new expression, divested of useless realism, with a method linked only to my thought." -- Juan Gris