Putty Stone
#cac7b4Light neutral action fill for buttons on dark surfaces.
Yllw
yllw.comWebsite preview
The design language
Yllw is an editorial workspace brand: a single variable font pressed into monumental display sizes, a near-grayscale palette anchored by one warm putty neutral, and borders drawn with 1px inset strokes instead of shadows. The page reads like a Swiss-Bauhaus print artifact dropped onto a web canvas — oversized uppercase headlines (often 90–216px) with line-heights pulled tight to 0.88, a dominant putty-stone hue (#cac7b4) that functions simultaneously as canvas, button, and border, and a single signal-yellow announcement bar that acts as the only chromatic punctuation. Components are deliberately raw: 2px corners, hairline rules, no decorative gradients, no elevation depth — every surface is defined by adjacency, not by shadow. New screens should feel like pages from the same printed monograph, not like a product UI.
Color palette
brand
accent
Signal Yellow
#ffdd00Top announcement bar background, occasional highlight — the only fully saturated color in the system, reserved for time-sensitive messaging and high-visibility callouts
neutral
Ink
#000000Primary text, icon strokes, primary borders — the maximum-contrast foreground that does 90% of the typographic and structural work
Paper
#ffffffInverse surface, card backgrounds on darker sections, button text on filled putty buttons, hairline border against putty canvas
Carbon
#191919Secondary dark surface for feature sections and inverted blocks — softer than pure ink, used where a dark band needs to feel like printed stock rather than a screen
Smoke
#ccccccDisabled and divider strokes on light surfaces — a third neutral tier between ink and putty for de-emphasized rules
Typography
Type scale
Minor Third (1.2) · 18px basedisplay-xl
216px · 400 · 0.88 · -5.4px trackingThe quick brown fox jumps
display-lg
166px · 700 · 0.88 · -3.32px trackingThe quick brown fox jumps
text-116
116px · 700 · 0.96The quick brown fox jumps
display
97px · 700 · 0.9 · -1.455px trackingThe quick brown fox jumps
text-90
90px · 400 · 0.9The quick brown fox jumps
display-sm
64px · 400 · 0.96 · -0.64px trackingThe quick brown fox jumps
heading-xl
44px · 400 · 1The quick brown fox jumps
text-40
40px · 400 · 1The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Gd Grio Vf
- Weights
- 400, 500, 600, 700
- Sizes
- 13, 14, 16, 18, 20, 26, 36, 40, 44, 64, 90, 97, 116, 166, 216
- Line height
- 0.88, 0.90, 0.96, 1.00, 1.04, 1.18, 1.24, 1.28, 1.50
- Letter spacing
- -0.025em at 216px (≈-5.4px), -0.020em at 166px (≈-3.32px), -0.015em at 116px (≈-1.74px), -0.010em at 64px (≈-0.64px), -0.008em at 40px (≈-0.32px), -0.006em at 26px (≈-0.156px), -0.005em at 16px (≈-0.08px)
- Fallback
- Inter Variable (variable axis) or Söhne (non-free)
- Features
- Inherits variable font axes; no explicit OpenType feature overrides detected
Single variable font covering everything from 13px captions to 216px hero display. Used universally for headings, body, nav, buttons, badges, cards, and footers. The signature choice is weight 500–600 at 116–216px with line-height compressed to 0.88–0.96 — type that crowds itself like a printed headline slab, not like UI text.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1400px
- Section gap
- 64-96px
- Card padding
- 24-32px
- Element gap
- 16-24px
Border radius
nav
2pxtags
2pxcards
6pxbadges
2pxbuttons
2pxSpacing scale
1px4px8px12px16px20px24px32px40px48px63px64px80px90px96px97px124px128px160px288pxGuidelines
Do
- Set every page background to #cac7b4 (Putty Stone) unless the section is explicitly inverted — this color is the system's structural identity, not just a surface choice.
- Use Gd Grio Vf for everything, including UI labels and buttons — mixing in a secondary typeface breaks the editorial coherence.
- Pull display line-height to 0.88–0.96 at 64px+ — the tight leading is what makes the headlines feel architectural rather than typographic.
- Define cards and buttons with 1px inset strokes in #000000 or #ffffff, never with drop shadows — shadows do not exist in this system.
- Keep the primary CTA to #cac7b4 background with #000000 text — it is deliberately muted so the display type can do the visual heavy lifting.
- Reserve #ffdd00 (Signal Yellow) exclusively for the announcement bar and one-off high-urgency callouts; using it in the body collapses the hierarchy.
- Apply 2px border-radius to all buttons, tags, badges, and nav controls — 6px is reserved for content cards only.
Don’t
- Don't introduce drop shadows, blur, or glow effects — the system rejects all forms of depth-via-blur.
- Don't add a second saturated accent color (orange, red, blue) — yellow is the only chromatic voice, and adding another would break the editorial restraint.
- Don't round corners above 6px — anything softer than that feels like a different product (consumer app, not monograph).
- Don't use line-height above 1.0 for display sizes — loose leading on 100px+ type reads as a blog post, not a poster.
- Don't apply positive letter-spacing to large type — the negative tracking at 64px+ is what gives the headlines their compressed, slab-like weight.
- Don't place black buttons on putty canvas — use white-filled secondary buttons for contrast, not inverted primaries.
- Don't use gradients, duotones, or color overlays on photography — the floor plan and people shots in the hero are unprocessed.
Components
Announcement Bar
Site-wide top strip for time-sensitive messagingFull-bleed #ffdd00 (Signal Yellow) bar, 32–40px tall. Text in Gd Grio Vf 13–14px, weight 500, #000000, centered. No padding inside the colored zone beyond the line-height. Optional flag icon and language switcher sit at the far right with 8px gap. Serves as the only chromatic punctuation across the entire site.
Primary Navigation
Sticky top nav with logo, grouped links, and CTASits on #cac7b4 (Putty Stone) canvas. Logo mark on the left ('YLLW' wordmark in Gd Grio Vf 16px, weight 700, uppercase, letter-spacing tight). Two link groups flanking center: left group (Services, Interior, Subscription, YLLW Factory) and right group (Projects, Customer Segments), separated by ~200px of whitespace. Far right: text links (About Us, Contact) then a 2px-radius filled button (#cac7b4 background, #000000 border inset 1px, 16px 20px padding, 14px weight 500). Total nav height ~56px.
Primary CTA Button (Putty Filled)
The default action — booking a meeting, subscribing, confirmingBackground #cac7b4, text #000000, 2px border-radius, 1px inset #000000 stroke. Padding 12px 20px. Gd Grio Vf 14px, weight 500, negative letter-spacing. No hover state beyond a subtle background shift toward #b8b5a3. This is the only 'action color' in the system — it is deliberately muted so it never competes with the display typography.
Secondary Button (White Outlined)
Companion to the primary, used for 'See our subscription solutions' style actionsBackground #ffffff, text #000000, 2px border-radius, 1px inset #000000 stroke. Same padding (12px 20px) and 14px weight 500 type as the primary. Sits on putty canvas where the filled button would disappear into the background.
Ghost Text Link
Inline navigation, 'About Us', 'Contact', section-level linksNo background, no border. Gd Grio Vf 14px, weight 500, #000000, underline only on hover. 8–12px horizontal spacing from adjacent links. The absence of chrome is deliberate — links exist as type first, controls second.
Hero Display Headline
Opening page statement, full viewport widthGd Grio Vf at 116–216px, weight 500, uppercase, line-height 0.88, letter-spacing tightened to -0.015em to -0.025em. Color #000000 on #cac7b4 canvas. Text breaks across 2 lines with a visual element (image or graphic) embedded inline between the words — the 'SPACES' and 'GROWTH' halves are separated by a photograph. The line-height compression makes the two-line block occupy roughly the same vertical space as one would expect from a single line — it is a slab, not a paragraph.
Section Heading (Mid Display)
Interior section titles like 'SUBSCRIPTION', 'FOUR STEPS, A CLEAR PROCESS'Gd Grio Vf 40–64px, weight 500–600, uppercase, line-height 0.96, letter-spacing -0.01em. Color #ffffff when overlaid on putty/photographic backgrounds, #000000 on putty canvas. Sits with generous 48–64px top padding above.
Service Accordion Row
Expandable service list in the 'Four Steps' sectionFull-width row on #ffffff surface with 1px #000000 hairline at top and bottom. Left column: short descriptor in Gd Grio Vf 14px weight 400 #000000 (e.g. 'Flexible office solutions'). Right column: service name in Gd Grio Vf 20–26px weight 500 uppercase #000000 (e.g. 'SUBSCRIPTION'). Far right: a '+' glyph at 18px for expand state, rotating to '−' when open. Row height ~64–80px, 24px horizontal padding. No card background, no shadow — the hairline rule does the grouping.
Carousel Slide (Overlay Card)
Hero-level feature panels with overlaid title and copyFull-width band, ~480–600px tall, background either a desaturated photograph (e.g. an architectural floor plan) or the putty canvas. Title text in #ffffff Gd Grio Vf 64–90px uppercase weight 500 sits center-left with 48px padding. Body copy in #ffffff 16px weight 400, max-width 480px, sits below the title. Navigation arrows (← →) are 40×40px boxes with 1px inset white border, 2px radius, at the bottom-left. Two button variants sit to the right of the body copy: a 'See solutions' secondary button and a 'Book a meeting' primary button.
Info Card (Putty Surface)
Compact content blocks for stats, highlights, or feature snippetsBackground #cac7b4, 6px border-radius, 1px #000000 hairline. Padding 24–32px. Optional 1px inset white stroke for cards sitting on darker sections. No shadow. Headline at 26–36px weight 600, supporting text at 14–16px weight 400. The 6px radius is the only place a non-2px corner appears — it is reserved for this card type to give it slight softness without breaking the system's sharp character.
Image Tile (Inline Hero Photo)
Photograph embedded between hero headline wordsRaw rectangular image, no border-radius, no border, no caption. Sits inline within the text flow, sized to roughly match the x-height of the display headline it interrupts. Treatment is documentary, not decorative — straight crops, no overlays, no rounded corners.
Language Switcher
Locale toggle in the announcement barCompact control with a small flag glyph (24×16px, no border-radius), 8px gap, then 'EN' in Gd Grio Vf 13px weight 500 #000000 with a 2px-tall chevron glyph. Sits at the far right of the announcement bar.
Surfaces & elevation
Level 0
Putty Canvas
#cac7b4Default page background and dominant neutral plane — sets the warm, paper-like tone across the site
Level 1
Paper Card
#ffffffLifted card surface that sits on top of the putty canvas for contrast
Level 2
Signal Banner
#ffdd00Full-bleed top announcement bar — the only chromatic band in the system
Level 3
Carbon Block
#191919Inverted section background for feature/footer dark blocks
No drop shadows. Surfaces are defined entirely by 1px inset strokes, color contrast, and spatial adjacency. The system treats elevation as a typographic and chromatic problem, not a shadow problem — putting a card on the putty canvas means giving it a white fill and a 1px black hairline, not a soft shadow.
Buttons (outlined on light)
inset 0 0 0 1px #000000
Buttons (outlined on dark)
inset 0 0 0 1px #ffffff
Focus ring
0 0 0 1px #ffffff (on dark surfaces)
Layout & imagery
Layout
Page model is max-width contained (~1200–1400px) with a putty canvas that bleeds edge-to-edge. The hero is a two-line monumental headline at 116–216px with a photograph embedded inline between the words, centered text block with the paragraph below. Below the hero, sections alternate between white surfaces (e.g. the 'Four Steps' accordion list) and putty/photographic full-bleed bands (e.g. the Subscription carousel). A single full-bleed carousel with 480–600px height serves as a feature showcase, using left-aligned overlay text on a desaturated image. Content arrangement is editorial: centered stacks for hero, left-aligned two-column for body+visual blocks, and full-width row-based accordions for service listings. Navigation is a single horizontal bar with two link clusters and a right-aligned CTA. No sidebar, no mega-menu. Section gaps are 64–96px, with 48px padding between section title and content. The rhythm is print-like — generous breathing room, no information density, each block is given room to read as a single statement.
Imagery
Photography is documentary and unprocessed — straight crops of office interiors, hands-on-laptops teamwork, and architectural floor plans/blueprints. No lifestyle staging, no color grading, no duotone overlays. Images are rectangular with no border-radius, embedded inline within the text flow rather than treated as standalone hero panels. The floor plan in the carousel is a muted near-monochrome that blends with the putty canvas. The overall image-to-text ratio is low — the site is text-dominant, with photography functioning as visual punctuation between oversized headline words rather than as the focal point. No illustration, no 3D, no abstract graphics. Icons are minimal and typographic (the '+' expand glyph, the '← →' arrows, the 'EN ▾' locale toggle) — no icon library, no filled glyphs.
Design notes
Agent Guide
Quick Color Reference: - text: #000000 (primary) / #ffffff (on dark/putty) - background: #cac7b4 (canvas) / #ffffff (cards) / #191919 (inverted sections) - border: #000000 (1px inset, default) / #ffffff (on dark surfaces) - accent: #ffdd00 (announcement bar only) - primary action: no distinct CTA color Example Component Prompts: 1. Build a hero section: #cac7b4 canvas. Headline in Gd Grio Vf 166px weight 500 uppercase, #000000, line-height 0.88, letter-spacing -0.02em, split across two lines with a rectangular photograph embedded inline between the two halves. Paragraph below in Gd Grio Vf 16px weight 400 #000000, max-width 640px, centered. 2. Build a service accordion row: #ffffff surface, 1px #000000 hairline top and bottom, 80px height. Left column has Gd Grio Vf 14px weight 400 #000000 short label. Right column has Gd Grio Vf 26px weight 500 uppercase #000000 service name. Far right has a '+' glyph at 18px in #000000. 24px horizontal padding. 3. Build a carousel slide: full-width #cac7b4 or photographic background, 520px height. Title in Gd Grio Vf 90px weight 500 uppercase #ffffff, line-height 0.9, positioned center-left with 48px padding. Below: 16px body copy #ffffff max-width 480px, then a white outlined button (See solutions) beside a putty filled button (Book a meeting). Bottom-left: 40×40px arrow nav with 1px inset #ffffff border. 4. Build an info card: #cac7b4 background, 6px radius, 1px #000000 hairline, 32px padding. Headline Gd Grio Vf 26px weight 600 #000000, supporting text 16px weight 400 #000000 below. No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color.
Similar brands
Pentagram
Same editorial-monograph approach — single grotesque typeface, oversized display headlines, minimal palette, hairline rules instead of cards or shadows.
Werkstatt (Studio Dumbar/Experimental Jetset studios)
Same Swiss-Bauhaus print-artifact feel: monolinear typography at monumental sizes, putty/earthy neutral canvas, accent used sparingly, sharp 2px corners.
Aesop
Same restrained editorial restraint — warm neutral background, large quiet display type, single muted action color, no decorative gradients or shadows.
Vitsoe
Same typographic confidence and product-as-poster sensibility — single sans-serif at extreme sizes, hairline dividers, putty/warm-gray canvas, almost no color.
Resn
Same convention-breaking choice to use a single near-gray as the dominant brand surface rather than white, giving the page a printed-paper quality rather than a screen quality.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
