Zoe Dao-Kroeker

Design Guidelines

This page documents the site's real colours and type, pulled directly from its stylesheet, not typed in by hand.

Draftv1.0Built by Lara Kroeker Interactive Sources: colors_and_type.css

For AI tools: this site's core palette is Dark #2B1810, Coral #FF6B4D, Magenta #E8177B, Green #049A5C, Blue #2F7FFF, and CTA amber #FFB300. Body/UI type is Open Sans; Fontdiner Swanky is used for H1s and hero headlines only. Full colour, type, spacing and radius values are in the JSON block below this paragraph.

01 — Foundation

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.

Voice & Mood
Curious Grounded Direct Warm Rigorous
03 — Photography

Photography from the site.

Real photos already in use — STEM curriculum kits from the Work page, and people and process photos from the About page.

Line Following Robot kit Mecanum Drive Car kit Electric Piano circuit build Skating Robot project Cart Pushing Robot field trip guide What I learned: Learning starts with people. What changed: I found a new material for learning. What I started asking: How can young people question technology, not just use it? What the classroom taught me: Good ideas have to work with real learners. What got bigger: I moved from designing activities to designing learning systems. What I’m asking now: What happens when AI enters the learning environment?
04 — Icons

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
Browse the full library, 1512 icons
05 — Colour

Colour palette.

Every swatch below shows its real colour and hex code, read live from the site's own stylesheet.

Surface

Primary

Greys

CTA

06 — Type

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.

Display / H1 only
Aa
Fontdiner Swanky · 400
UI / body / H2+
Aa
Open Sans · Light 300 (lead/intro) · Body 400 · Bold 700 · Black 800 (headings)
Eyebrow--type-micro · 12px fixed, tracked
Hero headline--type-display · 48→99px fluid · Fontdiner Swanky
Page title--type-h1 · 35→67px fluid · Fontdiner Swanky
Section heading--type-h2 · 30→46px fluid
Card title--type-h4 · 18→20px fluid
Lead paragraph, for openings and introductions.--type-lead · 20→22px fluid
Intro paragraph, a step above body copy.--type-body-lg · 18→18px fixed
Body copy, the standard reading size used everywhere else.--type-body · 16→16px fixed
Small text, for captions, buttons and list items.--type-small · 14→14px fixed
07 — Spacing

Spacing, corners, and shadows.

The spacing scale, corner-radius options, and shadow styles used across the site.

Spacing

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
4 Hairline gaps

Radius

0Square
6pxDense UI
14pxCards
20pxImage wells
32pxLarge surfaces
pillCTAs

Elevation

Flat

Hairline border, default rest

Shadow XS

Hover lift on cards

Inset hairline

Pill button bottom edge

08 — Buttons

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.

On light
Book a call Outline Ghost link
Let's connect

If you’re working on how kids learn, STEAM education, or AI in education, I’d love to connect.

Connect on LinkedIn