Design

Building an Observability Theme

Designing for observability tooling means leaning on contrast, hierarchy, and micro-interactions that highlight anomalies without overwhelming the operator.

In this post I walk through how I fitted the gradient accents from this blog into a dark dashboard UI, why I use structural glows instead of drop shadows, and how animation timing changes when your user is exhausted.

• design
• observability
• ui

Dark UI Theming Playbook

Here’s a small accent detail used across the theme:

When setting the tone for this theme I reached for a few reliable principles:

1. Elevate surfaces with subtle translucency. Layer low-opacity borders and shadows rather than strong outlines.
2. Use color accents sparingly. Bright hues pop more on dark backgrounds; reinforce meaning by reserving them for key actions.
3. Lean on typography for hierarchy. Slight letter-spacing, clear weights, and plenty of breathing room make long-form writing easier to scan.

Tweak the values in config.toml under [params] to dial in the palette and personality you want for your own site.

• design
• css
• themings