# Guju Guru Design System
A MiniMax-inspired design system for **Guju Guru**, a gamified Gujarati language learning app for children and diaspora families.
> ⚠️ **Important:** This design system is **not** a recreation of the existing Guju Guru app. It is a **new** visual language inspired by [MiniMax](https://www.minimax.io) that the app will adopt going forward. The existing app's bright yellow/dark-navy look is being retired — only the **mascot** (a friendly blue 3D elephant), the **app icon**, and the **product/content** carry over.
---
## What is Guju Guru?
Guju Guru is a Duolingo-style mobile app (iOS + Android) that teaches Gujarati to children, especially kids in diaspora families where English is the dominant home language. It teaches:
- **Letters** — 23 Gujarati consonants with audio pronunciation
- **Numbers** — 1–100
- **Matras** — vowel accent marks
- **Vocabulary** — themed (greetings, family, food, animals, colours, feelings, places, daily routine)
- **Sentence building** — 5 exercise types including speaking practice
- **Pronouns & grammar** basics
It's gamified the way you'd expect: **XP, daily streaks, hearts (lives), a coin shop, achievements, leaderboards, and streak freezes**. There's a **parent dashboard** so parents can track progress.
### Tiers
- **Free** — Unit 1 (full) + Unit 2 (full) + first 2 lessons of Unit 3
- **Premium** — everything unlocked
- $6.99 / month
- $49.99 / year (~$4.17/mo)
- Payments via RevenueCat + Apple IAP on iOS.
### Audience
Kids (primary) and their parents (decision-makers). Tone needs to be warm and playful for kids without being condescending, and reassuring/credible for parents.
---
## Sources used to build this system
- **`uploads/AppIcon.png`** — the current 1024² app icon (blue elephant). Carried over as the brand mascot.
- **`uploads/Guju Guru Loading .gif`** — the mascot waving on a white background. Used as the loading/empty-state hero.
- **`uploads/5 images for app store.png`** — the existing 5-up App Store screenshot strip. Used **only** to understand product surfaces (Speak, Course Progress, Words to Learn, Rewards). Visual style is being replaced.
- **MiniMax visual brief** — supplied inline by the user. The full color, typography, spacing, and component spec lives in `colors_and_type.css` and the preview cards.
If you have access to a Figma file or the app's source code, please attach them — this system was built from a written spec and screenshots, not source code.
---
## Index
| File / folder | What's in it |
| --- | --- |
| `README.md` | This file. Brand context, content rules, visual foundations, iconography. |
| `SKILL.md` | Agent-skill front-matter so this folder works as a Claude Code skill. |
| `colors_and_type.css` | All CSS custom properties: colors, type scale, spacing, radii, shadows. Import this into any artifact. |
| `fonts/` | Notes on fonts. (Loaded from Google Fonts — see "Fonts" below.) |
| `assets/` | Mascot PNG, app icon, loading GIF, sample screens, hero crops. |
| `preview/` | Per-token HTML cards rendered in the Design System tab. |
| `ui_kits/app/` | The mobile-app UI kit — JSX components + interactive `index.html` click-thru. |
---
## Fonts
The MiniMax brief calls for **four** typefaces, each with a clear job:
| Family | Role | Source |
| --- | --- | --- |
| **DM Sans** | Primary UI — body, nav, buttons. ~70% of all text. | Google Fonts |
| **Outfit** | Display — hero headlines, product/card titles. | Google Fonts |
| **Poppins** | Mid-tier — sub-headings, feature labels. | Google Fonts |
| **Roboto** | Data / technical contexts only. | Google Fonts |
All four are loaded via `` from Google Fonts in every artifact. **No local TTF/WOFF files are bundled** — if you'd like the system to ship with self-hosted webfonts, please flag it and we'll vendor them. **No substitution flag** is needed: all four fonts are exactly what MiniMax uses.
---
## CONTENT FUNDAMENTALS
Guju Guru talks to **two audiences in one product**: kids (in-lesson UI) and parents (marketing, dashboard, billing). The voice shifts between them, but the brand voice underneath is constant: **warm, encouraging, proud of the language, never preachy**.
### Voice attributes
- **Encouraging, not gushy.** "Great job!" beats "AMAZING WORK SUPERSTAR!!!" Kids see through hype.
- **Bilingual on purpose.** Gujarati script (દેવનાગરી / ગુજરાતી) appears alongside transliteration ("Kem Cho") and English. Never one without the others on a learning surface.
- **Concrete over abstract.** "Speak Gujarati from Day 1" beats "Unlock your linguistic potential."
- **Family-warm, not childish.** The app is for kids but parents read everything. Avoid baby-talk.
- **Gentle on mistakes.** Wrong answers get "Almost — try again" not "❌ WRONG".
### Casing
- **Sentence case** for everything: headings, buttons, nav. ("Continue learning", not "Continue Learning".)
- **Title Case** only for proper nouns and unit names ("Unit 2 — Basics").
- **No ALL CAPS** except tiny tags (e.g. `STREAK`, `XP`) where the typographic rhythm calls for it.
### Person & address
- **"You"** to the learner — direct, second-person. ("You did it!", "Tap to speak.")
- **"We"** for the brand only when it adds warmth — "We guide every step." Otherwise drop it.
- **"Your child"** in parent-facing copy. Not "they" or "the learner."
### Emoji & symbols
- **Emoji are not part of the brand voice.** The MiniMax language is restrained. Use real iconography (Lucide icons + the mascot) instead.
- The **only exception** is in user-generated contexts (parent notes, kid-name inputs) where you'd never block them.
- Unicode arrows (→ ←) are fine in copy; ★ ♥ etc. are not — use SVG icons.
### Sample copy
| Surface | ✅ On-brand | ❌ Off-brand |
| --- | --- | --- |
| Hero (parents) | Speak Gujarati from day one. | UNLOCK YOUR HERITAGE!! 🚀 |
| Hero sub | Real pronunciation practice that builds confidence. | The #1 app to learn Gujarati fast! |
| Lesson CTA | Tap to speak | Press here to record audio |
| Right answer | Great job! | YESSS!!! 🔥🔥🔥 |
| Wrong answer | Almost — try again. | ❌ Wrong! |
| Streak nudge | Keep your 5-day streak going. | Don't lose your streak loser! |
| Paywall | Unlock every unit, every theme. $4.17/mo billed annually. | UPGRADE NOW — LIMITED OFFER |
| Empty state | No lessons yet — start with the alphabet. | ¯\\_(ツ)_/¯ Nothing here |
---
## VISUAL FOUNDATIONS
The MiniMax aesthetic is **white-dominant, calm, gallery-like**. Color comes from product cards and the mascot — never from the background. Everything is rounded but not bubbly. Shadows are soft with a brand-purple tint on featured items.
### Background system
- **Pure `#ffffff`** is the structural background everywhere. Sections do **not** get tinted backgrounds.
- The **only** dark surface is the footer / app-shell chrome at `#181e25` (charcoal).
- Inside the app, lesson surfaces can use white **or** the charcoal as a deliberate "focus mode" — see UI kit.
- No full-bleed photography. No repeating patterns. No textures. No grain.
- **Imagery** is limited to: the mascot (3D blue elephant, on white), product/lesson illustration cards (vibrant flat gradients, not photos), and the Gujarati script when used decoratively.
### Color vibe
- **Cool and bright.** Brand blue (`#1456f0`) is the anchor. The pink (`#ea5ec1`) is decorative-only — never on text or buttons.
- **High contrast** — near-black text on white, white on charcoal. No mid-gray text on mid-gray backgrounds.
- Lesson cards introduce vibrant gradients (pink/purple/orange/blue) — these are the "color budget" for a screen.
### Typography in practice
- **DM Sans 16/400** is the default reading text. Weight 500 for emphasis. 700 reserved for genuine bold beats.
- **Outfit 500** for display (28–80px). Tight 1.10 line-height at 80px hero, 1.50 everywhere else.
- **Poppins 500** at 18–24px for mid-tier sub-heads only.
- **Roboto** only when showing numeric/technical data (XP totals, leaderboard ranks).
- Universal **1.50 line-height** is the rhythm. Don't break it without a reason.
### Spacing
- Base unit **8px**. Scale: `1 · 2 · 4 · 6 · 8 · 10 · 11 · 14 · 16 · 24 · 32 · 40 · 50 · 64 · 80`.
- Section-to-section gaps: **64–80px** desktop, **32–40px** mobile.
- Card padding: **16–24px**.
- Button padding: **11px 20px** standard.
### Border radius
- **Pills** (`9999px`) — nav tabs, filter toggles, badges, segmented controls.
- **Standard 8px** — primary CTAs, small cards, inputs.
- **Comfortable 11–13px** — medium cards, lesson tiles.
- **Generous 16–20px** — large product cards, hero modals.
- **Hero 22–24px** — the big featured product cards on a marketing surface.
- **Sharp ≤4px** is reserved for tiny tags only — never for cards, buttons, or panels.
### Shadows / elevation
A **5-level** ladder. The signature is the **brand-purple-tinted glow** at level 3 — that's the MiniMax tell.
| Level | Treatment | Use |
| --- | --- | --- |
| 0 | none | flat panels, body text blocks |
| 1 | `0 4px 6px rgba(0,0,0,0.08)` | standard cards |
| 2 | `0 0 22.576px rgba(0,0,0,0.08)` | ambient soft glow |
| 3 | `0 0 15px rgba(44,30,116,0.16)` | **featured / hero cards** |
| 4 | `0 12px 16px -4px rgba(36,36,36,0.08)` | lifted / hover state |
Never go above `0.16` opacity. The brand stays light and airy.
### Borders
- Panel dividers: `1px solid #f2f3f5`.
- Component borders: `1px solid #e5e7eb`.
- Focus ring: `2px solid #3b82f6` outset, no glow, 2px offset.
### Hover, press, and motion
- **Hover (light surfaces)** — background darkens to `rgba(0,0,0,0.05)` or shadow steps up from level 1 → level 4.
- **Hover (dark CTA)** — background lifts from `#181e25` → `#22282f`. No color change.
- **Press** — 200ms ease-out scale to `0.98`. No color change. Don't shrink more.
- **Transitions** — `150ms ease-out` for color/shadow, `200ms cubic-bezier(0.2, 0, 0, 1)` for transform/opacity.
- **Page enter** — content fades + lifts 8px over 240ms. No bounce.
- **Streak / XP celebrations** (kid-facing) — short 400ms scale-pop with a single subtle bounce. Don't go full Lottie-confetti.
- No infinite ambient animations. No parallax.
### Transparency & blur
- Use sparingly. The only sanctioned uses:
- Frosted nav on scroll: `background: hsla(0, 0%, 100%, 0.8); backdrop-filter: blur(12px);`
- Modal scrim: `rgba(24, 30, 37, 0.4)`.
- Don't put blur on cards. Don't tint photos.
### Buttons (recap — full spec in `preview/components-buttons.html`)
- **Primary CTA** — dark `#181e25` bg, white text, `8px` radius, `11px 20px` padding. DM Sans 14/600.
- **Pill nav** — `rgba(0,0,0,0.05)` bg, near-black text, `9999px` radius. Active state stays the same; inactive is `opacity: 0.5`.
- **Secondary** — `#f0f0f0` bg, `#333` text, `8px` radius.
- **Ghost** (text-only link) — near-black, no underline, hover underlines.
### Cards
- White bg, `13–20px` radius depending on size, level-1 shadow at rest, level-4 on hover.
- **Featured cards** (one per screen, max) get the level-3 brand-purple glow.
- Internal padding always `16–24px`.
### Layout rules
- Max content width **1200px**, centered.
- Side gutters **24px** mobile, **40px** tablet, **80px** desktop.
- Sticky header is white, `0 1px 0 #f2f3f5` border on scroll only.
- Footer is full-width charcoal.
- Nav is **horizontal pills on white** — never a colored bar.
### Color of imagery
- Mascot stays **as-is** (blue + lavender ears). Place on white or on a soft mascot-tint background `#eef4ff` if isolated.
- Product/lesson illustrations are **flat vibrant gradients** — pink/purple/orange/blue. No photography. No grain.
- No b&w treatments. No duotones.
---
## Index of files
- `README.md` — this file
- `SKILL.md` — agent-skill front-matter for use as a Claude Code skill
- `colors_and_type.css` — all CSS custom properties (colors, type, spacing, radii, shadows, motion) + element defaults + component primitives
- `fonts/README.md` — font notes (Google Fonts, no local files)
- `assets/` — `AppIcon.png`, `mascot-loading.gif`, `app-store-screens.png`, `hero-yellow-mascot.png`, `app-screen-sample.png`
- `preview/` — 18 design-system cards rendered in the Design System tab
- `ui_kits/app/` — mobile UI kit (6 click-thru screens + JSX components + `kit.css`)
## ICONOGRAPHY
Guju Guru uses **Lucide** (https://lucide.dev) as its icon set, loaded from CDN. This is a **substitution** — the existing app's icons appear to be a mix of platform glyphs and custom illustrations (no consistent system was supplied). Lucide is the closest match to MiniMax's "rounded geometric outline" aesthetic.
> **🚩 Flagged for the user:** if you have an existing icon set or Figma library, send it over and we'll swap Lucide out.
### Rules
- **Stroke style** — outline-only, **1.75px stroke**, round caps, round joins. Lucide's defaults.
- **Size scale** — 16, 20, 24, 32. Don't use other sizes.
- **Color** — currentColor. Inherit from text. Never hard-code icon colors except in the colored product-card gradients.
- **Spacing** — 8px between an icon and its label.
- **No emoji** in product UI, marketing copy, or buttons. Use a Lucide icon.
- **No unicode glyphs** as substitute icons (no ★, ❤, ✓). Use `Star`, `Heart`, `Check` from Lucide.
- **The mascot** is **not** an icon — never inline him at icon size. He's an illustration; min display size is 64px.
### Special icons
- **Audio / pronunciation** — `Volume2` (Lucide).
- **Mic / speak** — `Mic`.
- **Streak** — `Flame` (filled with `#f59e0b`).
- **Heart / lives** — `Heart` (filled with `#ef4444`).
- **XP** — a custom `