The application utilizes a sophisticated Material 3 design system built entirely with Jetpack Compose. It features a dynamic color engine that generates complete light and dark palettes from single “seed” colors, ensuring accessible contrast and brand consistency. The system includes centralized tokens for typography, spacing, animation, and iconography, along with specialized components for grouped list layouts.
The theming engine does not rely on static hex codes for every surface. Instead, it uses the HCT (Hue, Chroma, Tone) color space to generate tonal palettes dynamically.
The application uses Google Sans Flex, a variable font family. This allows for precise weight adjustments (e.g., weight 600 for SemiBold) rather than relying on separate font files.
What it is: The fundamental container for content. It wraps the standard Material Card with app-specific defaults for elevation, colors, and shape logic.Variants:
What it is: A specialized pattern where a list of items appears as a single continuous block. The corners are rounded intelligently based on the item’s position.Logic:
Top Item: Rounds top-left and top-right corners.
Middle Items: No rounded corners (or very subtle inner radius).
Bottom Item: Rounds bottom-left and bottom-right corners.
Use Tokens, Not Values: Always use LocalSpacing.current.m instead of 16.dp.
Theme Seeds: Do not hardcode colors. Use MaterialTheme.colorScheme which is derived from the active theme seed.
Variable Fonts: Use AppTypography styles. Do not manually set font weights unless creating a custom display component, as the variable font settings are complex.
Grouped Shapes: When displaying lists of related data, use the groupedItems extension or GroupedShapes logic to visually merge them into a single block.
Edge-to-Edge: The theme enforces transparent status and navigation bars. Ensure content has enough bottom padding to avoid being covered by the system navigation bar.
