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

# Yllw · Design System

> Bold type, quiet spaces, circular thinking

**Theme:** light · **Industry:** other · **Source:** https://www.yllw.com/en · **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._

Yllw presents workplace transformation through oversized condensed typography, restrained neutral colours and spacious editorial layouts. Warm architectural photography and clear service pathways bring its circular design message to life.

## North star

Let oversized condensed black typography and generous white space lead, using muted beige only for purposeful calls to action and data emphasis.

## Overview

The page uses a bright white canvas and black typography as its consistent foundation, with muted beige as a restrained signal for appointment buttons and the sustainability statistics band. A vivid yellow announcement strip appears in the screenshot header; it is a small, high-contrast navigation detail rather than the main palette. Large uppercase condensed headings create a strong editorial identity, while compact body copy remains centered or aligned within spacious sections. The layout alternates between sparse text-led blocks, thinly divided service rows, metric cards and broad photographic sections. Workplace and interior images supply warm wood, brown and cream tones, but these are photographic content, not interface colours to reproduce as brand swatches. Cards and controls stay mostly flat, with delicate borders and minimal corner rounding. The overall visual rhythm balances unusually bold headline scale with substantial white space and straightforward conversion links.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Ink | `#000000` | `--color-deep-ink` | neutral | Primary headings, body copy, navigation, links and button text on light backgrounds. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and the background of cards, text-led sections and light content panels. |
| Soft Black | `#191919` | `--color-soft-black` | surface | Inverse dark section surfaces; use sparingly to create a strong contrast break. |
| Quiet Taupe | `#cac7b4` | `--color-quiet-taupe` | brand | Appointment CTA backgrounds, the sustainability metrics band and subtle borders or section dividers. |
| Pale Line | `#e5e5e5` | `--color-pale-line` | semantic | Fine card and content separators; keep it secondary to the warmer taupe border. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#191919` (Soft Black) · `--color-surface-2` → `#cac7b4` (Quiet Taupe) · `--color-text` → `#000000` (Deep Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#cac7b4` (Quiet Taupe)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#191919` | 1.19:1 | fail |
| `#000000` | `#cac7b4` | 12.34:1 | AAA |
| `#ffffff` | `#191919` | 17.58:1 | AAA |
| `#ffffff` | `#cac7b4` | 1.7:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Gd Grio Vf | `--font-body` | webfont | 400, 500, 700 | Shared display and interface family for headings, paragraphs, navigation, links and buttons. | Oswald |

- **Gd Grio Vf:** Use 700-weight uppercase display headings with tight measured tracking; body copy is regular and buttons or links are medium weight.

### Type scale — Perfect Fifth (ratio ≈ 1.558, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 165.5px | 700 | 0.88 | -0.015em | uppercase | Gd Grio Vf | Oversized uppercase hero display headline. |
| h1 | 116px | 700 | 0.96 | -0.006em | uppercase | Gd Grio Vf | Primary page headline and major campaign statements. |
| h2 | 64px | 400 | 0.96 | -0.01em | uppercase | Gd Grio Vf | Section titles and prominent editorial headings. |
| h3 | 40.5px | 400 | 1 | -0.01em | uppercase | Gd Grio Vf | Process, service and case-study card headings. |
| h4 | 40px | 400 | 1 | -0.01em | uppercase | Gd Grio Vf | Supporting subsection headings and compact service titles. |
| body | 18px | 400 | 1.28 | 0 | — | Gd Grio Vf | Introductory copy, descriptive paragraphs and service explanations. |
| caption | 16px | 400 | 1.28 | 0 | — | Gd Grio Vf | Image labels, metadata and compact supporting text. |
| button | 16px | 500 | 1 | 0 | — | Gd Grio Vf | Appointment and service-action labels. |
| nav | 16px | 400 | 1.5 | 0 | — | Gd Grio Vf | Header links and navigation labels. |
| link | 16px | 500 | 1 | 0 | — | Gd Grio Vf | Inline and outlined calls to action. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 1, 8, 12, 16, 20, 24, 32, 48 px.
- Section rhythm 32px · element gap 8px · card padding 20px · max content width 1392px.

Use a compact header above a broad, centered hero, then alternate spacious editorial sections with full-bleed media, process grids, metric cards and service lists. The measured page max width is 1392px; preserve the balance of centered headline blocks and left-aligned content rows. Follow the measured 8px base spacing system and compact density, while allowing the screenshots’ large open intervals around hero and case-study content to shape the rhythm. Thin dividers organize repeated rows without enclosing every block.

## Shape & elevation

- Radius: button `2px` · link `2px` · xs `2px` · sm `4px`
- Shadow `inset` (link): `rgb(0, 0, 0) 0px 0px 0px 1px inset`
- Shadow `inset-2` (link): `rgb(255, 255, 255) 0px 0px 0px 1px inset`
- Shadow `hairline` (button): `rgb(255, 255, 255) 0px 0px 0px 1px`
- Motion: standard transition `0.4s ease` on interactive elements.

The interface is predominantly flat: white surfaces meet through spacing and fine separators rather than pronounced shadows. The measured taupe and pale-grey borders define cards and rows. Buttons and links use slight 2px corners; measured inset hairlines appear on some outlined links, while photography supplies the strongest visual depth.

## Imagery

Use real workplace, furniture and interior photography, including wide room scenes and smaller project images. The page also includes video-led furniture imagery and client logos. Keep photographs naturally warm and architectural, with room context and furniture visible; their browns and creams belong to the photos, not the reusable interface palette. Avoid decorative illustration or 3D treatments that compete with the photography.

## Components

### Announcement and navigation

A narrow yellow announcement strip sits above a white header with black wordmark and links; the appointment action uses a Quiet Taupe fill.

### Hero headline

A large, centered uppercase condensed headline sits on white, followed by a short centered introduction and ample breathing room.

### Media showcase

Wide workplace photography or video carries service context, with concise overlays and simple outlined or filled actions.

### Process grid

Four numbered stages form a horizontally aligned sequence, with thin dividers and compact lists of service details.

### Service accordion

Editorial service rows pair a small descriptor with a prominent uppercase heading and a simple plus affordance.

### Metrics band

A Quiet Taupe section presents sustainability figures in a four-column strip with compact explanatory labels.

### Client case gallery

Project photography is arranged asymmetrically with generous white space and small client or category captions.

### Measured component styles

- **Primary button** (“Book an appointment to get started”): background #cac7b4 · text #000000 · radius 2px · padding 12px 20px · 500 16px Gd Grio Vf
- **Link** (“See our services & solutions”): transparent background · text #000000 · radius 2px · padding 12px 20px · 500 16px Gd Grio Vf · shadow rgb(0, 0, 0) 0px 0px 0px 1px inset
- **Card** (“Implemented projects since the start in ”): background #ffffff · text #000000 · radius 0px · padding 16px 24px · 400 16px Gd Grio Vf
- **Navigation item** (“Transforming Spaces, Driving Growth Subs”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Gd Grio Vf

## Do

- Use the measured Gd Grio Vf family or a close condensed sans substitute.
- Set major headings in uppercase with strong scale contrast.
- Keep white as the dominant interface surface.
- Reserve Quiet Taupe for meaningful actions and data emphasis.
- Use warm workplace photography as content, not as interface colour.
- Separate editorial modules with space and fine hairlines.
- Keep buttons simple, compact and lightly rounded.

## Don't

- Do not apply bright yellow across large content areas.
- Do not add gradients or decorative colour effects.
- Do not wrap every section in a raised card.
- Do not use soft, rounded consumer-app styling.
- Do not crowd the headline and introduction together.
- Do not treat photographic brown tones as brand swatches.

## Agent prompt

Build a new Yllw-style workplace transformation page with a white-first editorial canvas. Use Deep Ink (#000000) for type, Gallery White (#ffffff) for most surfaces, Soft Black (#191919) only for occasional inverse sections, Quiet Taupe (#cac7b4) for appointment actions and data emphasis, and Pale Line (#e5e5e5) for subtle separators. Use a condensed sans family such as Oswald if Gd Grio Vf is unavailable. Make headings large, bold, tightly tracked and uppercase; keep body copy calm and readable. Compose a compact header, spacious centered introduction, architectural workplace photography, ordered service or process rows, and clear conversion actions. Preserve generous whitespace, restrained borders, minimal corner rounding and a flat presentation. Use warm image tones only within photography, not as extra UI colours.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and introduction on white, beneath the compact site header. | brand introduction, value proposition | oversized uppercase type, centered copy, white canvas |
| 2 | product-showcase | Full-bleed workplace media with service labels and compact actions. | media carousel, service discovery | wide photography, overlay labels, outlined controls |
| 3 | cta | Centered section intro and paired actions on white. | appointment booking, service exploration | uppercase heading, taupe filled button, outlined link |
| 4 | how-it-works | Four-column process grid with numbered stages and aligned service lists. | step-by-step guidance, service details | numbered steps, thin dividers, compact list rows |
| 5 | feature-split | Centered heading and paragraph with two small actions. | value explanation, contact pathway | open white space, centered copy, paired buttons |
| 6 | stats | Taupe horizontal band with four data columns. | impact proof, quantified outcomes | large metric numerals, compact captions, divided columns |
| 7 | gallery | Large full-width interior media with minimal surrounding content. | visual browsing | full-bleed photography, image-led section |
| 8 | other | Single-column white interval between media and service content. | visual breathing room | white canvas, minimal content |
| 9 | feature-split | Left-side section label paired with a larger text block. | sustainability explanation | asymmetric columns, uppercase heading, open whitespace |
| 10 | feature-grid | Multi-column service content with image-led modules and headings. | service discovery, expandable details | service cards, editorial labels, plus affordances |
| 11 | other | White single-column spacer. | visual breathing room | open canvas |
| 12 | logo-cloud | Small section label alongside a prominent partner heading. | partner credibility | asymmetric heading layout, white background |
| 13 | logo-cloud | Three-column arrangement of partner marks on white. | brand proof | logo grid, generous gaps |
| 14 | gallery | Centered introduction followed by an open project gallery. | case study browsing, segment exploration | large headline, sparse image placement, caption labels |
| 15 | gallery | Single-column gallery area with widely spaced project imagery. | project exploration | asymmetric photography, small captions, large white gaps |
| 16 | other | White transition before the closing conversion feature. | content pause | open canvas |
| 17 | cta | Centered white message panel over a full-width interior photograph. | appointment booking, contact conversion | photo background, centered panel, taupe action |
| 18 | other | White spacer separating the CTA from customer feedback. | visual breathing room | minimal white section |
| 19 | testimonials | Left-side eyebrow and large heading beside supporting text. | customer proof, relationship building | asymmetric editorial columns, uppercase heading |

## Source CSS custom properties (selected)

```css
--color-scheme-1--background: #fff;
--_typography---font-styles--body: "Gd Grio Vf",Arial,sans-serif;
--color-scheme-1--text: #000;
--_typography---font-styles--heading: "Gd Grio Vf",Arial,sans-serif;
--_primitives---colors--foggy-gray-dark: #a19f90;
--color-scheme-1--border: #cac7b4;
--_primitives---colors--foggy-gray-darkest: #3c3b36;
--_primitives---colors--white: #fff;
--_primitives---colors--neutral-dark: #4c4c4c;
--_primitives---colors--neutral-darkest: #000;
--_primitives---colors--neutral: #7f7f7f;
--_primitives---colors--foggy-gray: #cac7b4;
--_primitives---colors--school-bus-yellow-light: #ffe74c;
--_primitives---colors--school-bus-yellow: #fd0;
--_primitives---colors--neutral-darker: #191919;
--_ui-styles---radius--medium: .5rem;
--_primitives---colors--neutral-lightest: #f2f2f2;
--_ui-styles---stroke--border-width: 0px;
--color-scheme-1--foreground: #f2f2f2;
--background-color--background-secondary<deleted|relume-variable-background-color-2>: #eee;
--border-color--border-primary<deleted|relume-variable-border-color-1>: black;
--_ui-styles---radius--small: .25rem;
--_ui-styles---radius--large: .75rem;
--color-scheme-1--accent: #000;
--color-scheme-2--background: #000;
--color-scheme-2--text: #fff;
--color-scheme-3--background: #665800;
--color-scheme-3--text: #fff;
--color-scheme-4--background: #f4f4f0;
--color-scheme-4--text: #000;
--_primitives---colors--foggy-gray-lighter: #f4f4f0;
--_primitives---colors--foggy-gray-light: #d9d7ca;
--color-scheme-3--foreground: #4c4200;
--_primitives---colors--foggy-gray-darker: #504f48;
--color-scheme-3--accent: #fd0;
--_primitives---colors--neutral-light: #b2b2b2;
--_primitives---colors--neutral-lighter: #d8d8d8;
--color-scheme-2--border: #00000026;
--color-scheme-2--accent: #7f7f7f;
--color-scheme-2--foreground: #fffbe5;
```

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