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

# Break Maiden · Design System

> Bold studio typography meets an eclectic portfolio on black.

**Theme:** dark · **Industry:** agency · **Source:** https://www.breakmaiden.co/ · **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._

Break Maiden pairs a stark black canvas and oversized condensed lettering with a long, image-led grid of client projects. Quiet navigation and restrained captions let vivid project artwork carry the colour and variety.

## North star

Keep the interface monochrome and typographically bold, letting an irregular gallery of vivid client work provide the colour.

## Overview

The page is built on a pure black canvas (#000000), with white (#ffffff) reserved for the headline, primary copy, logo, and selected navigation links. Muted gray (#8e8e8e) softens secondary navigation and project captions. The restrained interface creates a frame for a highly varied portfolio: project imagery supplies the page’s bright cyan, yellow, red, and photographic tones, rather than introducing extra interface colours. A dramatic, condensed Martin display face gives the hero its poster-like impact, while America handles readable body copy, navigation, and captions. The opening layout balances a large, left-aligned typographic statement against a compact studio introduction. Below, project tiles form a tall, staggered three-column gallery with varied image proportions and short labels. Spacing around the content is generous, while the gallery itself feels continuous and dense. Flat presentation, minimal chrome, and a hairline closing rule keep attention on the work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Black | `#000000` | `--color-studio-black` | surface | Full-page canvas and measured border colour; provides a continuous dark frame around the hero and project gallery. |
| Quiet Gray | `#8e8e8e` | `--color-quiet-gray` | neutral | Secondary navigation and subdued project-caption text against the black canvas. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Hero display lettering, studio introduction, logo, and prominent navigation and link text. |

### Semantic aliases

`--color-canvas` → `#000000` (Studio Black) · `--color-text` → `#ffffff` (Paper White) · `--color-text-muted` → `#8e8e8e` (Quiet Gray) · `--color-border` → `#000000` (Studio Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#8e8e8e` | `#000000` | 6.41:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| America | `--font-body` | webfont | 400 | Main body, navigation, and project captions. | Inter |
| Martin | `--font-display` | webfont | 400 | Oversized hero display headline. | Oswald |
| Helvetica Neue | `--font-helvetica-neue` | system | 500 | Measured skip-link and some link or navigation styles. | Inter |

- **America:** Regular weight; clean, conversational sans-serif for supporting copy and labels.
- **Martin:** Regular weight with a very condensed, heavy poster-lettering appearance; used at display scale.
- **Helvetica Neue:** Medium button treatment; measured link styles also include regular weight. Keep tracking subtle and avoid unnecessary uppercase.

### Type scale — Custom (ratio ≈ 6.955, base 22px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 153px | 400 | 0.6 | 0 | — | Martin | Oversized condensed hero statement, arranged as tightly stacked lines. |
| body | 22px | 400 | 1.25 | 0 | — | America | Studio introduction and descriptive supporting copy. |
| caption | 19.5px | 400 | 1 | 0 | — | America | Small client project names and subdued descriptions. |
| button | 19.5px | 500 | normal | 0.02em | — | Helvetica Neue | Accessible skip-to-content control; no prominent hero CTA is visible. |
| nav | 19.5px | 400 | 1 | 0 | — | America | Header links for Work, About, Contact, and Shop. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 2, 12, 13, 18, 27, 43, 78, 110 px.
- Section rhythm 43px · element gap 18px · card padding — · max content width —.

The opening viewport places a compact circular wordmark at the upper left and a horizontal navigation at the upper right. Below, a left-aligned, multi-line display headline shares the hero with a narrower studio introduction on the right. The work gallery begins beneath this split and runs as a tall, staggered three-column arrangement; image tiles vary in height and captions sit close to each tile. The measured page is black throughout, with generous breathing room around the hero and a long, visually dense sequence of projects. Avoid inventing a maximum width or fixed spacing values.

## Shape & elevation

- Shadow `hairline` (nav): `rgb(255, 255, 255) 0px 0px 0px -50px`
- Motion: standard transition `0.4s ease` on interactive elements.

The interface is essentially flat: no cards, prominent shadows, or raised surfaces are visible. Black gaps separate image tiles, while the artwork itself supplies visual contrast and depth. A fine horizontal rule closes the visible gallery; keep outlines and borders minimal.

## Imagery

Use an eclectic portfolio of client branding, packaging, product photography, murals, and graphic illustrations. Images are presented as rectangular tiles with varied proportions and little visible treatment, allowing their original colours and art direction to remain intact. Arrange the work in a staggered three-column gallery, with brief name and descriptor captions beneath tiles. Keep the imagery vivid against the black page rather than tinting or unifying it with an interface filter.

## Components

### Header navigation

Small wordmark at the upper left; Work, About, Contact, and Shop links align at the upper right in white and muted gray.

### Hero statement

Large, tightly stacked white Martin lettering with an inline running-animal mark, arrow, and small star-like symbol.

### Studio introduction

Short white America paragraph aligned beside the hero headline, describing the creative studio and its services.

### Portfolio gallery

Long three-column staggered arrangement of client project images, with variable tile proportions and black gutters.

### Project caption

Compact client or project title with a quieter gray descriptor directly below each image.

### Gallery closing rule

A thin, subdued horizontal line appears near the end of the portfolio against the black canvas.

### Measured component styles

- **Primary button** (“Skip to Content”): transparent background · text #ffffff · border 1px solid #000000 · radius 0px · padding 17.5px 77.8px · 500 19.456px Helvetica Neue
- **Link**: transparent background · text #ffffff · radius 0px · padding 0px · 400 24.64px Helvetica Neue
- **Navigation item** (“Skip to Content Work About Contact Shop”): transparent background · text #ffffff · radius 0px · padding 0px · 400 24.64px Helvetica Neue

## Do

- Use #000000 as the uninterrupted page canvas.
- Reserve #ffffff for the hero and primary text.
- Use #8e8e8e for secondary navigation and captions.
- Set the hero as condensed, oversized, stacked display lettering.
- Build the portfolio as a staggered three-column image gallery.
- Keep project images in their original vivid colours.
- Keep controls and card treatments visually flat.

## Don't

- Do not add coloured interface surfaces or gradients.
- Do not make the project grid uniform in tile height.
- Do not let captions compete with the artwork.
- Do not add prominent card shadows or rounded containers.
- Do not center the hero headline or replace its split layout.
- Do not apply a colour filter to portfolio imagery.

## Agent prompt

Build a new creative-studio page in Break Maiden’s visual style. Use Studio Black (#000000) as the full-page canvas, Paper White (#ffffff) for the main headline and copy, and Quiet Gray (#8e8e8e) for secondary links and captions. Place a compact wordmark opposite a restrained horizontal navigation. Create a dramatic, left-aligned condensed display headline, balanced by a short supporting paragraph. Use a clean sans-serif for body copy and a tall, staggered three-column portfolio gallery with varied rectangular image proportions and concise captions. Let client artwork provide the page’s colour; do not add decorative interface colours, gradients, rounded cards, or heavy shadows. Maintain generous space around the hero, close-set captions, flat presentation, and a minimal closing rule. Do not assume unmeasured fixed dimensions.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Compact top navigation above a split hero: oversized left-aligned statement on the left, short studio introduction on the right. | Primary section navigation, Accessible skip-to-content link | Circular wordmark, Condensed display headline, Black canvas, White hero copy |
| 2 | gallery | Long, staggered three-column portfolio gallery with varied image heights, close captions, and a minimal closing rule. | Browse client projects, Project names and descriptors | Variable image proportions, Black gutters, Gray captions, Thin closing rule |

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