Techniques
Hazard stripe accent
Diagonal black-and-yellow repeating stripes used as a decorative border or section divider, evoking ISO 3864 safety markings.
.hazard-stripe {
background: repeating-linear-gradient(
-45deg,
#0F0F0F,
#0F0F0F 10px,
#FFCD11 10px,
#FFCD11 20px
);
height: 8px;
width: 100%;
}
Machine-data panel
A concrete-gray card with monospace type and thick black border, styled like an equipment instrument readout.
.machine-panel {
background: #3F4347;
border: 3px solid #0F0F0F;
border-radius: 4px;
padding: 24px;
color: #FFFFFF;
font-family: 'DM Mono', monospace;
font-size: 14px;
line-height: 1.6;
}
Full-bleed yellow hero
A section that saturates the viewport with CAT yellow, using the condensed Anton headline at maximum scale against the brand ground.
.hero-yellow {
background: #FFCD11;
padding: 96px 32px;
text-align: left;
}
.hero-yellow h1 {
font-family: 'Anton', sans-serif;
font-size: clamp(3rem, 8vw, 6rem);
color: #0F0F0F;
line-height: 1.0;
letter-spacing: -0.02em;
text-transform: uppercase;
}