Vedo · Creative Showcase

Montessori School & Family Ecosystem Design System

Award-Winning Creative System

Vedo Design System & Visual Showcase

Maria Montessori believed that beauty, natural materials, and calm order allow the child’s inner focus to unfold. Vedo embodies this pedagogy with genuine satin hardwoods, botanical jade, warm Tuscan earthenware, and Scandinavian alpine tones. Every screen, icon, and component strictly adheres to WCAG AAA contrast standards while eliminating stressful counters, red badges, and visual noise.

Active Theme: Canonical Vedo ("Walnut Wood & Forest Sanctuary")

🎨 1. Color Palettes & Design Tokens

Three award-winning palettes crafted for calm Montessori focus, tactile materiality, and 100% daylight legibility.

Canonical Vedo

Walnut Wood & Forest Sanctuary

Primary

Rooted in carved American walnut, satin jade leaves, warm cream linen, and golden honey accents.

forest
#2F5A43
walnut
#B06749
linen
#F6F1E6
ink
#1E2B23

Alternative Palette 1

Terra & Warm Linen

Option A

Inspired by sunny Tuscan courtyards, hand-thrown earthenware pottery, sun-bleached linen, and raw brass.

terracotta
#A84B29
brass
#C68A36
warmLinen
#F9F5EE
espressoInk
#231815

Alternative Palette 2

Nordic Slate & Alpine Meadow

Option B

Evoking Scandinavian pine forests, cool fjord slate, glacier whites, pale silver birch, and wild lingonberry blooms.

spruce
#22534C
lingonberry
#B45550
slateLinen
#F2F5F5
charcoalInk
#142021

🧩 2. Montessori Component Gallery

Real production-grade UI components with authentic classroom state and zero visual noise.

Daily Morning Slip

Hacienda Heights · Toddler Room (Willow)

📅 Today · 8:15 AM
Child Profile
MR
Mia Rivera
28 months · Lead Guide: Clara Bennett
Morning Mood & Energy
☀️ Sunny
😊 Content
😴 Sleepy
🥺 Sensitive
Breakfast at Home
Health & Well-being Check
🌡️ Temp: 98.4°F (Normal)
💊 Meds: None needed
Parent Handover Note
Parent Signature
Sofia Rivera
✓ Verified Arrival
CB

Clara Bennett, M.Ed

Toddler Guide · 10:42 AM

🌿 Sensorial Focus

Cylinder Blocks — Size Discrimination

Mia chose Cylinder Block No. 2 from the sensorial shelf independently. She spent 18 uninterrupted minutes carefully extracting and replacing each beechwood cylinder by its brass knob using a three-finger pincer grasp.

“When one cylinder didn’t fit, she paused, observed the socket dimensions, and self-corrected without looking for adult confirmation.”
📍 Willow Classroom · Recorded in Real-time
❤️ 2 Family Reactions

Photo Album Keepsake Grid

High-resolution memories (up to 4000px master) with classroom and family tags.

⭐ Favorite
Sensorial Cylinder Block
Self-correcting depth & width work
Oct 31 · 10:45 AM Sensorial
🌿 Work
Flower Arranging
Care of the indoor environment
Nov 1 · 9:15 AM Practical Life
🏡 Memory
Autumn Oak Rubbing
Posted by Sofia from Sunday park walk
Nov 2 · 4:20 PM Family Keepsake
⭐ Favorite
Sprouting Pea Seeds
Outdoor gardening & watering tray
Nov 3 · 11:30 AM Botany

Buttons & Controls Hierarchy

Standardized touch targets (minimum 44×44pt) with tactile active feedback.

Typography Hierarchy

Fraunces serif for headings, Nunito Sans for legibility, and Parisienne script for warm greetings.

Good morning, Mia
Parisienne Script · 32pt

Fraunces Display Heading

Fraunces SemiBold · 24pt

Nunito Sans Headline & Subhead

Nunito Bold · 17pt

Nunito Sans Body text with calm 1.6 line height

Nunito Regular · 17pt
token: --forest: #2F5A43;
JetBrains Mono · 13pt

🛡️ 3. Cross-Platform Icon Deployment Suite

Deployed from the Pixelmator Pro 3072px ML Super Resolution Master across Apple iOS, iPadOS, macOS, watchOS, Android Adaptive (with Material You tinting), and Web PWA.

Q44 A / D131 Winner

Home-Screen Non-Wordmark Mark

Pure Heart Sanctuary silhouette. Daylight-tuned satin contrast ensures zero blowout at 60pt phone scale.

Used for iOS AppIcon, Android launcher, and macOS dock.

Brand Lockup

Brand Wordmark Emblem

Includes carved mark and the Fraunces "Vedo" typography for web headers, welcome cards, and store feature graphics.

Vedo

Used for Welcome card, Web portal navbar, and Play Console banner.

Apple iOS & iPadOS

Home Screen Icon

Xcode AppIcon.appiconset
1024×1024 master · 180×180 (iPhone @3x) · 120×120 (@2x) · 167×167 (iPad Pro)

Apple macOS

Dock Icon

Apple Creator Studio / .icns
512×512 & 1024×1024 with 9° isometric tilt and rim highlight

Google Android

Adaptive Icon

res/mipmap-anydpi-v26
`ic_launcher.xml` · `ic_launcher_round.xml` (xxxhdpi 192px down to mdpi 48px)

Android 13+ Material You

Dynamic Themed Icon

ic_launcher_monochrome.xml
Single-color vector silhouette adapting to user’s wallpaper palette

watchOS & Wear OS

Smart Watch Companion

Apple Watch (Ultra / 45mm / 41mm)
High-contrast circular OLED optimization for quick-glance teacher notifications

Web & PWA

Favicons & App Clip

web/public & cloudflare/site
`apple-touch-icon.png` (180px) · `icon-192.png` · `icon-512.png` · `favicon.png`

📊 4. Mathematical WCAG Contrast Attestation Matrix

Automated luminance calculation via standard W3C formula: L = 0.2126*R + 0.7152*G + 0.0722*B. Strict compliance verified across all three themes in both Light and Dark modes.

Element / Token Pair Foreground Background Live Visual Sample Contrast Ratio WCAG Compliance

💻 5. Drop-in Code Blueprints & CSS Tokens

Zero-config drop-in structures for Swift, Kotlin, and Web CSS.

Active Theme CSS Variables (Live Snapshot) 
/* Loading current active tokens... */