Angelulz is the name I put on everything I run: this site, my home server and the tools around them. The brand is small on purpose: three marks, one palette and two typefaces, kept in one repository that every site copies a pinned version of.
The Warden
The main mark is the Warden: a hooded angel in deep teal, its face a dark diamond with a cyan cursor across it, sawtooth wings in white and grey, and a broken, tilted halo. It started as a pencil sketch of mine. Where the mark is live, as in this site’s header, the cursor blinks at a stepped 2.2-second rate; everywhere else it holds still.
Sentinel A and the sigil
Sentinel A is the small mark, for favicons and tab icons under 24 pixels, where the Warden’s detail would turn to mud.
The sigil is the Warden inside a plain double ring, for places that crop a picture to a circle.
Palette
Deep teal surfaces, one signal blue for everything you can click, and cyan kept for the live signal alone: the cursor, focus rings and the active item. There is no orange anywhere, and no shadows. Every colour on this site comes from these tokens; the theme’s stylesheet holds no colour of its own.
| Token | Value | Used for |
|---|---|---|
abyss | #061820 | Deepest ground: page edges, hero stages, code blocks |
bg | #09202a | Page background |
surface | #0d2a35 | Cards, tiles, the top bar |
raised | #143746 | Inputs, hovered tiles, chips |
line | #183f50 | Hairline borders and dividers |
text | #d7e0e3 | Body copy and headings |
muted | #8fa6ae | Secondary copy, captions, labels |
signal | #4aa3df | Links: the one interactive colour |
signal-fill | #3578a2 | Primary button fill |
on-signal-fill | #ffffff | Text on a primary button |
cyan | #00e5ff | The live signal: the cursor, focus rings, the active item |
cyan-core | #8ff6ff | The cursor’s bright core (marks only) |
halo | #f1ece2 | The halo in the marks |
blade-lit | #d7e0e3 | The Warden’s lit wing (marks only) |
blade-shade | #8fa6ae | The Warden’s shaded wing (marks only) |
void | #02080b | The Warden’s face (marks only) |
warden-lit | #25898f | The lit side of the Warden’s hood and robe (marks only) |
warden-shade | #1a6267 | The shaded side of the hood and robe (marks only) |
warden-edge | #3aa8ad | The rim around the Warden’s face (marks only) |
ok | #5fbf8f | Status: up or done, always beside a word |
warn | #e2b755 | Status: degraded or waiting, always beside a word |
down | #e0626a | Status: down or blocked, always beside a word |
data-1 | #4aa3df | Chart and diagram category 1 |
data-2 | #3fa6a0 | Category 2, a quiet teal |
data-3 | #9b8cf0 | Category 3, violet |
data-4 | #d9c9a3 | Category 4, sand |
The status colours always sit beside a word, and the four data colours are categories, never statuses: each box or series in a diagram also carries a label.
Type
Outfit for text and headings, and JetBrains Mono for code, labels and the angelulz wordmark.