SYNTHESE — Synthetic Cubist UI Kit

01 — Foundation

Color Palette

Flat, saturated primaries cut against warm newsprint neutrals — exactly as Picasso and Braque assembled coloured paper fragments onto canvas. Each hue is a plane, not a gradient.

Cadmium #D4321C

Cobalt #1A3A8F

Chrome #F2C12E

Viridian #1D6B4E

Jet #0D0D0D

Chalk #F7F4ED

Newsprint#E8E2D0

Putty #C9B99A

Primary Structural Accent Affirm Neutral

02 — Typography

Type Scale

Three voices: Bebas Neue for bold display — condensed, architectural, poster-like. Playfair Display for body — classical, editorial, slightly dramatic. IBM Plex Mono for labels and data — precise, mechanical.

Display — Bebas Neue / 88px

Collage

Heading — Bebas Neue / 58px

Fragment

Subheading — Playfair Display / 38px Italic

Assembled Planes

Body — Playfair Display / 16px

Synthetic Cubism replaced the austere monochromy of analytical cubism with bright colours, textures, and mixed media. The picture plane became an arena of assembled fragments, papier colle, and flat decorative shapes.

Small — Playfair Display / 14px Italic

Juan Gris brought rigorous colour harmony to the movement; his canvases resemble stained glass assembled from bold, interlocking planes of pure pigment.

Mono — IBM Plex Mono / 14px

const plane = { fill: '#1A3A8F', weight: 'primary' }

Label — IBM Plex Mono / 11px Bold

Fragment Identifier — 0012

03 — Actions

Buttons

Each button is a coloured plane. Hover lifts the plane, revealing an offset shadow in its own hue — the collage layer beneath. Hard corners only. No gradients. No blur.

Colour Variants

Sizes

Icon Buttons

Status Badges

Cadmium Cobalt Chrome Viridian Newsprint

04 — Input Fields

Form Elements

Focus state: a cobalt colour plane materialises on the left edge — as if a new fragment has been placed. Error and success states replace that plane with cadmium or viridian.

Artist Name Your full name as it appears in the catalogue

Email Address

Password

Studio Reference — Error Invalid characters detected — use letters and hyphens only

Accession Code — Verified Code accepted — record found in archive

Work Description Maximum 800 characters

04b — Selector

Dropdown Select

Movement

Year of Work

05 — Selection

Radio & Checkboxes

Selected states reveal a bold vertical colour plane on the left edge — a fragment of cobalt applied to the composition. Click to assemble your selection.

Radio — select one medium

Papier Colle on Board Cut paper, pasted — synthetic cubism's signature Oil and Sand on Canvas Textured ground — mixed pigment with aggregate Gouache and Ink on Paper Works on paper — flat opaque colour planes Lithograph — Printed Edition Multiple — edition of 50, signed and numbered

Checkboxes — select influences

Flat decorative colour Planes of pure pigment — no modelling or shadow Newspaper and printed matter Le Journal — lettering, headlines, texture fragments Musical instrument forms Guitar, mandolin, violin — recurrent motifs Stencilled letters and numbers Typography as visual element — not content

06 — Feedback

Alert Components

A bold colour bar crowns each alert — a flat plane declaring its category before the message is read. Four semantic states, each anchored to a palette colour.

Submission Open

The Section d'Or exhibition accepts new works from 1 September. All entries must include a signed statement of authenticity.

Work Registered

Your composition has been catalogued under accession number SYNTH-1914-023. A confirmation has been sent to your atelier.

Plane Overlap

Two colour planes share the same Z-layer. Resolve the stacking order before the composition is finalised for print.

Fragment Lost

One or more papier colle fragments could not be located in the archive. The composition cannot be assembled without all source files.