{ "colorMode": "LIGHT", "font": "NEWSREADER", "roundness": "ROUND_FULL", "customColor": "#7d6b58", "headlineFont": "NEWSREADER", "bodyFont": "PLUS_JAKARTA_SANS", "labelFont": "PLUS_JAKARTA_SANS", "namedColors": { "surface_container_low": "#f7f3ec", "secondary_container": "#feaa7f", "on_error": "#ffffff", "on_background": "#1c1c18", "surface_bright": "#fdf9f2", "surface_container_high": "#ece8e1", "on_tertiary_fixed_variant": "#374c36", "on_error_container": "#93000a", "on_primary": "#ffffff", "inverse_surface": "#31302c", "on_primary_fixed_variant": "#544433", "primary_fixed_dim": "#d9c3ac", "on_tertiary_container": "#e1f9db", "secondary_fixed_dim": "#ffb691", "primary": "#635341", "surface_container_highest": "#e6e2db", "background": "#fdf9f2", "surface_container_lowest": "#ffffff", "surface_variant": "#e6e2db", "error": "#ba1a1a", "on_secondary_container": "#783d1a", "on_secondary": "#ffffff", "tertiary": "#465b44", "tertiary_container": "#5e745c", "on_primary_fixed": "#25190b", "on_primary_container": "#ffefe1", "on_secondary_fixed": "#341100", "primary_fixed": "#f6dfc7", "outline_variant": "#d0c4ba", "surface_tint": "#6c5b49", "error_container": "#ffdad6", "surface_dim": "#dddad3", "inverse_primary": "#d9c3ac", "on_surface": "#1c1c18", "secondary_fixed": "#ffdbcb", "tertiary_fixed": "#d1e9cc", "on_secondary_fixed_variant": "#713714", "primary_container": "#7d6b58", "tertiary_fixed_dim": "#b5cdb0", "on_tertiary": "#ffffff", "secondary": "#8e4d2a", "on_surface_variant": "#4d453e", "surface": "#fdf9f2", "outline": "#7f756d", "on_tertiary_fixed": "#0d200d", "inverse_on_surface": "#f4f0e9", "surface_container": "#f1ede6" }, "designMd": "---\nname: Mindful Values Architecture\ncolors:\n surface: '#fdf9f2'\n surface-dim: '#dddad3'\n surface-bright: '#fdf9f2'\n surface-container-lowest: '#ffffff'\n surface-container-low: '#f7f3ec'\n surface-container: '#f1ede6'\n surface-container-high: '#ece8e1'\n surface-container-highest: '#e6e2db'\n on-surface: '#1c1c18'\n on-surface-variant: '#4d453e'\n inverse-surface: '#31302c'\n inverse-on-surface: '#f4f0e9'\n outline: '#7f756d'\n outline-variant: '#d0c4ba'\n surface-tint: '#6c5b49'\n primary: '#635341'\n on-primary: '#ffffff'\n primary-container: '#7d6b58'\n on-primary-container: '#ffefe1'\n inverse-primary: '#d9c3ac'\n secondary: '#8e4d2a'\n on-secondary: '#ffffff'\n secondary-container: '#feaa7f'\n on-secondary-container: '#783d1a'\n tertiary: '#465b44'\n on-tertiary: '#ffffff'\n tertiary-container: '#5e745c'\n on-tertiary-container: '#e1f9db'\n error: '#ba1a1a'\n on-error: '#ffffff'\n error-container: '#ffdad6'\n on-error-container: '#93000a'\n primary-fixed: '#f6dfc7'\n primary-fixed-dim: '#d9c3ac'\n on-primary-fixed: '#25190b'\n on-primary-fixed-variant: '#544433'\n secondary-fixed: '#ffdbcb'\n secondary-fixed-dim: '#ffb691'\n on-secondary-fixed: '#341100'\n on-secondary-fixed-variant: '#713714'\n tertiary-fixed: '#d1e9cc'\n tertiary-fixed-dim: '#b5cdb0'\n on-tertiary-fixed: '#0d200d'\n on-tertiary-fixed-variant: '#374c36'\n background: '#fdf9f2'\n on-background: '#1c1c18'\n surface-variant: '#e6e2db'\ntypography:\n headline-xl:\n fontFamily: Newsreader\n fontSize: 40px\n fontWeight: '400'\n lineHeight: 48px\n letterSpacing: -0.02em\n headline-xl-mobile:\n fontFamily: Newsreader\n fontSize: 32px\n fontWeight: '400'\n lineHeight: 40px\n letterSpacing: -0.01em\n headline-lg:\n fontFamily: Newsreader\n fontSize: 30px\n fontWeight: '400'\n lineHeight: 38px\n letterSpacing: -0.01em\n headline-lg-mobile:\n fontFamily: Newsreader\n fontSize: 26px\n fontWeight: '400'\n lineHeight: 34px\n letterSpacing: 0em\n headline-md:\n fontFamily: Newsreader\n fontSize: 22px\n fontWeight: '400'\n lineHeight: 30px\n body-lg:\n fontFamily: Plus Jakarta Sans\n fontSize: 18px\n fontWeight: '400'\n lineHeight: 28px\n body-md:\n fontFamily: Plus Jakarta Sans\n fontSize: 16px\n fontWeight: '400'\n lineHeight: 24px\n body-sm:\n fontFamily: Plus Jakarta Sans\n fontSize: 14px\n fontWeight: '400'\n lineHeight: 20px\n label-lg:\n fontFamily: Plus Jakarta Sans\n fontSize: 15px\n fontWeight: '600'\n lineHeight: 20px\n letterSpacing: 0.01em\n label-md:\n fontFamily: Plus Jakarta Sans\n fontSize: 13px\n fontWeight: '500'\n lineHeight: 18px\n letterSpacing: 0.02em\n label-sm:\n fontFamily: Plus Jakarta Sans\n fontSize: 11px\n fontWeight: '600'\n lineHeight: 16px\n letterSpacing: 0.04em\nrounded:\n sm: 0.5rem\n DEFAULT: 1rem\n md: 1.5rem\n lg: 2rem\n xl: 3rem\n full: 9999px\nspacing:\n gutter: 1rem\n gutter-mobile: 0.75rem\n margin: 1.5rem\n margin-mobile: 1.25rem\n space-xs: 0.25rem\n space-sm: 0.5rem\n space-md: 1rem\n space-lg: 1.5rem\n space-xl: 2.5rem\n---\n\n## Brand & Style\n\nThis 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\u2014eschewing addictive loops, loud notifications, and superficial gamification in favor of sustained focus and calm contemplation.\n\nThe visual style blends **warm editorial minimalism** with **tactile paper-like depth**. It draws inspiration from artisanal bookbinding, linen stationery, and modern contemplative journals:\n- **Atmosphere:** Serene, grounded, deliberate, and emotionally secure.\n- **Rhythm:** Generous breathing room with relaxed vertical pacing, inviting the eye to linger and pause.\n- **Materiality:** Soft stone surfaces, delicate warm contours, and nuanced diffuse shadows that ground elements without feeling synthetic or rigid.\n\n## Colors\n\nThe 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.\n\n### Color Tiers & Intent\n- **Canvas Base (`#FBF9F5`):** The primary view background; evokes raw, unbleached cotton paper.\n- **Surface Elevation (`#F5F1EA`):** Neutral surface for raised cards, value tiles, and interactive sheets.\n- **Subtle Surface & Dividers (`#E8E2D8`):** Restful borders, inset surfaces, and non-intrusive separators.\n- **Primary / Earth Ground (`#7D6B58`):** A balanced warm taupe-stone that grounds primary interactive states and contemplative highlights.\n- **Secondary / Terracotta Accent (`#C87D55`):** A soft, sun-dried clay tone used selectively for active selections, progress markers, and reflective milestones.\n- **Tertiary / Sage Accent (`#6B8168`):** A muted eucalyptus green designated for affirmation states, grounded confirmations, and calm categorization.\n- **Text & Contrast (`#2C2825` Primary, `#4A443F` Secondary):** Deep espresso and soft slate hues that preserve crisp readability with none of the harshness of pure black.\n\n## Typography\n\nThe typographic hierarchy balances literary gravitas with clean, approachable utility. \n\n- **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.\n- **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.\n- **Rhythm & Formatting:** Line heights remain generous across all tiers to safeguard vertical breathing room and prevent visual crowding during dense contemplative sessions.\n\n## Layout & Spacing\n\nThe 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.\n\n### Grid & Form Factors\n- **Mobile (<640px):** Single-column layout with fluid full-width cards anchored by `1.25rem` outer canvas padding. Component stacks maintain `space-md` gaps.\n- **Tablet (640px\u20131024px):** Centered max-width canvas (600px for reflective sort flows, 768px for summary balance views) with `1.5rem` outer margins.\n- **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.\n\n## Elevation & Depth\n\nVisual depth is achieved through layered warm surfaces paired with whisper-soft, colored ambient shadows rather than synthetic gray blurs.\n\n- **Flat / Ground Level:** Page background (`#FBF9F5`) with no shadow.\n- **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)`.\n- **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)`.\n- **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.\n\n## Shapes\n\nThe design system embraces a high-radius, organic shape language (`roundedness: 3`).\n\n- **Pill Geometry:** Interactive buttons, category filters, and selection pills utilize complete capsule geometry (`rounded-full`), reinforcing physical softness and comfort in the hand.\n- **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.\n- **Inset Wells & Modals:** Droppable sort regions adopt matching rounded corners to establish a natural visual container for nested items.\n\n## Components\n\n### Buttons\n- **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.\n- **Secondary / Gentle:** Subtle stone pill surface (`#F5F1EA`) with a 1px `#E8E2D8` border and `#2C2825` text.\n- **Ghost / Reflective:** Borderless with `#4A443F` text, emphasizing deliberate, low-urgency actions (e.g., \"Skip for now\", \"Pause reflection\").\n\n### Value Cards (Sorting Unit)\n- **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`).\n- **Dragging / Active:** Slight scale increase (1.02x) with ambient shadow lift and an accent border transition to `#C87D55`.\n\n### Chips & Sort Buckets\n- **Chips:** Capsule pills with `0.5rem` vertical and `1rem` horizontal padding. Selected states transition from background `#F5F1EA` to `#E8E2D8` with text shifting to `#2C2825`.\n- **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*).\n\n### Lists & Prompts\n- 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.\n\n### Checkboxes & Radio Buttons\n- 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.\n\n### Input Fields\n- 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.\n\n### Specialized Component: Contemplative Reflection Sheet\n- 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.", "colorVariant": "FIDELITY", "overridePrimaryColor": "#7d6b58", "overrideSecondaryColor": "#c87d55", "overrideTertiaryColor": "#6b8168", "overrideNeutralColor": "#f5f1ea", "spacingScale": 2, "typography": { "label-lg": { "fontFamily": "Plus Jakarta Sans", "fontSize": "15px", "fontWeight": "600", "lineHeight": "20px", "letterSpacing": "0.01em" }, "headline-lg": { "fontFamily": "Newsreader", "fontSize": "30px", "fontWeight": "400", "lineHeight": "38px", "letterSpacing": "-0.01em" }, "label-md": { "fontFamily": "Plus Jakarta Sans", "fontSize": "13px", "fontWeight": "500", "lineHeight": "18px", "letterSpacing": "0.02em" }, "body-md": { "fontFamily": "Plus Jakarta Sans", "fontSize": "16px", "fontWeight": "400", "lineHeight": "24px" }, "headline-xl": { "fontFamily": "Newsreader", "fontSize": "40px", "fontWeight": "400", "lineHeight": "48px", "letterSpacing": "-0.02em" }, "headline-lg-mobile": { "fontFamily": "Newsreader", "fontSize": "26px", "fontWeight": "400", "lineHeight": "34px", "letterSpacing": "0em" }, "headline-md": { "fontFamily": "Newsreader", "fontSize": "22px", "fontWeight": "400", "lineHeight": "30px" }, "body-lg": { "fontFamily": "Plus Jakarta Sans", "fontSize": "18px", "fontWeight": "400", "lineHeight": "28px" }, "body-sm": { "fontFamily": "Plus Jakarta Sans", "fontSize": "14px", "fontWeight": "400", "lineHeight": "20px" }, "headline-xl-mobile": { "fontFamily": "Newsreader", "fontSize": "32px", "fontWeight": "400", "lineHeight": "40px", "letterSpacing": "-0.01em" }, "label-sm": { "fontFamily": "Plus Jakarta Sans", "fontSize": "11px", "fontWeight": "600", "lineHeight": "16px", "letterSpacing": "0.04em" } }, "spacing": { "space-xs": "0.25rem", "margin-mobile": "1.25rem", "space-md": "1rem", "space-lg": "1.5rem", "margin": "1.5rem", "gutter-mobile": "0.75rem", "gutter": "1rem", "space-xl": "2.5rem", "space-sm": "0.5rem" }, "headlineFontFamily": "Newsreader", "bodyFontFamily": "Plus Jakarta Sans", "labelFontFamily": "Plus Jakarta Sans" }