Style Guide
San Pedro’s real design tokens — color, type, and the theming mechanisms that drive them — documented for the team, not the public.
Two modes, one set of roles.
Every color is a token, not a hardcoded value — --bg-primary, --text-primary, etc. flip together when a visitor switches Human/Cyber, so nothing needs its own light/dark variant hand-written.
Human
#ffffffPage background
#fafaf8Cards, panels
#e6e3daDividers, card borders
#111111Headings, body
#47453fSupporting copy
#8b8677Metadata, timestamps
#111111Links, primary actions
#f3f1eaInline code, snippets
Cyber
#0a0c10Page background
#10141bCards, panels
#1d2733Dividers, card borders
#e6edf3Headings, body
#a7b4c2Supporting copy
#67788cMetadata, timestamps
#00f0ffLinks, primary actions
#0a0e14Inline code, snippets
Editorial serif, technical mono.
Headings swap typeface with mode — Playfair Display in Human, Space Grotesk in Cyber — everything else stays put.
Built for systems admins.
Cheatsheets, tools, and reference guides for the day-to-day work of running infrastructure — written to be scanned fast and trusted immediately.
systemctl restart ghost_build-ty1er-com.service
The living reference.
Tab systems, pill buttons, background patterns, and every real interactive effect the theme ships with — cataloged with working demos, not screenshots, so what you see is exactly the code running on the live site.
Open Components & Elements49 products, 49 accent colors.
Every cheatsheet page carries a data-cheatsheet-brand attribute matched against a color table in cheatsheet.css — tables, tabs, borders, and titles all tint from that one value, so a page never needs its own hand-written theme.
Two layers, both Admin-driven.
Sitewide Human / Cyber
The robot toggle in the header flips data-theme on <html>, swapping every CSS token in main.css between the two palettes above. A visitor's choice is saved to localStorage; Default Mode (Ghost Admin → Settings → Design → Brand → Theme settings) only sets which one loads first.
Per-page brand themes
Components Theme and Dashboard Theme (same Admin panel) let those two pages reuse any of the 49 cheatsheet brand colors — picking one stamps the same data-cheatsheet-brand attribute a real cheatsheet page carries, so it inherits that page's exact color scheme with zero extra CSS.
Built in, not bolted on.
- Reduced motion. Parallax, kinetic text, the glow-link cursor effect, and the back-to-top scroll all check
prefers-reduced-motionbefore animating. - Contrast-checked brand colors. Cheatsheet titles mix each brand's accent 80/20 toward the base text color rather than using it raw — a few brands (SSH's yellow, Google Analytics' amber) are light enough to fail heading-text contrast otherwise, even though they read fine as a thin border tint.
- Keyboard-reachable. Tabs, pattern swatches, and the favorites picker are all real buttons/links, not click-only divs.
- Members-only gating is native. Pages like this one use Ghost's own visibility system — no custom auth code to keep secure.