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

# Myrch Club · Design System

> A considered archive of branded objects

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

Myrch Club presents an evolving archive of branded merchandise through a spacious, image-led catalog. Restrained typography and monochrome framing keep attention on the objects and their varied identities.

## North star

Keep the interface quiet and gallery-like so the merchandise imagery—not decorative UI—carries the visual identity.

## Overview

The page uses a near-white canvas (#f9f9f9) and white surfaces to create a quiet gallery backdrop for a large archive of merchandise. Near-black (#111111) carries the introductory copy, category controls, and crisp outlines; muted grays are reserved for low-emphasis catalog captions. Arial Narrow gives the oversized opening statement a compact, editorial character, while small labels remain understated. The header area layers a bold red handwritten mark behind the black text, but that saturated red belongs to a graphic treatment rather than the measured core palette. Below, products are arranged in a consistent three-column catalog with pale image fields, generous breathing room, and tiny brand and item captions. Product imagery supplies most of the color, so the interface itself stays neutral. Rounded category controls, fine dark borders, and a soft shadow separating the catalog from the introduction provide the limited moments of interface emphasis.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Archive Mist | `#f9f9f9` | `--color-archive-mist` | surface | Near-white catalog and card field, providing a soft gallery backdrop around merchandise. |
| Gallery Ink | `#111111` | `--color-gallery-ink` | brand | Primary copy, headings, active category fill, button text, and thin control outlines. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Main page surface and contrasting text on the selected dark category control. |
| Faint Graphite | `#cfcfcf` | `--color-faint-graphite` | semantic | Low-emphasis text color, used for quiet secondary catalog details. |
| Caption Gray | `#888888` | `--color-caption-gray` | neutral | Muted supporting text and subtle item captions beneath archive imagery. |

### Semantic aliases

`--color-canvas` → `#f9f9f9` (Archive Mist) · `--color-surface` → `#ffffff` (Paper White) · `--color-text` → `#111111` (Gallery Ink) · `--color-text-muted` → `#cfcfcf` (Faint Graphite) · `--color-text-subtle` → `#888888` (Caption Gray) · `--color-border` → `#111111` (Gallery Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#111111` | `#f9f9f9` | 17.94:1 | AAA |
| `#111111` | `#ffffff` | 18.88:1 | AAA |
| `#cfcfcf` | `#f9f9f9` | 1.48:1 | fail |
| `#cfcfcf` | `#ffffff` | 1.56:1 | fail |
| `#888888` | `#f9f9f9` | 3.37:1 | AA-large |
| `#888888` | `#ffffff` | 3.54:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Arial Narrow | `--font-body` | webfont | 400 | Introductory statement, headings, body copy, and category controls | Roboto Condensed |

- **Arial Narrow:** Measured at regular weight with no tracking or uppercase transformation; headings and buttons are notably large.

### Type scale — Custom (ratio ≈ 1.732, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 42px | 400 | 1.24 | 0 | — | Arial Narrow | Large introductory statement beneath the site identity. |
| h2 | 20px | 400 | 1.4 | 0 | — | Arial Narrow | Secondary headings or section-level labels where present. |
| body | 14px | 400 | 1.43 | 0 | — | Arial Narrow | Introductory copy and compact supporting text. |
| button | 42px | 400 | 1.24 | 0 | — | Arial Narrow | Prominent category filter labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 6, 12, 20, 30, 38 px.
- Section rhythm 60px · element gap 30px · card padding 30px · max content width 1380px.

The opening content sits above a long, dense archive that dominates the page. The catalog uses three evenly repeated columns at the supplied desktop view, with aligned merchandise images and small captions toward the foot of each card. The measured page max width is 1380px. Introductory text and category controls are left aligned, followed by a clear transition into the grid. Comfortable spacing and repeated card padding make the many items feel cataloged rather than crowded.

## Shape & elevation

- Radius: button `10px` · card `10px` · media `50%` · xs `10px`
- Shadow `md` (other, section): `rgba(17, 17, 17, 0.3) 0px 0px 20px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Most cards read as flat image fields, with no visible card outlines. A soft, broad shadow marks the top edge of the catalog where it overlaps the introductory area. Category controls use thin dark borders and rounded corners; the selected control switches to a dark fill. Avoid adding additional depth effects.

## Imagery

The archive is built from isolated product photographs on pale, nearly white fields. Each object is presented clearly and mostly front-on, with its own brand mark and a restrained item caption. Apparel, accessories, printed matter, and unusual objects bring varied color and texture; the interface does not tint or heavily stylize them. The bold red handwritten header graphic is a distinct decorative layer, not a product-image treatment.

## Components

### Category filters

Large Arial Narrow labels in rounded controls; inactive options are white with a #111111 outline, while the selected option is #111111 with white text.

### Archive card

A pale #f9f9f9 image field with a centered merchandise image, generous inner spacing, and compact brand and category captions.

### Introductory statement

Left-aligned editorial copy in regular Arial Narrow, layered over a large red handwritten graphic treatment.

### Catalog surface

A broad white-backed collection area begins below the intro and is distinguished by a soft shadow along its upper edge.

### Item captions

Small, quiet labels beneath each object use muted gray alongside the item's brand identity.

### Measured component styles

- **Primary button** (“All”): background #111111 · text #ffffff · border 1px solid #111111 · radius 10px · padding 6px 12px · 400 42px Arial Narrow
- **Secondary button** (“Food & Drink”): transparent background · text #111111 · border 1px solid #111111 · radius 10px · padding 6px 12px · 400 42px Arial Narrow
- **Link** (“All”): transparent background · text #0000ee · radius 0px · padding 0px · 400 16px Times New Roman
- **Card** (“Bucket Hat Ice Cream Truck”): background #f9f9f9 · text #0000ee · radius 10px · padding 30px · 400 16px Times New Roman

## Do

- Use #f9f9f9 and #ffffff as quiet gallery surfaces.
- Set primary copy and outlines in #111111.
- Keep catalog captions visually secondary.
- Repeat a consistent three-column product rhythm on desktop.
- Give isolated merchandise images room to breathe.
- Use the dark-filled style only for the active category.

## Don't

- Do not add a saturated interface palette.
- Do not let decorative graphics obscure the introductory copy.
- Do not add heavy borders around every archive card.
- Do not give captions equal prominence to merchandise.
- Do not crop product images so tightly that the object loses context.
- Do not invent extra shadows, gradients, or ornamental UI.

## Agent prompt

Build a new Myrch Club page as a quiet, image-led merchandise archive. Use Archive Mist (#f9f9f9) for catalog image fields, Paper White (#ffffff) for the page surface, and Gallery Ink (#111111) for copy, borders, and selected controls. Keep Faint Graphite (#cfcfcf) and Caption Gray (#888888) for secondary catalog details only. Use a condensed sans-serif close to Arial Narrow, with regular weights and compact editorial character. Place a left-aligned introduction and category filters above a consistent three-column desktop product grid. Center isolated merchandise images in pale fields; keep brand and item captions small and unobtrusive. Use restrained rounded outlined filters and a subtle shadow only at the catalog transition. Let product imagery supply the color, and preserve a spacious, gallery-like cadence.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned site identity and archive statement above a horizontal row of category filters. | category selection, social profile link | oversized condensed statement, outlined filter pills, red handwritten graphic |
| 2 | product-grid | Long, repeated three-column product catalog with pale image fields and small captions. | browse merchandise, scan item categories | isolated product imagery, quiet brand captions, soft top-edge shadow |

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