# 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](https://starlight-page-actions.dlcastillop.com/reference/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 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.

--sl-color-accent-low

--sl-color-accent

--sl-color-accent-high

--sl-color-gray-2 · body text

--sl-color-gray-3 · secondary

--sl-color-gray-6 · hairline

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 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?"

50100200300400500600700800900950

## 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**.

50100200300400500600700800900950

## 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 The most-used pattern on the site. Starlight tints these from the accent color, so they follow Ocean automatically and are not restyled here. :::note Pepa is infrastructure. If the network is flaky, everything else is noise. ::: :::tip Bare metal HAOS is faster, more resilient, and easier to manage than Docker. ::: :::caution Voice is not typing. It will break things. That's the point. ::: :::danger Painful $ mistakes were made. ::: ## Type 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 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 Multiples of 4. Nothing else. If a gap doesn't come off this list, it's a mistake.

## The rules Eight. If you remember nothing else on this page, remember these. 1. **Headings in Lora, body in Figtree at 17px.** Never shrink the body text to fit more in. 2. **Amber marks exactly one thing per screen.** The moment there are two, neither is the important one. 3. **Never use color alone** to say what something means. Color plus a word, or color plus a shape. 4. **Check contrast before you ship a color.** 4.5:1 for text. The readers are older; this is not a nicety. 5. **No bounce, no spring, no delight-animation.** 120–240ms, standard easing. Nothing here should startle anyone. 6. **Corners are soft** — 10px on controls, 16px on cards. Tide-worn, never sharp. 7. **Shadows are ocean ink, never black**, and barely there. 8. **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.