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

# UY Studio · Design System

> Quiet neutrals, sculptural objects, intimate scent.

**Theme:** light · **Industry:** beauty · **Source:** https://www.uy-studio.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._

UY Studio pairs niche fragrance and minimalist homeware with an editorial, image-led storefront. Warm off-white space, restrained black typography, and cinematic product photography let the objects define the mood.

## North star

Keep the interface quiet and let large, carefully framed product photography carry the emotion and contrast.

## Overview

The visual system is built on a warm, nearly continuous #fbf9f6 canvas, with black typography and fine neutral dividers keeping the interface quiet. The hero uses full-bleed, cinematic studio imagery; its pale stone backdrop and dark shelf create a warm, earthy contrast that belongs to the photography rather than the UI palette. Product grids return to bright, soft-background pack shots, while editorial sections alternate image and copy in an asymmetric two-column rhythm. Gerstner Programm is used throughout: uppercase, regular-weight display headings contrast with small uppercase navigation and bold compact buttons. Product captions and body copy remain understated. The page feels spacious but not sparse, using centered headings for collections and left-aligned text for story blocks. Thin borders, square-edged controls, and minimal shadow preserve a flat, gallery-like presentation. Photography carries atmosphere; interface colors stay deliberately limited.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Ivory | `#fbf9f6` | `--color-gallery-ivory` | surface | Dominant page canvas and background for product, editorial, and footer sections. |
| Studio Black | `#000000` | `--color-studio-black` | neutral | Primary headings, body copy, links, and outlined product actions. |
| Quiet Stone | `#d6d4d1` | `--color-quiet-stone` | semantic | Fine navigation and section hairlines that divide content without visual weight. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | Text on dark surfaces and outlined hero actions; also appears in product imagery. |
| Soft Graphite | `#454545` | `--color-soft-graphite` | neutral | Muted bestseller badge lettering and restrained secondary text. |
| Forest Ink | `#1a1e1b` | `--color-forest-ink` | brand | Dark announcement and inverse-control surface, including the top announcement strip. |
| Muted Pewter | `#646462` | `--color-muted-pewter` | semantic | Minor border detail detected in measurement; not a defining page color. |

### Semantic aliases

`--color-canvas` → `#fbf9f6` (Gallery Ivory) · `--color-surface` → `#1a1e1b` (Forest Ink) · `--color-text` → `#000000` (Studio Black) · `--color-text-muted` → `#ffffff` (Pure White) · `--color-text-subtle` → `#454545` (Soft Graphite) · `--color-border` → `#d6d4d1` (Quiet Stone)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fbf9f6` | 19.98:1 | AAA |
| `#000000` | `#1a1e1b` | 1.25:1 | fail |
| `#ffffff` | `#fbf9f6` | 1.05:1 | fail |
| `#ffffff` | `#1a1e1b` | 16.86:1 | AAA |
| `#454545` | `#fbf9f6` | 9.12:1 | AAA |
| `#454545` | `#1a1e1b` | 1.76:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Gerstner Programm | `--font-body` | webfont | 400, 700 | All headings, body copy, navigation, labels, product details, and controls. | Inter |

- **Gerstner Programm:** Use regular weight for most content; uppercase display headings and navigation, with compact bold uppercase buttons.

### Type scale — Perfect Fourth (ratio ≈ 1.31, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 400 | 1.1 | 0 | uppercase | Gerstner Programm | Centered uppercase hero statement. |
| h2 | 24px | 400 | 1.25 | 0 | uppercase | Gerstner Programm | Uppercase collection and editorial section headings. |
| h3 | 20px | 400 | 1.5 | 0 | — | Gerstner Programm | Product names and smaller content headings. |
| body | 16px | 400 | 1.2 | 0 | — | Gerstner Programm | Editorial descriptions and standard product or store information. |
| caption | 14px | 400 | 1.2 | 0 | — | Gerstner Programm | Small product details and supporting metadata. |
| button | 11px | 700 | 1 | 0 | uppercase | Gerstner Programm | Compact bold uppercase purchase and discovery actions. |
| nav | 10px | 400 | 1 | 0 | uppercase | Gerstner Programm | Small uppercase utility and navigation labels. |
| link | 14px | 400 | 1.2 | 0 | — | Gerstner Programm | Inline editorial links and product or collection links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 3, 5, 6, 7, 10, 12, 15, 16, 20, 30, 40 px.
- Section rhythm 40px · element gap 20px · card padding — · max content width 1360px.

Use a centered content frame capped at the measured 1360px maximum width, with full-bleed media reserved for the hero. Product collections form four-column desktop grids; editorial stories alternate image and copy in two-column layouts, while press and journal content use three columns. Center collection headings and left-align story copy. The measured 40px section gap and comfortable density create a steady vertical rhythm, with generous image areas and clear breaks between product-led and editorial blocks.

## Shape & elevation

- Radius: badge `4px` · xs `4px` · sm `6px`
- Shadow `sm` (nav): `rgba(0, 0, 0, 0) 0px 6px 7px -3px`
- Motion: standard transition `0.1s ease` on interactive elements.

The page is mostly flat, with no meaningful card shadows or elevated panels. Thin #d6d4d1 rules define selected boundaries, while controls and product tiles remain square-edged. A small rounded bestseller badge is the notable exception to the otherwise crisp, unembellished geometry.

## Imagery

Photography is the primary expressive medium: cinematic studio scenes, pale seamless product shots, and lived-in editorial still lifes. Frame products simply and keep packaging legible; use wider images for story sections and full-bleed imagery in the hero. Press logos and journal thumbnails add small bursts of visual variety. The hero's warm taupe and deep brown tones belong to the photograph, not the interface palette.

## Components

### Announcement bar

A narrow #1a1e1b strip above the light header, with centered compact uppercase promotional text.

### Header

Quiet light navigation with centered UY wordmark, menu control at left, and search, account, and bag icons at right.

### Hero

Full-width studio photograph with centered uppercase headline, supporting copy, and white outlined uppercase actions.

### Product grid

Four-column product presentation with pale-background pack shots, compact details, occasional sale labels, and restrained black actions.

### Editorial split

Alternating image-and-copy feature blocks, left-aligned text, uppercase headings, and a compact dark action button.

### Bestseller badge

Small uppercase label with #e9e9e9 fill, #454545 text, and a subtle 4px radius.

### Footer service row

Four compact service and reassurance columns above the newsletter and grouped footer links.

### Measured component styles

- **Primary button** (“SKIP TO CONTENT”): background #1a1e1b · text #ffffff · border 1px solid · radius 0px · padding 0px 20px · 700 11px Gerstner Programm · uppercase
- **Secondary button** (“ADD TO BAG”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 0px 20px · 700 11px Gerstner Programm · uppercase
- **Link** (“BESTSELLER INTIMATE & WARM RICH & DARK S”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Gerstner Programm
- **Input**: transparent background · text #000000 · radius 0px · padding 0px · 400 16px Gerstner Programm
- **Badge** (“BESTSELLER”): background #e9e9e9 · text #454545 · radius 4px · padding 5px 7px · 400 11px Gerstner Programm · uppercase
- **Navigation item**: transparent background · text #1a1e1b · radius 0px · padding 0px · 400 16px Gerstner Programm · uppercase

## Do

- Keep the interface canvas warm and off-white.
- Use photography as the main source of mood and color.
- Set display headings in uppercase with regular weight.
- Keep buttons compact, uppercase, and square-edged.
- Alternate product grids with asymmetric editorial image-and-copy blocks.
- Use thin neutral rules only where they clarify structure.

## Don't

- Do not add bright interface accent colors.
- Do not turn every section into a bordered card.
- Do not use heavy shadows or rounded control styling.
- Do not center-align all editorial body copy.
- Do not let decorative graphics compete with product photography.
- Do not mistake photographic browns for brand UI colors.

## Agent prompt

Build a new premium fragrance and homeware page in UY Studio’s restrained editorial style. Use Gallery Ivory (#fbf9f6) as the continuous canvas, Studio Black (#000000) for type and links, Quiet Stone (#d6d4d1) for occasional hairlines, and Forest Ink (#1a1e1b) for dark announcement or inverse-action surfaces. Keep Gerstner Programm or a close sans-serif substitute throughout: uppercase regular display headings, small uppercase navigation, and compact bold uppercase buttons. Use spacious image-led layouts, four-column desktop product grids, and asymmetric two-column editorial stories. Favor pale seamless product photography and cinematic studio imagery; treat image color as photography, not UI palette. Keep surfaces flat, corners mostly square, and borders subtle. Preserve clear spacing and restrained hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed media with centered headline and two outlined actions. | Explore fragrances, Explore core objects | Full-bleed photography, Centered uppercase heading, White outlined buttons |
| 2 | product-grid | Centered section title above a four-column product grid. | Bestseller labels, Sale pricing, Add to bag | Pale product backdrops, Compact product captions, Small badges |
| 3 | feature-split | Two-column split with copy on one side and discovery-set image on the other. | Discovery set introduction, Try-the-set action | Left-aligned copy, Large product image, Simple text hierarchy |
| 4 | feature-split | Two-column editorial block pairing atmospheric imagery with text. | Collection storytelling, Explore all fragrances | Alternating image and copy, Uppercase heading, Dark compact button |
| 5 | product-grid | Centered title above a four-column objects assortment. | Choose options, Add to bag, From-price display | Pale object photography, Compact product captions, Minimal sale treatment |
| 6 | feature-split | Two-column editorial feature with sculptural imagery and descriptive copy. | Collection explanation, Shop homeware | Asymmetric image-copy split, Left-aligned text, Compact dark action |
| 7 | logo-cloud | Centered introduction followed by a multi-column press-logo grid. | Press and feature discovery | Editorial logos, Centered heading, Compact call to action |
| 8 | feature-split | Two-column story with copy on one side and a vivid studio image on the other. | About link, Studio story | Asymmetric split, Uppercase heading, Compact dark button |
| 9 | content-feed | Centered journal heading above three image-led editorial cards. | Editorial story links, Browse journal content | Three-column image grid, Compact uppercase titles |
| 10 | footer | Service reassurance row followed by centered newsletter signup and grouped footer links. | Newsletter signup, Store details, Service and policy links | Four service columns, Grouped link lists, Thin divider lines |

## Source CSS custom properties (selected)

```css
--font-body-scale: 1;
--font-body-family: "Gerstner Programm", Arial, Helvetica, sans-serif;
--font-body-style: normal;
--font-body-weight: 400;
--font-body-weight-bold: 700;
--font-heading-family: "Gerstner Programm", Arial, Helvetica, sans-serif;
--font-heading-style: normal;
--font-heading-weight: 400;
--font-accent-family: "Gerstner Programm", Arial, Helvetica, sans-serif;
--font-accent-style: normal;
--font-accent-weight: 400;
--font-body-base-size-mobile: 14px;
--font-body-base-size-tablet: 15px;
--font-body-base-size-desktop: 16px;
--font-ui-size-mobile: 12px;
--font-ui-size-desktop: 14px;
--font-ui-size-small-mobile: 12px;
--font-ui-size-small-desktop: 13px;
--font-size-micro-mobile: 10px;
--font-size-micro-desktop: 12px;
--font-form-placeholder-size-mobile: 13px;
--font-form-placeholder-size-desktop: 15px;
--font-size-cart-drawer-mobile: 14px;
--font-size-cart-drawer-desktop: 16px;
--font-size-product-badge-mobile: 9px;
--font-size-product-badge-desktop: 11px;
--body-letter-spacing: 0em;
--font-caption-size-mobile: 12px;
--font-caption-size-desktop: 14px;
--font-caption-style: inherit;
--font-hxxxl-size-mobile: 78px;
--font-hxxxl-size-tablet: 115px;
--font-hxxxl-size-desktop: 130px;
--font-hxxl-size-mobile: 54px;
--font-hxxl-size-tablet: 79px;
--font-hxxl-size-desktop: 79px;
--font-hxl-size-mobile: 42px;
--font-hxl-size-tablet: 50px;
--font-hxl-size-desktop: 50px;
--font-h0-size-mobile: 36px;
```

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