Design Guidelines
The source of truth for the Zoe Dao-Kroeker visual identity — colour, type, logos, photography, icons, spacing, and the rules around them. Follow these whenever you create or update anything for the site.
Built to be read by people and AI alike — a plain-text version is at /llms.txt.
Purpose, vision, and mission.
Purpose
To design learning experiences and AI tools that keep young people thinking for themselves — and to bring ten years of doing that hands-on into a team building what comes next in education technology.
Vision
A classroom where AI makes kids sharper, more curious thinkers — not a shortcut that quietly does the thinking for them.
Mission
Turn a decade of STEM curriculum design and a research-backed framework for AI literacy into work people can see, trust, and want to hire.
Logo files, light and dark.
Two versions: one for light backgrounds, one for dark.
Photography from the site.
Real photos already in use — the people and process photos from the About page.
Illustration.
The drawn character illustrations, one per page hero. Flat vector, consistent character and palette throughout, each on a transparent ground so it can sit on any of the page colours.
Icon set.
Phosphor icons, Light weight. A sample below — 1512 icons in the full set.
lightbulb-filament
brain
robot
graduation-cap
flask
game-controller
lightning-a
compass
chat-centered-dots
lock-key
gear
heart
map-pin-area
moon
music-notes
paint-brush-broad
house
globe-hemisphere-east
Colour palette.
Every swatch below shows its real colour and hex code, read live from the site's own stylesheet.
Surface
Primary
Greys
CTA
Fonts and type sizes.
Two fonts, used across the whole site: Open Sans for everything, and Fontdiner Swanky for page titles and hero headlines only.
Section heading
Subheading
Card title
Weights
Spacing, corners, and shadows.
The spacing scale, corner-radius options, and shadow styles used across the site.
Spacing
Ten steps, each with a job: 120 section breaks, 80 section padding, 64 large card padding, 48 between blocks, 32 grid gutters, 24 card padding, 16 paragraph rhythm, 12 label to field, 8 inside components, and 4 hairline gaps.
Radius
Six steps, and the rule is that bigger surfaces take rounder corners: 0 for square edges, 6px on dense UI, 14px on cards, 20px on image wells, 32px on large panels like the hero blocks, and a full pill for buttons and tags.
Elevation
Hairline border, default rest
Hover lift on cards
Pill button bottom edge
Buttons.
Three styles: a filled pill for the main action on a page, an outline for a secondary action, and a plain text link for everything else.