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

# mishmash · Design System

> Playful stationery, framed with calm clarity

**Theme:** light · **Industry:** ecommerce · **Source:** https://mishmash.pt/ · **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._

A restrained, light canvas lets colourful stationery photography lead the page. Compact shopping controls and generous editorial pauses make the store feel approachable without diluting its product focus.

## North star

Keep the interface quiet and legible so vivid, real product photography supplies the personality.

## Overview

The visual system pairs a pale grey canvas with near-black typography and a small set of warm, muted card surfaces. Product photography supplies the vivid colour: planners, notebooks, pens and accessories sit in bright, tactile scenes, while the interface itself stays quiet. Circular is the defining typeface, used in clear medium-to-semibold weights with natural case and compact line spacing; headings are confident but not decorative. The homepage moves from a slim black promotion strip and understated navigation into a broad rounded hero image, then a row of category cards, editorial copy, social content and product-led sections. Consistent alignment and generous pauses separate dense shopping information from imagery. Cards are mostly flat, with rounded corners and little or no shadow; fine grey borders distinguish secondary controls. Black pill-like CTAs provide the strongest interface contrast, leaving colourful merchandise to carry the energy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Mist | `#f2f2f2` | `--color-gallery-mist` | brand | Main page canvas and occasional muted text; gives the store its soft, light foundation. |
| Soft Ink | `#171717` | `--color-soft-ink` | brand | Primary text, navigation, dark announcement band, and high-contrast shopping buttons. |
| Quiet Rule | `#e3e3e3` | `--color-quiet-rule` | neutral | Fine borders around secondary controls and subtle separators. |
| Stone Grey | `#858585` | `--color-stone-grey` | neutral | Muted supporting copy and low-emphasis text. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Product cards, review panels, and clean content surfaces. |
| Warm Pulp | `#dfded6` | `--color-warm-pulp` | surface | Soft neutral product-card background, supporting merchandise photography. |
| Graphite | `#595959` | `--color-graphite` | neutral | Occasional secondary text, link, or control detail. |
| Vanilla Stock | `#f4debb` | `--color-vanilla-stock` | surface | Warm promotional card surface; complements stationery imagery rather than acting as a core interface accent. |
| Muted Khaki | `#867b69` | `--color-muted-khaki` | semantic | Low-frequency text tone; subdued supporting detail, not a primary brand colour. |
| Silver Type | `#a1a1a1` | `--color-silver-type` | neutral | Occasional subdued footer or heading text. |
| Oat Stitch | `#d6c3a4` | `--color-oat-stitch` | semantic | Sparse border detail; a measured supporting tone rather than a prominent page colour. |

### Semantic aliases

`--color-canvas` → `#f2f2f2` (Gallery Mist) · `--color-surface` → `#ffffff` (Paper White) · `--color-surface-2` → `#dfded6` (Warm Pulp) · `--color-surface-3` → `#f4debb` (Vanilla Stock) · `--color-surface-4` → `#171717` (Soft Ink) · `--color-text` → `#171717` (Soft Ink) · `--color-text-muted` → `#858585` (Stone Grey) · `--color-text-subtle` → `#f2f2f2` (Gallery Mist) · `--color-border` → `#e3e3e3` (Quiet Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#171717` | `#f2f2f2` | 16.01:1 | AAA |
| `#171717` | `#ffffff` | 17.93:1 | AAA |
| `#171717` | `#dfded6` | 13.28:1 | AAA |
| `#171717` | `#f4debb` | 13.67:1 | AAA |
| `#858585` | `#f2f2f2` | 3.3:1 | AA-large |
| `#858585` | `#ffffff` | 3.69:1 | AA-large |
| `#858585` | `#dfded6` | 2.73:1 | fail |
| `#858585` | `#f4debb` | 2.81:1 | fail |
| `#f2f2f2` | `#ffffff` | 1.12:1 | fail |
| `#f2f2f2` | `#dfded6` | 1.21:1 | fail |

### Gradients

- `linear-gradient(to left, rgb(227, 227, 227), rgba(227, 227, 227, 0.2))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Circular | `--font-body` | webfont | 600, 500 | Primary interface and content typeface across headings, body copy, navigation, buttons, and commerce cards. | DM Sans |
| -apple-system | `--font-apple-system` | system | 700 | Small utility or consent-interface text; a minor system-font exception. | Inter |

- **Circular:** Measured weights are 500 and 600; use natural case, clean rounded forms, and compact, readable line spacing.
- **-apple-system:** Measured at 700 for utility links; keep its use limited and avoid introducing a competing typographic voice.

### Type scale — Perfect Fourth (ratio ≈ 1.362, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 45.5px | 500 | 1.04 | 0 | — | Circular | Primary hero or lead statement, set prominently in Circular. |
| h2 | 37.5px | 600 | 1.2 | 0 | — | Circular | Major section headings, including product and editorial introductions. |
| h3 | 29.5px | 600 | 1.2 | 0 | — | Circular | Subsection titles and secondary content headings. |
| body | 18px | 500 | 1.12 | 0 | — | Circular | Product descriptions, supporting copy, and editorial text. |
| caption | 16px | 600 | 1.2 | 0 | — | Circular | Compact labels and secondary card or media information. |
| button | 18px | 600 | 1.12 | 0 | — | Circular | Shopping calls to action and product controls. |
| link | 16px | 700 | 1 | 0 | — | -apple-system | Small utility or footer links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 12, 14, 16, 20, 24, 48 px.
- Section rhythm 48px · element gap 8px · card padding 20px · max content width —.

The page uses a wide desktop composition with content aligned to consistent outer margins; no measured maximum width is available. A shallow announcement strip and centered-brand navigation precede a nearly full-width hero. Below, three category cards form a row, followed by full-width editorial content and horizontally arranged social and product modules. Sections breathe between content clusters, while product details and review cards use denser internal layouts. The overall rhythm alternates broad imagery with compact shopping information.

## Shape & elevation

- Radius: button `12px` · card `16px` · nav `4px` · link `12px` · xs `4px` · sm `8px` · md `12px` · lg `16px` · pill `9999px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0.15) 0px 0px 0px 1px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, with cards differentiated through white or softly tinted surfaces rather than pronounced shadows. Rounded corners soften the hero, category panels, and product imagery. Secondary controls use delicate grey hairlines; the measured button shadow is only a subtle one-pixel outline. Dark buttons sit clearly above the light canvas through contrast, not heavy elevation.

## Imagery

Photography is the dominant visual asset: stationery appears in use, arranged on desks, held in hands, or presented in colourful product groupings. The hero crops close around a planner and surrounding pages, while category and product cards keep merchandise immediately recognizable. Social content includes portrait video and candid user-created scenes. Interface surfaces remain understated so the real product colours and textures stand out.

## Components

### Announcement strip

A narrow near-black band with compact light promotional messages separated inline above the main navigation.

### Centered-brand navigation

Shop and Search sit to the left, the wordmark is centered, and simple account, bag, and favourite icons align on the right.

### Hero campaign

A wide, rounded product photograph anchors the first viewport, with a compact black Shop now button placed over its lower-left corner.

### Category cards

Three side-by-side image-led panels mix brief product/category copy with dark rounded shopping buttons and soft tinted surfaces.

### Product card

A clean merchandise image and concise name and price are paired with a small Add control; secondary controls use a light hairline.

### Review panels

White, flat cards arrange star ratings, compact customer quotes, names, and dates in a horizontally browsable row.

### Measured component styles

- **Primary button** (“Shop now”): background #171717 · text #f2f2f2 · border 1px solid · radius 12px · padding 14px 20px · 600 16px Circular
- **Secondary button** (“Add”): transparent background · text #171717 · border 1px solid #e3e3e3 · radius 8px · padding 8px 14px · 400 16px Circular
- **Link** (“Shop notebooks”): transparent background · text #171717 · radius 0px · padding 0px · 400 16px Circular
- **Input**: transparent background · text #171717 · radius 0px · padding 14px 16px · 500 16px Circular
- **Card** (“2027 Planner From €28.00 Add”): background #ffffff · text #171717 · radius 0px · padding 20px · 400 16px Circular
- **Navigation item** (“Shop Search”): transparent background · text #171717 · radius 0px · padding 0px · 600 18px Circular

## Do

- Use #f2f2f2 as the calm page canvas.
- Let vivid stationery photography provide the strongest colour.
- Set primary copy in Circular or a close rounded sans-serif.
- Use #171717 for high-contrast shopping calls to action.
- Separate content with generous, consistent whitespace.
- Keep cards flat and use soft rounded corners.

## Don't

- Do not introduce saturated interface colours absent from the measured palette.
- Do not add heavy shadows or layered effects.
- Do not use decorative display fonts or all-caps styling throughout.
- Do not crowd the hero with competing text or controls.
- Do not make product cards visually louder than their photography.
- Do not invent unmeasured dimensions, spacing, or corner radii.

## Agent prompt

Build a new stationery-commerce page in the mishmash visual style. Use Gallery Mist (#f2f2f2) as the light canvas, Soft Ink (#171717) for typography and primary CTAs, Paper White (#ffffff) for clean cards, and restrained Warm Pulp (#dfded6) or Vanilla Stock (#f4debb) for occasional tinted surfaces. Use Circular, or a close rounded sans-serif substitute, with clear medium-to-semibold headings and compact readable copy. Arrange a simple header, broad image-led feature, and orderly product or editorial modules with consistent alignment and comfortable whitespace. Keep merchandise photography natural, colourful, and tactile; do not add decorative UI colour to compete with it. Favor flat surfaces, soft rounded corners, fine Quiet Rule (#e3e3e3) borders, and compact dark shopping buttons. Preserve a calm, product-first hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | A full-width light canvas begins with a slim announcement bar and centered-brand navigation above a broad image-led hero. | Promotional announcement, Persistent shopping navigation, Direct hero CTA | Dark announcement strip, Centered wordmark, Rounded full-width hero image, Dark overlay button |

## Source CSS custom properties (selected)

```css
--color-background: 0 0% 95%;
--color-card: 0 0% 100%;
--color-smooth: 0 0% 93%;
--color-offset: 0 0% 91%;
--color-countdown: 0 0% 99%;
--color-primary: 0 0% 9%;
--color-secondary: 0 0% 52%;
--color-tertiary: 0 0% 63%;
--color-accent-foreground: 0 0% 9%;
--color-subtle: 0 0% 89%;
```

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