Commit 18b585
2026-08-07 11:35:13 admin: init| /dev/null .. 09-design-system.md | |
| @@ 0,0 1,71 @@ | |
| + | --- |
| + | title: Design System |
| + | aliases: [NetraTheme, 3nDS] |
| + | tags: [3netra/wiki, design, ui] |
| + | product: 3netra Meta Android App |
| + | source_repository: 3Netra-ai/3n_meta_android |
| + | source_ref: origin/prod |
| + | source_revision: b48aada8fd5427b5db0c02945569963c4ae543c8 |
| + | last_verified: 2026-08-06 |
| + | up: "[[Home]]" |
| + | --- |
| + | |
| + | # Design System |
| + | |
| + | Theme direction is **"stargazing from a university campus rooftop"** — dark, warm, and modern. This is design/product guidance; the source does not prove a complete accessibility implementation. |
| + | |
| + | ## Color Palette |
| + | |
| + | Two palettes coexist in code (migration in progress): |
| + | |
| + | ### NetraTheme (current — student/onboarding screens) |
| + | |
| + | | Token | Hex | Usage | |
| + | |---|---|---| |
| + | | DeepSpaceBlack | `#1A1A1C` | App background | |
| + | | DarkNavy | — | Cards, panels, input fields | |
| + | | DarkCard | — | Elevated surfaces | |
| + | | SkyCyan | `#58CCED` | Primary accent, CTAs, active states | |
| + | | LavenderPurple | `#8B5CF6` | Secondary accent, links | |
| + | | MintTeal | — | Tags, success indicators | |
| + | | WarmGolden | — | Highlights, priority | |
| + | | SoftCoralPink | `#FF6B6B` | Emotion indicators, alerts, errors | |
| + | | FriendlyGreen | `#00C9A7` | Success states | |
| + | | OffWhite / MutedGray | — | Primary / secondary text | |
| + | |
| + | ### Legacy Colors.kt (auth + orphaned dashboard screens) |
| + | |
| + | `DARK_BG #0D1117`, `ACCENT_COLOR #6EE7F7`, `SECONDARY_ACCENT`, `FRIENDLY_GREEN`, `SURFACE_BG`, `INPUT_BG` — PRD palette values. |
| + | |
| + | ## Typography & Metrics |
| + | |
| + | - Font: SansSerif system stack (PRD specifies **Nunito** primary, Fira Code mono); H1 36 / H2 28 / H3 22 / Body 16 / Caption 13 |
| + | - `MinTapTarget = 56dp`, `FabSize = 64dp`, corner/spacing constants are source tokens, not a verified screen-by-screen conformance audit. |
| + | - No source evidence establishes global Academic Mode text scaling or uniform 1.6× line height. |
| + | |
| + | ## Academic Mode Design Principles (PRD) |
| + | |
| + | - Large tap targets, rounded corners (20px+), soft cyan→purple gradients |
| + | - AI companion guide / voice assistant front-and-center (see [[05-Avatars-Companions]]); encouraging, clear copy ("Slides captured", "Key points summarized!") |
| + | - Today's Story as an organized academic timeline, not a simple log |
| + | - Audio chimes (0.5s) differentiated by discovery type |
| + | - Academic-level vocabulary enforcement in all narration |
| + | - Disability Services / Educator dashboards: cleaner professional variant of same palette |
| + | |
| + | ## Accessibility |
| + | |
| + | - TTS calls occur in principal screens, but response quality is limited by the fixed text returned from `SupabaseAiService`. |
| + | - **High Contrast Mode** is a stored preference; Settings code labels theme integration as future work. |
| + | - **Reduce Motion** is a stored preference read by `SceneDescriptionScreen`; full animation coverage is not verified. |
| + | - Speaking speed is stored; Scene uses a separate child-voice TTS helper. TalkBack semantics, haptics, and complete no-time-limit coverage require an accessibility audit. |
| + | |
| + | ## UI Assets |
| + | |
| + | - `.agent_docs/Assets/` — PRD pdf, design prompts |
| + | - `3netra-Android-UIKit-Standalone.html` (repo root) — standalone UIKit reference page |
| + | - `3nDS` (harness Org-memory) — 3netra Design System org assets |
| + | |
| + | --- |
| + | |
| + | > [!tip] Navigation |
| + | > ⬅️ [[08-Data-Model-Supabase|Data Model (Supabase)]] · 🏠 [[Home]] · ➡️ [[10-Engineering-Ops|Engineering Ops]] |