Brutalist Grid
Raw borders, offset shadows, and a rigid year-column grid. Vertical year labels in the left rail; two-up event blocks in the right rail. No softness — just structure, contrast, and impact. For brand histories that want to read as built, not designed.
Brutalist Grid the 18th of 24 designs in the 24 CSS Timeline Layouts collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="tl18-scene">
<div class="tl18-grid">
<div class="tl18-row">
<div class="tl18-year-cell"><span class="tl18-yr">1995</span></div>
<div class="tl18-content-cell">
<div class="tl18-event tl18-highlight">
<p class="tl18-cat">Foundation</p>
<h3 class="tl18-ev-title">Company Founded</h3>
<p class="tl18-ev-body">Three engineers left to build what they believed the industry was missing. Bootstrapped, no external capital.</p>
</div>
<div class="tl18-event">
<p class="tl18-cat">Product</p>
<h3 class="tl18-ev-title">First Beta Released</h3>
<p class="tl18-ev-body">200 early access users signed on in the first week. Feedback was brutal. It improved everything.</p>
</div>
</div>
</div>
<div class="tl18-row">
<div class="tl18-year-cell"><span class="tl18-yr">2002</span></div>
<div class="tl18-content-cell">
<div class="tl18-event">
<p class="tl18-cat">Finance</p>
<h3 class="tl18-ev-title">Series B Raised</h3>
<p class="tl18-ev-body">$22M from Sequoia and Index Ventures. Valuation crossed $100M for the first time.</p>
</div>
<div class="tl18-event tl18-accent">
<p class="tl18-cat">Crisis</p>
<h3 class="tl18-ev-title">CEO Replaced</h3>
<p class="tl18-ev-body">Board-led transition. Incoming leadership brought an operations background that proved transformative.</p>
</div>
</div>
</div>
<div class="tl18-row">
<div class="tl18-year-cell"><span class="tl18-yr">2011</span></div>
<div class="tl18-content-cell">
<div class="tl18-event">
<p class="tl18-cat">Milestone</p>
<h3 class="tl18-ev-title">1M Users</h3>
<p class="tl18-ev-body">The platform crossed one million active accounts. A full-page ad in the New York Times marked the occasion.</p>
</div>
<div class="tl18-event">
<p class="tl18-cat">Tech</p>
<h3 class="tl18-ev-title">V4 Architecture</h3>
<p class="tl18-ev-body">Complete rewrite of the core engine. Moved to a distributed microservices model running on commodity hardware.</p>
</div>
</div>
</div>
<div class="tl18-row tl18-last">
<div class="tl18-year-cell"><span class="tl18-yr">2026</span></div>
<div class="tl18-content-cell">
<div class="tl18-event tl18-highlight">
<p class="tl18-cat">Now</p>
<h3 class="tl18-ev-title">Market Leader</h3>
<p class="tl18-ev-body">42% category share. $340M ARR. Operations in 58 countries. The original engineers are still writing code.</p>
</div>
<div class="tl18-event">
<p class="tl18-cat">Future</p>
<h3 class="tl18-ev-title">What's Next</h3>
<p class="tl18-ev-body">Autonomous workflows, embedded AI, and a marketplace launching later this year. The best chapter hasn't been written yet.</p>
</div>
</div>
</div>
</div>
</div> .tl18-scene {
--tl18-paper: #f5f0e8;
--tl18-ink: #0d0d0d;
--tl18-red: #c8423a;
background: var(--tl18-paper);
padding: 3rem 1.5rem;
font-family: 'Inter', system-ui, sans-serif;
}
.tl18-grid {
max-width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: 100px 1fr;
gap: 0;
border-top: 3px solid var(--tl18-ink);
border-bottom: 3px solid var(--tl18-ink);
}
.tl18-row {
display: contents;
}
.tl18-year-cell {
padding: 1.5rem 1rem 1.5rem 0;
border-right: 3px solid var(--tl18-ink);
border-bottom: 1px solid rgba(13,13,13,0.12);
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
.tl18-last .tl18-year-cell { border-bottom: 0; }
.tl18-yr {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 800;
font-size: 1.8rem;
letter-spacing: 2px;
color: var(--tl18-ink);
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
line-height: 1;
}
.tl18-content-cell {
padding: 1.5rem 0 1.5rem 1.5rem;
border-bottom: 1px solid rgba(13,13,13,0.12);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.tl18-last .tl18-content-cell { border-bottom: 0; }
/* Brutalist offset shadow is intentionally hard-edged — no blur, just
a solid ink-colored block peeking out behind the card. Built with
box-shadow rather than a ::before pseudo because pseudos with
z-index: -1 get hidden behind the parent's background when the
parent gets its own stacking context (any transform creates one),
making the card's text invisible on hover. */
.tl18-event {
position: relative;
padding: 1rem;
border: 1.5px solid var(--tl18-ink);
background: #fff;
box-shadow: 4px 4px 0 0 var(--tl18-ink);
transition: transform 0.2s, box-shadow 0.2s;
}
.tl18-event:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 0 var(--tl18-ink);
}
.tl18-cat {
font-family: ui-monospace, monospace;
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(13,13,13,0.45);
margin: 0 0 0.5rem;
}
.tl18-ev-title {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--tl18-ink);
margin: 0 0 0.35rem;
line-height: 1.2;
}
.tl18-ev-body {
font-size: 12.5px;
color: rgba(13,13,13,0.55);
line-height: 1.55;
margin: 0;
}
.tl18-highlight { background: var(--tl18-ink); }
.tl18-highlight .tl18-cat { color: rgba(255,255,255,0.4); }
.tl18-highlight .tl18-ev-title { color: #fff; }
.tl18-highlight .tl18-ev-body { color: rgba(255,255,255,0.5); }
.tl18-highlight::before { background: rgba(255,255,255,0.3); }
.tl18-accent { border-color: var(--tl18-red); }
.tl18-accent::before { background: var(--tl18-red); }
.tl18-accent .tl18-ev-title { color: var(--tl18-red); }
@media (max-width: 700px) {
.tl18-grid { grid-template-columns: 60px 1fr; }
.tl18-yr { font-size: 1.4rem; }
.tl18-content-cell { grid-template-columns: 1fr; padding-left: 1rem; }
}