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

# Bedouin's Daughter · Design System

> A cinematic beauty world in lemon light and deep black.

**Theme:** dark · **Industry:** beauty · **Source:** https://bedouinsdaughter.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._

Bedouin's Daughter pairs a near-black canvas and lemon-yellow typography with immersive beauty imagery and fashion-film pacing. The homepage moves from full-bleed campaign footage into a restrained product grid, brand story, and image-led closing sequence.

## North star

Keep the page anchored in deep black and warm yellow, letting oversized editorial type and immersive beauty imagery lead while commerce remains concise.

## Overview

The visual identity is anchored by a black canvas (#000000) and a pale, warm yellow (#f5e78d) used for the oversized wordmark, navigation, headings, and fine rules. White carries product and campaign copy, while muted gray is reserved for secondary details. Near-black and charcoal surfaces separate the product area without breaking the continuous dark backdrop. ROM Extended creates bold, uppercase editorial headlines; ROM handles compact navigation and functional copy, while Gaisyr adds a distinctive serif-like voice to selected headings and captions. The page alternates full-bleed video and photography with spacious black intervals and a tightly organized product row. Campaign portraits are close-cropped, high contrast, and richly colored, with text layered sparingly over the image. The result feels like an independent beauty campaign rather than a conventional storefront: product information stays compact, and imagery, scale, and pacing establish the mood.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Lemon Veil | `#f5e78d` | `--color-lemon-veil` | brand | Signature yellow for the oversized wordmark, navigation, headings, badges, and thin section rules. |
| Velvet Black | `#000000` | `--color-velvet-black` | neutral | Dominant page canvas and visual frame around the full-bleed campaign media. |
| Studio White | `#ffffff` | `--color-studio-white` | neutral | High-contrast campaign and product copy, plus the light primary button treatment. |
| Charcoal Panel | `#333333` | `--color-charcoal-panel` | surface | Subtle section surface, principally supporting dark product and content areas. |
| Night Surface | `#080808` | `--color-night-surface` | surface | Near-black link and content surface that creates barely perceptible separation from the canvas. |
| Ash Gray | `#9c9c9c` | `--color-ash-gray` | semantic | Muted supporting text; keep it secondary against white and warm-yellow foreground text. |
| Button Black | `#111111` | `--color-button-black` | surface | Compact dark commerce button background, paired with white uppercase labels. |

### Semantic aliases

`--color-canvas` → `#000000` (Velvet Black) · `--color-surface` → `#333333` (Charcoal Panel) · `--color-surface-2` → `#080808` (Night Surface) · `--color-text` → `#ffffff` (Studio White) · `--color-text-muted` → `#9c9c9c` (Ash Gray) · `--color-border` → `#f5e78d` (Lemon Veil) · `--color-accent` → `#f5e78d` (Lemon Veil)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#333333` | 12.63:1 | AAA |
| `#ffffff` | `#080808` | 20.03:1 | AAA |
| `#9c9c9c` | `#000000` | 7.65:1 | AAA |
| `#9c9c9c` | `#333333` | 4.6:1 | AA |
| `#9c9c9c` | `#080808` | 7.29:1 | AAA |
| `#f5e78d` | `#000000` | 16.7:1 | AAA |
| `#f5e78d` | `#333333` | 10.05:1 | AAA |
| `#f5e78d` | `#080808` | 15.92:1 | AAA |

### Gradients

- `linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0) 40%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ROM | `--font-body` | webfont | 400, 700 | Navigation, body copy, buttons, and functional links | Inter |
| ABC ROM Extended | `--font-abc-rom-extended` | webfont | 500 | Small uppercase captions and editorial micro-labels | Space Grotesk |
| Gaisyr | `--font-gaisyr` | webfont | 700, 400 | Editorial subheadings and short expressive eyebrow text | Cormorant Garamond |
| ROM Extended | `--font-display` | webfont | 400, 700 | Large hero wordmark and uppercase section headlines | Bodoni Moda |

- **ROM:** Use compact sans-serif forms; navigation stays lowercase, while button and link labels are bold uppercase.
- **ABC ROM Extended:** Medium-weight extended sans; keep captions uppercase and restrained rather than using it for long copy.
- **Gaisyr:** Use a contrasting display voice for selected headings; uppercase subheads and spaced uppercase eyebrows.
- **ROM Extended:** Oversized uppercase editorial display; preserve the measured zero tracking and strong weight contrast.

### Type scale — Perfect Fifth (ratio ≈ 1.508, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 700 | 1.2 | 0 | uppercase | ROM Extended | Oversized uppercase brand and campaign headline. |
| h2 | 24px | 400 | 1.2 | 0 | uppercase | ROM Extended | Uppercase section and campaign titles. |
| h3 | 20px | 700 | 1.1 | 0 | uppercase | Gaisyr | Compact editorial subheads, often in Gaisyr. |
| body | 14px | 400 | 1.4 | 0 | — | ROM | Product descriptions and short brand-story copy. |
| caption | 10px | 500 | 1 | 0 | uppercase | ABC ROM Extended | Small uppercase product and image labels. |
| button | 12px | 700 | 1 | 0 | uppercase | ROM | Bold uppercase shopping and action labels. |
| nav | 14px | 700 | 1.4 | 0 | lowercase | ROM | Bold lowercase primary navigation links. |
| link | 12px | 700 | 1 | 0 | uppercase | ROM | Bold uppercase secondary action links. |
| eyebrow | 15px | 400 | 1.4 | 0.04em | uppercase | Gaisyr | Spaced uppercase editorial overlines. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 3, 4, 6, 8, 10, 12, 14, 16, 20, 22, 24, 47, 64, 71, 100 px.
- Section rhythm 100px · element gap 64px · card padding — · max content width 1360px.

Use a spacious, full-width composition with a measured page maximum of 1360px. Build a continuous black frame that alternates full-bleed media with deliberately quiet dark intervals. The hero and campaign sections favor edge-to-edge imagery; the story uses a two-column split, and the product showcase presents a horizontal multi-item row. Align headlines and overlays to the image composition rather than forcing a uniform center. Keep generous measured section and element gaps, with dense information limited to product labels and small navigation.

## Shape & elevation

- Radius: button `9999px` · badge `2px` · link `9999px` · xs `2px` · pill `9999px`
- Shadow `inset` (button): `rgb(0, 0, 0) 0px 0px 0px 0px inset`
- Shadow `inset-2` (link): `rgb(255, 255, 255) 0px 0px 0px 1px inset`
- Shadow `inset-3` (button): `rgb(17, 17, 17) 0px 0px 0px 0px inset`
- Motion: standard transition `0.125s ease-in-out` on interactive elements.

The design is mostly flat: black canvas, dark section fields, and images create depth rather than card shadows. Use thin warm-yellow or white rules as separators and small outlined yellow badges. Buttons are pill-shaped and visually simple; avoid floating panels, heavy shadows, or layered card chrome.

## Imagery

Lead with fashion-film video and editorial beauty photography, not illustration or decorative graphics. Use full-bleed campaign frames, close portrait crops, outdoor greenery, and warm sunset scenes; keep product pack shots on dark backgrounds in the showcase. Images can carry rich natural and skin tones, while dark fades near their lower edges support overlaid copy. Treat photography as the primary visual event and keep text overlays sparse.

## Components

### Announcement strip

A narrow black top ticker repeats the white uppercase free-shipping message across the viewport.

### Header navigation

Minimal overlay navigation uses warm-yellow lowercase links, with account and bag controls aligned to the opposite edge.

### Hero wordmark

A very large warm-yellow ROM Extended wordmark sits over full-bleed video; keep the film visible as the background.

### Product showcase

A compact horizontal row of product pack shots on dark surfaces, with small product names, prices, outlined NEW badges, and pill add-to-bag actions.

### Campaign CTA

A full-bleed beauty image carries a centered white uppercase headline, supporting copy, and a small shop action.

### About split

Pair a cinematic editorial image with a concise brand introduction and a white pill-shaped LEARN MORE button.

### Editorial image gallery

Scatter varied campaign and product images across a black field, then anchor the composition with a centered warm-yellow statement.

### Measured component styles

- **Primary button** (“ADD TO BAG £26 ADDED”): background #111111 · text #ffffff · radius 20px · padding 8px 12px · 700 12px ROM · uppercase · shadow rgb(0, 0, 0) 0px 0px 0px 0px inset
- **Secondary button** (“LEARN MORE”): background #ffffff · text #000000 · radius 100px · padding 12px 24px · 700 12px ROM · uppercase · shadow rgb(0, 0, 0) 0px 0px 0px 0px inset
- **Link** (“NEW SPRING FLING A sheer sparkling rosew”): background #080808 · text #ffffff · radius 0px · padding 0px · 400 14px ROM
- **Badge** (“NEW”): transparent background · text #f5e78d · border 1px solid #f5e78d · radius 2px · padding 6px 10px · 400 10px ROM · uppercase
- **Navigation item** (“shop about account bag TOTAL ITEMS IN BA”): transparent background · text #f5e78d · radius 0px · padding 0px · 400 14px ROM

## Do

- Use #000000 as the dominant canvas.
- Reserve #f5e78d for signature headlines, navigation, and fine accents.
- Let full-bleed beauty imagery establish the mood.
- Keep product details small and easy to scan.
- Alternate immersive images with quiet black intervals.
- Use uppercase display headings and compact functional labels.

## Don't

- Don't introduce unmeasured brand colors into the interface.
- Don't wrap every product in a raised card.
- Don't let copy compete with the campaign photography.
- Don't replace the black canvas with a light storefront layout.
- Don't use generic gradients as a substitute for the film imagery.
- Don't overfill the spacious editorial sections with controls.

## Agent prompt

Build a new beauty-brand page in the Bedouin's Daughter visual language. Use Velvet Black (#000000) as the continuous canvas and Lemon Veil (#f5e78d) for signature navigation, wordmarks, and fine rules; use Studio White (#ffffff) for legible copy and light CTA treatment. Structure the page as cinematic, full-bleed beauty media alternating with calm black intervals and concise commerce content. Use ROM Extended-like display lettering for oversized uppercase headlines, ROM-like sans for navigation and controls, and restrained editorial contrast for subheads. Keep product photography on dark fields with small uppercase labels, compact prices, outlined badges, and pill actions. Favor close portraits, rich natural color, and sparse text overlays. Avoid heavy cards, pronounced shadows, decorative gradients, and crowded layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video with wordmark and minimal overlaid navigation. | Overlay navigation, Brand film, Campaign tagline | Warm-yellow wordmark, Black announcement ticker, Image-led hero |
| 2 | product-grid | Wide horizontal product row on a black field. | Browse collection, Quick add to bag, View all | Dark product tiles, Outlined NEW badges, Pill add-to-bag buttons |
| 3 | feature-split | Full-bleed campaign image split into two visual subjects with centered copy. | Campaign promotion, Shop now | White uppercase headline, Sparse image overlay, Dark lower fade |
| 4 | feature-split | Two-column editorial composition pairing campaign photo and text. | Brand introduction, Learn more | Left-aligned heading, Concise copy, White pill CTA |
| 5 | gallery | Loose image collage on black, with a centered statement and fine horizontal rules. | Editorial browsing, Brand statement | Scattered image crops, Warm-yellow statement, Hairline dividers |
| 6 | footer | Large closing portrait with oversized wordmark and compact links. | Footer navigation, Brand sign-off | Full-bleed portrait, Oversized warm-yellow wordmark, Small footer links |

## Source CSS custom properties (selected)

```css
--hover-shadow-color: rgb();
--hover-transition-duration: .25s;
--color-background: rgb(0 0 0 / 1.0);
--color-background-rgb: 0 0 0;
--color-foreground: rgb(245 231 141 / 1.0);
--color-foreground-rgb: 245 231 141;
--color-foreground-text: rgb(255 255 255 / 1.0);
--color-foreground-text-rgb: 255 255 255;
--color-foreground-heading: rgb(245 231 141 / 1.0);
--color-foreground-heading-rgb: 245 231 141;
--color-primary: rgb(255 255 255 / 1.0);
--color-primary-rgb: 255 255 255;
--color-primary-hover: rgb(255 255 255 / 0.86);
--color-primary-hover-rgb: 255 255 255;
--color-border: rgb(245 231 141 / 1.0);
--color-border-rgb: 245 231 141;
--color-shadow: rgb();
--color-primary-button-text: rgb(0 0 0 / 1.0);
--color-primary-button-background: rgb(255 255 255 / 1.0);
--color-primary-button-border: rgb(0 0 0 / 1.0);
--color-primary-button-hover-text: rgb(0 0 0 / 1.0);
--color-primary-button-hover-background: rgb(255 255 255 / 0.86);
--color-primary-button-hover-border: rgb(0 0 0 / 0.0);
--color-secondary-button-text: rgb(255 255 255 / 1.0);
--color-secondary-button-background: rgb(0 0 0 / 0.0);
--color-secondary-button-border: rgb(255 255 255 / 1.0);
--color-secondary-button-hover-text: rgb(0 0 0 / 1.0);
--color-secondary-button-hover-background: rgb(255 255 255 / 1.0);
--color-secondary-button-hover-border: rgb(255 255 255 / 1.0);
--color-input-background: rgb(0 0 0 / 0.0);
--color-input-text: rgb(245 231 141 / 1.0);
--color-input-text-rgb: 245 231 141;
--color-input-border: rgb(245 231 141 / 1.0);
--color-input-hover-background: rgb(0 0 0 / 0.0);
--color-variant-background: rgb(0 0 0 / 0.0);
--color-variant-border: rgb(245 231 141 / 1.0);
--color-variant-text: rgb(245 231 141 / 1.0);
--color-variant-text-rgb: 245 231 141;
--color-variant-hover-background: rgb(245 231 141 / 0.35);
--color-variant-hover-text: rgb(245 231 141 / 1.0);
```

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