Design System v0.5 — Glass Professional
AI Foundry
Sora + JetBrains Mono. Glass card system. Teal gradients. Warm professional with a futuristic edge.
01 — Tokens
Color Palette
Raw design values defined in globals.css. The single source of truth.
Primary
Crimson
#A51C30
Ink
#2C2825
Paper
#FDFBF8
Cream
#F7F4F0
Crimson Spectrum
Wash
#FBF3F4
Soft
#F4E0E3
Light
#C63D4E
Default
#A51C30
Dark
#8C1515
HGSE Teal
Soft
#E3F0F3
HGSE Teal
#6198AF
Light
#3A8A9C
Default
#2A6D7C
Dark
#1D4E5A
Warm Neutrals
100
200
300
400
500
600
700
Gradient Backgrounds
Teal (hero)
Navy → Teal
Teal → Light
02 — Foundations
Typography
Semantic text components. Each enforces font, size, weight, color, and line-height from tokens.
<Display> — 56px, Sora SemiBold
Where Education Research Meets AI
<Heading1> — 40px, Sora SemiBold
Research & Innovation
<Heading2> — 28px, Sora SemiBold
Faculty Profiles
<Heading3> — 22px, Sora SemiBold
Next Level Lab
<Label> — 11px, JetBrains Mono, tracked uppercase
Research Spotlight
<Body> — 16px, Open Sans Regular
The AI Foundry serves as HGSE's dedicated institution for sharing research on AI and presenting a united perspective on the rapidly evolving AI/education landscape.
<Small> — 14px, Open Sans Regular
Published March 2026 · Ying Xu · 5 min read
<Quote> — 24px, Sora Light
Rather than introducing AI to children, we ask whether AI can make the time children already spend on media more enriching.
Foundation
Section Wrapper
The <Section> component handles full-width backgrounds, constrained inner content, and responsive padding. Variants: paper, cream, ink, crimson, teal.
paper
cream
ink
crimson
teal
03 — Glass System
Card Styles
Three card treatments for different contexts. Glass for sections, solid white for hero-level contrast.
Style A — Glass on Gradient
Use on gradient section backgrounds. Higher fill + glow shadow + visible border.
Content Card
Sample Title
Glass card with glow and visible border on gradient background.
Profile Card
Sample Title
Glass card with glow and visible border on gradient background.
Event Card
Sample Title
Glass card with glow and visible border on gradient background.
backdrop-filter: blur(24px)
border: 1px solid rgba(255,255,255,0.20)
box-shadow: 0 4px 24px rgba(97,152,175,0.15), 0 0 40px rgba(255,255,255,0.03)
Style B — Gradient Glass Card
Use on solid dark or light backgrounds. Card itself has a subtle white gradient — catches light at an angle.
On dark (navy)
Sample
Gradient Glass Card
Subtle white gradient catches light. Minimal border.
On light (cream)
Sample
Gradient Glass Card
Same card on a light background. Subtle but visible.
border: 1px solid rgba(255,255,255,0.08)
box-shadow: 0 4px 20px rgba(97,152,175,0.12), 0 0 36px rgba(255,255,255,0.02)
Style C — Solid White
Use for high-contrast moments on gradient backgrounds — hero article cards, featured callouts. Maximum pop.
Article
Why Education Research Matters for AI
Solid white card on gradient. Used in the hero for the rotating article card.
Read Article →Faculty
Tina Grotzer
Principal Research Scientist
Leading the Next Level Lab.
Event
HGSE AI Showcase
Clean white creates maximum contrast against gradient backgrounds.
border: 1px solid rgba(255,255,255,0.70)
box-shadow: var(--shadow-elevated)
04 — Primitives
Components
Small reusable pieces that sections compose.
Button
Tag
Input
SectionHeader
Featured Research
Shaping the Future of AI in Education
From intelligent tutoring systems reaching 266,000 students to conversational AI companions for young learners.
05 — Sections
Page Sections
Full-width page slices. Each is self-contained. A page is an ordered list of sections.
NavBar
HeroSection
Harvard Graduate School of Education
AIFoundry
HGSE's AI Foundry brings together pioneering research, expert faculty, and a united vision for the future of learning in an AI-augmented world.
StatsBar
6+
Faculty Researchers
9
Dean-Funded Projects
266K+
Students Impacted Globally
3
Active Research Labs
CardGridSection (content)
Research & Articles
Latest from HGSE
Explore our research labs, published articles, and podcast episodes.
Research Lab
Next Level Lab
Building AI-shaped learning ecosystems for workforce development. What does it mean to be an "expert learner" when AI is in the picture?
Article
AI Can Add, Not Just Subtract, From Learning
Rather than introducing AI to children, Xu asks whether AI can make the time children already spend on media more enriching.
Podcast
The Impact of AI on Children’s Development
Ying Xu discusses conversational AI companions, bilingual chatbots, and designing for young learners.
CardGridSection (profiles)
Our Team
Faculty Profiles
Ying Xu
Assistant Professor of Education
Designing conversational AI that makes children’s media time more enriching — reading partners, STEM storytelling, bilingual chatbots.
Tina Grotzer
Principal Research Scientist
Exploring what it means to be an expert learner when AI is in the picture. Building AI-shaped learning ecosystems.
David Dockterman
Faculty Member
Learning design at scale. Built AI tools for analyzing math word problems to improve accessibility for English Learners.
EventCard (standalone)
Upcoming Event
HGSE AI Showcase
Faculty present their AI teaching discoveries and experiments from LEAP participation. Open to the entire HGSE community.
May 2026
Sunday
FeaturedContentSection
Featured Research
Shaping the Future of AI in Education
From intelligent tutoring systems reaching 266,000 students to conversational AI companions for young learners, HGSE faculty are defining what responsible AI in education looks like.
Workforce Development
Expert Learning in the Age of AI
What does expertise look like when AI can do the routine work? Exploring new learning ecosystems.
Tina Grotzer
Early Childhood
AI Reading Partners for Young Learners
Conversational agents that make storytime richer, with results rivaling human reading partners.
Ying Xu
Global Education
Intelligent Tutoring at Scale
AI writing evaluation tools deployed to 266K students across Brazil, Mexico, Peru, and the Philippines.
Seiji Isotani
CtaSection
Stay Connected
Get weekly updates on AI in education — research findings, new tools, upcoming events, and insights from HGSE faculty.
Join 500+ educators, researchers, and leaders. Unsubscribe anytime.
FooterSection
AI Foundry
Harvard's home for AI in education research.
Explore
Research
Articles
News
Events
Resources
Learning
AI Tools
Faculty Support
Student Resources
Connect
Mailing List
Partner With Us
Donate
Contact
© 2026 Harvard Graduate School of Education
AI Foundry is an initiative of HGSE.
Full Page Composition
Sections stacked as they would appear on the real homepage. No gaps, no labels.
Harvard Graduate School of Education
AIFoundry
HGSE's AI Foundry brings together pioneering research, expert faculty, and a united vision for the future of learning in an AI-augmented world.
6+
Faculty Researchers
9
Dean-Funded Projects
266K+
Students Impacted Globally
3
Active Research Labs
Featured Research
Shaping the Future of AI in Education
From intelligent tutoring systems reaching 266,000 students to conversational AI companions for young learners, HGSE faculty are defining what responsible AI in education looks like.
Workforce Development
Expert Learning in the Age of AI
What does expertise look like when AI can do the routine work? Exploring new learning ecosystems.
Tina Grotzer
Early Childhood
AI Reading Partners for Young Learners
Conversational agents that make storytime richer, with results rivaling human reading partners.
Ying Xu
Global Education
Intelligent Tutoring at Scale
AI writing evaluation tools deployed to 266K students across Brazil, Mexico, Peru, and the Philippines.
Seiji Isotani
Stay Connected
Get weekly updates on AI in education — research findings, new tools, upcoming events, and insights from HGSE faculty.
Join 500+ educators, researchers, and leaders. Unsubscribe anytime.
AI Foundry
Harvard's home for AI in education research.
Explore
Research
Articles
News
Events
Resources
Learning
AI Tools
Faculty Support
Student Resources
Connect
Mailing List
Partner With Us
Donate
Contact
© 2026 Harvard Graduate School of Education
AI Foundry is an initiative of HGSE.