doodle-mini/stitch-ui/letterTracing/DESIGN.md

Design System Strategy: Doodle Mini

1. Overview & Creative North Star: "The Sun-Drenched Studio"

The creative direction for this design system is "The Sun-Drenched Studio." We are moving away from the cold, clinical "educational app" look and toward a space that feels like a physical, tactile craft room bathed in morning light.

Instead of a rigid, boxed-in grid, we embrace Organic Asymmetry. Elements should feel like they were placed on a table by hand, not snapped to a pixel-perfect wireframe. We break the "template" look by using exaggerated corner radii, overlapping "paper" layers, and a hierarchy that prioritizes warmth and play over traditional data density.

2. Colors: Tonal Radiance

The palette is anchored by primary (#6c5a00) and primary_container (#ffd709), creating a "Yaya Yellow" experience that is vibrant yet sophisticated.

• The "No-Line" Rule: Under no circumstances should 1px solid borders be used to separate content. We define boundaries exclusively through background shifts. Use surface_container_low (#f8f0e0) for main content areas and surface (#fef6e7) for the global backdrop.
• Surface Hierarchy & Nesting: Treat the UI as stacked sheets of heavy-weight construction paper.
  • Level 0: background (#fef6e7) – The desk surface.
  • Level 1: surface_container (#f0e7d6) – The worksheet base.
  • Level 2: surface_container_lowest (#ffffff) – Active drawing cards or "Paper" modals.
• The Glass & Gradient Rule: For navigation bars or floating tool palettes, use Glassmorphism. Apply surface_container_low at 80% opacity with a 20px backdrop blur. This ensures the "sunny" background bleeds through, maintaining the "Sun-Drenched" atmosphere.
• Signature Textures: Main CTAs should not be flat. Apply a subtle linear gradient from primary_fixed (#ffd709) to primary_fixed_dim (#efc900) at a 145-degree angle to give buttons a "pillowy" 3D volume.

3. Typography: The Friendly Guide

We use Plus Jakarta Sans exclusively. Its geometric yet soft terminals provide a modern, legible, and approachable voice.

• Display & Headlines: Use display-lg (3.5rem) for "Doodle Mini" brand moments. Headlines (headline-md) should use a tighter letter-spacing (-0.02em) to feel "hugged" and friendly.
• Body & Labels: Use body-lg for all instructional text. In a children's context, readability is paramount; ensure a line height of at least 1.6x the font size.
• Hierarchy as Personality: Use on_secondary_container (#6d3b00) for sub-headers to provide a warm, "chocolatey" contrast against the yellow, moving away from harsh blacks.

4. Elevation & Depth: Tonal Layering

Depth in this system is a result of light and shadow, not lines and strokes.

• The Layering Principle: To lift a component, place a surface_container_highest (#e5dcc9) element inside a surface_container_low (#f8f0e0) environment. This creates a "recessed" or "elevated" feel through color value alone.
• Ambient Shadows: Use shadows sparingly. When an object "floats" (like a floating action button), use a shadow color derived from on_surface (#322e25) at 6% opacity, with a blur of 32px and a Y-offset of 8px. It should look like a soft glow, not a drop shadow.
• The "Ghost Border" Fallback: If a separator is required for accessibility in input fields, use outline_variant (#b3ac9f) at 15% opacity. It should be felt, not seen.

5. Components: Tactile & Safe

Every component must feel "squishy" and safe to touch.

• Buttons:
  • Primary: Uses primary_container (#ffd709) with a full (9999px) radius.
  • States: On press, scale the button down to 96% size to simulate a physical "click" into the screen.
• Cards & Lists: Forbid divider lines. Separate list items using a spacing-3 (1rem) gap and alternating background colors between surface_container_low and surface_container.
• Input Fields: Use surface_container_highest for the input track. Corners must be xl (3rem). Labels sit above the field in title-sm to ensure children can always see the context.
• Selection Chips: Use secondary_container (#ffc697) for selected states. The roundedness must be full to mimic smooth river stones.
• The "Joy" Progress Bar: A custom component for Doodle Mini. Use a thick track (1.5rem height) in surface_container_highest with the progress indicator using a gradient of tertiary (#006b1b) to tertiary_fixed (#91f78e).

6. Do’s and Don’ts

Do:

• Do use xl and full corner radii for almost everything. Sharp corners are "scary."
• Do lean into white space. Use spacing-12 (4rem) between major sections to let the design breathe.
• Do use on_tertiary_container (dark green) for success states; it feels organic and "earthy" against the yellow.

Don’t:

• Don’t use pure black (#000000). Use on_surface (#322e25) for all dark text to maintain the warm, sunny tone.
• Don’t use 1px dividers. If you feel you need one, use a surface_variant (#e5dcc9) color block that is 4px thick with full rounded caps.
• Don’t crowd the interface. If a screen feels busy, increase the background "paper" size and use a scrollable layout instead of shrinking elements.