ahtishamshahzad/agent_dev_flow/mobile-design-system

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

1. Derive tokens from the design source (or define a sane default set).
2. Set typography + spacing scales.
3. Build primitive components from tokens.
4. Wire theme + fonts + accessibility.
5. 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

• [ ] Tokens defined.
• [ ] Typography + spacing scales set.
• [ ] Reusable primitives designed from tokens.
• [ ] Theme/fonts/icons/accessibility coordinated.
• [ ] No hard-coded style values in screens.

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.