Most dev blogs are generated from a starter and never touched. I wanted mine to feel intentional — a five-colour system (orange, purple, yellow, blue, lime) that's loud but coherent, and a terminal component that makes code feel like it lives in the stack rather than pasted from a docs site.
// Design system
:root {
___TOKEN_0___: #FF6A1A;
___TOKEN_1___: #9B5CF6;
___TOKEN_2___: #FFD60A;
___TOKEN_3___: #3DA9FC;
___TOKEN_4___: #B6FF3C;
___TOKEN_5___: linear-gradient(120deg, var(___TOKEN_6___), var(___TOKEN_7___) 55%, var(___TOKEN_8___));
}All colours pass WCAG AA contrast on the dark background. The gradient is used sparingly — logo, primary button, scrollbar thumb, gradient text — so it stays impactful.
// Terminal component
---
const { title = "zsh — benki.dev" } = Astro.props;
---
<div class="terminal">
<div class="terminal-bar">
<span class="dot red"/>
<span class="dot yellow"/>
<span class="dot green"/>
<span class="terminal-title">{title}</span>
</div>
<div class="terminal-body">
<slot />
</div>
</div>