---
title: "MindMarket design system"
variant: extended
source: https://mindmarket.com/
captured_at: 2026-10-12
theme: light
industry: agency
generator: Design DNA (https://four.wiralomi.com/style/mindmarket-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# MindMarket · Design System

> Warm research storytelling, brought to life with bold colour.

**Theme:** light · **Industry:** agency · **Source:** https://mindmarket.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

MindMarket’s homepage pairs warm ivory and vivid green with oversized typography and lively, people-focused illustrations. Spacious editorial sections balance concise research messaging, proof points, and an image-led article feed.

## North star

Let warm open space and oversized human-centered storytelling lead, using vivid colour as a purposeful accent rather than decoration.

## Overview

The visual identity is built around a warm ivory canvas (#f5f1e4), dark charcoal typography (#2c2e2a), and a confident, fresh green (#8ed462) used for the opening visual and a prominent CTA band. White cards offer clean contrast; muted beige (#e0dbce) marks the article-feed section. Blue and coral punctuate selected stat cards, while brighter hues elsewhere belong mainly to the page’s expressive character illustrations rather than the core interface palette. Inter is used throughout: very large, tightly tracked headings create an editorial focal point, with compact, readable supporting copy. The layout is vertically expansive and mostly single-column, with staggered illustration-and-card moments, broad open areas, and rounded transitions. Human scenes and playful drawings make global research feel approachable; restrained card treatments keep the content legible without heavy shadows or borders.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Grounded Charcoal | `#2c2e2a` | `--color-grounded-charcoal` | brand | Primary headings, body copy, navigation, and dark text on pale surfaces. |
| Warm Ivory | `#f5f1e4` | `--color-warm-ivory` | brand | Main page canvas and the long, open background behind editorial content and illustrations. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Navigation and quote controls, article cards, and inset text panels. |
| Fresh Meadow | `#8ed462` | `--color-fresh-meadow` | accent | Vivid hero field, CTA section band, and one contrasting proof-point card. |
| Soft Pebble | `#e0dbce` | `--color-soft-pebble` | surface | Muted beige background band behind the featured-article feed. |
| Signal Blue | `#2ba0ff` | `--color-signal-blue` | accent | Blue stat-card emphasis and occasional interface or illustration details. |
| True Black | `#000000` | `--color-true-black` | semantic | Isolated measured CTA text; use sparingly, since charcoal defines the broader text system. |
| Coral Pop | `#ff705d` | `--color-coral-pop` | accent | Coral proof-point card and select illustration details, not a dominant section colour. |

### Semantic aliases

`--color-canvas` → `#f5f1e4` (Warm Ivory) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#e0dbce` (Soft Pebble) · `--color-text` → `#2c2e2a` (Grounded Charcoal) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-accent` → `#8ed462` (Fresh Meadow) · `--color-accent-2` → `#2ba0ff` (Signal Blue) · `--color-accent-3` → `#ff705d` (Coral Pop)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2c2e2a` | `#f5f1e4` | 12.14:1 | AAA |
| `#2c2e2a` | `#ffffff` | 13.71:1 | AAA |
| `#2c2e2a` | `#e0dbce` | 9.92:1 | AAA |
| `#ffffff` | `#f5f1e4` | 1.13:1 | fail |
| `#ffffff` | `#e0dbce` | 1.38:1 | fail |
| `#8ed462` | `#f5f1e4` | 1.58:1 | fail |
| `#8ed462` | `#ffffff` | 1.79:1 | fail |
| `#8ed462` | `#e0dbce` | 1.29:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 500, 400 | Site-wide headings, navigation, body copy, cards, badges, and controls. | Inter |

- **Inter:** Measured weights are 400 and 500. Headlines use tight negative tracking and compact leading; sentence case predominates.

### Type scale — Perfect Fifth (ratio ≈ 1.484, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 144px | 400 | 0.95 | -0.06em | — | Inter | Oversized hero headline and expressive display moments. |
| h1 | 139.5px | 500 | 0.95 | -0.06em | — | Inter | Primary page headline in the opening hero. |
| h2 | 81px | 500 | 0.95 | -0.06em | — | Inter | Major section titles, including the statistics introduction. |
| h3 | 40.5px | 500 | 1.2 | -0.06em | — | Inter | Feature-card and article titles. |
| h4 | 30px | 500 | 1.2 | -0.06em | — | Inter | Secondary card headings and supporting feature labels. |
| body | 20px | 500 | 1.25 | -0.04em | — | Inter | Introductory copy, service explanations, and CTA text. |
| caption | 17px | 500 | 1.5 | 0 | — | Inter | Small card descriptions, metadata, and image captions. |
| nav | 18px | 500 | 1.25 | -0.04em | — | Inter | Header navigation links and compact menu labels. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 6, 9, 11, 13, 17, 20, 26, 27, 34, 51, 53, 85, 170 px.
- Section rhythm 170px · element gap 9px · card padding 34px · max content width 1223px.

The page uses a spacious, vertically unfolding composition, with a measured maximum content width of 1223px. Most sections read as a single column, while the statistics and article areas introduce two-column arrangements. Hero and feature storytelling rely on asymmetry: illustrations overlap the flow, and white copy cards appear among large open ivory areas. Section rhythm is generous, with measured section gaps of 170px. Keep text aligned to clear content edges and avoid compressing the long illustrated narrative.

## Shape & elevation

- Radius: button `10px` · card `50px` · badge `9999px` · nav `9999px` · xs `10px` · sm `20px` · md `50px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s cubic-bezier(0.17, 0.67, 0.3, 1.33)` on interactive elements.

The interface is mostly flat: measured shadow styles are absent, and strong colour fields, whitespace, and rounded silhouettes create hierarchy. White cards sit directly on the ivory or beige canvas without prominent outlines. Layering comes from artwork overlapping sections and cards, while the CTA and navigation controls remain clean, simple shapes.

## Imagery

Large, colourful character illustrations animate the hero and extended feature narrative, often crossing section edges or overlapping white text cards. A human lifestyle photograph provides a grounded moment before the statistics section. Article cards use photographic research and interview scenes. Keep illustration colours lively and varied; those hues are largely artwork, not new interface colours.

## Components

### Pill navigation

White header surface with compact Inter links and rounded navigation treatments; the menu and quote action sit apart from the main content.

### Quote action

A compact, rounded white CTA with dark text and a small coloured circular arrow accent.

### Illustrated feature cards

White rounded text panels are interspersed with large character art and short service explanations.

### Green CTA band

A broad #8ed462 section centers a prominent invitation and quote action, with brief supporting benefit labels.

### Proof-point cards

Large rounded metric cards use white, green, blue text, and coral treatments to distinguish figures and explanations.

### Featured article cards

A #e0dbce feed presents research photography, white category badges, and dark editorial headlines in an asymmetric two-column arrangement.

### Measured component styles

- **Primary button** (“Get a quote”): transparent background · text #000000 · border 1px solid · radius 10px · padding 10.6px · 500 18.0625px Inter
- **Link** (“Read more about The Complete Guide to In”): transparent background · text #2c2e2a · radius 0px · padding 0px · 500 17px Inter
- **Card** (“60+ Our network spans over 60 countries,”): background #ffffff · text #2ba0ff · radius 50px · padding 34px · 500 17px Inter
- **Badge** (“Worldwide”): background #ffffff · text #2c2e2a · radius 25.5px · padding 6.4px 10.6px · 500 14.875px Inter
- **Navigation item** (“Home Services Methodology Sectors Strate”): transparent background · text #2c2e2a · radius 0px · padding 0px · 500 17px Inter

## Do

- Use Warm Ivory as the dominant page canvas.
- Set primary text in Grounded Charcoal.
- Reserve Fresh Meadow for prominent fields and calls to action.
- Use large, tightly tracked Inter headings for hierarchy.
- Give illustrations room to overlap cards and section boundaries.
- Keep supporting copy concise and readable.

## Don't

- Do not turn illustration colours into a competing interface palette.
- Do not add heavy shadows or dense borders to cards.
- Do not compress the page into a tight dashboard grid.
- Do not use generic stock imagery in place of human-centered scenes.
- Do not make every section a bright colour band.
- Do not use all-caps as the default heading style.

## Agent prompt

Create a new MindMarket-style page for a global qualitative research agency. Use Warm Ivory (#f5f1e4) as the main canvas, Grounded Charcoal (#2c2e2a) for most text, and Fresh Meadow (#8ed462) for a striking hero or CTA field. Set all typography in Inter, using large, tightly tracked headlines and clear, compact supporting copy. Build a spacious editorial flow with generous section breaks, asymmetrical content, rounded white cards, and human-centered illustrations that may overlap section edges. Use Soft Pebble (#e0dbce) for a quieter content band, and reserve Signal Blue (#2ba0ff) and Coral Pop (#ff705d) for selective emphasis. Keep the interface mostly flat, with no heavy shadows, and make each section feel readable, warm, and distinctly illustrated rather than dashboard-like.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Green hero with centered oversized headline, header navigation, and overlapping character illustration. | primary quote action, top-level navigation | green color field, oversized Inter headline, illustration overlap, pill controls |
| 2 | feature-split | Ivory narrative area with staggered white service cards and illustrations across a long vertical flow. | service discovery links, scannable explanations | warm ivory canvas, white rounded cards, oversized character artwork |
| 3 | feature-grid | Continued ivory feature narrative, with distributed white cards and full-width illustrated scenes. | methodology and network discovery, feature-by-feature storytelling | asymmetric placement, illustration-led transitions, rounded white copy panels |
| 4 | cta | Full-width green section with centered invitation, quote CTA, and supporting benefit labels. | quote conversion action, service benefit reassurance | #8ed462 section band, centered headline, rounded white CTA |
| 5 | video | Wide lifestyle image spanning the content area between the CTA and statistics sections. | visual brand storytelling | human-centered photography, wide image treatment, graphic overlay |
| 6 | stats | Ivory two-column statistics section with an introduction and staggered large metric cards. | proof-point scanning, metric-led credibility | rounded stat cards, selective blue and coral accents, large figures |
| 7 | content-feed | Muted beige two-column editorial feed with varied photographic article cards. | article discovery, category browsing, read-more links | #e0dbce background, white pill badges, asymmetric image cards |

## Source CSS custom properties (selected)

```css
--cc-modal-border-radius: .5rem;
--cc-btn-border-radius: .4rem;
--cc-modal-transition-duration: .25s;
--cc-link-color: #2c2e2a;
--cc-bg: #f5f1e4;
--cc-primary-color: #2c2f31;
--cc-secondary-color: #5e6266;
--cc-btn-primary-bg: #2c2e2a;
--cc-btn-primary-color: #fff;
--cc-btn-primary-border-color: #2c2e2a;
--cc-btn-primary-hover-bg: #000;
--cc-btn-primary-hover-color: #fff;
--cc-btn-primary-hover-border-color: #000;
--cc-btn-secondary-bg: #e0dbce;
--cc-btn-secondary-color: #2c2f31;
--cc-btn-secondary-border-color: #e0dbce;
--cc-btn-secondary-hover-bg: #c2bcad;
--cc-btn-secondary-hover-color: #000;
--cc-btn-secondary-hover-border-color: #c2bcad;
--cc-separator-border-color: #f0f4f7;
--cc-toggle-on-bg: #2c2e2a;
--cc-toggle-off-bg: color-mix(in oklab,#2c2e2a/**/50%,transparent);
--cc-toggle-on-knob-bg: #fff;
--cc-toggle-off-knob-bg: #fff;
--cc-toggle-enabled-icon-color: #f5f1e4;
--cc-toggle-disabled-icon-color: #f5f1e4;
--cc-toggle-readonly-bg: #c2bcad;
--cc-toggle-readonly-knob-bg: #fff;
--cc-toggle-readonly-knob-icon-color: #c2bcad;
--cc-section-category-border: #e0dbce;
--cc-cookie-category-block-bg: #e0dbce;
--cc-cookie-category-block-border: #e0dbce;
--cc-cookie-category-block-hover-bg: color-mix(in oklab,#f5f1e4/**/25%,transparent);
--cc-cookie-category-block-hover-border: #c2bcad;
--cc-cookie-category-expanded-block-bg: transparent;
--cc-cookie-category-expanded-block-hover-bg: #c2bcad;
--cc-overlay-bg: #000000a6;
--cc-webkit-scrollbar-bg: #e0dbce;
--cc-webkit-scrollbar-hover-bg: #000;
--cc-footer-bg: #e0dbce;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/mindmarket-com