Skip to content
DesignMunkDesignMunk Submit a site

Overlay

overlay.com
The Future of Beauty is Automated
AI Lifestyle Webflow Homepage Ppeditorialold Roboto Flex
Share Visit site
overlay.com DESKTOP · 1440
Overlay

AI Breakdown

Design export

# Design brief: the Overlay 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/04173556/overlay-com-featured.png
- Above the fold: https://cdn.designmunk.com/2026/09/04173556/overlay-com-featured.png
- On DesignMunk: https://designmunk.com/overlay/

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

# Overlay: Editorial Serif Meets Robotic Beauty Orbit

## Overview

Overlay's brand balances beauty luxury with precise robotics. The interface should feel calm, premium, and slightly futuristic — spacious layouts, restrained color, minimal chrome. When tokens are silent, prefer soft contrasts and thin rules over heavy fills. Typography leads hierarchy; photography and diagrams carry narrative rather than dense copy.

## Colors

- **primary (#2e2f53):** Deep indigo for headlines, primary text, and icons.
- **secondary (#0c0c0e):** Near-black reserved for high-contrast micro text or legal copy.
- **tertiary (#f3c96b):** Soft gold accent for subtle highlights or status, used sparingly.
- **neutral (#fbf9fb):** Porcelain background for the entire experience.
- **border (#e6e2f3):** Lavender hairline for dividers, rings, and component outlines.
- **brand-york-plum (#d5bfe9):** Pale plum tint for UI flourishes and gentle backgrounds.
- **brand-gentle-grape (#908a9e):** Desaturated grape for captions and secondary labels.
- **surface (#fbf9fb):** Default surface color; matches Neutral.
- **on-surface (#2e2f53):** Default text/icon color on surfaces; matches Primary.

## Typography

- Ppeditorialold is the display family for headlines (headline-lg 72px and headline-md 49px, weight 400, tight tracking). It is custom/self-hosted; agents cannot fetch it directly. Use obtainable substitutes with similar contrast and elegance: Playfair Display, Cormorant, or Spectral.
- Geist Mono (Google) handles techno-toned headings and numerals (headline-sm 34px). Loadable via Google Fonts; use for steps, timestamps, and compact titles.
- Roboto Flex (Google) is the body and utility voice (headline-xs 23px; body-md 16px at 1.5 line height). Its optical flexibility suits long reads and small UI text.
- Keep editorial headlines short; mono and sans carry explanatory text. Negative letter-spacing in display sizes is intentional — do not apply it to body text.

## Layout

Spacing is spacious and sectional: xs 12px for in-component gaps, sm 28px for stack spacing within modules, md 68px for intra-section rhythm, lg 96px to separate major blocks, and xl 128px for hero and marquee paddings. Use a centered grid with generous margins; favor wide single-column reading with occasional two-column splits for copy and media. Keep line lengths moderate to short to preserve the editorial tone.

## Elevation & Depth

Depth is mostly flat by design. Use the measured small shadow (rgba(46, 47, 83, 0.18) 0px 18px 55px 0px) sparingly on media or modal layers. For everyday hierarchy, rely on the Border color (#e6e2f3) as 1px rules, light tints (brand-york-plum), and whitespace. Avoid medium/large shadows — they are explicitly none.

## Shapes

Rounded corners communicate softness: 31px (lg) for pill buttons and key CTAs, 24px (md) for cards and modals, 18px (sm) for secondary buttons and compact inputs. Keep link buttons square (0 radius) to differentiate text actions from tactile controls.

## Components

Button variants
- Primary Button: background #fbf9fb, text #2e2f53, height 44px, padding 11.04px 20px, radius 31px. Use for the main action when it appears near strong visuals.
- Secondary Button: background #fbf9fb, text #2e2f53, height 44px, padding 11.04px 20px, radius 18px. Pair with Primary for secondary decisions.
- Link Button: text-only, color #2e2f53, radius 0. Reserve for navigation and lightweight CTAs.
- Card: background #ffffff, text #2e2f53, radius 24px, padding 60px. Optional small shadow for media or modals.

### Top Bar Navigation
Minimal header with brand at left and utility links (Careers, Get in touch) as Link Buttons in #2e2f53 on #fbf9fb. Section padding lg (96px) top/bottom.

### Hero Editorial Block
Center-aligned headline using Ppeditorialold at 72px/1.05 with -0.03em tracking in #2e2f53. Micro-CTA beneath as Link Button; keep hero padding xl (128px).

### Feature Orbit
An elliptical rule drawn with Border (#e6e2f3) surrounding the key image. Four captions sit on the path using Roboto Flex 16px or headline-xs 23px with small plum icons (#d5bfe9/#908a9e). Outer margin md–lg to keep it airy.

### "How It Works" Stepper
Three steps labeled 01/02/03 in Geist Mono 34px, titles in headline-xs 23px Roboto Flex, body at 16px. Use md (68px) gaps between steps and hairline #e6e2f3 dividers.

### Video/Media Card
Demonstration block set on a Card (#ffffff) with 24px radius and optional small shadow. Caption and overline in #908a9e; controls use Secondary Button styling.

### Newsletter / Updates CTA
Compact form with Roboto Flex 16px inputs, radius 18px. Submit uses Primary Button (31px pill). Place on neutral surface with md spacing around.

### Footer
Two-column layout for contact, privacy, and terms. Text color #2e2f53 on #fbf9fb; dividers in #e6e2f3. Body at 16px, small links as Link Buttons.

### Privacy Preferences Modal
Modal implemented as Card: background #ffffff, radius 24px, padding 60px, small shadow. Buttons map to Primary/Secondary styles; destructive/deny may use #908a9e text to soften tone.

## Do's and Don'ts

- Do reserve Ppeditorialold (or its substitutes) for H1–H2 to preserve the luxury tone; use Roboto Flex for paragraphs and UI.
- Do build sections with lg (96px) or xl (128px) vertical padding; this system relies on whitespace, not shadows.
- Do use #e6e2f3 borders for structure and the plum tints for gentle emphasis; keep #f3c96b accents minimal.
- Don't introduce heavy drop shadows or dark panels; only the small shadow token is allowed.
- Don't mix radii within a component — pick 31px for primary CTAs, 18px for secondary, 24px for surfaces.
- Don't invert to dark mode or add saturated brand colors beyond the supplied plums.

## Agent Prompt Guide

Quick color reference
- Text: #2e2f53
- Background: #fbf9fb
- Border: #e6e2f3
- Accent: #d5bfe9 (tint) and #f3c96b (gold)

1) Build the centered hero
- Background #fbf9fb. Max width 900px, center.
- H1: font-family "Ppeditorialold", fallback "Playfair Display", size 72px, weight 400, line-height 1.05, letter-spacing -0.03em, color #2e2f53, center.
- Subtext link: Link Button style, color #2e2f53. Section padding: 128px top and bottom.

2) Create the Feature Orbit
- Place a portrait image centered. Draw an oval border 1px solid #e6e2f3 around it (width 90% of container).
- Add four captions on the perimeter in Roboto Flex 16px, color #2e2f53; small dot icons in #d5bfe9.
- Outside margin: 68px.

3) "How It Works" stepper
- Three columns.
- Step numbers: Geist Mono 34px/1.21, color #2e2f53.
- Titles: Roboto Flex 23px/1.22, color #2e2f53.
- Body: Roboto Flex 16px/1.5.
- Gaps: 68px between columns; divider lines 1px #e6e2f3.

4) Video card section
- Card: background #ffffff, radius 24px, padding 60px, shadow rgba(46,47,83,0.18) 0 18px 55px 0.
- Heading: Ppeditorialold 49px/1.54, color #2e2f53.
- CTA: Primary Button (44px tall, 31px radius, background #fbf9fb, text #2e2f53).

## Similar Brands

- Glossier — similarly airy with editorial type; Overlay is cooler in palette and more technical in its diagrams.
- Dyson Hair — product-driven minimalism; Overlay uses softer borders and less industrial contrast.
- FOREO — beauty-tech devices with rounded forms; Overlay is paler and more editorial in typography.
- Nothing — stark hardware presentation and mono details; Overlay keeps a warmer, beauty-oriented voice while borrowing the tech minimalism.
- Humane — restrained layouts and device storytelling; Overlay swaps dark drama for light porcelain surfaces.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #2e2f53;
  --color-secondary: #0c0c0e;
  --color-tertiary: #f3c96b;
  --color-neutral: #fbf9fb;
  --color-border: #e6e2f3;
  --color-brand-york-plum: #d5bfe9;
  --color-brand-gentle-grape: #908a9e;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 72px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.05;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 49px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.54;
  --text-headline-md-tracking: -0.044em;
  --text-headline-sm-size: 34px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.21;
  --text-headline-sm-tracking: -0.011em;
  --text-headline-xs-size: 23px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-ppeditorialold: "Ppeditorialold";
  --font-geist-mono: "Geist Mono";
  --font-roboto-flex: "Roboto Flex";

  /* Rounded */
  --radius-sm: 18px;
  --radius-md: 24px;
  --radius-lg: 31px;

  /* Spacing */
  --spacing-xs: 12px;
  --spacing-sm: 28px;
  --spacing-md: 68px;
  --spacing-lg: 96px;
  --spacing-xl: 128px;

  /* Components */
  --button-primary-background-color: var(--color-neutral);
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-lg);
  --button-primary-padding: 11.04px 20px;
  --button-primary-height: 44px;
  --button-secondary-background-color: var(--color-neutral);
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 11.04px 20px;
  --button-secondary-height: 44px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #ffffff;
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 60px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #2e2f53;
  --color-secondary: #0c0c0e;
  --color-tertiary: #f3c96b;
  --color-neutral: #fbf9fb;
  --color-border: #e6e2f3;
  --color-brand-york-plum: #d5bfe9;
  --color-brand-gentle-grape: #908a9e;
  --color-surface: #fbf9fb;
  --color-on-surface: #2e2f53;
  --font-headline-lg: "Ppeditorialold";
  --font-headline-md: "Ppeditorialold";
  --font-headline-sm: "Geist Mono";
  --font-headline-xs: "Roboto Flex";
  --font-body-md: "Roboto Flex";
  --text-headline-lg: 72px;
  --text-headline-md: 49px;
  --text-headline-sm: 34px;
  --text-headline-xs: 23px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.03em;
  --tracking-headline-md: -0.044em;
  --tracking-headline-sm: -0.011em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 18px;
  --radius-md: 24px;
  --radius-lg: 31px;
  --spacing-xs: 12px;
  --spacing-sm: 28px;
  --spacing-md: 68px;
  --spacing-lg: 96px;
  --spacing-xl: 128px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.18,
                    0.184,
                    0.325
                ],
                "hex": "#2e2f53"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.047,
                    0.047,
                    0.055
                ],
                "hex": "#0c0c0e"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.953,
                    0.788,
                    0.42
                ],
                "hex": "#f3c96b"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.984,
                    0.976,
                    0.984
                ],
                "hex": "#fbf9fb"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.902,
                    0.886,
                    0.953
                ],
                "hex": "#e6e2f3"
            }
        },
        "brand-york-plum": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.835,
                    0.749,
                    0.914
                ],
                "hex": "#d5bfe9"
            }
        },
        "brand-gentle-grape": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.565,
                    0.541,
                    0.62
                ],
                "hex": "#908a9e"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.984,
                    0.976,
                    0.984
                ],
                "hex": "#fbf9fb"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.18,
                    0.184,
                    0.325
                ],
                "hex": "#2e2f53"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 28,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 68,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 128,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 18,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 31,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Ppeditorialold",
                "fontSize": {
                    "value": 72,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.03,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Ppeditorialold",
                "fontSize": {
                    "value": 49,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.044,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist Mono",
                "fontSize": {
                    "value": 34,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.011,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Roboto Flex",
                "fontSize": {
                    "value": 23,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Roboto Flex",
                "fontSize": {
                    "value": 16,
                    "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 Overlay**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
oka.com
OKA Ecommerce
OKA
duftundkultur.com
Duft und Kultur Ecommerce
Duft und Kultur
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite