Design System

Components & Elements

A living reference of San Pedro's reusable design-system pieces — 100 sitewide background patterns and a catalog of the theme's real interactive effects.

100 sitewide CSS background patterns (pure gradients, no images — see assets/css/bg-patterns.css). Any page or post gets one automatically, picked consistently from its own URL. To force a specific one instead, add the matching tag below to that page/post in Ghost Admin — Ghost's own {{body_class}} helper does the rest, no template changes needed.

Patterns 1–50 of 100 — Page 1 of 2

Original set

01 · Grid

bg-pattern-1

02 · Dot grid

bg-pattern-2

03 · Diagonal lines

bg-pattern-3

04 · Circuit

bg-pattern-4

05 · Triangular mesh

bg-pattern-5

06 · Waves

bg-pattern-6

07 · Blueprint crosses

bg-pattern-7

08 · Data streaks

bg-pattern-8

09 · Topographic rings

bg-pattern-9

10 · Dither noise

bg-pattern-10

Tech-themed (11–30)

11 · Circle glow

bg-pattern-11

12 · Hex grid

bg-pattern-12

13 · Terminal scanlines

bg-pattern-13

14 · Matrix rain streaks

bg-pattern-14

15 · Binary dot columns

bg-pattern-15

16 · Motherboard traces

bg-pattern-16

17 · Server rack lines

bg-pattern-17

18 · Radar sweep

bg-pattern-18

19 · Fiber optic glow

bg-pattern-19

20 · Cloud nodes

bg-pattern-20

21 · Chip pins

bg-pattern-21

22 · Signal bars

bg-pattern-22

23 · Pixel grid

bg-pattern-23

24 · Data grid blueprint

bg-pattern-24

25 · Halftone dots

bg-pattern-25

26 · Wireframe sphere

bg-pattern-26

27 · Neural mesh

bg-pattern-27

28 · Voltage waves

bg-pattern-28

29 · QR fragments

bg-pattern-29

30 · Aurora glow

bg-pattern-30

Fun & business-themed (31–50)

31 · Confetti scatter

bg-pattern-31

32 · Bubbles

bg-pattern-32

33 · Polka dot classic

bg-pattern-33

34 · Bunting triangles

bg-pattern-34

35 · Coffee ring stains

bg-pattern-35

36 · Growth chart

bg-pattern-36

37 · Handshake weave

bg-pattern-37

38 · Calendar grid

bg-pattern-38

39 · Sticky note scatter

bg-pattern-39

40 · Linked rings

bg-pattern-40

41 · Target rings

bg-pattern-41

42 · Stock ticker lines

bg-pattern-42

43 · Envelope flap chevrons

bg-pattern-43

44 · ID badge stripe

bg-pattern-44

45 · Quilted diamond

bg-pattern-45

46 · Checklist dashes

bg-pattern-46

47 · Sparkle scatter

bg-pattern-47

48 · World dots

bg-pattern-48

49 · Confetti streamers

bg-pattern-49

50 · Champagne bubbles

bg-pattern-50
Patterns 1–50 of 100 — Page 1 of 2

The real interactive features built into San Pedro, cataloged here so they're easy to find and reuse — not a separate demo system, this is exactly the code running on the live site.

Robot Theme Toggle

The Human/Cyber switch in the header (#robot-theme-toggle) swaps every CSS token in main.css between a light editorial palette and a neon cyber palette, with a pulse animation on activation. See it live in the header above.

CountUp Stats

Numbers animate from 0 to their target value once scrolled into view, via the countup.js library wired to an IntersectionObserver so it only fires once, on first reveal.

Kinetic Text

Any element with data-kinetic-text gets its letters split and staggered with a fade-and-rise animation on load — used on the About page's heading. The softer of the theme's two letter effects. See a live replay below.

Curtain Text

data-curtain-text is the sharper sibling: each word becomes a mask and its letters rise out from behind the edge — no cross-fade, so every letter lands fully solid. Used on the Cheatsheet Libraries title. Letters are grouped per word, so a heading can never wrap mid-word. Tunable via --curtain-stagger, --curtain-offset and --curtain-duration.

Scroll Reveal

Post cards and similar elements fade/rise into view as they cross the viewport, via a custom IntersectionObserver in main.js — no external library. Add .reveal-text to any element to opt it in; .is-revealed is applied once it crosses into view and the CSS handles the animation.

Parallax

Hero images and tagged background elements ([data-parallax]) shift at a fraction of scroll speed for a subtle depth effect — disabled automatically under prefers-reduced-motion.

Slide-out Drawer Menu

The header's menu button opens a left-side drawer with a backdrop, built from scratch (no menu library) — try the Menu button at the top of this page.

Auto Icon Matching

Nav links, footer links, and tag-cloud items get a Font Awesome icon automatically chosen by keyword-matching their own text (navIconRules in main.js) — no icon has to be hand-assigned per link in Ghost Admin.

Glow-Link Hover

A blurred glow blob tracks the cursor inside a link and fades in on hover, via a CSS custom property (--glow-x/--glow-y) updated on mousemove. Now live on the footer's DigitalOcean credit link — try it below.

Live demos

Every demo below runs the exact production code — the same classes, selectors, and (where JS is involved) the same functions main.js uses sitewide — not a separate reimplementation.

Robot Theme Toggle

Triggers the real header toggle.

CountUp Stats

Auto-plays once on scroll into view.

0

Kinetic Text

Fade + rise, per letter. Replays on click.

Curtain Text

Masked rise, no fade — letters emerge from behind each word's edge. Replays on click.

Scroll Reveal + Blog-Post Hover

A real .post-card (same markup as partials/card.hbs) — fades in via scroll reveal, then hover it.

Parallax

Scroll the page — this is the real .parallax-hero-img, not a copy.

Slide-out Drawer

Opens the real site menu.

Auto Icon Matching

Type a nav label — the icon updates live via the real navIconRules.

Cheatsheets

Glow-Link Hover

Move your cursor across the text.

Hover to see the glow

Click up to 10 swatches to build a shortlist. Auto-rotation will then pick only from that list instead of all 50 (a page tagged bg-pattern-N still always uses that exact one, regardless of this list). Your clicks are saved as a draft in this browser only — nothing sitewide changes until you copy the string below and paste it into Ghost Admin.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

Selected: 0 / 10

(none yet — click swatches above)

Paste that into Ghost Admin → Settings → Design → Brand (scroll to Theme settings) → Site BG Favorites, save, then a Ghost restart picks it up (same as any theme file deploy). Leave the field empty to go back to rotating all 50.

Ghost Admin → Design → Theme settings, showing the Site BG Favorites field where the copied pattern-number string gets pasted (this capture predates the 2026-08-22 rename, so it shows the field's old "Site bg favorites" label)

Every Ghost Admin theme setting this project has added, in one place — Settings → Design → Brand → Theme settings in Ghost Admin. Some apply sitewide; most are scoped to just one page (Components or About), so changing them can never leak onto anything else.

Setting Scope What it does
About BG Color AboutSame as Components BG Color, scoped to the About page's bio card instead.
About BG Pattern AboutSame as Components BG Pattern, scoped to the About page instead.
About Text Cyber AboutSame as Components Text Cyber, for the About page.
About Text Human AboutSame as Components Text Human, for the About page.
Components BG Color ComponentsBackground color of the bounded content card (not the full page) — the sitewide pattern still shows through the margin around it.
Components BG Icon Color ComponentsColor of this page's Font Awesome icons plus the pill-button/swatch border-and-hover accent.
Components BG Pattern ComponentsForces one specific pattern (1–100) behind this page only, instead of the automatic per-URL pattern. Leave empty to use Auto.
Components BG Transparent ComponentsMakes the bounded content card transparent so the sitewide background pattern shows through the whole page instead of only the margin. Overrides Components BG Color while on.
Components Text Cyber ComponentsBody/heading text color for this page while the site is in Cyber mode — kept separate from Human so a fixed card background never goes low-contrast when the toggle flips.
Components Text Human ComponentsBody/heading text color for this page while the site is in Human mode.
Changelog Theme ChangelogSame picker for the Changelog timeline — accents the milestone dots, dates, and card hover borders.
Components Theme ComponentsRepaints this page's accent chrome using any cheatsheet brand's colours. Set to none to fall back to the sitewide Human/Cyber accent.
Dashboard Theme DashboardSame picker, scoped to the Dashboard page. Stamped as data-cheatsheet-brand so cheatsheet.css's brand rules supply --cs-accent.
Style Guide Theme Style GuideSame picker for the Style Guide. Colours only that page's own chrome — the documented Human/Cyber tokens stay true regardless.
Default Mode SitewideStarting Human/Cyber theme on first visit — the robot toggle in the header still lets a visitor switch it live, this just sets which one loads by default.
Site BG Favorites SitewideComma-separated pattern numbers (1–100). When set, every page's automatic background pattern is picked only from this shortlist instead of all 100 — build the list on the Pick Favorites tab above.
The Theme tab of Ghost Admin's Design panel, showing this theme's 16 custom settings in Title Case, sorted A-Z within their scope groups, with colour pickers, toggles and dropdowns

Ghost Admin → Settings → Design → Theme. Fields render in the order they are declared in the theme's package.json, and their labels are derived from the key names — Ghost provides no way for a theme to set a label, add a heading, or insert a separator.