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

# Guest Studio · Design System

> Fashion imagery framed by quiet editorial typography

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

Guest Studio presents its creative work through a pared-back, image-first portfolio. A restrained black-and-white interface lets large campaign photography supply the page’s color and character.

## North star

Keep the interface nearly invisible so full-bleed campaign photography and restrained editorial type carry the page.

## Overview

The homepage uses a quiet monochrome interface as a frame for expansive fashion campaign photography. White is the measured canvas, while black provides the primary text and link color; the warm neutrals and deep olive tones prominent in the screenshot belong to the photographs, not a separate UI palette. Navigation sits directly over the imagery in compact, unboxed text. Two adjacent, full-bleed images create an asymmetrical split composition, with campaign labeling placed near the lower edge. Typography pairs ABCROM for navigation and uppercase display headings with BradfordLLWeb-Book for larger, more literary project links and body copy. Text remains unembellished, with no evident cards, shadows, or decorative borders. The measured layout uses a 12-column grid and a comfortable density, but the opening view prioritizes uninterrupted photography over visible grid lines. Keep spacing deliberate and restrained; let the photographs, rather than interface ornament, establish each project’s mood.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Measured page canvas; also used for navigation text over dark image areas. |
| Editorial Ink | `#000000` | `--color-editorial-ink` | neutral | Primary text, project links, and navigation where it sits over light photography. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Editorial Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| BradfordLLWeb-Book | `--font-body` | webfont | 400 | Body copy and project/category links | Cormorant Garamond |
| ABCROM | `--font-display` | webfont | 500, 400 | Navigation and display headings | DM Sans |

- **BradfordLLWeb-Book:** Book-weight literary serif; measured body and links use sentence case with no added tracking.
- **ABCROM:** Measured at regular and medium weights; display heading is uppercase, while navigation is mixed case.

### Type scale — Minor Third (ratio ≈ 1.2, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 24px | 400 | 1 | 0 | uppercase | ABCROM | Uppercase project or campaign display headings. |
| body | 20px | 400 | 1.2 | 0 | — | BradfordLLWeb-Book | Editorial descriptions and project information. |
| nav | 20px | 400 | 1 | 0 | — | ABCROM | Studio identity and compact index navigation. |
| link | 20px | 400 | 1.2 | 0 | — | BradfordLLWeb-Book | Project names and categories in the portfolio listing. |

## Spacing & layout

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

The measured page uses a 12-column grid and a 1123px maximum content width, while the opening campaign images read as full-bleed media. The first view divides into two adjacent photographic panels rather than boxed cards, creating an intentionally asymmetric editorial composition. Navigation overlays the top edge; a small campaign label sits near the bottom of the left image. Keep content aligned simply and spacing comfortable, with the images setting the section rhythm.

## Shape & elevation

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

The interface is visually flat: measured data reports no shadows, and no card treatment or prominent border is evident in the screenshot. Separate content through image composition and whitespace rather than elevation. Navigation sits directly over the photography, so ensure adequate contrast through placement and legibility rather than introducing a heavy container.

## Imagery

Use large, art-directed fashion and campaign photography rather than illustration or product UI mockups. The opening pair combines a close portrait with a full-body movement shot, cropped to fill adjacent panels. Preserve the warm off-white, stone, and olive tones inside the images as photographic content; avoid adding filters or decorative frames.

## Components

### Overlay navigation

Compact studio wordmark and index links sit directly along the top of the campaign imagery, using ABCROM and no visible container.

### Campaign image panels

Adjacent full-bleed photographs dominate the opening view; use the image itself as the panel surface, without card borders or shadows.

### Campaign label

A small BradfordLLWeb-Book serif label sits near the lower edge of the image, identifying the work category.

### Project links

Portfolio titles and categories are text links in black BradfordLLWeb-Book, without button-like backgrounds.

### Measured component styles

- **Primary button**: transparent background · text #007aff · radius 0px · padding 0px · 400 16px ABCROM
- **Link** (“Brand Design”): transparent background · text #000000 · radius 0px · padding 0px · 400 20px BradfordLLWeb-Book
- **Navigation item** (“GUEST STUDIO”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px ABCROM

## Do

- Use white and black for the interface palette.
- Let campaign photography dominate the first viewport.
- Place navigation directly over imagery when contrast allows.
- Use ABCROM for navigation and uppercase display headings.
- Use BradfordLLWeb-Book for editorial copy and project links.
- Keep project panels flat and unboxed.

## Don't

- Do not promote photograph-derived colors into UI accents.
- Do not add gradients, shadows, or decorative card borders.
- Do not crowd the photography with explanatory interface text.
- Do not replace the editorial serif with a generic geometric sans.
- Do not add rounded UI treatments absent from the measured page.
- Do not force the image layout into equal boxed cards.

## Agent prompt

Build a new Guest Studio page as a restrained creative portfolio, using the supplied project imagery as the main visual content. Keep the interface palette to Gallery White (#ffffff) and Editorial Ink (#000000); warm stone or olive tones should appear only when present in the photographs. Use ABCROM or a close sans-serif alternative for navigation and uppercase display headings, and BradfordLLWeb-Book or a literary serif alternative for copy and project links. Place a compact text navigation over the media, and favor adjacent full-bleed image panels over cards. Keep the layout editorial, spacious, and asymmetrical; use a 12-column grid as a structural guide without drawing visible grid lines. Avoid shadows, gradients, decorative borders, and button-heavy styling.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign photography in adjacent panels, with compact overlay navigation and a lower-edge category label. | Portfolio index navigation, Project category labeling | Overlay text navigation, Asymmetric image split, Full-bleed photography |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
```

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