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