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

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.

Two palettes coexist in code (migration in progress):

| 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 |

`DARK_BG #0D1117`, `ACCENT_COLOR #6EE7F7`, `SECONDARY_ACCENT`, `FRIENDLY_GREEN`, `SURFACE_BG`, `INPUT_BG` — PRD palette values.

- 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.

- 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

- 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.

- `.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

---