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

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