Home A - Z Create page
Page Index

An Otter Wiki
Properties 
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 · 🏠 Home · ➡️ 10-Engineering-Ops