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

# Mesh · Design System

> A quiet dark canvas for thoughtful connections

**Theme:** dark · **Industry:** productivity · **Source:** https://me.sh/ · **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._

Mesh pairs a restrained dark interface with luminous ambient gradients and polished product mockups. Condensed display headlines, subtle serif copy, and generous negative space make the relationship-management product feel both personal and premium.

## North star

Keep the interface nearly black and spacious, letting crisp product imagery and restrained warm light carry the story.

## Overview

The homepage is anchored by a near-black canvas (#0f0f10), with black product surfaces and fine charcoal dividers keeping the interface cinematic rather than flat. White display text is reserved for strong contrast, while softer grays carry supporting copy. Warm peach accents appear sparingly in links and gradient details; they should not overpower the dark foundation. The opening hero centers its message and CTA above a large desktop product mockup, using luminous orbital lines and hazy light as atmospheric framing. Later feature sections shift into a bright, softly glowing field before returning to dark sections, creating a deliberate light-dark narrative. Verlag Condensed gives headlines a compact, assertive silhouette; Verlag handles navigation and body copy, with Chronicle Text adding a quiet editorial contrast. Layouts favor broad negative space, simple alignments, and restrained borders over dense card grids. Product imagery is the main visual proof, with interface detail kept legible against the ambient backdrop.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#0f0f10` | `--color-midnight-canvas` | brand | Dominant page canvas across the hero, dark sections, and footer. |
| Deep Ink | `#060606` | `--color-deep-ink` | neutral | Measured text color; preserve as a near-black tone in interface details, not a prominent copy color. |
| Pure Black | `#000000` | `--color-pure-black` | surface | Product mockup panels and deep interface surfaces against the charcoal canvas. |
| Soft Porcelain | `#f8f6f3` | `--color-soft-porcelain` | surface | Light field and warm gradient endpoint in the bright feature transitions. |
| Graphite Hairline | `#2a2a2b` | `--color-graphite-hairline` | neutral | Subtle borders and dividers, especially around dark footer and interface elements. |
| Raised Charcoal | `#1d1d1f` | `--color-raised-charcoal` | surface | Slightly lifted dark sections and controls; also appears in muted text measurements. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | High-contrast headlines, navigation, links, and light CTA text or surfaces. |
| Mist Gray | `#969696` | `--color-mist-gray` | semantic | Gradient-associated gray haze in atmospheric visual treatments. |
| Slate Copy | `#868f97` | `--color-slate-copy` | semantic | Secondary text measured in the page; use for subdued supporting interface copy. |
| Ash Type | `#86868b` | `--color-ash-type` | semantic | Muted heading and text tone that softens supporting content on dark areas. |
| Apricot Signal | `#f2b98b` | `--color-apricot-signal` | accent | Warm accent link color, used sparingly for emphasis. |
| Silver Copy | `#b3b3b3` | `--color-silver-copy` | semantic | Secondary body text and low-emphasis labels. |
| Footer Gray | `#6f6f70` | `--color-footer-gray` | semantic | Low-contrast footer text and tertiary metadata. |
| Copper Glow | `#d49065` | `--color-copper-glow` | accent | Warm gradient start and occasional accent detail. |
| Peach Light | `#fec99b` | `--color-peach-light` | accent | Soft gradient highlight and warm link-adjacent accent. |

### Semantic aliases

`--color-canvas` → `#0f0f10` (Midnight Canvas) · `--color-surface` → `#000000` (Pure Black) · `--color-surface-2` → `#1d1d1f` (Raised Charcoal) · `--color-text` → `#ffffff` (Clean White) · `--color-text-muted` → `#060606` (Deep Ink) · `--color-text-subtle` → `#1d1d1f` (Raised Charcoal) · `--color-border` → `#2a2a2b` (Graphite Hairline) · `--color-accent` → `#f2b98b` (Apricot Signal) · `--color-accent-2` → `#d49065` (Copper Glow) · `--color-accent-3` → `#fec99b` (Peach Light)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#0f0f10` | 19.16:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#1d1d1f` | 16.83:1 | AAA |
| `#060606` | `#0f0f10` | 1.06:1 | fail |
| `#060606` | `#000000` | 1.04:1 | fail |
| `#060606` | `#1d1d1f` | 1.2:1 | fail |
| `#1d1d1f` | `#0f0f10` | 1.14:1 | fail |
| `#1d1d1f` | `#000000` | 1.25:1 | fail |
| `#f2b98b` | `#0f0f10` | 11.03:1 | AAA |
| `#f2b98b` | `#000000` | 12.09:1 | AAA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) -20%, rgb(248, 246, 243))`
- `radial-gradient(circle at 48% -48%, rgba(255, 255, 255, 0.56) 0%, rgba(30, 30, 31, 0) 36%)`
- `linear-gradient(95deg, rgb(212, 144, 101) 0%, rgb(254, 201, 155) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Verlag | `--font-body` | webfont | 400, 700, 600 | Primary sans for body text, navigation, links, and buttons. | Inter |
| VerlagCondensed | `--font-display` | webfont | 900, 700 | Display and headline face for hero and section headings. | Oswald |
| ChronicleTextG1Roman | `--font-chronicletextg1roman` | webfont | 400 | Editorial supporting copy, notably hero and explanatory text. | Lora |

- **Verlag:** Use regular body weight; navigation and compact links are bold, uppercase, and widely tracked.
- **VerlagCondensed:** Heavy condensed headlines with tight leading and slight positive tracking; keep case natural.
- **ChronicleTextG1Roman:** Regular serif provides contrast to the geometric sans; use for longer supporting statements.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 700 | 1 | 0.014em | — | VerlagCondensed | Large condensed headline treatment for prominent page statements. |
| h1 | 48px | 900 | 1 | 0.014em | — | VerlagCondensed | Hero headline and primary section titles. |
| h2 | 22px | 400 | 1.55 | 0 | — | ChronicleTextG1Roman | Editorial supporting statements beneath major headlines. |
| h3 | 20px | 400 | 1.4 | 0 | — | Verlag | Feature-section headings and compact content titles. |
| body | 16px | 400 | 1.38 | 0 | — | Verlag | Feature descriptions and explanatory copy. |
| caption | 12px | 400 | 1.1 | 0 | — | Verlag | Small metadata and product interface labels. |
| button | 20px | 400 | 1.35 | 0 | — | Verlag | Primary CTA label text. |
| nav | 12px | 700 | 2.25 | 0.083em | uppercase | Verlag | Compact uppercase navigation links. |
| link | 14px | 700 | 1 | 0.071em | uppercase | Verlag | Uppercase inline action links. |
| eyebrow | 12px | 700 | 1 | 0.083em | uppercase | Verlag | Small uppercase section labels and overlines. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 7, 8, 10, 12, 16, 24, 36, 56, 104 px.
- Section rhythm 44px · element gap 10px · card padding — · max content width 1232px.

Use a centered, spacious composition with a measured page max width of 1232px. The hero aligns its headline, supporting copy, and CTA centrally, then gives the product mockup broad visual prominence. Feature content alternates between left-right product splits and open, full-width ambient fields. The measured spacing scale runs from 2px to 104px, with a comfortable density and a 44px section gap; preserve generous separation rather than compressing content. Footer navigation becomes a compact multi-column directory.

## Shape & elevation

- Radius: button `50%` · media `50%` · link `12px` · xs `4px` · sm `6px` · md `8px` · lg `12px` · xl `16px` · 2xl `20px`
- Shadow `inset` (other): `rgba(255, 255, 255, 0.24) 0px 0px 0px 1px inset`
- Shadow `sm` (text): `rgba(255, 255, 255, 0.98) 0px 0px 4px 1px`
- Motion: standard transition `0.15s ease-in-out` on interactive elements.

The page is mostly flat, using near-black surfaces and fine charcoal borders instead of stacked cards. Product mockups provide the main depth through their own interface panels and subtle edge definition. A restrained inset highlight and occasional soft glow can lift important controls; avoid broad, heavy drop shadows.

## Imagery

The product UI is presented in large desktop and mobile mockups, framed by soft, luminous orbital arcs and blurred light fields. These atmospheric visuals transition from warm gold and porcelain into violet and back to black. Keep interface screens crisp and dark, while surrounding effects remain diffuse and cinematic; the gradients belong to the page art direction, not the core UI palette.

## Components

### Top navigation

Compact uppercase links sit in a centered dark pill, balanced by the Mesh mark and sign-in/get-started actions.

### Hero CTA

A prominent light button with dark text anchors the centered hero; keep its pill-shaped treatment and clear contrast.

### Product mockup

Large, dark desktop CRM interface with a sidebar, activity feed, and contact details; present it as a visual centerpiece.

### Feature split

Pair condensed feature headings and concise copy with a mobile or desktop product screen, leaving substantial surrounding space.

### Ambient feature field

Use broad blurred warm-to-violet light and thin orbital lines behind product content without obscuring text.

### Footer directory

Small uppercase section headings and tightly grouped links sit on the dark canvas, separated by subtle hairlines.

### Measured component styles

- **Primary button** (“Birthdays”): transparent background · text #1d1d1f · radius 0px · padding 0px · 400 20px Verlag
- **Link** (“INTEGRATIONS”): transparent background · text #ffffff · radius 0px · padding 0px · 700 14px Verlag · uppercase
- **Card**: background #f7f3ee · text #ffffff · radius 0px · padding 0px · 400 9px Verlag
- **Navigation item** (“RELEASES RESOURCES COMPANY PRICING”): transparent background · text #ffffff · radius 0px · padding 0px · 700 12px Verlag

## Do

- Anchor dark sections in Midnight Canvas (#0f0f10).
- Use Clean White (#ffffff) for high-priority headlines and navigation.
- Keep warm accents limited to links and ambient gradient details.
- Let large product mockups provide the primary evidence of the product.
- Use condensed display type for bold, compact headlines.
- Leave generous negative space around hero and feature content.

## Don't

- Do not turn the dark canvas into a flat black everywhere.
- Do not use warm gradient colors as the dominant UI palette.
- Do not crowd the hero with extra cards or decorative copy.
- Do not blur or distort the product interface mockups.
- Do not make dividers brighter than the main text.
- Do not substitute generic photography for product-led imagery.

## Agent prompt

Build a new Mesh-style page with Midnight Canvas (#0f0f10) as the dominant background and Pure Black (#000000) for deep product surfaces. Use Clean White (#ffffff) for primary text, with Ash Type (#86868b) and Silver Copy (#b3b3b3) for supporting copy. Reserve Apricot Signal (#f2b98b), Copper Glow (#d49065), and Peach Light (#fec99b) for restrained warm accents and ambient gradients. Set headlines in a heavy condensed sans similar to Oswald; use an Inter-like sans for navigation and body, with an editorial serif for select supporting text. Center the opening message and CTA, then feature crisp product UI inside broad, softly glowing orbital imagery. Alternate dark and pale luminous sections, maintain generous whitespace, and finish with a compact dark footer directory. Keep borders subtle and avoid decorative clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Long single-column sequence: centered hero, product showcase, alternating feature areas, team proof, testimonial field, final CTA. | Primary get-started CTA, Sign-in access, Feature discovery links, Product-led proof | Dark canvas, Condensed headline, Ambient orbital glow, Large CRM mockup |
| 2 | footer | Compact dark footer with three primary link groups, secondary link rows, and a narrow legal and social strip. | Grouped site navigation, Legal links, Social destinations | Uppercase group labels, Small muted links, Thin separators, Dark background |

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