# mindmarket.com — Design System

## 1. Visual Theme & Atmosphere

MindMarket presents a **charcoal-and-beige** pairing that evokes tactile materiality — the feel of quality paper stock and ink. The design system is built around `--color-charcoal` as the primary and `--color-beige` as the secondary surface. A 20px unit (`--unit-md`) and `95svh` modal height hint at a mobile-considered, scroll-driven experience. The overall mood is boutique: restrained color, considered materiality, no digital exuberance.

## 2. Color Palette & Roles

| Role | Value | Usage |
|------|-------|-------|
| Primary | `--color-charcoal` | Text, borders, primary UI |
| Secondary Background | `--color-beige` | Page warmth, card surfaces |
| Beige 500 | `--color-beige-500` | Mid-tone beige panels |
| Beige 600 | `--color-beige-600` | Darker beige dividers and footers |
| Link / CTA | `var(--cc-btn-primary-bg)` | Interactive elements |
| Footer Border | `#e4eaed` | Subtle cool-white divider |

The palette avoids saturated hues entirely. Even interactive elements inherit from the charcoal/beige vocabulary.

## 3. Typography Rules

- **System stack**: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial` for UI; brand typeface likely custom
- **Modal radius**: `0.5rem` — soft, approachable
- **Button radius**: `0.4rem` — slightly tighter than modals
- **No uppercase transforms** in tokens — natural sentence case throughout
- **Spacing unit**: `--unit-md: 20px` — single modular unit drives all component spacing

## 4. Component Stylings

- **Buttons**: Rounded at 0.4rem, inheriting charcoal/beige tokens
- **Modals**: 0.5rem radius, 95svh max height — full-screen on mobile
- **Toggles**: `4em` border-radius pill — iOS-style consent switches
- **Scrollbar**: Styled to secondary color family
- **Grid**: Gutter mapped to `--spacing-gutter`

## 5. Layout Principles

- **Spacing base**: `--unit-md: 20px`
- **Content zones**: Charcoal/beige contrast divides page into readable sections
- **Density**: Alternates between dense product listings and airy editorial moments

## 6. Depth & Elevation

- No explicit shadow tokens
- Elevation implied through color-field contrast (charcoal on beige)
- Modal overlay creates foreground/background layering on mobile via `95svh` height
- Flat component aesthetic — depth via surface color

## 7. Do's and Don'ts

**Do:**
- Build UI exclusively in the charcoal/beige/cream vocabulary
- Use the 20px modular unit as the base for all spacing
- Apply soft radius (0.4–0.5rem) consistently to interactive elements
- Respect the tactile, editorial feel

**Don't:**
- Introduce saturated accent colors
- Use angular (0px radius) buttons or cards
- Add heavy shadows — surface contrast does the elevation work

## 8. Responsive Behavior

- Modal: `95svh` — adapts to dynamic viewport height on mobile
- Single spacing unit scales layout proportionally
- Single-column mobile with grid-based product rows on desktop

## 9. Agent Prompt Guide

> "Design in the style of MindMarket: charcoal primary, beige secondary, tactile material palette, 0.4–0.5rem border radii, 20px modular spacing unit, system-ui typography, no saturated colors, editorial density alternating with whitespace."

**Quick reference:**
- Primary: `--color-charcoal` (dark near-black)
- Secondary: `--color-beige` (warm off-white)
- Accent border: `#e4eaed`
- Spacing base: 20px
- Border radius: 0.4–0.5rem

*Generated by Sparkbites — extracted from live CSS analysis*