Terminal Log
Terminal-style incident timeline. Each log line carries a timestamp, severity level, and event detail. Scanlines, mono fonts, and blinking critical alerts create genuine operational tension. Built for incident reports, security audits, deployment postmortems.
Terminal Log the 11th 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="tl11-wrap">
<div class="tl11-scanlines" aria-hidden="true"></div>
<div class="tl11-term">
<div class="tl11-topbar">
<span class="tl11-dot tl11-r"></span>
<span class="tl11-dot tl11-y"></span>
<span class="tl11-dot tl11-g"></span>
<span class="tl11-tlabel">incident-report-2025-03-14.log — Production / US-EAST-1</span>
</div>
<div class="tl11-body">
<div class="tl11-sep">── INCIDENT INC-4471 · Severity P1 · Duration 4h 17m ──</div>
<div class="tl11-line">
<span class="tl11-ts">03-14 02:13:07</span>
<span class="tl11-lvl tl11-warn">WARN</span>
<span class="tl11-text">Latency spike detected on <strong>api-gateway-prod-3</strong>. P99: <span class="tl11-hl">1,840ms</span> (threshold 500ms). Auto-scaling triggered.</span>
</div>
<div class="tl11-line">
<span class="tl11-ts">03-14 02:19:44</span>
<span class="tl11-lvl tl11-err">ERROR</span>
<span class="tl11-text">DB connection pool exhausted on <strong>rds-primary-east</strong>. <span class="tl11-hl">4,200 queued</span>. New connections rejected.</span>
</div>
<div class="tl11-line">
<span class="tl11-ts">03-14 02:21:02</span>
<span class="tl11-lvl tl11-crit">CRIT</span>
<span class="tl11-text"><strong>ALERT FIRED:</strong> Error rate exceeded <span class="tl11-hl">18.7%</span>. PagerDuty escalated. Checkout flow <span class="tl11-hl">DEGRADED</span>.</span>
</div>
<div class="tl11-line">
<span class="tl11-ts">03-14 02:28:15</span>
<span class="tl11-lvl tl11-info">INFO</span>
<span class="tl11-text">SRE <strong>@chen_wei</strong> acknowledged. War room opened in <strong>#inc-4471</strong>. Status page updated to "Investigating".</span>
</div>
<div class="tl11-line">
<span class="tl11-ts">03-14 02:45:33</span>
<span class="tl11-lvl tl11-info">INFO</span>
<span class="tl11-text">Root cause: <strong>unoptimised query</strong> in release <span class="tl11-hl">v4.12.1</span> causing full table scans. Rollback initiated.</span>
</div>
<div class="tl11-line">
<span class="tl11-ts">03-14 03:02:09</span>
<span class="tl11-lvl tl11-warn">WARN</span>
<span class="tl11-text">Rollback to <strong>v4.11.9</strong> complete. Queue depth: <span class="tl11-hl">812</span>. Error rate falling → <span class="tl11-hl">3.2%</span>.</span>
</div>
<div class="tl11-line">
<span class="tl11-ts">03-14 03:18:51</span>
<span class="tl11-lvl tl11-ok">OK</span>
<span class="tl11-text">All services nominal. Error rate <span class="tl11-hl">0.04%</span>. P99 <span class="tl11-hl">182ms</span>. Status: "Resolved".</span>
</div>
<div class="tl11-line">
<span class="tl11-ts">03-14 06:30:00</span>
<span class="tl11-lvl tl11-info">INFO</span>
<span class="tl11-text">Postmortem created. <strong>Action items:</strong> query review gate in CI, pool alerting at 60% capacity, blue/green for DB migrations.</span>
</div>
<div class="tl11-sep">── END OF INCIDENT · 3,847 users affected · $14,200 est. revenue loss ──</div>
</div>
</div>
</div> .tl11-wrap {
--tl11-bg: #080810;
--tl11-a: #ff3860;
background: var(--tl11-bg);
padding: 2rem 1.5rem;
position: relative;
font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
overflow: hidden;
}
.tl11-scanlines {
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(
to bottom,
rgba(0,0,0,0.04) 0 1px,
transparent 1px 3px
);
}
.tl11-term {
max-width: 800px;
margin: 0 auto;
border: 1px solid rgba(255,56,96,0.18);
border-radius: 8px;
overflow: hidden;
position: relative;
}
.tl11-topbar {
background: rgba(255,56,96,0.08);
border-bottom: 1px solid rgba(255,56,96,0.18);
padding: 0.55rem 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.tl11-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.tl11-r { background: #ff5f57; }
.tl11-y { background: #febc2e; }
.tl11-g { background: #28c840; }
.tl11-tlabel {
font-size: 11px;
color: rgba(255,255,255,0.35);
margin-left: 0.65rem;
}
.tl11-body {
padding: 1.25rem 1rem;
}
.tl11-sep {
font-size: 10.5px;
color: rgba(255,255,255,0.12);
letter-spacing: 1.5px;
padding: 0.4rem 0;
}
.tl11-line {
padding: 0.55rem 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
display: flex;
gap: 1rem;
align-items: baseline;
}
.tl11-line:last-of-type { border-bottom: 0; }
.tl11-ts {
font-size: 10.5px;
color: rgba(255,255,255,0.22);
white-space: nowrap;
flex-shrink: 0;
}
.tl11-lvl {
font-size: 10.5px;
letter-spacing: 0.5px;
padding: 0.1rem 0.45rem;
border-radius: 3px;
flex-shrink: 0;
min-width: 50px;
text-align: center;
}
.tl11-info { background: rgba(30,120,255,0.18); color: #4da6ff; }
.tl11-warn { background: rgba(255,180,0,0.18); color: #fbbf24; }
.tl11-err { background: rgba(255,56,96,0.22); color: var(--tl11-a); }
.tl11-ok { background: rgba(40,200,64,0.18); color: #4ade80; }
.tl11-crit {
background: rgba(255,56,96,0.4);
color: #fff;
animation: tl11-blink 1s step-end infinite;
}
@keyframes tl11-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.tl11-text {
font-size: 12.5px;
color: rgba(255,255,255,0.6);
line-height: 1.55;
flex: 1;
word-break: break-word;
}
.tl11-text strong { color: #fff; font-weight: 600; }
.tl11-hl { color: var(--tl11-a); }
@media (max-width: 600px) {
.tl11-line { flex-direction: column; gap: 0.25rem; }
}
@media (prefers-reduced-motion: reduce) {
.tl11-crit { animation: none; }
}