A design system written in chalk and classroom nostalgia
I
Classic chalk colors on slate green - from pure white to vibrant pastels, each with that distinctive dusty texture.
Chalk White
#F5F5F0
Chalk Yellow
#F7E98E
Chalk Pink
#F4A5C0
Chalk Blue
#87CEEB
Chalk Orange
#FFB366
Board Green
#2D4A3E
Board Dark
#1A2A1A
Wood Frame
#5C4033
II
Hand-lettered fonts that capture the imperfect beauty of chalk writing - from bold display to casual notes.
Permanent Marker - Display
Kalam - Headings
Architects Daughter - Body
Lesson One
Today's Assignment
Chapter Notes
Important Points
The quick brown fox jumps over the lazy dog. Every letter flows with that distinctive chalk texture, slightly imperfect yet perfectly readable.
Fine print appears here in a lighter, more subtle chalk tone.
III
A consistent spacing system measured in chalk strokes - keeping everything properly aligned on the board.
IV
Interactive elements drawn in chalk - from outlined to filled, each with that satisfying dusty glow on hover.
V
Input fields that feel like writing on the board - simple underlines that glow when focused.
VI
Content containers with chalk borders and corner decorations - like notes pinned to the classroom board.
Basic card with white chalk border. Perfect for general content and announcements.
Yellow bordered card draws attention to important information that students should not miss.
Pink bordered card for special announcements, events, or surprise activities.
Blue bordered card for optional content, bonus materials, or helpful resources.
Monday: Intro
Wednesday: Practice
Friday: Review
VII
Small labels and tags in various chalk colors - for status indicators, categories, and quick markers.
Mark important items with Highlight badges, show completion with Success, or indicate new content with New.
VIII
Additional chalk decorations and components for building complete classroom-themed interfaces.
Star
Spiral
Arrow
Circle
This area simulates where chalk has been partially erased, creating a subtle background for secondary content or dismissed notices.