Style Guide
AI Generated Human Curated
Every visual decision this site makes is on this sheet. If it isn’t here, it isn’t decided. The reasoning behind it is on the Design System page.
The Live wiring swatches below read the site’s own CSS variables rather than copies of them, so they cannot drift from what the site actually renders — and they change when you flip the theme toggle. Everything else on this page is the source palette: a set of values to select from, not values the site reads directly.
Live wiring
Section titled “Live wiring”What the theme is using right now, in the mode you are viewing. Flip the theme toggle and these change; the hex captions do not update, but the colors do.
Only ten values per mode are wired. Starlight takes three accents and seven grays (six in dark mode), not the full eleven-step ladder — and it inverts the gray scale between modes. The ladders below are the palette those ten are chosen from.
| Slot | Light | Dark | Used for |
|---|---|---|---|
--sl-color-accent-low |
Ocean 100 | Ocean 900 | Aside tints, subtle fills |
--sl-color-accent |
Ocean 600 | Ocean 500 | Links, buttons, focus rings |
--sl-color-accent-high |
Ocean 800 | Ocean 200 | Link text — inverts by mode |
--sl-color-gray-2 |
Slate 700 | Slate 300 | Body copy |
--sl-color-gray-3 |
Slate 600 | Slate 400 | Secondary text |
--sl-color-gray-6 |
Slate 200 | Slate 800 | Hairline dividers |
Ocean — the brand color
Section titled “Ocean — the brand color”Lifted from the octopus’s body. Links, active nav, focus rings.
600 (#1a7191) is the working color in light mode. 500 (#238bad) is the
one you’d name if someone asked “what teal is Pepa?”
Slate — the grays
Section titled “Slate — the grays”Backgrounds, borders, body copy. Not neutral: every step carries a little blue so nothing falls outside the ocean family. Body text sits at 700, quiet secondary text at 600 — not lighter, it stops being readable. Hairline dividers at 200, visible borders at 500.
The warm accents
Section titled “The warm accents”Used rarely and on purpose.
- Amber
#e59a2a— the brain gold and the CasaDelta bulb. Exactly one element per screen: the single most important action. Text on it is always ink (#0a222f), never white. - Coral
#e07330— CasaDelta’s orange. Reserve stock, present so it exists when you need it. - Seagrass
#74a852— the green suction-cup dot. Reserve stock.
Asides
Section titled “Asides”The most-used pattern on the site. Starlight tints these from the accent color, so they follow Ocean automatically and are not restyled here.
Three faces, all self-hosted. One serif for voice, one sans for reading, one mono for machines. These samples render in the site’s real fonts — if one looks wrong here, it is wrong everywhere.
Pepa remembers your life's digital traces
LORA — headings, the manifesto voice
At 65, I recognized that the tools I'd need in fifteen years didn't exist yet in a form I could trust — so I started building them in my own house, where I'm patient zero.
FIGTREE — body and UI, 17px base
--sl-color-accent: #1a7191;
IBM PLEX MONO — configs, schemas, homelab detail
Size scale
Section titled “Size scale”Body is 17px, not 16. One notch above web default — the single most useful accessibility decision on the site.
Display · 44px
Page title · 34px
Section · 28px
Subsection · 22px
Lede paragraph · 19px
Body copy, the default · 17px
Secondary / captions · 15px
Labels, badges · 13px
Spacing
Section titled “Spacing”Multiples of 4. Nothing else. If a gap doesn’t come off this list, it’s a mistake.
4
8
12
16
24
32
48
64
96
The rules
Section titled “The rules”Eight. If you remember nothing else on this page, remember these.
- Headings in Lora, body in Figtree at 17px. Never shrink the body text to fit more in.
- Amber marks exactly one thing per screen. The moment there are two, neither is the important one.
- Never use color alone to say what something means. Color plus a word, or color plus a shape.
- Check contrast before you ship a color. 4.5:1 for text. The readers are older; this is not a nicety.
- No bounce, no spring, no delight-animation. 120–240ms, standard easing. Nothing here should startle anyone.
- Corners are soft — 10px on controls, 16px on cards. Tide-worn, never sharp.
- Shadows are ocean ink, never black, and barely there.
- Label AI involvement on every page that has it. An editorial trust signal, not decoration — and the one thing this brand can’t be sloppy about.
Rule 3 is why the provenance badges at the top of this page carry text and not just a color. Amber and green are precisely the pair that red-green color deficiency compresses; the label is what carries the meaning.