cupPCB // STYLEGUIDE

PALETTE

Six named accent colors. All pages draw from this set exclusively. Background and text use theme-aware CSS variables.

#ffd700

#68ff9a

#ff6699

#44ccff

#ff3232

#9400d3

Neutral colors use CSS variables: --bg · --surface · --border · --text · --text-dim · --text-muted.

LIGHT / DARK MODE

Light is the default. A toggle in the top-right corner of every page switches between modes and saves the preference to localStorage. Mode is applied before first paint via an inline script in <head> to prevent flash.

DEFAULT

Light mode. html[data-theme="light"] is implicit. Dark mode is html[data-theme="dark"].

HEAD SCRIPT (no-flash)

(function(){var t=localStorage.getItem('theme')||'light';document.documentElement.dataset.theme=t;})()

TOGGLE BUTTON

<button id="theme-toggle"> fixed top-right. Shows ☾ in light mode (click → dark), ☀ in dark mode (click → light).

CSS VARIABLES — LIGHT

--bg:#fafafa · --surface:#fff · --border:#ddd · --border-hover:#999 · --text:#111 · --text-dim:#555 · --text-muted:#777

CSS VARIABLES — DARK

--bg:#000 · --surface:#080808 · --border:#222 · --border-hover:#555 · --text:#eee · --text-dim:#666 · --text-muted:#999

Canvas-based game pages (full-screen) are exempt from light mode — the canvas fills the viewport and theming has no visual effect.

TYPOGRAPHY

FONT

"Courier New", monospace — system stack, no web fonts.

MINIMUM SIZE

18px for all visible text. No exceptions for labels, HUD, instructions, overlays, or pin trays in games/. Decorative in-balloon letters may scale with balloon radius but never below 12px effective.

HEADING — PAGE TITLE

22px · #ffd700 · letter-spacing 0.22em

HEADING — SECTION

13px · --text-section (#888) · letter-spacing 0.18em · ALLCAPS

CARD TITLE

18px bold · accent color · letter-spacing 0.14em · ALLCAPS

CARD DESC

18px · --text-muted · letter-spacing 0.04em · sentence case

STATUS BADGES

Inline badge sits right of a card title. Progression: ALPHA → BETA → LIVE. DEPRECATED marks retired work.

ALPHA BETA LIVE DEPRECATED

ALPHA

Playable but incomplete. Core loop works; content or polish missing. Color #777 / border #333.

BETA

Feature-complete. Tuning and defect fixes ongoing. Color #68ff9a / border 30% opacity.

LIVE

Shipped. Stable. Color #ffd700 / border 30% opacity.

DEPRECATED

Retired. Kept for reference only. Color #ff3232 / border 30% opacity.

HTML: <span class="badge badge-beta">BETA</span> — inline after card-title text.

CARD COMPONENT

Primary navigation unit. Always an <a> tag — the whole surface is clickable.

CARD TITLE

one-line description in sentence case. what it is, what it does.

→

WITH BADGE BETA

badge sits inline right of the title text, never on a separate line.

→

NUMBERING

Start at 00 for the primary entry point. Increment by 01. No gaps.

ACCENT COLORS

card-0 #68ff9a · card-1 #ffd700 · card-2 #ff6699 · card-3 #44ccff. Assign by slot, not by content type.

ARROW

Always present. --text-dim at rest, --text on hover. Vertically centered via top:50%.

CARD ROW (CARD + SIDE ACTION)

Use when a card has a secondary download or action alongside the primary link. The card takes remaining space; the side link is fixed-width.

DOCUMENT TITLE

read the HTML version inline.

→ PDF ↓

RULE

Never nest <a> inside <a>. The card and side link are siblings inside a .card-row flex container.

NAVIGATION CONVENTIONS

BACK-LINKS

Every page that is not the root index carries a ← cupPCB link in the footer. Styled --text-dim, no underline. Format: <a href="../index.html">← cupPCB</a>

FOOTER SEPARATOR

Middle dot · with spaces on either side. Footer text: sym²(x) · permacomputer.

PAGE TITLES

Format: cupPCB // SECTION NAME or cupPCB · subsection. Allcaps after the separator.

FILE NAMING

SLUGS

Lowercase, hyphen-separated. Full descriptive slug: symmetric-embedding-workbench-whitepaper.pdf. Short aliases (e.g. whitepaper.pdf) are symlinks to the canonical slug — never the other way around.

GAMES

Live in games/. Each game is a single self-contained HTML file. Index at games/index.html.

DOCS

Whitepapers and long-form writing live in pcb/docs/. Source is Markdown; build via make all in that directory.

cupPCB

STYLEGUIDE · v1