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

# Studio & Marie · Design System

> Two creative practices, held in quiet balance.

**Theme:** dark · **Industry:** agency · **Source:** https://www.studioandmarie.com/?utm_source=hugoandmarie · **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._

The homepage opens as a sparse, deep-toned split between Creative Studio and Artist Bureau. Small, bright labels sit apart in generous negative space, making the two divisions the entire visual focus.

## North star

Let two restrained labels anchor a vast, uninterrupted dark canvas; add nothing that competes with their balance.

## Overview

The opening screen is defined by a nearly black blue-green canvas, with two small, pale labels positioned far apart across a centered horizontal axis. The measured palette also includes an off-white surface and dark text, but the screenshot establishes the deep canvas and light type as the defining first-view treatment; avoid introducing extra accent colours. Söhne supplies a clean, compact sans-serif voice, with medium-weight labels providing just enough emphasis without turning them into oversized display headlines. The composition is deliberately spare: two balanced columns, broad negative space, and no visible imagery, cards, borders, or decorative controls. The text acts as the navigation-like entry point to each division. Preserve the quiet editorial quality by keeping the layout flat and allowing the empty canvas to carry as much visual weight as the labels. The first viewport offers no evidence for richer image treatments or additional components.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Fjord | `#002233` | `--color-deep-fjord` | brand | Dominant page canvas and background for the opening split layout. |
| Soft Ink | `#1d1d1d` | `--color-soft-ink` | neutral | Measured muted text colour; not prominent in the dark first-view screenshot. |
| Gallery White | `#f5f5f5` | `--color-gallery-white` | surface | Measured pale surface colour; not visible as a section band in the opening screenshot. |
| Quiet White | `#ffffff` | `--color-quiet-white` | semantic | Light text colour for the division labels against the dark canvas. |

### Semantic aliases

`--color-canvas` → `#002233` (Deep Fjord) · `--color-surface` → `#f5f5f5` (Gallery White) · `--color-text` → `#ffffff` (Quiet White) · `--color-text-muted` → `#1d1d1d` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#002233` | 16.45:1 | AAA |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |
| `#1d1d1d` | `#002233` | 1.02:1 | fail |
| `#1d1d1d` | `#f5f5f5` | 15.46:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Söhne | `--font-body` | webfont | 400, 500 | Division labels and supporting page text. | Inter |

- **Söhne:** Use measured 400 and 500 weights; labels are compact, sentence case, and untracked.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 24px | 500 | 1.08 | 0 | — | Söhne | Measured headline style; no heading is detected in the visible opening screen. |
| body | 14px | 400 | 1.29 | 0 | — | Söhne | Compact sans-serif text for the division labels and explanatory copy. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 21 px.
- Section rhythm — · element gap — · card padding — · max content width —.

Use a full-viewport canvas with two equal-feeling columns and a wide central gap. Align each division label toward the inner portion of its column, balancing the left and right placements across the page. Keep the labels around the vertical midpoint, with substantial empty space above and below. The screenshot shows no constrained content container, section bands, or visible grid lines; preserve the open, edge-to-edge impression rather than adding a conventional header or stacked content blocks.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s ease` on interactive elements.

The visible composition is flat: no shadows, cards, borders, or layered surfaces are apparent. Keep the canvas uninterrupted and labels directly on the background. Although the measured data includes a pale surface colour, it does not appear as a raised panel or card in the screenshot.

## Imagery

No photography, illustration, 3D, or video appears in the supplied first viewport. The design relies on typography and negative space rather than visual assets. Do not add decorative imagery to this opening composition; if later page content requires images, the measured evidence here does not establish a treatment or framing style.

## Components

### Creative Studio entry

A compact, medium-weight light-text label on the left side of the split canvas; it serves as a division entry link.

### Artist Bureau entry

A matching compact label on the right, balancing the Creative Studio entry across the open canvas.

### Two-column opening

A sparse full-screen composition with two widely separated text anchors and no visible divider or card treatment.

### Measured component styles

- **Link** (“Creative Studio Creative Studio Our in-h”): transparent background · text #1d1d1d · radius 0px · padding 0px · 400 14px Söhne

## Do

- Use Deep Fjord (#002233) as the dominant opening canvas.
- Keep the two division labels widely separated and visually balanced.
- Use Söhne or a close sans-serif substitute.
- Keep label styling compact and restrained.
- Preserve generous, uninterrupted negative space.
- Use Quiet White (#ffffff) for high-contrast label text.

## Don't

- Do not add a prominent header absent from the screenshot.
- Do not introduce bright accent colours.
- Do not turn the labels into oversized display headlines.
- Do not add cards, shadows, or decorative borders.
- Do not fill the empty canvas with imagery or ornament.
- Do not treat measured off-white as a visible opening section without evidence.

## Agent prompt

Build a new page in Studio & Marie’s restrained editorial style. Use Deep Fjord (#002233) as the dominant full-viewport canvas, with two balanced text-led entry points placed far apart across a simple split layout. Set labels in Söhne, or Inter as a free substitute, using compact sans-serif typography and restrained medium emphasis. Use Quiet White (#ffffff) for readable labels. Preserve broad negative space and keep the composition flat: no cards, shadows, borders, gradients, or decorative imagery. The measured palette also contains Gallery White (#f5f5f5) and Soft Ink (#1d1d1d), but neither defines the visible opening screen; use them only where later content clearly calls for a light surface or dark text. Prioritize symmetry, calm spacing, and legibility over added interface chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-viewport, two-column split with widely spaced labels near the vertical midpoint. | choose a division, paired entry links | deep monochrome canvas, compact light labels, generous negative space |

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