Dwight Spencer
systems design · digital civil liberties · infrastructure sovereignty
dwightaspencer.com ·
denzuko / zekodun ·
0x5DCBF78E3F9C3FE3
Color palette
Cream
#fffdfa
Primary background
#fffdfa
Primary background
Ink
#111111
Primary foreground
#111111
Primary foreground
Dark
#0d0d0b
Dark mode bg, off-air
#0d0d0b
Dark mode bg, off-air
Text dark
#d1fae5
Text on dark bg
#d1fae5
Text on dark bg
Green
#39ff14
Monitoring only
#39ff14
Monitoring only
Amber
#ffab00
Monitoring only
#ffab00
Monitoring only
Red
#ff1744
Monitoring only
#ff1744
Monitoring only
Green/amber/red are infrastructure signal colours — off-air and T-Pot monitoring scenes only.
Do not use them as accent colours in editorial or stream content contexts.
Typography
Share Tech Mono — handles, labels, metadata, code, ticker, PGP, ORCID
denzuko▮
0x5DCBF78E3F9C3FE3 (key ID)
INFRASTRUCTURE · PRIVACY · SYSTEMS
Bricolage Grotesque — prose, cause names, longer descriptive text
Systems design and infrastructure sovereignty.
The node is a playground. Infrastructure built live, broken intentionally, rebuilt better.
Eye in lens mark — 25° diagonal
A — full barrel
Q1 / Q4
Q1 / Q4
64px
32px
16px
dark mode
watermark
.08 opacity
.08 opacity
Quarterly rotation schedule
Q1 Jan — favicon-a.svg (full barrel)
Q2 Apr — favicon-b.svg (cropped, Warhol)
Q3 Jul — favicon-c.svg (iris only)
Q4 Oct — favicon-a.svg (full barrel)
Rotate alongside warrant canary and /now page update
Q2 Apr — favicon-b.svg (cropped, Warhol)
Q3 Jul — favicon-c.svg (iris only)
Q4 Oct — favicon-a.svg (full barrel)
Rotate alongside warrant canary and /now page update
Rules and borders
Full-width dotted rule
Centered rule (38% width)
Dark mode rule
No grid lines. No box shadows. No gradients. No border-radius greater than 4px.
Structure comes from whitespace and dotted rules only.
Using brand.css
/* Import canonical tokens */
@import url('https://denzuko.github.io/stream-assets/css/brand.css');
/* Or self-host */
<link rel="stylesheet" href="/css/brand.css">
@import url('https://denzuko.github.io/stream-assets/css/brand.css');
/* Or self-host */
<link rel="stylesheet" href="/css/brand.css">
brand.css exports all CSS custom properties. Import it at the top of any project stylesheet.
Usage — do and don't
Do
Use dotted rules for structure
Use whitespace as layout
Use Share Tech Mono for all labels
Use cream/ink as the primary pair
Use the eye/lens mark as the site mark
Use the blinking cursor ▮ as punctuation
Use green/amber/red for monitoring only
Invert the mark for dark mode
Use whitespace as layout
Use Share Tech Mono for all labels
Use cream/ink as the primary pair
Use the eye/lens mark as the site mark
Use the blinking cursor ▮ as punctuation
Use green/amber/red for monitoring only
Invert the mark for dark mode
Don't
Grid lines as background texture
Gradients anywhere
Drop shadows
Border-radius over 4px
Cyberpunk / neon palette (except off-air)
Borrowed institutional identity
DevOps framing
Da Planet Security in this persona
Gradients anywhere
Drop shadows
Border-radius over 4px
Cyberpunk / neon palette (except off-air)
Borrowed institutional identity
DevOps framing
Da Planet Security in this persona
Assets
1600×400
denzuko.github.io/stream-assets/brand/
0x5DCBF78E3F9C3FE3