TeacherQuest

Style Guide

Colors, typography, and UI components used across the website.

Colors

CSS custom properties defined in global.css

Brand

primary

#4800ff

--color-primary

primary-dark

#351cb1

--color-primary-dark

primary-light

#8270db

--color-primary-light

Neutrals

dark

#3d3d3d

--color-dark

medium

#6b7280

--color-medium

text-light

#888888

--color-text-light

Backgrounds

white

#ffffff

--color-white

cream

#fffaf0

--color-cream

cream-light

#fff5e6

--color-cream-light

cream-dark

#f5e9d7

--color-cream-dark

light

#f8f8f8

--color-light

Typography

System font stack — --font-sans

Display / H1

3rem · font-bold

Empowering educators with AI

2.25rem · font-bold

Alberta Curriculum Courses

1.875rem · font-bold

Science 24

1.5rem · font-semibold

Curriculum Details

1.25rem · font-semibold

Unit Overview

Body Large

1.125rem · normal

AI-powered lesson planning aligned to real Alberta curriculum documents.

Body

1rem · normal

Plan better lessons in less time. TeacherQuest pulls directly from the official curriculum so your plans are always on track.

Small

0.875rem · normal

Last updated September 2003 · Alberta · Grade 12

Caption / Label

0.75rem · uppercase · tracking-widest

English Language Arts

Mono

0.875rem · mono

ELA3104-AB-EN

Buttons

Button.astro — variants: primary, secondary, outline, light · sizes: sm, md, lg

Usage

<Button href="/en/curricula" variant="primary" size="lg">
  View Curricula
</Button>

Cards

Card.astro — variants: default, highlight

Default Card

Rounded shadow card on a white background. Used for feature highlights and content blocks.

Highlight Card

Primary-colored card for featured or call-to-action content.

<Card title="Card Title" variant="default">
  Content goes here.
</Card>

Spacing

Custom spacing tokens from global.css

--space-xs 0.25rem (4px)

--space-sm 0.5rem (8px)

--space-md 1rem (16px)

--space-lg 1.5rem (24px)

--space-xl 2rem (32px)

--space-2xl 3rem (48px)

--space-3xl 5rem (80px)