valuecards/stitch/DESIGN.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
Mindful Values Architecture	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant #fdf9f2 #dddad3 #fdf9f2 #ffffff #f7f3ec #f1ede6 #ece8e1 #e6e2db #1c1c18 #4d453e #31302c #f4f0e9 #7f756d #d0c4ba #6c5b49 #635341 #ffffff #7d6b58 #ffefe1 #d9c3ac #8e4d2a #ffffff #feaa7f #783d1a #465b44 #ffffff #5e745c #e1f9db #ba1a1a #ffffff #ffdad6 #93000a #f6dfc7 #d9c3ac #25190b #544433 #ffdbcb #ffb691 #341100 #713714 #d1e9cc #b5cdb0 #0d200d #374c36 #fdf9f2 #1c1c18 #e6e2db	headline-xl headline-xl-mobile headline-lg headline-lg-mobile headline-md body-lg body-md body-sm label-lg label-md label-sm fontFamily fontSize fontWeight lineHeight letterSpacing Newsreader 40px 400 48px -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Newsreader 32px 400 40px -0.01em fontFamily fontSize fontWeight lineHeight letterSpacing Newsreader 30px 400 38px -0.01em fontFamily fontSize fontWeight lineHeight letterSpacing Newsreader 26px 400 34px 0em fontFamily fontSize fontWeight lineHeight Newsreader 22px 400 30px fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 18px 400 28px fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 16px 400 24px fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 14px 400 20px fontFamily fontSize fontWeight lineHeight letterSpacing Plus Jakarta Sans 15px 600 20px 0.01em fontFamily fontSize fontWeight lineHeight letterSpacing Plus Jakarta Sans 13px 500 18px 0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Plus Jakarta Sans 11px 600 16px 0.04em	sm DEFAULT md lg xl full 0.5rem 1rem 1.5rem 2rem 3rem 9999px	gutter gutter-mobile margin margin-mobile space-xs space-sm space-md space-lg space-xl 1rem 0.75rem 1.5rem 1.25rem 0.25rem 0.5rem 1rem 1.5rem 2.5rem

Brand & Style

This design system is crafted for deep introspection, intentional decision-making, and personal grounding. It serves individuals navigating life transitions, therapeutic exercises, and values-clarification practices. The experience is designed to feel unhurried, quietly reverent, and deeply personal—eschewing addictive loops, loud notifications, and superficial gamification in favor of sustained focus and calm contemplation.

The visual style blends warm editorial minimalism with tactile paper-like depth. It draws inspiration from artisanal bookbinding, linen stationery, and modern contemplative journals:

• Atmosphere: Serene, grounded, deliberate, and emotionally secure.
• Rhythm: Generous breathing room with relaxed vertical pacing, inviting the eye to linger and pause.
• Materiality: Soft stone surfaces, delicate warm contours, and nuanced diffuse shadows that ground elements without feeling synthetic or rigid.

Colors

The palette is rooted in the natural world: mineral sands, quiet clay, sun-bleached stone, and muted foliage. The dynamic range avoids stark pure whites and abrasive digital blacks, fostering an environment free of eye strain and cognitive fatigue.

Color Tiers & Intent

• Canvas Base (#FBF9F5): The primary view background; evokes raw, unbleached cotton paper.
• Surface Elevation (#F5F1EA): Neutral surface for raised cards, value tiles, and interactive sheets.
• Subtle Surface & Dividers (#E8E2D8): Restful borders, inset surfaces, and non-intrusive separators.
• Primary / Earth Ground (#7D6B58): A balanced warm taupe-stone that grounds primary interactive states and contemplative highlights.
• Secondary / Terracotta Accent (#C87D55): A soft, sun-dried clay tone used selectively for active selections, progress markers, and reflective milestones.
• Tertiary / Sage Accent (#6B8168): A muted eucalyptus green designated for affirmation states, grounded confirmations, and calm categorization.
• Text & Contrast (#2C2825 Primary, #4A443F Secondary): Deep espresso and soft slate hues that preserve crisp readability with none of the harshness of pure black.

Typography

The typographic hierarchy balances literary gravitas with clean, approachable utility.

• Display & Headlines (Newsreader): An editorial, high-character serif that confers an intellectual, gentle, book-like presence. Headlines use standard weight and slightly negative tracking to evoke printed literary works.
• Body & Labels (Plus Jakarta Sans): A soft, humanist geometric sans-serif that balances modern legibility with rounded, friendly terminal strokes. It delivers effortless readability across reflection prompts, explanatory texts, and compact mobile UI controls.
• Rhythm & Formatting: Line heights remain generous across all tiers to safeguard vertical breathing room and prevent visual crowding during dense contemplative sessions.

Layout & Spacing

The layout is built around spacious, open single-column and modular card streams suited for portrait handheld usage. It prioritizes focus by presenting a limited number of elements on screen at any given time.

Grid & Form Factors

• Mobile (<640px): Single-column layout with fluid full-width cards anchored by 1.25rem outer canvas padding. Component stacks maintain space-md gaps.
• Tablet (640px–1024px): Centered max-width canvas (600px for reflective sort flows, 768px for summary balance views) with 1.5rem outer margins.
• Sorting Viewports: Sorting columns or buckets utilize vertical flex stacks with space-sm or space-md separation to maintain clear tactile drop zones and distinct groupings.

Elevation & Depth

Visual depth is achieved through layered warm surfaces paired with whisper-soft, colored ambient shadows rather than synthetic gray blurs.

• Flat / Ground Level: Page background (#FBF9F5) with no shadow.
• Elevated Tiles & Cards: Surface color #F5F1EA wrapped in a 1px border of #E8E2D8, elevated by a warm, diffuse ambient shadow: box-shadow: 0 4px 16px -2px rgba(44, 40, 37, 0.04), 0 1px 4px 0 rgba(44, 40, 37, 0.02).
• Floating Controls & Active Drags: While dragging or floating above other content, cards subtly lift: box-shadow: 0 12px 28px -4px rgba(44, 40, 37, 0.08), 0 2px 8px 0 rgba(44, 40, 37, 0.03).
• Borders as Tone: In place of strong contrast lines, borders act as quiet edge definitions using #E8E2D8 to cleanly separate panels without fragmenting the canvas.

Shapes

The design system embraces a high-radius, organic shape language (roundedness: 3).

• Pill Geometry: Interactive buttons, category filters, and selection pills utilize complete capsule geometry (rounded-full), reinforcing physical softness and comfort in the hand.
• Cards & Value Containers: Larger surfaces utilize relaxed, generous border radii (1.5rem to 2rem / rounded-xl to rounded-2xl), eliminating aggressive edges and providing an organic, pebble-like quality to draggable cards.
• Inset Wells & Modals: Droppable sort regions adopt matching rounded corners to establish a natural visual container for nested items.

Components

Buttons

• Primary: Full capsule (rounded-full) pill button with a #2C2825 or #7D6B58 background, #FBF9F5 typography, and generous horizontal padding (1.75rem). No heavy drop shadows; tactile feedback relies on soft tonal lightening on press.
• Secondary / Gentle: Subtle stone pill surface (#F5F1EA) with a 1px #E8E2D8 border and #2C2825 text.
• Ghost / Reflective: Borderless with #4A443F text, emphasizing deliberate, low-urgency actions (e.g., "Skip for now", "Pause reflection").

Value Cards (Sorting Unit)

• Resting: Background #F5F1EA, border 1px solid #E8E2D8, padding space-lg, radius 1.5rem. Title set in Newsreader (headline-md) with an optional single-sentence descriptor below in Plus Jakarta Sans (body-sm, #4A443F).
• Dragging / Active: Slight scale increase (1.02x) with ambient shadow lift and an accent border transition to #C87D55.

Chips & Sort Buckets

• Chips: Capsule pills with 0.5rem vertical and 1rem horizontal padding. Selected states transition from background #F5F1EA to #E8E2D8 with text shifting to #2C2825.
• Sort Buckets (Drop Zones): Spacious containers framed in dashed or soft solid lines of #E8E2D8 with background #FBF9F5. Labelled with serene, muted headers (e.g., Always True for Me, Important to Me, Rarely Considered).

Lists & Prompts

• Framed in full-width soft-edged tiles or separated by subtle #E8E2D8 hairline dividers. Touch targets remain large (min-height: 52px), accompanied by relaxed vertical spacing.

Checkboxes & Radio Buttons

• Rounded indicators (circular radios, 6px radius checkboxes) using #E8E2D8 borders that fill with muted sage (#6B8168) or terracotta (#C87D55) when selected, accompanied by a soft white icon check.

Input Fields

• Understated input panels with background #F5F1EA, bordered in #E8E2D8, rounding to 1rem. Active focus shifts border tone smoothly to #7D6B58 with no high-contrast glow rings.

Specialized Component: Contemplative Reflection Sheet

• A bottom sheet modal featuring a soft drag handle, 2rem top border radii, linen-stone background (#F5F1EA), and generous whitespace designed specifically for writing personal rationales during deep values prioritization.