Mobile-first digital yearbook. English-only. The graduate's photo is always the hero. Tuned for a cheap Android on a slow network — system body font, two display weights, CSS-shape iconography, lazy stripe placeholders.
01 · Color tokens
BG
#F8F1E4
Surface
#FFFFFF
Ink
#2A251D
Primary
#C28A1A
Accent
#2F5E3C
Muted / Disabled
#A89E8C
Success
#2F7D4F
Error
#B3402E
02 · Type scale
Class of 2025
Display · 40px · Bricolage 700
Sara Tesfaye
H1 · 30px · Bricolage 700
Computer Science
H2 · 22px · Bricolage 600
Congratulations on your graduation from Addis Ababa University.
Body · 16px · Inter 400
Signed by 24 classmates · Verified graduate
Caption · 13px · Inter 400
03 · Spacing & radius
Spacing — 4 / 8 / 12 / 16 / 24
4
8
12
16
24
Radius — cards 16 · buttons 12 · pill
8
12
16
pill
04 · Profile Card
The photo is the hero. Three states — verified, unverified, and unclaimed (ghost).
Verified
Class of 2025
graduate photo
Sara Tesfaye✓
Addis Ababa University · Computer Science
Great Distinction
Unverified
Class of 2025
graduate photo
Dawit Bekele
Addis Ababa University · Civil Eng.
Not yet verified
Unclaimed
unclaimed
05 · Photo Tile
Square tile with an overlaid like control — shows liked and not-liked states.
photo
♡18
Helen Girma
photo
♥19
Abel Tadesse
06 · Signature Chip
A short note left on a classmate's page.
H
Helen Girma
Happy graduation, my friend!
A
Abel Tadesse
Proud of you — keep shining.
07 · Award Badge
Three variants, distinguished by medallion color.
Great Distinction
Top of Class
Photo of the Year
08 · Verified ✓ badge
✓18px
✓26px
09 · Buttons
Default
Pressed
Primary
Secondary
Ghost
10 · Class-unlock progress meter
A batch filling toward its unlock threshold — the gallery opens once enough pages are claimed.