Fragment
the
Interface

A minimal design system rooted in Analytical Cubism. Geometry over ornament. Structure over decoration. Inspired by Picasso and Braque, 1908–1912.

Color Palette

Each hue lives as a gradient — from a lighter tint at the top to its full-bodied base tone below. Derived from the muted earth tones of monochromatic Cubist canvases: charcoal, burnt ochre, raw sienna, ash grey, bone white. The gradients evoke the soft modulation of light across faceted planes — the defining atmospheric quality of Analytical Cubism.

Light #FDFAF4
Bone #F4EFE4
Light #E8C97A
Ochre #C9A84C
Light #B8896A
Sienna #8B5E3C
Light #4A4A4A
Charcoal #2A2A2A
Light #8A8A80
Ash #5C5C5C
Light #BEBEB2
Slate #9A9A8A
Light #EDE9E0
Fog #D8D4C8
Light #C96A58
Rust #A63D2F

Type Scale

Two typefaces only. Space Grotesk for text — geometric, rational, humanist. Space Mono for labels and captions — mechanical precision.

Space Grotesk Space Mono
Display — 56px / Bold

Fragment

Heading — 32px / Bold

Analytical Form

Subheading — 24px / Medium

Multiple Perspectives

Body — 16px / Regular

Braque and Picasso reduced objects to geometric forms, breaking the single viewpoint of traditional perspective. Colour became secondary to structure.

Small — 14px / Regular

The faceted planes of analytical cubism represent a radical rethinking of pictorial space — fragmenting and reassembling form across the picture plane.

Mono — 14px

const palette = { ochre: '#C9A84C' }

Label — 11px / Mono Bold

Section Identifier — 0001

Buttons

No border radius. No shadows. Sharp, deliberate edges. Hover states reveal a secondary inset border — reinforcing cubist layering. Click to feel the offset translation.

Variants
Sizes
Icon Buttons
Badges
In Progress Published Deprecated Draft

Form Elements

Focus states produce an offset ochre shadow — suggesting overlapping Cubist planes. States: default, focused, error, success.

Enter your full legal name
Invalid format — only letters and numbers allowed
Code verified successfully
Maximum 500 characters

Dropdown Select

Radio Buttons & Checkboxes

Choices are structured as opaque blocks — each a facet of a larger decision plane. Click to select and deselect.

Radio — select one
Checkboxes — select multiple

Alert Components

Four semantic alert states. The rotated mono label acts as a structural anchor — a vertical shard cutting through the composition.

Info

Exhibition Notice

The Salon des Independants submission window opens on 15 October. Works must not exceed 2m on any axis.

OK

Composition Saved

Your work has been stored to the archive. All planes and fragments are preserved in their current state.

Warn

Perspective Conflict

Two geometric planes overlap outside the allowed tolerance. Recalibrate the viewpoint offset before rendering.

Error

Fragment Unresolved

The deconstruction process failed. One or more planes could not be reassembled. Review the source geometry.