# MindMarket — Style Reference > illustrated playground on warm cream **Theme:** light · **Source:** https://mindmarket.com · **Analyzed:** 2026-08-25 MindMarket's design system is a children's-book spread grown up into a research brand: warm cream paper (#f5f1e4) as the resting surface, a grass-green hero (#8ed462) that opens the story, and hand-drawn energy everywhere — illustrated characters, yellow doodle rings, and wavy lilac underlines that scribble over otherwise disciplined typography. The type system is radically simple: Inter, almost always weight 500, scaled from enormous friendly displays (~140px) down to compact body copy, all in a single near-black charcoal with a hint of green (#2c2e2a). Color never appears in text — it lives in illustration, accent squiggles, and section backgrounds that rotate through a crayon-box palette (sunshine yellow, coral, sky blue, lilac). Surfaces are soft and pillowy: the nav floats as a white rounded bar, photos get generous 50px corners, and buttons are pills. The system feels warm, human, and optimistic — playful shapes doing the branding while restrained monochrome type does the reading. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cream | `#f5f1e4` | `--color-cream` | Page canvas — the warm paper everything rests on | | Sand | `#e0dbce` | `--color-sand` | Secondary surfaces, cards on cream, hover fills | | Paper | `#ffffff` | `--color-paper` | Floating nav bar, elevated cards, CTA container | | Charcoal | `#2c2e2a` | `--color-charcoal` | All text, primary buttons, footer — the single ink | | Slate | `#5e6266` | `--color-slate` | Secondary text, cookie/legal copy | | Grass | `#8ed462` | `--color-grass` | Hero background, menu button — the brand's signature field | | Sunshine | `#f5e211` | `--color-sunshine` | Doodle rings, ribbon arcs, full-bleed footer background | | Coral | `#ff705d` | `--color-coral` | Accent stat cards (with white text), ribbon lettering, illustration accents | | Sky | `#2ba0ff` | `--color-sky` | Secondary CTA pill fills, links, illustration accents | | Lilac | `#ebc1ff` | `--color-lilac` | Wavy underline squiggles, soft accent surfaces | ## Tokens — Typography **Primary:** Inter — weight 500 for essentially everything (display through UI), 400 for long-form body. Fallback: `system-ui, sans-serif`. Tracking is aggressively tight at display sizes (-0.06em) and relaxes to normal at reading sizes. | Step | Size / Weight / Line | Tracking | |------|---------------------|----------| | display-xl | 140px · 500 · 0.95 | -0.06em | | display | 81px · 500 · 0.95 | -0.06em | | heading | 53px · 500 · 1.15 | -0.06em | | heading-sm | 40px · 500 · 1.2 | -0.06em | | subheading | 30px · 500 · 1.2 | -0.06em | | body-lg | 20px · 500 · 1.25 | -0.04em | | body | 18px · 500 · 1.5 | 0 | | body-ui | 17px · 500 · 1.5 | 0 (nav, buttons) | | body-sm | 15px · 500 · 1.25 | -0.04em | ## Tokens — Spacing & Shape | Purpose | Value | |---------|-------| | Density | Airy — hero statements get whole viewports; grid is 6 columns | | Base unit | 20px (`--unit-md`) | | Section gap | 120–160px between story beats | | Card padding | 24–40px | | Element gap | 12–20px | | Element | Radius | |---------|--------| | Small chips / inputs | `10px` | | Nav bar & cards | `20px` | | Photos & media | `50px` (or `50px 50px 0 0` when bleeding into next section) | | Buttons | `9999px` pill | | Avatars / icon buttons | `100%` circle | **Shadows** — almost none. One deep soft shadow (`0 10px 30px rgba(0,0,2,0.3)`) for modals; everything else separates by background color change, not elevation. ## Guidelines - Keep running text in charcoal (#2c2e2a); the only exceptions are white type on coral/charcoal accent cards and coral lettering riding a decorative ribbon arc - Use Inter 500 as the universal weight; drop to 400 only for multi-paragraph reading text - Track display type at -0.06em and let it sit on a sub-1.0 line-height — headlines should feel like solid blocks - Rotate section backgrounds through the crayon palette (grass, cream, sunshine, coral, sky, lilac) to pace the scroll like book pages - Decorate headlines with hand-drawn devices — wavy underlines, doodle rings — in one accent color at a time - Round photography generously (50px); when a full-bleed section meets the next, round its 50px corners like a page turn - Float the nav as a white pill bar detached from the page edge — it is furniture on the page, not a fixed frame - Separate surfaces with background-color changes instead of borders or shadows - Tag photo cards with small white pill chips sitting inside the image's top corner - End the page loud: full sunshine-yellow footer, giant charcoal display type, one grass-green wavy underline **Don't** - Do not use bold (600+) or make hierarchy with weight — size and space do all hierarchy work - Do not color text for emphasis — use a squiggle underline or an accent background instead - Do not use gray borders, dividers, or drop shadows between sections — this system has no hairlines - Do not use sharp or barely-rounded corners on media — 10px is the minimum radius anywhere - Do not mix multiple accent colors inside one decorative device — one squiggle, one color - Do not use photography without softening it — every image gets the 50px treatment or lives inside an illustrated frame