Skip to content
DesignMunkDesignMunk Submit a site

Yllw

yllw.com
Transforming spaces, driving growth—A to Z relocation, sustainability.
Agency Real Estate Webflow Homepage Gd Grio
Share Visit site
yllw.com DESKTOP · 1440
Yllw

AI Breakdown

Design export

# Design brief: the Yllw design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/14090019/yllw-com-en-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/14090019/yllw-com-en-featured-1440x900.webp
- On DesignMunk: https://designmunk.com/yllw/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Yllw: Compressed Headlines, Yellow Ribbons, Quiet CTAs

## Overview

Direct, industrial and confident. The UI relies on high-contrast black text on white with occasional high-visibility yellow for announcements and accents. Typography is the primary brand voice; layouts breathe with generous vertical spacing and simple, grid-based sections. The audience is B2B decision-makers comparing services, so clarity, proof and process are prioritized over flourish.

## Page Structure

- Utility bars: a slim site-wide announcement ribbon and language selector, using a high-visibility background; minimal text, left-aligned.
- Global navigation: single-row top nav, logo left, primary links centered/left, and a right-aligned "Book a meeting" CTA; lean, no heavy dividers.
- Hero: oversized compressed headline stacked over two lines, punctuated by a slim image strip; short explanatory paragraph and two CTAs below.
- Service spotlight slider: full-width section with a large plan/diagram background; one large centered title label (e.g., Subscription) and subtle side labels; previous/next controls.
- Process introduction: heading plus two CTAs, followed by a four-step grid linking to deeper content.
- Proof block: narrative paragraph with two CTAs ("Contact" and "About").
- KPI counters: compact stat rows/tiles displaying emissions saved, savings, and factory throughput.
- Services tabs: a sequence of sub-sections (Subscription, Factory, Relocation, Furniture Purchases, Interior) each with a short pitch, two CTAs, and a row of feature tabs.
- Brands/partners: a dense logo strip of featured furniture brands.
- Client companies: marquee of enterprise clients, followed by a case grid (row of project cards linking to details).
- Testimonials: stacked quotes with author lines and deep links to related cases.
- FAQ: accordion list of common questions with a link to the full FAQ.
- Final CTA: single-column prompt with a prominent booking button.
- Footer: multi-column site map, contact and policy links in a single dense block.

## Colors

- **primary (#000000):** Core ink for headlines, navigation, and body text.
- **secondary (#dc261e):** Attention color for alerts or emphasis beyond the standard accent.
- **tertiary (#ffdd00):** High-visibility accent for ribbons, badges, and small UI highlights.
- **neutral (#ffffff):** Default page surface and card backgrounds.
- **border (#e5e7eb):** Hairline dividers and card outlines; separates content without shadows.
- **brand-porcelain-rose (#ec6c6c):** Optional brand accent for editorial moments or data highlights.
- **brand-inner-journey (#6f67a9):** Secondary accent for charts or tabs when multiple hues are needed.
- **brand-sunlit-kelp-green (#7c6c04):** Earthy accent supporting sustainability storytelling and data viz.
- **surface ({colors.neutral}):** Alias to the neutral surface for consistency across components.
- **on-surface ({colors.primary}):** Standard on-white text color ensuring contrast and legibility.

## Typography

- Gd Grio Vf (custom): A condensed, industrial grotesque used for all headline levels and body. It is self-hosted and not from Google; use only if licensed and available in your environment.
- Practical substitutes (freely available): For display headlines use Oswald or Anton (Google) at bold weights to approximate the compressed voice. Pair with Inter or Source Sans 3 (Google) at regular for body copy if a second family is preferred. Keep tracking tight as in tokens and maintain high contrast black on white.
- Roles: headline-lg (54px/700) for hero and section intros; headline-md (42px/700, tight letter-spacing) for major subheads; headline-sm (33px/400) and headline-xs (26px/400) for in-section titles; body-md (20px/400, 1.5 line height) for paragraphs and long reads.

## Layout

- Spacing scale is asymmetric and generous: 8, 20, 48, 96, 154. Use md (48px) for intra-section padding, lg (96px) for section gaps, and xl (154px) for hero top/bottom breathing room.
- Grid is simple and content-first: single column for hero and narrative, two-column splits for text+media, and rows of tiles or cards for steps, cases, and brands. Align to a consistent max width; allow full-bleed background bands where needed.
- Inline rhythm: 8px for micro-gaps, 20px for button and control spacing; avoid cramped clusters—this system reads best when elements have room.

## Elevation & Depth

- Shadows are largely absent; separation is handled by whitespace, strong type hierarchy, and light borders (#e5e7eb). The measured sm shadow is reserved for overlays or modals.
- Depth within sections comes from tonal contrast (black on white), bold headings, and the occasional full-bleed band for emphasis rather than layered cards.

## Shapes

- Radii are minimal and utilitarian: 4px for interactive controls and small inputs; 8px for cards and larger containers. The geometry reads industrial rather than soft; roundedness carries no semantic meaning beyond scale.

## Components

- Buttons
  - Primary: background #cac7b4, text #000000, 4px radius, 40px height, 8px×20px padding. Use for key CTAs like "Book a meeting."
  - Secondary: text-only button, #000000 text, 4px radius, 40px height, 8px×20px padding. Use adjacent to primary.
  - Link: bare inline action with #000000 text and 0px radius.
- Card: white background, black text, 8px radius, 16px padding; add #e5e7eb borders to group content when lists get dense.

### Utility Ribbon
- Full-width bar using tertiary (#ffdd00) with black text. Place brief announcements or quick-links above the main nav.

### Primary Navigation
- Single row with logo left, links across, and a right-aligned primary button. Keep spacing at 20–48px and use headline-xs or body-md sizes.

### Hero Headline with Image Strip
- Two-line, oversized headline (headline-lg) in black on white. A thin image strip or small gallery sits inline or directly beneath; follow with body-md copy and a primary + secondary CTA row.

### Service Slider Panel
- Full-width band featuring a diagram or plan. Centered large label and subdued side labels; include previous/next controls. Keep text white or black for contrast over imagery and preserve 96–154px vertical padding.

### Four-Step Process Grid
- Row of four linked tiles (or two-by-two on small screens) with step numbers, brief descriptions, and arrow links. Use card styling with 8px radius and light borders.

### KPI Counter Row
- Compact grid of stat tiles: big numeric heading (headline-md) and a short label in body-md. Spacing md between items; borders define separation.

### Brand Marquee
- Dense, multi-row list of brand logos. Use a simple grid with equal gutters and optional top/bottom borders to corral the block.

### Testimonial Stack
- Quote text in body-md with author lines; each quote can sit in a card with 8px radius and light border; include a deep-link to the corresponding case.

## Do's and Don'ts

- Do keep typography large and condensed for section headings; the type is the primary brand signal.
- Do reserve yellow (#ffdd00) for ribbons, badges, and small accents; use it sparingly next to the restrained buttons.
- Do use light borders (#e5e7eb) to group dense lists (brands, FAQ, cases) instead of shadows.
- Don't switch primary CTAs to yellow; if more visibility is required, pair the beige primary with a subtle yellow companion accent rather than recoloring.
- Don't crowd rows of logos or stats—apply md (48px) gutters and allow breathing room.
- Don't mix rounded scales; stick to 4px for controls and 8px for cards to maintain consistency.

## Agent Prompt Guide

Quick color reference — text: #000000, background: #ffffff, border: #e5e7eb, accent: #ffdd00; primary button: #cac7b4.

1) Hero with compressed headline and dual CTAs
- Container: max-width content on #ffffff, vertical padding 154px.
- Headline: Gd Grio Vf (or Oswald fallback) at 54px, 700, line-height 1.2, #000000.
- Paragraph: Gd Grio Vf (or Inter) at 20px, 400, line-height 1.5, #000000, max-width 70ch.
- CTAs: primary button (#cac7b4 text #000000, radius 4px, height 40px, padding 8px 20px) + secondary text button (#000000).
- Spacing: 20px between CTAs, 48px between headline, copy, and actions.

2) Four-step process grid
- Section background #ffffff with 96px vertical padding.
- Title: 42px/700, letter-spacing -0.023em, #000000.
- Grid: 4 cards (wrap at smaller screens), each white with 1px border #e5e7eb, radius 8px, padding 16px.
- Inside each: step number in 26px, label in 20px; 20px spacing between elements.

3) KPI counters band
- Band: #ffffff, top/bottom padding 96px; optional thin top border #e5e7eb.
- Grid: 3–4 stat tiles with 48px gutters.
- Number: 42px/700, #000000. Label: 20px/400.
- Add a small accent rule under the section title using #ffdd00 at 8px height.

4) Brand logo strip
- Container: #ffffff with 96px vertical padding; top and bottom borders #e5e7eb.
- Layout: multi-row grid of logos inside white 8px-radius cards with 16px padding; 20px gutters.

5) Testimonial card
- Card: #ffffff, border #e5e7eb, radius 8px, padding 16px.
- Quote: 20px/400; author line in 26px/400 above a link-style "Read more" using #000000.

## Similar Brands

- WeWork: similarly large, confident headlines and proof-heavy sections; Yllw is more restrained with color and uses lighter borders over imagery.
- IKEA for Business: clean grids and product-driven storytelling; Yllw leans more into process and sustainability KPIs than catalog density.
- Herman Miller: spacious layouts and credibility via brand heritage; Yllw swaps heritage for circularity metrics and partner logos.
- HAY: minimal color and bold type; Yllw is tougher and more industrial in its condensed headline voice.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #dc261e;
  --color-tertiary: #ffdd00;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-porcelain-rose: #ec6c6c;
  --color-brand-inner-journey: #6f67a9;
  --color-brand-sunlit-kelp-green: #7c6c04;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 54px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.2;
  --text-headline-md-size: 42px;
  --text-headline-md-weight: 700;
  --text-headline-md-leading: 1.01;
  --text-headline-md-tracking: -0.023em;
  --text-headline-sm-size: 33px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.28;
  --text-headline-sm-tracking: -0.012em;
  --text-headline-xs-size: 26px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.19;
  --text-headline-xs-tracking: -0.006em;
  --text-body-md-size: 20px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-gd-grio-vf: "Gd Grio Vf";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 20px;
  --spacing-md: 48px;
  --spacing-lg: 96px;
  --spacing-xl: 154px;

  /* Components */
  --button-primary-background-color: #cac7b4;
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 8px 20px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 20px;
  --button-secondary-height: 40px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-secondary: #dc261e;
  --color-tertiary: #ffdd00;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-porcelain-rose: #ec6c6c;
  --color-brand-inner-journey: #6f67a9;
  --color-brand-sunlit-kelp-green: #7c6c04;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "Gd Grio Vf";
  --font-headline-md: "Gd Grio Vf";
  --font-headline-sm: "Gd Grio Vf";
  --font-headline-xs: "Gd Grio Vf";
  --font-body-md: "Gd Grio Vf";
  --text-headline-lg: 54px;
  --text-headline-md: 42px;
  --text-headline-sm: 33px;
  --text-headline-xs: 26px;
  --text-body-md: 20px;
  --tracking-headline-md: -0.023em;
  --tracking-headline-sm: -0.012em;
  --tracking-headline-xs: -0.006em;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 700;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 4px;
  --radius-md: 8px;
  --spacing-xs: 8px;
  --spacing-sm: 20px;
  --spacing-md: 48px;
  --spacing-lg: 96px;
  --spacing-xl: 154px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.863,
                    0.149,
                    0.118
                ],
                "hex": "#dc261e"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    0.867,
                    0
                ],
                "hex": "#ffdd00"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-porcelain-rose": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.925,
                    0.424,
                    0.424
                ],
                "hex": "#ec6c6c"
            }
        },
        "brand-inner-journey": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.435,
                    0.404,
                    0.663
                ],
                "hex": "#6f67a9"
            }
        },
        "brand-sunlit-kelp-green": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.424,
                    0.016
                ],
                "hex": "#7c6c04"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 48,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 154,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Gd Grio Vf",
                "fontSize": {
                    "value": 54,
                    "unit": "px"
                },
                "fontWeight": 700
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Gd Grio Vf",
                "fontSize": {
                    "value": 42,
                    "unit": "px"
                },
                "fontWeight": 700,
                "letterSpacing": {
                    "value": -0.023,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Gd Grio Vf",
                "fontSize": {
                    "value": 33,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.012,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Gd Grio Vf",
                "fontSize": {
                    "value": 26,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.006,
                    "unit": "em"
                }
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Gd Grio Vf",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Yllw**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Agency →
bnw.ae
BNW Real Estate
BNW
planpoint.io
Planpoint Real Estate
Planpoint
halo-lab.com
Halo Lab Agency
Halo Lab
fureyfs.com
Furey Agency
Furey