Opening the vault…
Opening the vault…
Style sheet · 3 references
Primary-color geometric rigor, 45-degree dynamic diagonal axes, solid cadmium red/blue/yellow planes, heavy structural black rule bars, asymmetrical photomontage collisions, and strictly lowercase sans-serif typography.
The whole sheet as Markdown, every move cited to the reference it came from. Paste it into your DESIGN.md as a starting system.
# Bauhaus / Constructivism — style sheet > Primary-color geometric rigor, 45-degree dynamic diagonal axes, solid cadmium red/blue/yellow planes, heavy structural black rule bars, asymmetrical photomontage collisions, and strictly lowercase sans-serif typography. Derived from 3 curated reference(s) in the `bauhaus-constructivist` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images. ## Type - Akzidenz-Grotesk — 1/3 - Bayer Grotesk — 1/3 - Futura — 1/3 - Futura PT — 1/3 - Rodchenko Bold — 1/3 - Tschichold DIN — 1/3 - Universal Sans — 1/3 ## Color - `#fbf9f5` light neutral — 3/3 - `#e02424` chromatic — 2/3 - `#0a0a0a` dark neutral — 1/3 - `#111827` dark neutral — 1/3 - `#18181b` dark neutral — 1/3 - `#4b5563` mid neutral — 1/3 - `#1d4ed8` chromatic — 1/3 - `#71717a` mid neutral — 1/3 - `#ef4444` chromatic — 1/3 - `#facc15` chromatic — 1/3 Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1): - `#0a0a0a` / `#fbf9f5` — 18.8:1 - `#111827` / `#fbf9f5` — 16.9:1 - `#18181b` / `#fbf9f5` — 16.8:1 - `#4b5563` / `#fbf9f5` — 7.2:1 ## Moves ### grid/layout - Anchor dynamic 45-degree diagonal typographic bands against rigid orthogonal horizontal rules to create asymmetric kinetic tension. — 43-herbert-bayer-universal-alphabet-1926-bauhaus-catalog - Collide heavy solid rectangular planes with thin structural hairline compass vectors to establish deep two-dimensional space without drop shadows. — 44-el-lissitzky-proun-for-the-voice - Thick structural black bars (4px to 12px) used as active typographic elements that terminate measure and direct reading velocity. — 45-jan-tschichold-die-neue-typographie ### typography - Drop uppercase completely: universal lowercase eliminates capital shift keys and sets a single democratic baseline for all communication. — 43-herbert-bayer-universal-alphabet-1926-bauhaus-catalog - Asymmetric balance over axial symmetry: flush-left ragged-right body text paired with stark size contrasts (72pt lead vs 9pt metadata) without intermediate stepping. — 45-jan-tschichold-die-neue-typographie ### color - Restrict color strictly to primary hues (cadmium red, cobalt blue, chrome yellow) placed as solid geometric anchors against warm raw paper. — 43-herbert-bayer-universal-alphabet-1926-bauhaus-catalog ### component pattern - Construct tabbed thumb-index navigational notches down the right edge of the viewport, translating mechanical book thumb-tabs into browser section jumps. — 44-el-lissitzky-proun-for-the-voice ## References - 43-herbert-bayer-universal-alphabet-1926-bauhaus-catalog — Herbert Bayer: Universal Alphabet & 1926 Bauhaus Catalog (exemplar) - 44-el-lissitzky-proun-for-the-voice — El Lissitzky: Proun & For The Voice - 45-jan-tschichold-die-neue-typographie — Jan Tschichold: Die Neue Typographie
Anchor dynamic 45-degree diagonal typographic bands against rigid orthogonal horizontal rules to create asymmetric kinetic tension.
Collide heavy solid rectangular planes with thin structural hairline compass vectors to establish deep two-dimensional space without drop shadows.
Thick structural black bars (4px to 12px) used as active typographic elements that terminate measure and direct reading velocity.
Drop uppercase completely: universal lowercase eliminates capital shift keys and sets a single democratic baseline for all communication.
Asymmetric balance over axial symmetry: flush-left ragged-right body text paired with stark size contrasts (72pt lead vs 9pt metadata) without intermediate stepping.
Restrict color strictly to primary hues (cadmium red, cobalt blue, chrome yellow) placed as solid geometric anchors against warm raw paper.
Construct tabbed thumb-index navigational notches down the right edge of the viewport, translating mechanical book thumb-tabs into browser section jumps.