PE Design System

How PE's pages are made — the parts, the patterns, and the rules. Public on purpose: we learn in public, and the design system is part of that. Some of the surfaces are still being assembled.

What's here

%%{init: {'look':'classic'}}%%
flowchart LR
	%% Design system surface — top-level only. Modules subtree lives in
	%% design-system-modules.mmd; this chart shows just three module
	%% leaves + an "..." that links to the full modules index.
	%% Source of truth: functions/design-system-routes.php.
	%% Snapshot: 2026-05-07

	DS["/design-system"]

	DS --> DSF["/foundations"]
	DS --> DSM["/modules"]
	DS --> DSC["/controls"]
	DS --> DSCMP["/components"]

	DSF --> DSFCO["/color"]
	DSF --> DSFTY["/type"]
	DSF --> DSFIN["/inlines"]
	DSF --> DSFEM["/emphasis"]
	DSF --> DSFTK["/tokens"]
	DSF --> DSFGL["/glyphs"]
	DSF --> DSFHL["/highlights"]

	DSM --> DSGO["/goals"]
	DSM --> DSTX["/text"]
	DSM --> DSFG["/figure"]
	DSM --> DSX["/..."]

	DSC --> DSCA["/actions"]
	DSC --> DSCF["/forms"]

	DSCMP --> DSCMPMP["/module-progress-meter"]
	DSCMP --> DSCMPBD["/billing-date-shifter"]
	DSCMP --> DSCMPAR["/access-required"]
	DSCMP --> DSCMPPP["/program-progress-list"]
	DSCMP --> DSCMPEF["/enrollment-flow"]
	DSCMP --> DSCMPOH["/office-hours-list"]
	DSCMP --> DSCMPWC["/workshop-completion"]

	click DS "/design-system/" _blank
	click DSF "/design-system/foundations/" _blank
	click DSFCO "/design-system/foundations/color/" _blank
	click DSFTY "/design-system/foundations/type/" _blank
	click DSFIN "/design-system/foundations/inlines/" _blank
	click DSFEM "/design-system/foundations/emphasis/" _blank
	click DSFTK "/design-system/foundations/tokens/" _blank
	click DSFGL "/design-system/foundations/glyphs/" _blank
	click DSFHL "/design-system/foundations/highlights/" _blank
	click DSM "/design-system/modules/" _blank
	click DSGO "/design-system/modules/goals/" _blank
	click DSTX "/design-system/modules/text/" _blank
	click DSFG "/design-system/modules/figure/" _blank
	click DSX "/design-system/modules/" _blank
	click DSC "/design-system/controls/" _blank
	click DSCA "/design-system/controls/actions/" _blank
	click DSCF "/design-system/controls/forms/" _blank
	click DSCMP "/design-system/components/" _blank
	click DSCMPMP "/design-system/components/module-progress-meter/" _blank
	click DSCMPBD "/design-system/components/billing-date-shifter/" _blank
	click DSCMPAR "/design-system/components/access-required/" _blank
	click DSCMPPP "/design-system/components/program-progress-list/" _blank
	click DSCMPEF "/design-system/components/enrollment-flow/" _blank
	click DSCMPOH "/design-system/components/office-hours-list/" _blank
	click DSCMPWC "/design-system/components/workshop-completion/" _blank

classDef visible color:inherit
classDef temp color:inherit
classDef hidden color:inherit

Foundations

The tokens, voices, and scopes everything else rests on. Foundations index →

Color

eight ramps × eleven tints
Type

voice scale + ratio picker (canonical voice reference)
Semantic inlines

<em>, <strong>, <code>, etc.
Emphasis

data-emphasis scopes
Tokens

semantic token reference + scope test
Glyphs

universal Unicode chrome (box-drawing, shading, arrows)

Page modules

All page modules →

Controls

The interactive primitives — links, buttons, form controls, and the patterns we wrap them in.

Actions & buttons

the data-action='featured' system
Forms

the <input-field> wrapper — text, textarea, radio, checkbox
Mise en mode

pending — UI controls that set application state

Components

Reusable PHP components — invoked with component('name', [...]). Specimen pages render every state side-by-side without hitting real data.

module-progress-meter

peer cluster densities on the workshop progress strip
billing-date-shifter

admin form for shifting a student's monthly billing date
access-required

four states of the workshop/content access gate
program-progress-list

the collapsible top-down list used by /dftw/timeline
enrollment-flow

the five components a visitor encounters from ?action=enroll through Stripe and back

Style guide (legacy)

The hand-curated style guide page is the older surface — typography, colors, buttons, and demo gallery. Conceptually it's a sub-page of the design system; the URL hasn't been folded in yet. Hand-curated style-guide files in style-guide/components/ stay where they are; they predate the programmatic approach and may be archived as the design-system surface fills out.

Coming soon

Shared admin patterns (the module-actions kebab, admin-toolbox, .admin-actions wrapper)
The grid invariant (page-section > page-module > inner-column)
Code display tokens (--code-* system + theme/mode matrix)
Heading hierarchy + section-anchor cascade