Techniques
Mondrian Grid Layout
A CSS Grid that divides the viewport into asymmetric rectangular regions separated by thick black lines, directly recreating a Mondrian composition.
.mondrian-grid {
display: grid;
grid-template-columns: 2fr 3px 1fr 3px 1.5fr;
grid-template-rows: 1.5fr 3px 1fr 3px 2fr;
gap: 0;
min-height: 100vh;
}
.mondrian-grid > .line-h,
.mondrian-grid > .line-v {
background: #000000;
}
.mondrian-grid > .block-red { background: #e6201c; }
.mondrian-grid > .block-blue { background: #0048a3; }
.mondrian-grid > .block-yellow { background: #ffd500; }
.mondrian-grid > .block-white { background: #ffffff; }
Primary-Color Block Accent
Applies a solid primary-color background to a content block, bounded by thick black borders — used for hero sections, callouts, and featured cards.
.color-block-accent {
background: #e6201c;
color: #ffffff;
border: 3px solid #000000;
padding: 32px;
}
.color-block-accent--blue { background: #0048a3; }
.color-block-accent--yellow { background: #ffd500; color: #000000; }
Black-Line Divider System
Thick black horizontal and vertical rules that serve as the primary structural element, replacing conventional whitespace gutters.
.divider-h {
width: 100%;
height: 3px;
background: #000000;
border: none;
margin: 0;
}
.divider-v {
width: 3px;
height: 100%;
background: #000000;
border: none;
margin: 0;
}