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

# Mejuri · Design System

> Everyday fine jewelry, framed with bold restraint

**Theme:** light · **Industry:** fashion · **Source:** https://mejuri.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._

Mejuri’s homepage pairs a clean black-and-white retail framework with immersive jewelry and lifestyle imagery. A vivid lime highlight and concise uppercase typography add a distinctive edge to the otherwise restrained editorial presentation.

## North star

Let clean black-and-white structure frame the photography, and reserve lime for a few high-impact story moments.

## Overview

The visual strategy is built on sharp contrast: white page space and black type provide a quiet frame for high-impact, full-bleed jewelry and lifestyle photography. Lime green (#deff9d) is a deliberate highlight rather than a general background color, appearing prominently in the hero lettering and the Salmon Gold story band. SyndicatGrotesk carries uppercase headings, links, and calls to action with generous letter spacing; SimonMono gives supporting copy a compact, technical counterpoint. Sections alternate between immersive imagery, two-column editorial content, and practical store cards, with broad white gaps preserving an unhurried cadence. Black panels create a strong interruption for the Los Angeles store message, while product and store imagery supplies most of the softer colors. The interface stays flat, using fine rules and restrained outlines rather than shadows or rounded UI. This balance lets the jewelry remain the visual focus while keeping the storefront easy to scan.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Ink | `#000000` | `--color-deep-ink` | brand | Primary text, inverse black message panel, prominent borders, footer areas, and outlined calls to action. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the clean space around navigation, editorial sections, and product imagery. |
| Soft Black | `#0a0a0a` | `--color-soft-black` | neutral | Near-black supporting text and subtle hairline rules, especially in navigation and footer treatments. |
| Studio Grey | `#f6f6f6` | `--color-studio-grey` | surface | Pale product-card surface; a quiet neutral for cards rather than a dominant page band. |
| Salmon Lime | `#deff9d` | `--color-salmon-lime` | accent | Distinctive lime hero lettering and the Salmon Gold editorial section; use as a focused highlight. |
| Warm Pewter | `#c0b9b8` | `--color-warm-pewter` | semantic | Muted footer surface tone; secondary supporting neutral, not a core content background. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Deep Ink) · `--color-surface-2` → `#f6f6f6` (Studio Grey) · `--color-surface-3` → `#c0b9b8` (Warm Pewter) · `--color-text` → `#000000` (Deep Ink) · `--color-text-muted` → `#0a0a0a` (Soft Black) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#000000` (Deep Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f6f6f6` | 19.43:1 | AAA |
| `#000000` | `#c0b9b8` | 10.87:1 | AAA |
| `#0a0a0a` | `#ffffff` | 19.8:1 | AAA |
| `#0a0a0a` | `#000000` | 1.06:1 | fail |
| `#0a0a0a` | `#f6f6f6` | 18.32:1 | AAA |
| `#0a0a0a` | `#c0b9b8` | 10.25:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#f6f6f6` | 1.08:1 | fail |
| `#ffffff` | `#c0b9b8` | 1.93:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) calc(100% - 1px), rgb(10, 10, 10) 100%, rgba(0, 0, 0, 0) calc(100% + 1px))`
- `linear-gradient(rgba(0, 0, 0, 0) calc(100% - 1px), rgb(255, 255, 255) 100%, rgba(0, 0, 0, 0) calc(100% + 1px))`
- `linear-gradient(rgba(0, 0, 0, 0) calc(100% - 1px), rgb(0, 0, 0) 100%, rgba(0, 0, 0, 0) calc(100% + 1px))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SimonMono | `--font-mono` | webfont | 400 | Monospaced supporting copy, captions, search text, and compact editorial descriptions. | IBM Plex Mono |
| SyndicatGrotesk | `--font-body` | webfont | 500, 400, 420, 700 | Navigation, headings, body labels, links, and calls to action. | Manrope |

- **SimonMono:** Regular weight; sentence case or natural casing; gives explanatory copy a precise, technical feel.
- **SyndicatGrotesk:** Mostly medium weight, uppercase for headings and actions, with visibly tracked display text.

### Type scale — Golden Ratio (ratio ≈ 1.66, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 500 | 1 | 0.05em | uppercase | SyndicatGrotesk | Oversized uppercase hero wordmark layered over the campaign video. |
| h1 | 32px | 500 | 1.33 | 0.05em | uppercase | SyndicatGrotesk | Primary editorial or campaign headings. |
| h2 | 24px | 500 | 1 | 0.05em | uppercase | SyndicatGrotesk | Section titles such as Essentials and sustainability. |
| body | 14px | 500 | 1.33 | 0.02em | uppercase | SyndicatGrotesk | Compact uppercase labels and short interface or promotional copy. |
| caption | 12px | 400 | 1.33 | -0.01em | — | SimonMono | Monospaced supporting descriptions and fine-print details. |
| button | 14px | 500 | 1.43 | 0.071em | uppercase | SyndicatGrotesk | Uppercase action labels with tracked lettering. |
| nav | 12px | 400 | 1.33 | 0.02em | capitalize | SyndicatGrotesk | Small, restrained navigation labels. |
| link | 14px | 500 | 1.33 | 0 | uppercase | SyndicatGrotesk | Uppercase shop and store-finder links. |
| eyebrow | 24px | 500 | 1 | 0.05em | uppercase | SyndicatGrotesk | Emphasized uppercase introductory labels. |
| code | 12px | 400 | 1.33 | -0.01em | — | SimonMono | Monospaced utility and detail text. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 24, 32, 40, 48, 56, 64, 80, 88, 188 px.
- Section rhythm 56px · element gap 4px · card padding 20px · max content width 1280px.

A full-width storefront uses a compact overlay navigation above an edge-to-edge campaign hero, then shifts into centered editorial bands and image-led blocks. Content alternates between two-column stories, a two-card category feature, three-column store cards, and a split brand statement. The measured layout allows a 1280px maximum content width, with section spacing that feels generous and comfortable rather than dense. Most section backgrounds stay white; the black store callout and lime story band create clear changes of pace. Alignment is generally left-led, with ample open space around copy.

## Shape & elevation

- Radius: media `2px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.25, 0.1, 0.25, 1)` on interactive elements.

The page is predominantly flat: there are no measured shadows, and cards rely on imagery and color fields instead of raised surfaces. Borders and hairlines use black or near-black for definition, while buttons remain square-cornered and restrained. The hero overlays navigation and type over video; otherwise, section bands and image blocks establish hierarchy without decorative layering.

## Imagery

The hero uses video with a dramatic split between a nature-textured close-up and a jewelry product view, overlaid with oversized lime lettering. Further sections use editorial lifestyle and product photographs: jewelry on a model, close-up stones, and polished store interiors. Images are large, often edge-to-edge or arranged in simple columns; their natural tones provide color beyond the restrained interface palette.

## Components

### Overlay navigation

Compact white navigation and utility icons sit over the hero imagery, alongside a narrow black announcement strip.

### Campaign hero

Full-bleed split video imagery carries oversized lime uppercase lettering and small campaign details; a white caption row follows.

### Black store callout

A wide black rectangle pairs a prominent Los Angeles heading with monospaced store copy and an underlined white location link.

### Salmon Gold story band

Two-column editorial block on #deff9d, with a short uppercase heading, monospaced explanatory copy, and a shop link.

### Category feature tiles

Two side-by-side lifestyle and product images use uppercase overlay titles and compact shop links.

### Store cards

Three image-led cards introduce stores, piercing, and events, with brief monospaced descriptions and understated links.

### Footer

Dense multi-column help and brand links sit above membership, app, location, and legal details; mostly white with a dark closing strip.

### Measured component styles

- **Primary button** (“JOIN NOW FOR FREE”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 12px 24px · 500 14px SyndicatGrotesk · uppercase
- **Link** (“SHOP NOW”): transparent background · text #000000 · radius 0px · padding 0px · 500 14px SyndicatGrotesk · uppercase
- **Card** (“WE'RE HERE, LOS ANGELES”): background #000000 · text #ffffff · radius 0px · padding 24px 16px · 400 16px SimonMono
- **Navigation item** (“All Jewelry Best Sellers New In Collecti”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px SimonMono

## Do

- Keep the main canvas white and typography black.
- Use #deff9d as a selective campaign accent, not a default UI fill.
- Let large jewelry and lifestyle imagery lead the composition.
- Use uppercase, tracked grotesk type for headings and actions.
- Pair concise monospaced copy with editorial headings.
- Create hierarchy with broad white space and flat color bands.

## Don't

- Do not add decorative shadows or raised cards.
- Do not round buttons or card corners.
- Do not spread lime across every section.
- Do not crowd the hero with dense text.
- Do not replace product photography with generic illustrations.
- Do not use heavy borders where simple space suffices.

## Agent prompt

Build a refined fine-jewelry storefront page using Mejuri’s restrained editorial language. Use Gallery White (#ffffff) as the main canvas and Deep Ink (#000000) for typography, utility details, and occasional inverse panels. Reserve Salmon Lime (#deff9d) for a small number of campaign highlights or a distinct story band. Use bold jewelry and lifestyle photography as the main visual material, with full-bleed hero imagery followed by calm two-column stories and simple image cards. Set headings and action labels in an uppercase, tracked grotesk similar to Manrope; use a regular monospaced face similar to IBM Plex Mono for supporting descriptions. Keep the layout flat and spacious, with square corners, minimal hairlines, no shadows, and a clear scan path from campaign to categories, stores, and brand information.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width campaign video with overlay navigation, split imagery, and a white caption strip below. | Overlay navigation, Campaign announcement, Shop action, Video pause control | Split-screen imagery, Oversized lime wordmark, White nav labels, Small uppercase campaign copy |
| 2 | cta | Centered, wide black panel with a heading on one side and supporting copy and link on the other. | Store locator link, Visit in person prompt | Black inverse panel, White heading, Monospaced copy, Underlined link |
| 3 | feature-split | Two-column story band with a short title opposite compact supporting copy. | Educational story, Shop collection link | Lime background, Uppercase heading, Monospaced description |
| 4 | category-nav | Two equal image-led category tiles arranged side by side. | Category discovery, Shop now links | Lifestyle photography, Overlay uppercase titles, Minimal action labels |
| 5 | feature-grid | Introductory heading above three image cards in a horizontal row. | Store discovery, Appointment booking, Event information | Three-column cards, Store photography, Compact copy and links |
| 6 | feature-split | Open two-column brand statement with a short heading and longer copy. | Brand storytelling, About us link | White background, Editorial heading, Monospaced supporting text |
| 7 | footer | Sustainability intro above a dense multi-column footer and final dark legal strip. | Report link, Help navigation, Store details, Membership and app prompts | Sustainability feature band, Multi-column link lists, Partner marks, Dark bottom bar |

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