TrueScreen Android design system

Current source of truth

TrueScreen Android Design System

Static documentation generated from the current Android repository shape and the shared app design documentation. Use this page to inspect Compose tokens, semantic colors, reusable components, and Android implementation rules.

Shared app docs + repo implementation

Android Guidance

From DesignTokens.kt

Tokens

Typography

Spacing

Radius

Palette + Material schemes + custom colors

Colors

Whitelabel Color Map

Pick a flavor and mode to update the palette and color tables below. Each flavor selector uses that flavor's primary color.

Whitelabel
Mode

From core/designsystem/components

Components

Shared agent workflow

Design Docs Skill

What it updates

android-design-update keeps this static page aligned with Android tokens, reusable Compose components, @DesignDoc previews, and light/dark screenshot assets.

Repo source designDoc/skills/android-design-update/

Codex install prompt

Paste this into Codex from the repository root.

Install the TrueScreen design docs skill from designDoc/skills/android-design-update into my Codex skills folder at ${CODEX_HOME:-$HOME/.codex}/skills/android-design-update. Preserve SKILL.md, agents/openai.yaml, and scripts/scan_design_doc.py. After installing, tell me to restart Codex so the skill can be discovered.

Claude Code install prompt

Paste this into Claude Code from the repository root.

Install the TrueScreen design docs skill from designDoc/skills/android-design-update as a Claude Code project skill at .claude/skills/android-design-update. Preserve SKILL.md and scripts/scan_design_doc.py. Then list available skills and confirm android-design-update is discoverable. Use ~/.claude/skills/android-design-update only if I ask for a personal/global skill.

Refresh prompt

Use this after the skill is installed and the design system changes.

Use the android-design-update skill. Check git status first, scan the TrueScreen Android design system, add any new reusable visual components or changed tokens to designDoc/, refresh @DesignDoc screenshot previews and stable light/dark screenshots when needed, run the design-doc validator, and summarize exactly what changed.

For future updates

Maintenance

Keep this folder static and self-contained. Update app.js when token values or component names change, refresh images in assets/components/, then open index.html directly to verify.

README.md Download