Techniques
Bauhaus Primary-Color Block Accent
A geometric color block (circle, triangle, or rectangle) in one Bauhaus primary, positioned as a compositional anchor.
.color-block-accent {
position: absolute;
width: 120px;
height: 120px;
background: #D70026;
clip-path: circle(50%);
z-index: -1;
opacity: 0.9;
}
Geometric Grid Overlay
A visible structural grid rendered as hairline rules to reinforce the system's geometric logic.
.geometric-grid {
background-image:
linear-gradient(to right, #E8E8E8 1px, transparent 1px),
linear-gradient(to bottom, #E8E8E8 1px, transparent 1px);
background-size: 64px 64px;
}
Black-Field Inversion Section
A full-width section inverted to black background with white geometric type — the Bauhaus contrast principle.
.inversion-section {
background: #0A0A0A;
color: #FFFFFF;
padding: 96px 0;
}
.inversion-section .accent {
color: #FFCC00;
}