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

# Misuko · Design System

> Warm minimalism for thoughtfully made drinks

**Theme:** light · **Industry:** food-beverage · **Source:** https://misuko.be/ · **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._

Misuko’s homepage pairs a restrained cream-and-ink palette with warm product photography to present its beverage production services. Editorial typography, open split layouts, and fine dividers keep the long page calm and easy to scan.

## North star

Keep the interface quiet and editorial: warm cream space, precise black type, fine dividers, and product photography as the main color.

## Overview

The page is built around a warm, low-contrast foundation: pale cream canvas and near-white sections carry most of the experience, with black text providing crisp hierarchy. A slightly deeper gray-beige band distinguishes testimonials, while thin gray borders mark form fields and section boundaries rather than creating heavy cards. Beausite sans-serif is used consistently, with regular-weight headings, compact body copy, and restrained negative tracking on large titles. The hero pairs a left-aligned text block and outlined contact button with a large photograph of branded cartons; later split sections alternate product imagery and copy. Service steps form a three-column editorial row, and customer stories and articles introduce quieter shifts in background and image density. Generous breathing room and a measured section rhythm give the long page a composed, tactile feel. Brown cartons and green product scenes are photographic content, not interface palette colors.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#000000` | `--color-soft-ink` | neutral | Primary text for navigation, headings, body copy, links, and outlined CTA labels. |
| Linen Canvas | `#f2efe3` | `--color-linen-canvas` | surface | Measured page canvas and card background; supports the warm, restrained foundation. |
| Cream Paper | `#fcf9ee` | `--color-cream-paper` | surface | Dominant section background across the hero, service content, articles, and footer. |
| Quiet Graphite | `#bcbab2` | `--color-quiet-graphite` | semantic | Fine borders on fields and subtle section and footer rules. |
| Oat Stone | `#eae7dd` | `--color-oat-stone` | surface | Contrasting testimonial band and pale button fill, including the skip-link control. |
| Ash Taupe | `#6a6965` | `--color-ash-taupe` | neutral | Muted interface detail, including the contact button outline and occasional secondary text. |

### Semantic aliases

`--color-canvas` → `#f2efe3` (Linen Canvas) · `--color-surface` → `#fcf9ee` (Cream Paper) · `--color-surface-2` → `#eae7dd` (Oat Stone) · `--color-text` → `#000000` (Soft Ink) · `--color-border` → `#bcbab2` (Quiet Graphite)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f2efe3` | 18.23:1 | AAA |
| `#000000` | `#fcf9ee` | 19.92:1 | AAA |
| `#000000` | `#eae7dd` | 16.97:1 | AAA |

### Gradients

- `linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| beausite | `--font-body` | webfont | 400, 500 | Site-wide typeface for headings, body copy, navigation, buttons, and links. | Manrope |

- **beausite:** Regular-weight editorial headings; 500-weight controls and links. Large headings use subtle negative tracking; casing remains natural.

### Type scale — Perfect Fifth (ratio ≈ 1.508, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 1.08 | -0.024em | — | beausite | Hero headline, set large and broken into short lines. |
| h2 | 34px | 400 | 1.12 | -0.022em | — | beausite | Major section headings and feature-split titles. |
| h3 | 21px | 400 | 1.29 | 0 | — | beausite | Service-step titles and smaller content headings. |
| body | 14px | 400 | 1.36 | 0 | — | beausite | Descriptions, service details, article summaries, and testimonials. |
| button | 14px | 500 | 1.36 | 0 | — | beausite | Contact CTA, form actions, and other controls. |
| nav | 14px | 400 | 1.79 | 0 | — | beausite | Primary navigation and footer navigation labels. |
| link | 14px | 500 | 1.36 | 0 | — | beausite | Inline actions, article links, and section-level calls to action. |

OpenType features in use: `"ss02", "ss04", "ss05"`.

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 9, 11, 15, 17, 18, 20, 21, 25, 26, 27, 34, 36, 40, 58, 61 px.
- Section rhythm 34px · element gap — · card padding — · max content width 980px.

Use a centered content framework capped at the measured 980px page width, with broad two-column hero and feature splits and a three-column advisory section. Keep headings and copy left-aligned; avoid centered marketing blocks except where testimonial treatment calls for it. The long page alternates open cream sections with occasional pale bands, separated by fine rules. Measured spacing uses a 1px base and a comfortable rhythm, with a 34px section gap; reproduce the generous visual breathing room without adding unmeasured dimensions.

## Shape & elevation

- Radius: button `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.12s ease-in-out` on interactive elements.

The measured interface is predominantly flat, with no shadow system. Separate content through background changes and thin gray hairlines rather than floating cards. The CTA is an outlined pill with a restrained border; product and article imagery sit directly within the page grid, without conspicuous framing.

## Imagery

Photography leads the visual storytelling: branded cartons dominate the hero, with further product and production images paired against service copy. Use large, cleanly framed photos in split layouts and let their natural kraft-brown, green, and citrus tones provide color. Article cards use image-led previews. The small software feature graphics are supporting content, not a reason to add interface gradients or new brand colors.

## Components

### Site navigation

A slim header with the Misuko wordmark, left-side story and business links, and language, login, and cart controls aligned opposite.

### Hero split

Left-aligned headline, compact service introduction, and outlined contact pill sit beside a large branded-carton photograph.

### Service steps

An introductory heading precedes three editorial columns with numbered titles, explanatory copy, lists, and pricing details.

### Feature split

Alternating image-and-copy rows present service benefits and software features; keep text and image blocks visually open.

### Testimonial band

A full-width oat-gray section centers a customer quote and attribution, with discreet pagination indicators.

### Article feed

A story heading and view-all link lead into a horizontally arranged, image-led article collection with compact summaries.

### Newsletter footer

A simple email subscription form sits alongside grouped support, company, and social links, followed by a fine legal footer rule.

### Measured component styles

- **Primary button** (“Skip to main content”): background #eae7dd · text #000000 · radius 0px · padding 20px · 500 14px beausite
- **Secondary button** (“Let's get in touch”): transparent background · text #000000 · border 1px solid #6a6965 · radius 20px · padding 0px 30px · 500 14px beausite
- **Link** (“Exploring Grapify”): transparent background · text #000000 · radius 0px · padding 0px · 500 14px beausite
- **Input**: transparent background · text #000000 · border 1px solid #bcbab2 · radius 0px · padding 9px 100px 9px 17px · 400 14px beausite
- **Card**: background #f2efe3 · text #000000 · radius 0px · padding 0px · 400 14px beausite
- **Navigation item** (“Our story”): transparent background · text #000000 · radius 0px · padding 0px · 500 14px beausite

## Do

- Use Cream Paper #fcf9ee as the dominant section background.
- Keep text and navigation in Soft Ink #000000.
- Use Beausite or a close clean sans-serif throughout.
- Build open split sections around real product photography.
- Separate sections with fine Quiet Graphite #bcbab2 rules.
- Reserve Oat Stone #eae7dd for restrained background variation.

## Don't

- Do not add bright interface accent colors absent from the measured palette.
- Do not treat carton brown or image greens as UI brand colors.
- Do not add decorative shadows or layered floating cards.
- Do not center every heading or paragraph.
- Do not make the page feel dense with heavy borders or tight spacing.
- Do not use uppercase display typography or exaggerated type weights.

## Agent prompt

Build a new Misuko page using the site's warm, editorial visual system. Use Cream Paper #fcf9ee as the primary background, Linen Canvas #f2efe3 where a subtly distinct surface is needed, and Soft Ink #000000 for all primary text. Use Oat Stone #eae7dd sparingly for a testimonial-style band; use Quiet Graphite #bcbab2 for fine dividers and Ash Taupe #6a6965 for understated outlines. Set a clean sans-serif close to Beausite, with natural casing, regular-weight headlines, and modestly heavier controls. Favor left-aligned copy, open two-column image-and-text sections, and carefully spaced content. Let authentic beverage and packaging photography provide the richer colors. Keep components flat, avoid shadows and invented accent colors, and use thin rules rather than boxed treatments to organize the page.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Split hero with left-aligned copy and CTA beside a large product photograph. | Primary contact action, Service summary | Slim navigation, Outlined pill CTA, Cream background |
| 2 | how-it-works | Section heading followed by three equal advisory columns. | Numbered steps, Service and pricing details | Editorial columns, Fine vertical dividers, Left-aligned copy |
| 3 | feature-split | Two-column text and software-feature imagery. | Problem framing, Related product link | Split composition, Compact text block, Feature cards in imagery |
| 4 | feature-split | Software visuals and explanatory copy share a two-column row. | Feature overview, Book-a-demo action | Split layout, Product interface imagery, Inline CTA |
| 5 | feature-split | Alternating text-and-product-photo split row. | Custom-brand proposition, Contact link | Large product photo, Open text area, Cream surface |
| 6 | feature-split | Product photograph and copy alternate sides in a split row. | Reassurance, Next-step link | Citrus product image, Plain text column, Minimal decoration |
| 7 | testimonials | Full-width pale band with centered attribution and quote. | Customer proof, Carousel pagination | Oat-gray background, Centered quote, Small indicators |
| 8 | content-feed | Section heading and view-all link above a multi-column article feed. | Browse articles, View-all navigation | Image-led cards, Compact summaries, Editorial grid |
| 9 | footer | Three-column footer with newsletter at left and grouped navigation beside it. | Email subscription, Support and social navigation | Simple input fields, Fine legal divider, Compact link groups |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--banner-text-width: 600px;
```

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