Mobile Design System
Purpose
Establish a consistent visual foundation: design tokens, spacing/typography scales, color palette, and reusable primitives (buttons, inputs, cards) that screens compose from.
When to Use
- Before building multiple screens, to avoid ad-hoc styling.
- When UI is inconsistent across screens.
- Not for a single throwaway screen.
Inputs
- Brand/design guidance or Figma (if any).
- Accessibility and platform constraints.
Discovery Questions
- Is there a design source (Figma/brand) to derive tokens from?
- What are the spacing, typography, and color scales?
- Which primitive components recur across screens?
- What accessibility contrast/sizing constraints apply?
Responsibilities
- Define design tokens (spacing, radius, color, typography).
- Define typography and spacing scales.
- Design reusable primitives (buttons, inputs, cards, layout).
- Coordinate theming (
mobile-theme), fonts (mobile-fonts), icons (mobile-vector-icons), and accessibility (mobile-accessibility).
Required Workflow
- Derive tokens from the design source (or define a sane default set).
- Set typography + spacing scales.
- Build primitive components from tokens.
- Wire theme + fonts + accessibility.
- Record the design system.
Decision Rules
- Tokens are the single source of visual truth; components consume tokens, not hard-coded values.
- Prefer a small set of composable primitives over many one-off styled components.
- Meet accessibility contrast/target-size minimums from the start.
- Match platform conventions where users expect them.
Rules
- No hard-coded style values in screens — use tokens.
- Coordinate with theme/fonts/accessibility rather than duplicating them.
- Keep the primitive set small and composable.
Anti-Patterns
- Ad-hoc inline styles diverging per screen.
- A sprawling component library before screens need it.
- Ignoring contrast/target-size accessibility.
- Hard-coded colors/spacing bypassing tokens.
Validation Checklist
Definition of Done
A recorded design system: tokens, scales, and a small set of reusable primitives consumed via tokens — coordinated with theme, fonts, icons, and accessibility.
Related Skills
mobile-theme, mobile-fonts, mobile-vector-icons, mobile-accessibility, mobile-navigation
Related Knowledge
../../../knowledge/ (brand, design decisions).
Related References
../../../references/mobile/screens/ when populated.
Context Loading Guidance
- Requires: design source (if any), accessibility constraints, recurring UI.
- Does not require: the whole app source, unrelated references, every mobile skill.
- May load:
mobile-theme, mobile-fonts, mobile-accessibility.
- Stop when: the design system is recorded.
Token Efficiency Guidance
Derive tokens once; reference them. Keep the primitive list concise; link screen references instead of pasting UI.
1---2name: mobile-design-system3description: Use to plan a mobile design system — tokens, spacing, typography scale, color palette, and reusable component primitives — before building screens. Establishes consistency; coordinates with theme, fonts, and accessibility.4---56# Mobile Design System78## Purpose910Establish a consistent visual foundation: design tokens, spacing/typography scales, color palette, and reusable primitives (buttons, inputs, cards) that screens compose from.1112## When to Use1314- Before building multiple screens, to avoid ad-hoc styling.15- When UI is inconsistent across screens.16- Not for a single throwaway screen.1718## Inputs1920- Brand/design guidance or Figma (if any).21- Accessibility and platform constraints.2223## Discovery Questions2425- Is there a design source (Figma/brand) to derive tokens from?26- What are the spacing, typography, and color scales?27- Which primitive components recur across screens?28- What accessibility contrast/sizing constraints apply?2930## Responsibilities3132- Define **design tokens** (spacing, radius, color, typography).33- Define **typography and spacing scales**.34- Design **reusable primitives** (buttons, inputs, cards, layout).35- Coordinate **theming** (`mobile-theme`), **fonts** (`mobile-fonts`), **icons** (`mobile-vector-icons`), and **accessibility** (`mobile-accessibility`).3637## Required Workflow38391. Derive tokens from the design source (or define a sane default set).402. Set typography + spacing scales.413. Build primitive components from tokens.424. Wire theme + fonts + accessibility.435. Record the design system.4445## Decision Rules4647- Tokens are the single source of visual truth; components consume tokens, not hard-coded values.48- Prefer a small set of composable primitives over many one-off styled components.49- Meet accessibility contrast/target-size minimums from the start.50- Match platform conventions where users expect them.5152## Rules5354- No hard-coded style values in screens — use tokens.55- Coordinate with theme/fonts/accessibility rather than duplicating them.56- Keep the primitive set small and composable.5758## Anti-Patterns5960- Ad-hoc inline styles diverging per screen.61- A sprawling component library before screens need it.62- Ignoring contrast/target-size accessibility.63- Hard-coded colors/spacing bypassing tokens.6465## Validation Checklist6667- [ ] Tokens defined.68- [ ] Typography + spacing scales set.69- [ ] Reusable primitives designed from tokens.70- [ ] Theme/fonts/icons/accessibility coordinated.71- [ ] No hard-coded style values in screens.7273## Definition of Done7475A recorded design system: tokens, scales, and a small set of reusable primitives consumed via tokens — coordinated with theme, fonts, icons, and accessibility.7677## Related Skills7879`mobile-theme`, `mobile-fonts`, `mobile-vector-icons`, `mobile-accessibility`, `mobile-navigation`8081## Related Knowledge8283`../../../knowledge/` (brand, design decisions).8485## Related References8687`../../../references/mobile/screens/` when populated.8889## Context Loading Guidance9091- **Requires:** design source (if any), accessibility constraints, recurring UI.92- **Does not require:** the whole app source, unrelated references, every mobile skill.93- **May load:** `mobile-theme`, `mobile-fonts`, `mobile-accessibility`.94- **Stop when:** the design system is recorded.9596## Token Efficiency Guidance9798Derive tokens once; reference them. Keep the primitive list concise; link screen references instead of pasting UI.
ahtishamshahzad