@shaykec/app-agent 1.0.0

package/designs/DESIGN_CATALOG.md

@@ -0,0 +1,303 @@
+# Design Brand Catalog
+
+> **Purpose:** Machine-readable index for LLM/agent design brand selection.
+> Read this file to determine which brand best matches a user's app. After selecting a brand, read the full specification from `designs/brands/{brand-name}.md`.
+> All brands follow the shared rules in `designs/DESIGN_PRINCIPLES.md`.
+
+---
+
+## Decision Matrix
+
+| Brand | Tone | Best-For Keywords |
+|-------|------|------------------|
+| ModernMinimal | minimal | clean, simple, productivity, tools, notes, tasks, utilities, dev tools, calculator, scanner, minimalist |
+| VibrantPlayful | playful | fun, colorful, kids, pets, games, social, casual food, party, events, birthday, rewards, stickers |
+| CorporateProfessional | professional | business, finance, legal, medical, enterprise, B2B, insurance, banking, consulting, HR, compliance |
+| DarkLuxe | bold | luxury, premium, nightlife, music, fashion, high-end retail, VIP, concierge, wine, jewelry, watches |
+| NatureOrganic | playful | nature, eco, organic, wellness, outdoor, garden, farm, hiking, sustainability, herbal, plant-based |
+| NeoBrutalist | bold | creative, media, agency, youth, raw, edgy, art, magazine, portfolio, streetwear, punk, indie |
+| SoftGradient | playful | calm, meditation, weather, dating, lifestyle, sleep, mood, journal, affirmations, self-care, astrology |
+| TechDynamic | bold | fitness, sport, automotive, gaming, tech, fast, performance, racing, esports, crypto, dashboard |
+| KidsPlayful | fun | children, kids, toddler, education, learning, ABCs, math, family, safe, COPPA, parenting, school, ages 3-12 |
+| MedicalClinical | clinical | health, medical, telemedicine, patient, hospital, pharmacy, symptoms, HIPAA, clinical, doctor, nurse, wellness |
+| RetroVintage | nostalgic | vintage, retro, coffee, artisan, handmade, bookstore, analog, nostalgia, craft, antique, journal, photography |
+| SportAthletic | energetic | athletic, sport, training, competition, running, cycling, gym, Nike-like, Adidas-like, race, team, coach |
+| AccessibleHighContrast | inclusive | accessible, high contrast, WCAG AAA, elderly, vision, inclusive, government, public service, universal design |
+
+---
+
+## Brand Summaries
+
+### ModernMinimal
+**One-line:** Clean, focused interfaces with restrained color and generous white space.
+
+Prioritizes content over chrome. Uses a monochromatic palette with a single accent color. System fonts at standard weights. Thin borders, subtle shadows. Best when the app's value is in its content or functionality, not its visual flair.
+
+**Best match when:**
+- User wants a clean, uncluttered look
+- App is a tool, utility, or productivity app
+- User mentions "simple", "clean", or "minimal"
+
+**NOT a match when:**
+- App targets children or young audiences (too austere)
+- User wants a bold, attention-grabbing design
+- App is in entertainment or lifestyle
+
+---
+
+### VibrantPlayful
+**One-line:** Bold, saturated colors with rounded shapes and energetic personality.
+
+Uses a multi-color palette with high saturation. Large corner radii, generous spacing, bouncy feel. Works well for apps that need to feel approachable and fun. Pairs well with illustrated empty states and emoji-style elements.
+
+**Best match when:**
+- App targets younger audiences, families, or casual users
+- User mentions "fun", "colorful", or "friendly"
+- App is social, food, pets, or entertainment
+
+**NOT a match when:**
+- App handles sensitive data (finance, health records)
+- User wants a serious, professional tone
+- App is B2B or enterprise
+
+---
+
+### CorporateProfessional
+**One-line:** Structured, trustworthy design with a navy-slate palette and clear hierarchy.
+
+Conveys authority and reliability. Uses a muted, blue-dominant palette. Moderate corner radii, structured layouts, clear data hierarchy. Ideal for apps where trust and clarity matter more than personality.
+
+**Best match when:**
+- App handles money, health data, or legal information
+- User wants users to trust the app with sensitive actions
+- User mentions "professional", "business", or "enterprise"
+
+**NOT a match when:**
+- App targets teens or children
+- User wants a creative or artistic feel
+- App is casual or entertainment-focused
+
+---
+
+### DarkLuxe
+**One-line:** Dark-first design with gold/champagne accents for a premium, exclusive feel.
+
+Default background is near-black. Uses metallic accents (gold, champagne, rose gold) sparingly for highlights. Thin, elegant typography. Creates a sense of exclusivity and sophistication. Works best in dark mode — light mode is a lighter gray variant, not pure white.
+
+**Best match when:**
+- App is for a luxury brand, premium service, or high-end audience
+- User mentions "premium", "luxury", "exclusive", or "VIP"
+- App is in nightlife, music, fashion, or fine dining
+
+**NOT a match when:**
+- App needs to feel accessible and everyday
+- User wants bright, energetic colors
+- App is for children or casual use
+
+---
+
+### NatureOrganic
+**One-line:** Warm earth tones with soft shapes inspired by nature and sustainability.
+
+Uses forest greens, warm browns, terracotta, and cream. Rounded but not exaggerated corners. Warm, inviting feel. Works well with natural textures and illustrations. Pairs naturally with eco-friendly, wellness, and outdoor themes.
+
+**Best match when:**
+- App is related to nature, wellness, gardening, or sustainability
+- User mentions "organic", "natural", "earthy", or "eco"
+- App has a warm, nurturing personality
+
+**NOT a match when:**
+- App is tech-focused or high-performance
+- User wants a sleek, modern look
+- App is in finance or gaming
+
+---
+
+### NeoBrutalist
+**One-line:** High-contrast black and white with thick borders, raw typography, and neon accents.
+
+Deliberately breaks conventional design polish. Uses stark black/white contrast with a single neon accent (lime, magenta, or cyan). Thick borders, visible grid structure. Monospace or heavy sans-serif typography. Makes a strong visual statement.
+
+**Best match when:**
+- App is for a creative audience (designers, artists, musicians)
+- User mentions "bold", "raw", "edgy", or "unconventional"
+- App is a portfolio, magazine, or cultural platform
+
+**NOT a match when:**
+- App needs to feel safe and trustworthy (finance, health)
+- User wants a soft, calming experience
+- Target audience is unfamiliar with design trends
+
+---
+
+### SoftGradient
+**One-line:** Dreamy pastel gradients with soft shapes for a calming, lifestyle feel.
+
+Uses pastel purple-to-blue gradients as a signature. Rounded shapes, soft shadows (no hard edges). Light, airy feel. Works well for mindfulness, lifestyle, and personal apps where the experience should feel gentle and immersive.
+
+**Best match when:**
+- App is for wellness, meditation, sleep, or mood tracking
+- User mentions "calm", "gentle", "dreamy", or "soft"
+- App is in dating, journaling, or self-care
+
+**NOT a match when:**
+- App needs to convey authority or urgency
+- User wants high-contrast, data-dense UI
+- App is for professional or enterprise use
+
+---
+
+### TechDynamic
+**One-line:** Electric blue and cyan on dark backgrounds with sharp angles and high energy.
+
+Uses electric blue, cyan, and dark charcoal. Angular shapes, dynamic gradients, data-viz aesthetics. Feels fast and powerful. Works well for apps that show metrics, performance data, or real-time information.
+
+**Best match when:**
+- App is about fitness, sports, automotive, or gaming
+- User mentions "fast", "powerful", "dynamic", or "performance"
+- App shows dashboards, stats, or real-time data
+
+**NOT a match when:**
+- App needs a warm, friendly feel
+- User wants a minimal or calm design
+- App is for young children or elderly audiences
+
+---
+
+### KidsPlayful
+**One-line:** Bright primary colors with oversized touch targets and friendly shapes for children ages 3-12.
+
+Uses saturated primary colors (red, blue, yellow, green) with pure white backgrounds. Extra-large corner radii and touch targets (56pt+). All text is 16pt minimum. Feels safe, approachable, and easy to use for small hands. Simplified iconography with no abstract symbols.
+
+**Best match when:**
+- App targets children ages 3-12
+- App is educational, a kids game, or family-oriented
+- User mentions "kids", "children", "safe", or "COPPA"
+
+**NOT a match when:**
+- App targets teens or adults
+- App handles complex data or professional content
+- App needs a sophisticated or minimal aesthetic
+
+---
+
+### MedicalClinical
+**One-line:** Soft teal and white with calming transitions for health and medical applications.
+
+Uses a teal-dominated palette that feels clean and sterile without being cold. Generous line heights and spacing for readability. Minimal animations — calming, no bouncy effects. Conveys trustworthiness for sensitive health data. Visual cues for security (lock icons, consent indicators).
+
+**Best match when:**
+- App handles health data, medical records, or patient information
+- App is telemedicine, pharmacy, or symptom tracking
+- User mentions "health", "medical", "clinical", or "patient"
+
+**NOT a match when:**
+- App is a fitness/workout tracker (use TechDynamic or SportAthletic)
+- App needs a fun, energetic feel
+- App is casual wellness (use SoftGradient or NatureOrganic)
+
+---
+
+### RetroVintage
+**One-line:** Warm sepia tones with serif typography for nostalgic, handcrafted experiences.
+
+Uses warm brown, amber, and cream colors that evoke an analog feel. Serif headings give a classic, timeless quality. Slightly squared corners and warm-toned shadows. Works well with photography-heavy content and artisan brands.
+
+**Best match when:**
+- App is for a coffee shop, bookstore, or artisan brand
+- User mentions "vintage", "retro", "classic", "handcrafted", or "analog"
+- App has a journaling, photography, or storytelling focus
+
+**NOT a match when:**
+- App needs to feel modern or tech-forward
+- App targets young children
+- App is high-performance or data-heavy
+
+---
+
+### SportAthletic
+**One-line:** Bold black and red with condensed all-caps typography for competitive, high-energy experiences.
+
+Uses deep black as primary with bold accent colors (red, orange). Condensed, heavy sans-serif headings in uppercase. Tight spacing and sharp corners create an aggressive, performance-oriented feel. Inspired by Nike, Adidas, and Under Armour aesthetics.
+
+**Best match when:**
+- App is for sports, training, or competition
+- User mentions "athletic", "training", "competition", or "performance"
+- App targets active, competitive users (runners, cyclists, gym-goers)
+
+**NOT a match when:**
+- App needs a calm or gentle feel
+- App targets elderly or accessibility-first audiences
+- App is casual wellness (use NatureOrganic or SoftGradient)
+
+---
+
+### AccessibleHighContrast
+**One-line:** Pure black-and-white with WCAG AAA contrast ratios and oversized text for maximum inclusivity.
+
+Uses pure black on white (or reverse) with a single saturated accent color. All contrast ratios meet WCAG AAA (7:1+). Default body text is 18pt+. Touch targets are 56pt+. Visible focus indicators, no color-only information. Designed for users with vision impairments, elderly users, or any app prioritizing universal accessibility.
+
+**Best match when:**
+- App targets elderly users or vision-impaired audiences
+- App is a government or public service tool
+- User explicitly mentions "accessible", "high contrast", or "inclusive"
+- Maximum readability is more important than visual flair
+
+**NOT a match when:**
+- App needs a strong visual identity or brand personality
+- App targets young audiences who expect rich visuals
+- App is entertainment or lifestyle focused
+
+---
+
+## Brand Selection Guide
+
+### Decision Flow
+
+1. **Is the app for children ages 3-12?** --> KidsPlayful
+2. **Does accessibility need to meet WCAG AAA or target elderly/vision-impaired users?** --> AccessibleHighContrast
+3. **Is it a medical, clinical, or patient-facing health app?** --> MedicalClinical
+4. **Does the app handle sensitive or professional data?** (finance, legal) --> CorporateProfessional
+5. **Is it a premium or luxury brand?** --> DarkLuxe
+6. **Is it a sports, training, or competitive athletic app?** --> SportAthletic
+7. **Is it related to nature, wellness, or sustainability?** --> NatureOrganic
+8. **Does it have a vintage, retro, or handcrafted aesthetic?** --> RetroVintage
+9. **Is it a calm, personal, or mindfulness app?** --> SoftGradient
+10. **Is it a tool or productivity app with minimal UI needs?** --> ModernMinimal
+11. **Is it fun, social, or for younger audiences?** --> VibrantPlayful
+12. **Is it creative, artistic, or deliberately unconventional?** --> NeoBrutalist
+13. **Is it performance-focused with data and metrics?** --> TechDynamic
+
+### Hybrid Brands
+
+When an app spans categories, pick the brand closest to the **primary user experience** and note adaptations:
+
+| Primary Need | Secondary Need | Start With | Adapt From |
+|-------------|---------------|------------|------------|
+| Premium fitness | Performance metrics | DarkLuxe | TechDynamic (data-viz colors) |
+| Professional wellness | Calming experience | CorporateProfessional | SoftGradient (softer corners) |
+| Kids education | Clean learning UI | KidsPlayful | ModernMinimal (structured layout) |
+| Creative portfolio | Professional credibility | NeoBrutalist | CorporateProfessional (structured hierarchy) |
+| Eco commerce | Shopping experience | NatureOrganic | ModernMinimal (product focus) |
+| Social fitness | Community + tracking | SportAthletic | VibrantPlayful (social colors) |
+| Medical patient portal | Calming trust | MedicalClinical | CorporateProfessional (data hierarchy) |
+| Vintage marketplace | Shopping experience | RetroVintage | ModernMinimal (product grid layout) |
+| Accessible finance | High contrast banking | AccessibleHighContrast | CorporateProfessional (structured hierarchy) |
+| Kids game | Fun competitive | KidsPlayful | VibrantPlayful (playful animations) |
+| Athletic dashboard | Performance data | SportAthletic | TechDynamic (chart colors) |
+| Health wellness | Medical accuracy | MedicalClinical | NatureOrganic (warm tones) |
+
+### When No Brand Fits
+
+If the user's app description does not match any brand well:
+
+1. Pick the brand with the most similar **emotional tone** (trustworthy, fun, calm, energetic)
+2. Note any adaptation suggestions in the `ADAPT` field
+3. The `design-system` skill can adjust colors while keeping the brand's structural tokens (radius, spacing, typography)
+
+### User Preference Override
+
+If the user explicitly mentions colors, style, or visual direction:
+- Use their stated preferences as the primary input
+- Select the brand whose **structure** (radius, spacing, typography) best matches their described style
+- The brand's colors can be overridden — the structural tokens are what matter most

package/designs/DESIGN_PRINCIPLES.md

@@ -0,0 +1,266 @@
+# Mobile Design Principles
+
+> **Purpose:** Shared design foundation for all design brands. Every brand in the catalog MUST follow these rules unless explicitly overriding them in the brand file. Read this before applying any brand.
+
+---
+
+## iOS — Human Interface Guidelines Essentials
+
+### Navigation
+- Use `TabView` for top-level navigation (max 5 tabs)
+- Use `NavigationStack` for drill-down flows within each tab
+- Use sheets (`.sheet`) for modal creation flows and settings
+- Use full-screen covers for immersive content (photos, video)
+- Back navigation must always be available via the system back button
+
+### Component Sizing
+- Minimum touch target: **44 x 44 pt**
+- Navigation bar height: 44pt (large title: 96pt collapsed to 44pt)
+- Tab bar height: 49pt (83pt with safe area on notched devices)
+- Standard button height: 50pt
+- Standard list row height: 44pt minimum (60-72pt with subtitle)
+
+### SF Symbols
+- Use **filled** variants for selected/active tab icons
+- Use **outlined** variants for unselected tabs and secondary actions
+- Prefer multi-color rendering for status indicators
+- Use `symbolRenderingMode(.hierarchical)` for subtle depth
+
+### Layout and Margins
+- Standard horizontal margin: **16pt** (20pt on larger screens)
+- Card inner padding: **16pt**
+- Minimum spacing between interactive elements: **8pt**
+- Respect safe areas — never place content behind the notch or home indicator
+- Use `GeometryReader` sparingly — prefer `.frame()` and layout priorities
+
+### Typography (San Francisco)
+- Large Title: 34pt Bold
+- Title 1: 28pt Bold
+- Title 2: 22pt Bold
+- Title 3: 20pt Semibold
+- Headline: 17pt Semibold
+- Body: 17pt Regular
+- Callout: 16pt Regular
+- Subheadline: 15pt Regular
+- Footnote: 13pt Regular
+- Caption 1: 12pt Regular
+- Caption 2: 11pt Regular
+
+### System Behaviors
+- Support Dynamic Type — never hardcode font sizes without `.minimumScaleFactor`
+- Support dark mode — use semantic colors (`Color.primary`, `Color.secondary`)
+- Support landscape orientation where it makes sense (iPad always)
+- Use `@Environment(\.colorScheme)` to adapt to appearance changes
+- Provide haptic feedback for significant actions (`.sensoryFeedback`)
+
+---
+
+## Android — Material Design 3 Essentials
+
+### Navigation
+- Use `NavigationBar` (bottom) for top-level destinations (3-5 items)
+- Use `NavigationDrawer` for 5+ destinations or secondary navigation
+- Use `TopAppBar` (small, medium, large) for contextual actions and back navigation
+- Use `ModalBottomSheet` for creation flows and filters
+- Back navigation via system gesture or `TopAppBar` navigation icon
+
+### Component Sizing
+- Minimum touch target: **48 x 48 dp**
+- Top app bar height: 64dp (medium: 112dp, large: 152dp)
+- Bottom navigation bar height: 80dp
+- Standard button height: 40dp (minimum touch area 48dp)
+- Standard list item height: 56dp (two-line: 72dp, three-line: 88dp)
+- FAB size: 56dp (small: 40dp, large: 96dp)
+
+### Material Icons
+- Use **filled** variants for active/selected states
+- Use **outlined** variants for inactive/unselected states
+- Maintain consistent icon weight within a screen
+- Standard icon size: 24dp (in navigation: 24dp, in buttons: 18dp)
+
+### Layout and Margins
+- Standard horizontal margin: **16dp** (24dp on tablets)
+- Card inner padding: **16dp**
+- Minimum spacing between interactive elements: **8dp**
+- Use `Modifier.windowInsetsPadding` for edge-to-edge layouts
+- Column grid: 4 columns (phone), 8 columns (tablet)
+
+### Typography (Roboto)
+- Display Large: 57sp
+- Display Medium: 45sp
+- Display Small: 36sp
+- Headline Large: 32sp
+- Headline Medium: 28sp
+- Headline Small: 24sp
+- Title Large: 22sp
+- Title Medium: 16sp Medium
+- Title Small: 14sp Medium
+- Body Large: 16sp
+- Body Medium: 14sp
+- Body Small: 12sp
+- Label Large: 14sp Medium
+- Label Medium: 12sp Medium
+- Label Small: 11sp Medium
+
+### Material You and Dynamic Color
+- Support `dynamicColor` when available (Android 12+)
+- Provide static fallback colors for older devices
+- Use `MaterialTheme.colorScheme` — never hardcode colors in composables
+- Use color roles consistently: `primary` for key actions, `secondary` for less prominent, `tertiary` for accents
+
+### Motion
+- Use `AnimatedVisibility` for enter/exit transitions
+- Standard duration: 300ms for most transitions
+- Use `EaseInOut` for most animations
+- Stagger list item animations by 50ms increments
+- Respect `reduceMotion` accessibility setting
+
+---
+
+## Cross-Platform UX Principles
+
+### Thumb Zone Ergonomics
+- Place primary actions in the **bottom third** of the screen (easy thumb reach)
+- Navigation belongs at the **bottom** (tabs), not the top
+- Destructive actions require confirmation — never place them where accidental taps are likely
+- FABs and primary CTAs should be in the bottom-right quadrant (right-handed majority)
+
+### Loading States
+- **Preferred**: Skeleton screens (gray placeholder shapes matching content layout)
+- **Acceptable**: Progress indicators (determinate for known duration, indeterminate for unknown)
+- **Avoid**: Blank screens with no loading indication
+- Show skeletons immediately — never leave the user waiting with no feedback
+- For actions (save, submit): show inline progress on the button itself
+
+### Error Handling
+- **Inline validation**: Show errors next to the field as the user types (after first blur)
+- **Toast / Snackbar**: For non-critical, transient errors (network retry, save failed)
+- **Full-screen error**: Only for unrecoverable states (no network + no cached data)
+- Always provide a recovery action (retry, go back, contact support)
+- Never show technical details (error codes, stack traces, API paths)
+
+### Empty States
+- Every list and collection must have an empty state
+- Structure: **illustration/icon + title + subtitle + CTA** (if actionable)
+- Title: 3-6 words, describes the state
+- Subtitle: 1 sentence, tells the user what to do
+- Never blame the user ("You haven't added..." is worse than "No items yet")
+
+### Pull-to-Refresh
+- Available on all scrollable list screens
+- Show a brief loading indicator (1-2 seconds visible minimum)
+- Update content in place — never navigate away
+
+### Infinite Scroll and Pagination
+- Load more items automatically when the user scrolls near the bottom (80% threshold)
+- Show a loading indicator at the bottom of the list while fetching
+- Handle "no more items" gracefully — hide the loader, optionally show a subtle end message
+
+### Onboarding
+- Maximum 3-4 slides
+- Skip button always visible
+- Focus on user benefits, not feature lists
+- Each slide: title (2-5 words) + description (1-2 sentences) + illustration
+- Final slide has the primary CTA ("Get Started")
+
+### Form Design
+- Single column layout (never side-by-side fields on phone)
+- Floating labels (label animates from placeholder position to above the field)
+- Inline validation after first field blur (not on every keystroke)
+- Keyboard type matches the field (email, phone, number, URL)
+- Submit button disabled until all required fields are valid
+- Auto-advance focus to the next field after completion
+
+### Search
+- Recent searches shown by default (last 5-10)
+- Search-as-you-type with debounce (300ms)
+- Clear button visible when text is entered
+- "No results" state with suggestions
+- Filter/sort accessible from the search screen
+
+### Gestures
+- Swipe-to-delete on list items (with confirmation or undo)
+- Swipe-to-go-back (iOS native, respect Android system gesture)
+- Long-press for context menus (both platforms)
+- Pinch-to-zoom for images (when applicable)
+
+---
+
+## Accessibility — WCAG 2.1 AA
+
+### Color Contrast
+- **Normal text** (< 18pt / < 14pt bold): minimum **4.5:1** contrast ratio
+- **Large text** (>= 18pt / >= 14pt bold): minimum **3:1** contrast ratio
+- **UI components** (borders, icons, focus indicators): minimum **3:1** contrast ratio
+- Never rely on color alone to convey information (add icons, text, or patterns)
+
+### Touch Targets
+- iOS: minimum **44 x 44 pt**
+- Android: minimum **48 x 48 dp**
+- Spacing between touch targets: minimum **8pt/dp** to prevent mis-taps
+- Expandable hit areas are acceptable (visual size can be smaller if touch area is enlarged)
+
+### Screen Readers
+- All interactive elements must have accessibility labels
+- Images: descriptive label OR marked as decorative
+- Buttons: label describes the action ("Delete booking" not just "Delete")
+- Icons without text: must have an accessibility label
+- Custom components: provide `accessibilityRole` / `Role` semantics
+- Group related elements to reduce verbosity (`accessibilityElement(children: .combine)` / `Modifier.semantics(mergeDescendants = true)`)
+
+### Dynamic Type and Font Scaling
+- iOS: support Dynamic Type (use `TextStyle` not hardcoded sizes)
+- Android: use `sp` for text, test at 200% font scale
+- Layout must not break at largest accessibility text size
+- Allow text to wrap — never truncate critical information
+
+### Motion and Animation
+- Respect `UIAccessibility.isReduceMotionEnabled` (iOS) / `Settings.Global.ANIMATOR_DURATION_SCALE` (Android)
+- Provide static alternatives for animated content
+- Auto-playing animations: provide pause/stop control
+- No content should flash more than 3 times per second
+
+### Focus Management
+- Focus order must follow visual reading order (top-to-bottom, left-to-right)
+- Modal dialogs must trap focus inside the modal
+- After dismissing a modal, return focus to the triggering element
+- Newly loaded content should not steal focus from the user's current position
+
+---
+
+## Spacing and Layout System
+
+### Base Grid
+- **4pt/dp base unit** — all spacing values are multiples of 4
+- Standard scale: **4, 8, 12, 16, 20, 24, 32, 40, 48, 64**
+
+### Common Spacing Values
+
+- **4pt**: Minimum spacing between related inline elements (icon to label)
+- **8pt**: Spacing between related elements in a group (form fields)
+- **12pt**: Compact list item vertical padding
+- **16pt**: Standard margin, card padding, section internal spacing
+- **24pt**: Spacing between sections within a screen
+- **32pt**: Spacing between major content blocks
+- **48pt**: Large separation (screen header to first content)
+
+### Card and Container Patterns
+- Card padding: **16pt/dp** all sides
+- Card corner radius: defined by brand (typically 8-16pt)
+- Card elevation/shadow: subtle (iOS: 2pt shadow, Android: 1dp elevation)
+- Card spacing (between cards in a list): **12-16pt/dp**
+
+### List Item Patterns
+- Single-line: 48pt height, 16pt horizontal padding
+- Two-line: 64-72pt height, 16pt horizontal padding
+- Three-line: 88pt height, 16pt horizontal padding
+- Leading icon/avatar: 40pt size, 16pt spacing to text
+- Trailing action: 24pt icon, 16pt spacing from text
+
+### Screen Structure
+- Status bar: system-controlled
+- Navigation bar / Top app bar: 44-64pt
+- Content area: fills remaining space
+- Tab bar / Bottom navigation: 49-80pt (plus safe area)
+- Content top padding: 16pt below navigation bar
+- Content bottom padding: 16pt above tab bar (before safe area)