Design System
Material Dark UI Library
Reusable tokens + components for all pages. This is the single source for layout,
typography, spacing, states, and interaction behavior.
Color Tokens
Primary
--m3-primary / --m3-primary-container
Secondary
--m3-secondary / --m3-secondary-container
Tertiary
--m3-tertiary / --m3-tertiary-container
Surface Stack
--m3-surface-container-*
Buttons + Chips
Stable
API
Active
Form Controls
Input and output surfaces share one control style to keep tool pages consistent.
Information Blocks
System Rule
Use `base.css` tokens/classes first, then add page-level overrides only when necessary.
-
palette
Color Roles
Mapped to Material-style surface and accent roles.
Token
-
motion_photos_auto
Motion
Single standard easing + reduced-motion fallback.
State
-
straighten
Spacing
Shared 4pt-based rhythm for cards, forms, headers.
Layout
Reference Sources
Foundations referenced from official Material and Jetpack Compose sources, plus open-source
implementations:
-
link
material-components/material-web
Web component patterns and token naming.
GitHub
-
link
androidx/compose/material3
Compose Material 3 component behavior and semantics.
Source
-
link
android/compose-samples
Real app structures used for component composition ideas.
GitHub
-
link
M3 Design Kit by Aayush Mankad
Open-source Material 3 UI reference for practical layout samples.
GitHub