German
Expressionism

A design system carved from raw emotion. Die Brücke meets the screen. Angular, distorted, unapologetically intense.

"The Expressionist does not see, he envisions. He does not depict, he experiences. He does not reproduce, he shapes. He does not take, he seeks." — Kasimir Edschmid, 1918
01

Color Palette

Saturated, emotionally violent color. Each hue screams with the urgency of a woodcut slammed onto paper. No pastels. No subtlety. Only raw chromatic force.

Searing Yellow #F5C800
Yellow Pale #FDE97E
Yellow Ochre #C49B00
Blood Red #B80000
Red Scream #E81313
Red Ember #8B1A1A
Bruise Purple #4A0E4E
Purple Deep #2D0A30
Purple Glow #7B2D8E
Toxic Green #3CB043
Green Sickly #7EC850
Green Shadow #1F5E20
Stark Black #0A0A08
Charcoal #1C1C18
Bone White #E8E0CC
Parchment #C8BFA5
Ash Grey #5A5A52
02

Typography

Warped, angular letterforms that shout from the page. Display text hits like a fist. Body text retains classical legibility as counterpoint to the visual violence above.

Display / Oswald 700
DER SCHREI
Heading 1 / Oswald 700
The Bridge Burns
Heading 2 / Oswald 600
Inner Vision Made Manifest
Heading 3 / Oswald 500
Blue Rider, Yellow Sound
Body / Libre Baskerville 400
Expressionism shatters the veneer of polite representation. Where Impressionism captured light on water, Expressionism captures the scream locked inside the throat. Forms twist. Colors burn. The interior world bleeds through every surface, distorting what the eye merely sees into what the soul actually knows.
Raw / Special Elite 400
Woodcut manifest // carved with a gouge, not a pen. Each letter torn from the block like a confession.
Caption / Libre Baskerville Italic
Ernst Ludwig Kirchner, "Street, Berlin" (1913) — Die Brücke, oil on canvas, angular figures stalking through urban dread.
03

Spacing

A deliberate tension between compression and void. Space is not neutral — it is pressure or its release. The 4px base unit scales into zones of increasing psychological weight.

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

Buttons

Skewed, aggressive interaction points. Buttons do not invite — they demand. The diagonal transform pays homage to the tilted planes and collapsing perspectives of Expressionist woodcuts.

05

Forms

Input fields as confessional spaces. Each form element is bordered in ash, igniting to yellow and red on focus — a visual metaphor for the Expressionist revelation of inner truth.

06

Cards & Panels

Content containers that feel carved from a woodblock. Diagonal corner slashes, aggressive hover shifts, and the ever-present gradient stripe at the top — a wound of color against the dark ground.

Die Brücke

Founded in Dresden, 1905. Kirchner, Heckel, Schmidt-Rottluff, Bleyl. Raw, primitive, urgent. They carved their manifesto into a woodblock and printed it by hand.

1905 – 1913

Der Blaue Reiter

Munich, 1911. Kandinsky, Marc, Macke, Klee. Spiritual abstraction. The blue rider galloped toward inner necessity, where color itself became the subject.

1911 – 1914

The Cabinet of Dr. Caligari

1920. The film that proved Expressionism could infect the moving image. Painted shadows, impossible angles, a world made from a madman's geometry.

Film — 1920
07

Alerts

Notification banners that echo the urgent broadsheets and manifestos of the movement. The heavy left border is the gouge-mark of the Expressionist's chisel.

Warnung

The comfortable surface is a lie. Look beneath it or be consumed by your own complacency.

Gefahr

Critical system failure. The machine-world devours what remains of the spirit. Immediate intervention required.

Innere Notwendigkeit

Kandinsky writes: "Color is a power which directly influences the soul." This element responds to inner necessity.

Befreiung

The form has been liberated from representational bondage. The new expression is alive. Proceed with conviction.

08

Navigation

Wayfinding through angular corridors. The navigation bar uses the blood-red base stripe and bold uppercase letterforms typical of Expressionist poster design.

09

Design Principles

The tenets of this system, drawn from the movement's philosophical core. Every component choice traces back to these imperatives.

Inner Necessity

Every visual choice must originate from emotional truth, not decorative convention. If a color, angle, or shadow does not serve the psychological intent, cut it.

Distortion as Language

Skewed angles, off-kilter alignments, and broken symmetry are not errors — they are the vocabulary of subjective experience. The world does not look straight when the soul is in anguish.

Chromatic Violence

Color at maximum saturation, deployed without apology. Yellow screams. Red bleeds. Purple bruises. The palette is not harmonious — it is honest.

The Carved Line

Borders, dividers, and outlines should feel gouged, not drawn. Reference the woodcut: bold, rough, unapologetically present. Thin hairlines belong to a different world.

Tension Over Comfort

This system does not soothe. Hover states shift aggressively. Shadows are harsh offsets, not soft blurs. The interaction should feel urgent and alive, never passive.

Dark Ground

The background is always near-black, like the surface of an uncarved woodblock. Light elements are the cuts — the revelations carved into the dark mass. White space is earned, never given.