Cubism

立体主义 / Cubism

Cubism

Multiple perspectives. Fragmented form. Geometric truth.

1907

Founded

Perspectives

∞

Fragments

0°

Symmetry

Color System

Earth Tone Palette

Inspired by the analytical Cubism period — restrained, earthy, deliberate.

Burnt Sienna

#5c4033

Primary

Canvas

#e8dcc8

Background

Khaki

#8b7355

Accent 1

Steel Blue

#3d5c6e

Accent 2

Terracotta

#9b3d25

Accent 3

Usage examples

Primary text

Surface

Accent border

Secondary

Neutral

Analytical

Cubism palette in context

Components

Geometric Building Blocks

Every element obeys hard edges, thick borders, and displaced shadows.

Primary — hard shadow + geometric slide

Size variants

AI Design Rules

Interaction Principles

Four named rules — each with an interactive demo. Click, hover, and observe.

Rule 1Earth Tone Mandate

#5c4033 / #e8dcc8 / #8b7355 / #3d5c6e / #9b3d25
No neon. No pure white. No corporate blue.

Click a tone to apply it as primary

Burnt Sienna Mode

Earth tone — no softening gradients

Rule 2Hard Shadow System

shadow-[Npx_Npx_0px_color]
Zero blur. Geometric offset only.

Choose shadow depth

6px Hard Shadow

box-shadow: 6px 6px 0px #8b7355

Hover & press the card below

Hover: shadow lifts. Press: shadow collapses. This is the "stamp" effect.

Rule 3Geometric Fragmentation

skew() / rotate() / clip-path / z-index overlap
Multiple planes. Multiple angles. One surface.

1 plane

Hover fragment to see planes shift independently

Rule 4Animation Timing

duration: 100–200ms only.
No spring bounce. No slow fade. Hard stop.

Hover the element below

Cubism response: crisp 150ms

Cubism (correct)

Slow fade (forbidden)

Click Go on both rows to compare timing feel

Gallery

Asymmetric Exhibition

Asymmetric layout. Overlapping frames. Multiple perspectives coexisting.

Les Demoiselles Fragment

Oil on canvas, 1907 — Analytical phase

Cubist Still Life

1912

Fragmented Form

1914

Angular Portrait

Planar Landscape

Synthetic Collage

Design Rules

Cubist Code of Practice

The philosophy distilled. Break these and you break cubism.

Do

Use skew and rotate transforms on elements
Primary: #5c4033 and #e8dcc8 earth tones
border-2 with deep color — no thin borders
rounded-sm or rounded only — keep edges angular
Asymmetric, off-center layouts
z-index overlapping for multi-perspective depth
font-bold uppercase tracking-widest
clip-path or transform for fragmented visuals
Hover/active as 1-4px translate + shadow shift (150-200ms)

Don't

rounded-2xl, rounded-full — kills the angular feel
Soft gradients or blur effects
Neon colors or fluorescent accents
Symmetric centered traditional layouts
Circular or organic curve shapes
Thin borders (border without -2 or heavier)
Soft box-shadows with blur radius
Spring bounce, floating loops, hover:scale-110
Slow fade animations over 200ms

“Cubism is not a reality you can take in your hand. It's more like a perfume — in front of you, behind you, to the sides. The scent is everywhere but you don't quite know where it comes from.”

Pablo Picasso

Cubism

←StyleKit

立体主义 / Cubism

Cubism

Multiple perspectives. Fragmented form. Geometric truth.

1907

Founded

Perspectives

∞

Fragments

0°

Symmetry

Color System

Earth Tone Palette

Inspired by the analytical Cubism period — restrained, earthy, deliberate.

Burnt Sienna

#5c4033

Primary

Canvas

#e8dcc8

Background

Khaki

#8b7355

Accent 1

Steel Blue

#3d5c6e

Accent 2

Terracotta

#9b3d25

Accent 3

Usage examples

Primary text

Surface

Accent border

Secondary

Neutral

Analytical

Cubism palette in context

Components

Geometric Building Blocks

Every element obeys hard edges, thick borders, and displaced shadows.

Primary — hard shadow + geometric slide

Size variants

AI Design Rules

Interaction Principles

Four named rules — each with an interactive demo. Click, hover, and observe.

Rule 1Earth Tone Mandate

#5c4033 / #e8dcc8 / #8b7355 / #3d5c6e / #9b3d25
No neon. No pure white. No corporate blue.

Click a tone to apply it as primary

Burnt Sienna Mode

Earth tone — no softening gradients

Rule 2Hard Shadow System

shadow-[Npx_Npx_0px_color]
Zero blur. Geometric offset only.

Choose shadow depth

6px Hard Shadow

box-shadow: 6px 6px 0px #8b7355

Hover & press the card below

Hover: shadow lifts. Press: shadow collapses. This is the "stamp" effect.

Rule 3Geometric Fragmentation

skew() / rotate() / clip-path / z-index overlap
Multiple planes. Multiple angles. One surface.

1 plane

Hover fragment to see planes shift independently

Rule 4Animation Timing

duration: 100–200ms only.
No spring bounce. No slow fade. Hard stop.

Hover the element below

Cubism response: crisp 150ms

Cubism (correct)

Slow fade (forbidden)

Click Go on both rows to compare timing feel

Gallery

Asymmetric Exhibition

Asymmetric layout. Overlapping frames. Multiple perspectives coexisting.

Les Demoiselles Fragment

Oil on canvas, 1907 — Analytical phase

Cubist Still Life

1912

Fragmented Form

1914

Angular Portrait

Planar Landscape

Synthetic Collage

Design Rules

Cubist Code of Practice

The philosophy distilled. Break these and you break cubism.

Do

Use skew and rotate transforms on elements
Primary: #5c4033 and #e8dcc8 earth tones
border-2 with deep color — no thin borders
rounded-sm or rounded only — keep edges angular
Asymmetric, off-center layouts
z-index overlapping for multi-perspective depth
font-bold uppercase tracking-widest
clip-path or transform for fragmented visuals
Hover/active as 1-4px translate + shadow shift (150-200ms)

Don't

rounded-2xl, rounded-full — kills the angular feel
Soft gradients or blur effects
Neon colors or fluorescent accents
Symmetric centered traditional layouts
Circular or organic curve shapes
Thin borders (border without -2 or heavier)
Soft box-shadows with blur radius
Spring bounce, floating loops, hover:scale-110
Slow fade animations over 200ms

“Cubism is not a reality you can take in your hand. It's more like a perfume — in front of you, behind you, to the sides. The scent is everywhere but you don't quite know where it comes from.”

Pablo Picasso