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

# D.S. & DURGA · Design System

> Scent stories in stark black and warm cream.

**Theme:** light · **Industry:** beauty · **Source:** https://www.dsanddurga.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._

The homepage pairs immersive perfume imagery with a restrained black-and-cream interface. Editorial typography, generous breathing room, and product-led sections give the storefront an art-directed, independent feel.

## North star

Let tactile, full-bleed fragrance imagery lead, then give it room to breathe on a warm cream canvas with precise black typography.

## Overview

The visual identity is built from three measured colours: Ink Black (#000000), Canvas Cream (#faf5eb), and Paper White (#ffffff). Cream establishes the warm page canvas and broad section fields; black anchors navigation, text, promotional bands, dark cards, and primary buttons; white appears in product areas and as reverse text on dark surfaces. Sofia Pro carries the system throughout, shifting from compact uppercase navigation and labels to expressive, tightly tracked display headings. The layout alternates full-bleed, dark product or flower imagery with quiet cream product fields, creating a deliberate visual pause between dense image moments. Product photography is large and tactile, while supporting copy remains brief and secondary. A sparse grid supports product browsing; later sections shift to modular black cards, a typographic shopping graphic, and a simple newsletter form. Borders and shadows are restrained, so contrast, imagery, and spacing do most of the work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Ink Black | `#000000` | `--color-ink-black` | brand | Primary text, navigation, announcement strip, dark promotional cards, and black CTA backgrounds with reverse text. |
| Canvas Cream | `#faf5eb` | `--color-canvas-cream` | surface | Warm page canvas and broad section backgrounds that soften the stark black-and-white contrast. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Product and content surfaces, white button fills, and reverse text on black; also appears in pale product photography. |

### Semantic aliases

`--color-canvas` → `#faf5eb` (Canvas Cream) · `--color-surface` → `#ffffff` (Paper White) · `--color-surface-2` → `#000000` (Ink Black) · `--color-text` → `#000000` (Ink Black) · `--color-text-muted` → `#ffffff` (Paper White) · `--color-border` → `#000000` (Ink Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#faf5eb` | 19.33:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#ffffff` | `#faf5eb` | 1.09:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |

### Gradients

- `linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Sofia Pro | `--font-body` | webfont | 700, 400, 500, 800, 900, 600 | Used across navigation, headings, product labels, body copy, links, and controls. | Montserrat |

- **Sofia Pro:** Use regular-weight mixed-case display headlines; compact uppercase labels, links, and navigation use bold weights and generous tracking.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 67px | 400 | 0.9 | -0.05em | — | Sofia Pro | Large editorial headlines for prominent campaign or statement moments. |
| h1 | 41.5px | 400 | 0.85 | -0.03em | — | Sofia Pro | Primary product and promotional section headings. |
| h2 | 24px | 400 | 1 | -0.02em | — | Sofia Pro | Secondary section titles and product-feature headings. |
| h3 | 18px | 500 | 1.3 | 0 | — | Sofia Pro | Supporting subheads and compact content titles. |
| body | 14px | 700 | 1.3 | 0.06em | uppercase | Sofia Pro | Bold uppercase product or section labels and short descriptive copy. |
| caption | 13px | 700 | 1 | 0.08em | uppercase | Sofia Pro | Small uppercase metadata, badges, and product details. |
| nav | 13px | 800 | normal | 0.08em | uppercase | Sofia Pro | Uppercase primary navigation links with prominent letter spacing. |
| link | 16px | 700 | 1.3 | 0.07em | uppercase | Sofia Pro | Bold uppercase shopping links and calls to action. |
| eyebrow | 14px | 700 | 1.3 | 0.06em | uppercase | Sofia Pro | Small uppercase introductory labels above headings. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 4, 5, 6, 8, 10, 12, 13, 16, 18, 20, 24, 25 px.
- Section rhythm 72px · element gap 10px · card padding — · max content width —.

Use broad, mostly full-width bands, alternating immersive campaign imagery with cream product and content fields. Keep product browsing in sparse, aligned columns rather than enclosing every item in a card. Center hero copy over media where present; align supporting labels and footer content to clear grid edges. The page rhythm is comfortable, with distinct visual pauses between sections. Avoid inventing a fixed max width: the measured layout is fluid and includes full-bleed media.

## Shape & elevation

- Radius: button `50%`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The interface is predominantly flat: no measured shadows, and square-cornered controls and badges. Black and cream section changes, full-bleed media, and occasional thin black rules create separation. Reserve layering for text or badges placed directly over campaign imagery rather than adding generic card shadows.

## Imagery

Lead with large campaign photography or video, including close-up flowers and perfume bottles against deep black. Product images sit prominently in pale, quiet fields with little decorative framing. Preserve photographic texture and strong light-dark contrast. The repeated-shop graphic is typographic artwork, not a source of additional brand palette colours.

## Components

### Announcement strip

A narrow black top band carries compact, tracked uppercase offer copy in white.

### Navigation

Cream header with a bold wordmark, uppercase Sofia Pro links, location, and simple utility icons.

### Campaign hero

Full-bleed dark video or image with a centered fragrance story and a contrasting limited-edition badge.

### Product listing

Open product browsing with concise uppercase names, fragrance notes, prices, sizes, and simple shopping controls.

### Dark promo cards

Three black promotional panels pair small uppercase headings and brief white copy with direct white buttons.

### Newsletter field

A cream subscription area combines a sentence-case heading with a bordered email input and arrow action.

### Footer navigation

Multi-column link groups sit above a fine rule and a compact legal and locale bar.

### Measured component styles

- **Primary button** (“FIND US”): background #ffffff · text #000000 · border 1px solid · radius 0px · padding 0px · 700 16px Sofia Pro · uppercase
- **Secondary button** (“BUILD BUNDLE”): background #000000 · text #ffffff · border 1px solid #000000 · radius 0px · padding 0px · 700 11px Sofia Pro · uppercase
- **Link** (“RESURRECTED CORPSE FLOWER”): transparent background · text #000000 · radius 0px · padding 0px · 700 16px Sofia Pro · uppercase
- **Input**: transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 26px 16px · 500 16px Sofia Pro · uppercase
- **Badge** (“NEW”): background #000000 · text #ffffff · radius 0px · padding 6.4px 8px · 600 10px Sofia Pro · uppercase
- **Navigation item** (“D.S. & DURGA NEW PERFUME HOME BODY GIFTS”): transparent background · text #000000 · radius 0px · padding 0px · 400 15px Sofia Pro

## Do

- Use #faf5eb for the warm page canvas.
- Use #000000 for navigation, text, and strong CTA contrast.
- Give hero photography substantial visual area.
- Keep product copy short and label-led.
- Use Sofia Pro with tracked uppercase utility text.
- Separate page moments with generous whitespace.

## Don't

- Do not introduce unmeasured brand colours.
- Do not add gradients, shadows, or rounded card treatments.
- Do not let decorative UI compete with product imagery.
- Do not crowd product listings with long descriptions.
- Do not style every section as a bordered card.
- Do not use generic pastel beauty-store conventions.

## Agent prompt

Build a new D.S. & DURGA-style storefront page with an editorial, fragrance-led visual system. Use Canvas Cream (#faf5eb) as the warm page field, Ink Black (#000000) for typography, navigation, dark panels, and primary actions, and Paper White (#ffffff) for light product surfaces and reverse text. Set all type in Sofia Pro or a close free sans-serif substitute; make utility labels and navigation compact, bold, uppercase, and tracked, while keeping display headlines clean and tightly set. Lead with tactile, high-contrast campaign photography, then alternate it with spacious product fields and concise product details. Use simple grids, flat surfaces, square controls, and thin rules only where needed. Keep the page rhythm generous, avoid unmeasured colours and decoration, and let photography and typography carry the identity.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark campaign media beneath the site header; centered product story and overlay badge. | Campaign discovery, Limited-edition cue | Dark photographic hero, Centered uppercase product link, Contrasting circular badge |
| 2 | product-grid | Broad light product-browsing field with a compact section label and horizontally arranged product items. | Browse products, Shop all, Previous and next controls | Minimal product labels, Price and size details, Open light surfaces |
| 3 | product-showcase | Full-width product campaign with centered headline and a direct shopping link. | New product discovery, Direct shop action | Large product imagery, Prominent title, Black CTA |
| 4 | product-grid | Two-column product display on a pale field, with photography and concise product information. | Compare featured scents, View product details | Product photography, Uppercase names, Compact price and size labels |
| 5 | testimonials | Quiet editorial quote block with a small founder link and supporting imagery. | Brand storytelling, Meet the founders | Large quotation, Minimal supporting link |
| 6 | feature-grid | Three adjacent black promotional cards on a cream background. | Find a store, Build a set, Shop home fragrance | Black square panels, Small uppercase headings, White action buttons |
| 7 | gallery | Wide typographic graphic arranged in repeated, curved rows across the page. | Visual brand interlude, Shop perfume link | Repeated uppercase text, Kinetic curved composition |
| 8 | newsletter | Two-column cream block with subscription heading and bordered email field. | Email signup, Gift incentive | Sentence-case heading, Outlined input, Arrow submit action |
| 9 | footer | Multi-column navigation above a thin divider and compact legal bar. | Browse site categories, Choose region, Review legal information | Small uppercase links, Column headings, Fine horizontal rules |

## Source CSS custom properties (selected)

```css
--section-vertical-spacing: 4.5rem;
--section-stack-row-gap: 3rem;
--form-gap: 1.25rem;
--fieldset-gap: 0.75rem;
--form-control-gap: 0.5rem;
--checkbox-control-gap: 0.75rem;
--product-list-column-gap: 0.25rem;
--product-list-row-gap: 0.25rem;
--subheading-font-family: "Sofia Pro", sans-serif;
--subheading-font-weight: 500;
--subheading-font-style: normal;
--subheading-font-size: 0.8125rem;
--subheading-text-transform: uppercase;
--subheading-letter-spacing: 0.08em;
--subheading-letter-spacing-l: 0.07em;
--heading-font-family: "Sofia Pro", sans-serif;
--heading-font-weight: 400;
--heading-font-style: normal;
--heading-text-transform: none;
--heading-letter-spacing: -0.05em;
--heading-italic-font-family: Helvetica, Arial, sans-serif;
--heading-italic-font-weight: 400;
--heading-italic-font-size-multiplier: 0%;
--text-font-family: "Sofia Pro", sans-serif;
--text-font-weight: 400;
--text-font-style: normal;
--text-transform: normal;
--text-letter-spacing: 0.0em;
--text-line-height: 1.3;
--text-font-medium-weight: 500;
--text-font-bold-weight: 700;
--text-font-extra-bold-weight: 800;
--button-font: normal 400 1.0rem / normal "Sofia Pro", sans-serif;
--button-text-transform: uppercase;
--button-letter-spacing: 0.0em;
--text-heading-size-factor: 1;
--text-display-xl: max(0.75rem, clamp(4.5rem, 3.4463rem + 4.2896vw, 7.5rem) * 1);
--text-display-l: max(0.75rem, clamp(4.25rem, 3.6354rem + 2.5023vw, 6rem) * 1);
--text-display-m: max(0.75rem, clamp(3.75rem, 3.4866rem + 1.0724vw, 4.5rem) * 1);
--text-h1: max(0.75rem, clamp(3.5rem, 3.2366rem + 1.0724vw, 4.25rem) * 1);
```

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