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

# Maneken · Design System

> A crisp, spacious canvas for mockup storytelling

**Theme:** light · **Industry:** design · **Source:** https://maneken.app/ · **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._

Maneken pairs oversized editorial typography and open white space with vivid mockup photography to make its browser-based editor the focus. Alternating pale sections and a deep ink feature band create rhythm, while restrained blue CTAs provide clear points of action.

## North star

Keep the interface quiet and spacious so oversized typography, real mockup imagery, and blue action buttons carry the story.

## Overview

The page uses a mostly white canvas with a restrained palette: black typography, pale-gray section bands, and a single vivid blue for primary actions. A deep ink panel gives the feature story a strong visual pause; its white copy contrasts sharply against the dark surface. Large, centered TWKEverett headings establish an editorial voice, while Inter keeps navigation, body copy, and buttons compact and functional. The hero is deliberately sparse: headline, muted subheading, CTA, then a large product-editor visual. Below, broad section bands contain centered introductions and image-led demonstrations. Rounded media frames and cards soften the otherwise crisp geometry. Real mockup examples carry much of the color and texture, so surrounding interface chrome stays quiet. Generous vertical gaps separate distinct stories, with consistent alignment and restrained borders preserving a clean, product-first presentation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas and text color on the deep ink feature section and blue CTA buttons. |
| Deep Ink | `#10151c` | `--color-deep-ink` | surface | Dark feature-story band and editor-card surface; use white text for contrast. |
| Soft Mist | `#f4f4f4` | `--color-soft-mist` | surface | Alternating pale section backgrounds behind demonstrations, creator imagery, and FAQ content. |
| Action Blue | `#0050b7` | `--color-action-blue` | accent | Primary signup and start buttons; concentrated on actions rather than large background areas. |
| Quiet Line | `#e6e6e6` | `--color-quiet-line` | neutral | Subtle hairlines and borders separating interface elements without competing with imagery. |
| Headline Black | `#000000` | `--color-headline-black` | semantic | Navigation, major headings, and primary copy on white and pale-gray sections. |
| Muted Graphite | `#86868b` | `--color-muted-graphite` | neutral | Secondary copy such as hero subheading and supporting descriptions. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f4f4f4` (Soft Mist) · `--color-surface-2` → `#10151c` (Deep Ink) · `--color-text` → `#000000` (Headline Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#10151c` (Deep Ink) · `--color-border` → `#e6e6e6` (Quiet Line) · `--color-accent` → `#0050b7` (Action Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f4f4f4` | 19.09:1 | AAA |
| `#000000` | `#10151c` | 1.15:1 | fail |
| `#ffffff` | `#f4f4f4` | 1.1:1 | fail |
| `#ffffff` | `#10151c` | 18.32:1 | AAA |
| `#10151c` | `#ffffff` | 18.32:1 | AAA |
| `#10151c` | `#f4f4f4` | 16.66:1 | AAA |
| `#0050b7` | `#ffffff` | 7.42:1 | AAA |
| `#0050b7` | `#f4f4f4` | 6.74:1 | AA |
| `#0050b7` | `#10151c` | 2.47:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TWKEverett | `--font-display` | webfont | 400, 500 | Display and heading typography for the hero and section titles. | Manrope |
| Inter | `--font-body` | webfont | 500, 600 | Navigation, body copy, buttons, and compact interface labels. | Inter |

- **TWKEverett:** Medium weight for oversized headings; sentence case, clean forms, and no measured tracking adjustment.
- **Inter:** Medium weight dominates functional text; use compact, clear labels and avoid decorative uppercase styling.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 110px | 500 | 1 | 0 | — | TWKEverett | Oversized hero display treatment, if used beyond the main heading. |
| h1 | 77px | 500 | 1 | 0 | — | TWKEverett | Main centered hero headline. |
| h2 | 60px | 500 | 1.2 | 0 | — | TWKEverett | Large centered section headlines. |
| h3 | 55px | 500 | 1.2 | 0 | — | TWKEverett | Feature and subsection headlines. |
| h4 | 28px | 400 | 1.2 | 0 | — | TWKEverett | Smaller supporting headings within feature content. |
| body | 14px | 500 | 1 | 0 | — | Inter | Supporting descriptions and explanatory copy. |
| button | 15px | 500 | 1 | 0 | — | Inter | Primary CTA labels and action text. |
| nav | 15px | 500 | 1.25 | 0 | — | Inter | Header navigation links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 3, 4, 6, 8, 10, 20, 22, 24, 30, 40, 45, 50, 55, 80, 140 px.
- Section rhythm 80px · element gap 6px · card padding — · max content width 1240px.

A wide, centered page uses a measured maximum content width of 1240px, with the hero aligned centrally and product visuals given generous room. Sections alternate between white, pale gray, and a single dark feature band. Large vertical gaps create a deliberate scroll rhythm; within sections, centered titles lead into image-led grids or alternating text-and-media layouts. The creator showcase uses a dense multi-column image arrangement, contrasting with the open hero and feature storytelling. Keep functional text and navigation compact against the oversized display typography.

## Shape & elevation

- Radius: button `10px` · card `8px` · media `10px` · nav `14px` · xs `3px` · sm `4px` · md `5px` · lg `10px` · xl `12px` · 2xl `15px`
- Shadow `xl` (media): `rgba(0, 0, 0, 0.01) 0px 90px 40px 0px, rgba(0, 0, 0, 0.05) 0px 50px 30px 0px, rgba(0, 0, 0, 0.09) 0px 20px 20px 0px, rgba(0, 0, 0, 0.1) 0px 6px 10px 0px`
- Shadow `xl-2` (card): `rgba(0, 0, 0, 0.01) 0px 550px 220px 0px, rgba(0, 0, 0, 0.05) 0px 310px 190px 0px, rgba(0, 0, 0, 0.09) 0px 140px 140px 0px, rgba(0, 0, 0, 0.1) 0px 35px 75px 0px, rgba(0, 0, 0, 0.1) 0px 0px 0px 0px`
- Motion: standard transition `0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)` on interactive elements.

The overall interface is mostly flat, with pale section backgrounds and subtle hairlines doing the structural work. Media and mockup cards sit above their surroundings through pronounced, soft shadows, especially in showcase moments. Use rounded frames to distinguish imagery, but avoid adding heavy borders or shadows to ordinary text sections.

## Imagery

Use authentic mockup-editor screenshots, product demonstrations, and creator work as the page’s main visual content. Frame media in softly rounded rectangles with natural photographic color and minimal overlays. Favor large, clear examples over decorative illustration; creator and catalog sections can use dense image grids, while feature sections pair a single strong image with concise copy. The editor itself may contain vivid interface colors that belong to the product imagery, not the site palette.

## Components

### Primary CTA

Blue #0050b7 button with white Inter medium text and a 10px radius; use for signup, start, and catalog actions.

### Header navigation

Compact black Inter links centered in a light header, balanced by the wordmark and login/signup actions.

### Hero

Centered oversized TWKEverett headline, muted supporting line, blue CTA, and a large editor visual below.

### Pale showcase section

A #f4f4f4 band with a centered heading and product imagery arranged in a clean grid or split composition.

### Dark feature band

Deep #10151c background with white headings and supporting copy, alternating text and media across feature stories.

### Media card

Rounded image or editor frame, typically with a soft, layered shadow and no prominent outline.

### Creator gallery

A pale section presenting creator mockups as a dense multi-column image grid beneath a centered introduction.

### Measured component styles

- **Primary button** (“Start for Free”): background #0050b7 · text #ffffff · radius 10px · padding 0px 40px · 500 15px Inter
- **Card** (“Insert Edit Export”): background #10151c · text #ffffff · radius 8px · padding 0px · 400 10px Inter · shadow rgba(0, 0, 0, 0.01) 0px 550px 220px 0px, rgba(0, 0, 0, 0.05) 0px 310px 190px 0px
- **Navigation item** (“Features Demo FAQ Pricing”): transparent background · text #000000 · radius 0px · padding 0px · 500 15px Inter

## Do

- Use #ffffff as the main canvas and preserve generous open space.
- Set hero and section headings in a close geometric sans substitute for TWKEverett.
- Reserve #0050b7 for clear primary actions.
- Alternate white and #f4f4f4 bands to organize long-form content.
- Use #10151c as a deliberate feature-story contrast panel.
- Make mockup photography and editor previews the main visual evidence.
- Keep navigation and supporting copy compact and easy to scan.

## Don't

- Do not introduce additional brand accent colors.
- Do not fill the hero with decorative elements or dense copy.
- Do not use heavy borders around ordinary sections.
- Do not treat colors inside product mockups as site-wide palette colors.
- Do not make every section dark or highly saturated.
- Do not replace the spacious rhythm with a uniformly dense grid.

## Agent prompt

Build a new Maneken-style page for a creative mockup product. Use Gallery White (#ffffff) as the canvas, Headline Black (#000000) for major type, Soft Mist (#f4f4f4) for alternating content bands, and Deep Ink (#10151c) for one strong feature section. Keep Action Blue (#0050b7) for primary buttons only, with white button text. Use a geometric sans similar to Manrope for large centered headings and Inter for navigation, copy, and controls. Compose a spacious hero with a headline, muted supporting line, CTA, and prominent product visual. Follow with image-led demonstrations, split feature stories, and a creator gallery. Favor rounded media, subtle hairlines, and soft shadows on showcase assets; keep the surrounding interface flat and uncluttered.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting line, CTA, then a large editor visual on white. | Primary free-start CTA, Product preview | Oversized centered headline, Muted subheading, Blue rounded button |
| 2 | feature-grid | Centered heading above a multi-column composition of mockup examples on pale gray. | Visual comparison, Example-led discovery | Pale-gray band, Image grid, Centered heading |
| 3 | product-showcase | Large product/editor media area within a long, mostly white section. | Product demonstration, Visual feature explanation | Large media frame, Minimal surrounding chrome |
| 4 | how-it-works | Centered title and short explainer above a large mockup demonstration on pale gray. | Drag-and-drop explanation, Demonstration | Centered heading, Large rounded photo, Floating media controls |
| 5 | gallery | Centered introduction and CTA above a dense multi-column image catalog. | Browse catalog, Visual exploration | Pale-gray background, Photo grid, Blue CTA |
| 6 | feature-split | Deep ink band with three alternating text-and-video feature stories. | Feature explanation, Get-started link | White-on-dark typography, Alternating media, Video previews |
| 7 | gallery | Centered intro and CTA above a dense creator-image grid on pale gray. | Creator inspiration, Get-started CTA | Image-led gallery, Small creator labels, Centered heading |
| 8 | faq | Centered FAQ heading followed by a single-column set of questions on pale gray. | Question disclosure, Pricing and usage answers | Pale-gray background, Simple accordion-style rows |

## Source CSS custom properties (selected)

```css
--ease-linear: cubic-bezier(.25,.25,.75,.75);
--ease-in-sine: cubic-bezier(.47,0,.745,.715);
--ease-out-sine: cubic-bezier(.39,.575,.565,1);
--ease-in-out-sine: cubic-bezier(.445,.05,.55,.95);
--ease-in-quad: cubic-bezier(.55,.085,.68,.53);
--ease-out-quad: cubic-bezier(.25,.46,.45,.94);
--ease-in-out-quad: cubic-bezier(.455,.03,.515,.955);
--ease-in-cubic: cubic-bezier(.55,.055,.675,.19);
--ease-out-cubic: cubic-bezier(.215,.61,.355,1);
--ease-in-out-cubic: cubic-bezier(.645,.045,.355,1);
--ease-in-quart: cubic-bezier(.895,.03,.685,.22);
--ease-out-quart: cubic-bezier(.165,.84,.44,1);
--ease-in-out-quart: cubic-bezier(.77,0,.175,1);
--ease-in-quint: cubic-bezier(.755,.05,.855,.06);
--ease-out-quint: cubic-bezier(.23,1,.32,1);
--ease-in-out-quint: cubic-bezier(.86,0,.07,1);
--ease-in-expo: cubic-bezier(.95,.05,.795,.035);
--ease-out-expo: cubic-bezier(.19,1,.22,1);
--ease-in-out-expo: cubic-bezier(1,0,0,1);
--ease-in-circ: cubic-bezier(.6,.04,.98,.335);
--ease-out-circ: cubic-bezier(.075,.82,.165,1);
--ease-in-out-circ: cubic-bezier(.785,.135,.15,.86);
--ease-in-back: cubic-bezier(.6,-.28,.735,.045);
--ease-out-back: cubic-bezier(.175,.885,.32,1.275);
--ease-in-out-back: cubic-bezier(.68,-.55,.265,1.55);
--border-radius: 1.2rem;
--box-shadow: hsla(0,0%,4%,.025) 0px 0.4rem 1.2rem,hsla(0,0%,4%,.04) 0px 0.8rem 2.8rem,hsla(0,0%,4%,.05) 0px 1.2rem 4rem;
--background-blur: blur(80px);
--gap: 0.8rem;
--page-gap: 1.2rem;
--color-black: #10151c;
--color-light-grey: #f4f4f4;
--color-white: #fff;
--color-brand: #0050b7;
--color-primary: #fff;
--color-secondary: #ebebeb;
--color-tertiary: #d4d4d4;
--color-contrast: #3e3e3e;
--color-contrast-disabled: #3e3e3e99;
--color-contrast-secondary: #777;
```

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