---
version: alpha
name: "D.S. & Durga"
description: "Palm-noir editorial fragrance house — black canvas, warm parchment cream, and Sofia Pro in crisp uppercase, evoking vintage travel posters and psychedelic Brooklyn wandering"

colors:
  # Surface / canvas
  background: "#000000"
  surface: "#1a1a1a"          # was rgb(0,0,0) dark panel variant — lightened for surface differentiation
  surface-light: "#ffffff"    # modal, form, popup backgrounds

  # Text / ink
  ink: "#f2e9de"              # warm parchment — primary type on dark backgrounds
  ink-dark: "#000000"         # black text on light surfaces (popups, modals)
  on-background: "#f2e9de"
  on-surface: "#000000"

  # Brand accent
  primary: "#000000"
  on-primary: "#f2e9de"       # warm parchment on black — the core CTA pairing
  primary-container: "#1a1a1a"

  # State / interaction
  text-hover: "#7a7771"       # was rgb(122, 119, 113) — darkened parchment for link hover on light surfaces
  focus-ring: "#000000"
  focus-ring-light: "#f2e9de" # focus ring on dark surfaces

  # Semantic
  error: "#e20915"            # was rgb(226, 9, 21) — email focus/validation ring observed
  border: "#000000"
  border-light: "#f2e9de"     # borders on dark backgrounds

  # Shadow tints
  shadow-soft: "#000000"      # flat brand — elevation via contrast, not shadow

typography:
  display-hero:
    fontFamily: "Sofia Pro, Helvetica Neue LT Std, -apple-system, system-ui, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 120px
    fontWeight: 400
    lineHeight: 0.83
    letterSpacing: -6px
  display:
    fontFamily: "Sofia Pro, Helvetica Neue LT Std, -apple-system, system-ui, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -3px
  heading-section:
    fontFamily: "Sofia Pro, Helvetica Neue LT Std, -apple-system, system-ui, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 35px
    fontWeight: 600
    lineHeight: 1.03
    letterSpacing: -1.75px
  heading-sub:
    fontFamily: "Sofia Pro, Helvetica Neue LT Std, -apple-system, system-ui, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.14
    letterSpacing: -1.4px
  body-large:
    fontFamily: "Sofia Pro, Helvetica Neue LT Std, -apple-system, system-ui, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.27
    letterSpacing: -1px
  body:
    fontFamily: "Sofia Pro, Helvetica Neue LT Std, -apple-system, system-ui, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.27
    letterSpacing: 0px
  nav-link:
    fontFamily: "Sofia Pro, Helvetica Neue LT Std, -apple-system, system-ui, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "Sofia Pro, Helvetica Neue LT Std, -apple-system, system-ui, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.5px
  caption:
    fontFamily: "Sofia Pro, Helvetica Neue LT Std, -apple-system, system-ui, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.25px

spacing:
  xs: 5px
  sm: 10px
  md: 20px
  lg: 30px
  xl: 50px
  2xl: 60px
  3xl: 80px

rounded:
  none: 0px
  sm: 2px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 24px
    border: 2px solid {colors.border}
  button-primary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 24px
  button-secondary:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 24px
    border: 2px solid {colors.border}
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 24px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 5px
    border: 2px solid {colors.border}
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.text-hover}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 5px
  card:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-dark}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 20px
    border: 1px solid {colors.border}
  input-focus:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-dark}"
    borderColor: "{colors.error}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 20px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 10px 20px
  nav-link-hover:
    textColor: "{colors.text-hover}"
    typography: "{typography.nav-link}"
---

# D.S. & Durga Design System

## Overview

D.S. & Durga's website operates as a portal into a particular kind of romantic wanderlust — what co-founder David Seth Moltz calls "armchair travel through scent." The digital canvas opens onto near-total black (`{colors.background}`), punctuated by large-format photography that feels like a vintage travel poster left out in the sun: a pink-washed desert bloom, a smoky palm-lined boulevard, a glass canteen half-buried in sand. This is not minimalism — it's maximalism edited down to only the essential sensory provocation. Every page suggests an itinerary, a mood, a season that hasn't arrived yet.

Against this dark theatrical backdrop, type runs in warm parchment cream (`{colors.ink}`) — the exact shade of a faded postcard. Sofia Pro carries the entire typographic load: a geometric humanist sans that in the brand's hands reads neither corporate nor precious, but rather like handsome luggage labels printed on cream stock. The combination of black ground and parchment cream recurs throughout: in the CTA buttons where `{colors.primary}` ground holds parchment lettering, in the navigation bar where link text breathes lightly against the abyss, in editorial taglines set in tight tracked uppercase at cinematic scale. Light surfaces appear only in isolation — popups and email capture forms — rendered in stark `{colors.surface-light}` white that snaps the eye into attention like opening an envelope.

Elevation and depth are handled through photography rather than shadow. There are no gradients, no glows, no layering effects. The photography does all the atmospheric work — moody, warm-toned, often blurred at the edges with tropical or psychedelic associations — while the typographic and product elements stay flat, sharp, and deliberately utilitarian. The "I Don't Know What" product line captures the ethos perfectly: intellectually playful, visually serious, and deeply unconcerned with luxury signaling that costs as much as sincerity.

**Key Characteristics:**
- Near-total black canvas (`{colors.background}`) as the default ground — noir, cinematic, anti-luxury-white
- Warm parchment cream (`{colors.ink}`) for all type on dark surfaces — worn postcard, not pristine white
- Sofia Pro at all sizes with tight negative tracking at large display sizes — confidence without bravado
- All border-radius at `{rounded.none}` — every edge is sharp, every corner uncompromised
- Photography-anchored storytelling: vintage palm-noir scenes, desert botanicals, tropical blur
- CTA buttons: flat black with parchment text and 2px black border — borderless authority
- No box-shadow, no gradient, no opacity effects — flat contrast is the only depth system
- Uppercase nav links with `{typography.nav-link}` letterSpacing — categorical and cool
- Product photography: dark glass bottles, cream label art, strongly compositional studio shots
- Email capture and popup modals break to white (`{colors.surface-light}`) — deliberate contrast with the dark ambient experience
- Sparse interaction feedback: link hover shifts to muted stone (`{colors.text-hover}`), nothing more
- Limited color range — the richness comes from photography, not from a palette of brand hues

## Colors

### Primary
- **Noir Ground** (`{colors.background}`): The dominant canvas. Not "dark mode" — it's the foundational statement. Pages feel like gallery walls, not inverted web experiences.
- **Parchment Cream** (`{colors.ink}`): All body and headline type on dark surfaces. The exact warmth of an exposed film photograph — neither true white nor yellow, but the color of memory.

### Brand Accent
- **Jet Black** (`{colors.primary}`): Used on CTA buttons, form elements, and any component that needs to assert itself on a light surface. The brand's "action color" is, deliberately, the absence of color.

### Surface Tones
- **Deep Panel** (`{colors.surface}`): Slightly lifted from pure black for differentiated dark panels, product listing sections, and content bands that need visual separation without light.
- **Modal White** (`{colors.surface-light}`): Reserved for popups, email capture modals, and form containers. The sudden shift to white creates an attentional jolt — a letter inside a dark envelope.

### Text States
- **Parchment on Dark** (`{colors.ink}`, `{colors.on-background}`): Navigation, body, product names on dark ground.
- **Jet on Light** (`{colors.ink-dark}`, `{colors.on-surface}`): Form labels, popup copy, button text on white surfaces.
- **Stone Hover** (`{colors.text-hover}`): Link hover state on light surfaces — a quiet acknowledgment, not an emphatic shift.

### Borders & Validation
- **Dark Border** (`{colors.border}`): 1–2px strokes on forms and buttons on light surfaces. Structural, not decorative.
- **Validation Red** (`{colors.error}`): Appears on email input focus during form validation — the only chromatic punctuation in the system.

### Shadow & Depth
- **No cast shadows.** Depth in this system is entirely photographic. `{colors.shadow-soft}` is declared for completeness but the brand uses photography contrast, not CSS `box-shadow`, to create dimensionality.

## Typography

### Font Family
- **Primary**: `Sofia Pro`, with fallbacks: `Helvetica Neue LT Std, -apple-system, system-ui, Helvetica Neue, Helvetica, sans-serif`
- Sofia Pro is a geometric humanist sans with warmth in its rounded details and precision in its caps — the right face for a brand that is simultaneously intellectual, approachable, and quietly luxurious. It shares visual DNA with Futura and Gill Sans but avoids the austerity of either.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Campaign headlines, hero text at full viewport scale — "I Don't Know What" style titles |
| `display` | Section-opening statements, product collection names |
| `heading-section` | Product names, editorial section headers |
| `heading-sub` | Sub-collection labels, article bylines |
| `body-large` | Pull quotes, fragrance descriptor copy |
| `body` | Description paragraphs, navigation items, popup copy |
| `nav-link` | Horizontal navigation — PERFUME, CANDLES, SKIN, AUTO, GIFTS |
| `button-ui` | CTA text — NEXT, SHOP, SUBSCRIBE |
| `caption` | Product variant labels, fine print, tag text |

### Principles
- **Tight tracking at scale.** Large headlines sit with deep negative letterSpacing (`-3px` to `-6px`) — they read as solid blocks of compressed editorial type, not loose-set display.
- **No italic anywhere.** The system has one posture: upright. Emphasis comes from scale or weight, never slant.
- **Moderate weight range.** Sofia Pro appears at 400 and 600, occasionally 500. Heavy type (`700+`) never appears — assertion comes from size and contrast, not from stroke weight.
- **Uppercase for navigation and CTAs only.** Body copy and editorial headlines use mixed case — the brand trusts the reader without resorting to constant shouting.
- **Typography as luggage labeling.** Every typographic decision evokes something hand-composed on rough stock — nothing feels laser-set or clinical.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 5px.

D.S. & Durga uses a 5px base rather than the conventional 8px — giving the system slightly off-grid spacing that feels hand-paced, like the deliberate intervals between photographs in a well-made zine. Common recurring values: 5px micro-gaps, 20px standard padding, 30px section breathing room, 50–80px major vertical offsets.

### Grid & Container
- Max content width: approximately 1400px for editorial sections
- Product grid: 3–4 columns on desktop, compressing to 2 on tablet, single column on mobile
- Hero sections: full-bleed photography with type overlay — images never cropped to containers
- Navigation: horizontal single row with condensed category labels and utility icons right-aligned

### Whitespace Philosophy
- Dark space reads differently than white space. The black ground between elements carries weight; it is not absence but presence.
- Editorial sections use 60–80px vertical breathing room — enough to let each photograph breathe.
- Product names sit close beneath imagery without the padded cards that lesser systems lean on.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | All dark-background sections, primary navigation |
| Hairline (Level 1) | `1px solid {colors.border}` | Form inputs on white surfaces, button outlines |
| Modal Layer | `{colors.surface-light}` background on `{colors.background}` | Email capture popup, overlaid on dark canvas |
| Photography Depth | Full-bleed high-contrast imagery | All atmospheric depth cues — the brand's primary depth tool |

**Shadow Philosophy**: D.S. & Durga uses no CSS box-shadow. Shadow is a photographic fact in this system, not a UI rendering technique. The depth between a product image and the black canvas beneath it is all the elevation the brand needs. Modal and popup layers distinguish themselves through their `{colors.surface-light}` background contrasting against the ambient dark — not through drop shadows or blur.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All primary UI — buttons, cards, navigation, product tiles |
| `sm` | 2px | Certain form inputs and filter elements only |
| `pill` | 9999px | Available in the token set but not used in primary UI |

Every significant UI element in the system uses `{rounded.none}`. The 2px radius on some email inputs is a browser-form-element artifact, not a design decision. The brand is sharp: angles read as deliberate, modern, and unpadded.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button Variants

- **`button-primary`** — Black ground, parchment cream text, sharp corners, 2px border on light surfaces. The default action state. Used for "NEXT", "SHOP", "SUBSCRIBE" — never soft or rounded.
- **`button-secondary`** — White ground, black text, sharp. Appears within modals and light-surface contexts where the primary black button would disappear into the surrounding white.
- **`button-ghost`** — Transparent background, black text, black border outline. Currency/language selector style (observed: `$ USD` selector with `2px solid rgb(0,0,0)` outline). For low-hierarchy switching actions.

### Cards

Product tiles sit directly on the dark canvas without card chrome. No background, no border, no shadow — just photography, product name in `{typography.heading-section}` parchment, and a brief descriptor in `{typography.caption}`. The "card" is the photograph.

### Inputs

Email and text inputs on white surfaces: `1px solid {colors.border}`, `{rounded.sm}` at 2px, `{typography.body}` in `{colors.ink-dark}`. Focus triggers `{colors.error}` ring — stark red on white is the sole validation chromatic signal.

### Navigation

Top navigation: `{colors.background}` bar, centered logotype (`DS&D URGA` lettering), horizontal category links in `{typography.nav-link}` parchment text. Right: currency toggle + search, account, cart icons. All links are `{colors.ink}` at rest, `{colors.text-hover}` on hover. No underlines, no active indicators — categorical presence is enough.

## Do's and Don'ts

### Do
- Use `{colors.background}` as the default page canvas — black is the brand, not a "dark mode"
- Pair parchment cream (`{colors.ink}`) with black for all type on dark surfaces — never stark white
- Keep `{rounded.none}` everywhere in primary UI — sharp corners are non-negotiable
- Set display text with tight negative letterSpacing, referencing `{typography.display}` and `{typography.display-hero}`
- Use full-bleed photography for all atmospheric and emotional work — the UI stays flat
- Render modal and form surfaces in `{colors.surface-light}` for maximum contrast against the dark ground
- Use `{colors.text-hover}` for link hover on light surfaces — a quiet shift, not an emphatic one
- Keep the color range minimal — black, parchment, white. Photography provides all the chromatic richness.
- Set navigation links uppercase via `text-transform` with `{typography.nav-link}` spacing — category labels, not labels that beg to be noticed

### Don't
- Don't introduce gradient backgrounds or overlay scrim effects — the photography speaks without a scrim
- Don't round corners beyond `{rounded.sm}` on any primary UI element — no pill buttons, no rounded cards
- Don't use box-shadow — no `0 4px 12px rgba(0,0,0,0.1)` anywhere. Depth is photographic.
- Don't introduce bright accent colors — the single chromatic punctuation is `{colors.error}` for validation, used sparingly
- Don't put the full fragrance editorial copy in `{colors.ink-dark}` on `{colors.background}` — the parchment-on-black pairing is the system
- Don't use font-weight above 600 — Sofia Pro's 400 and 600 cover all hierarchy needs
- Don't tile or pattern-fill backgrounds — the black canvas must remain solid and unornamented
- Don't use serif typefaces anywhere — Sofia Pro is the sole voice
- Don't add hover animations beyond color shifts — no slide-up cards, no scale transforms, no elaborate transitions
- Don't center product photography in circular crops — the format is square and rectangular, always

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <480px | Single-column, stacked navigation, full-width CTAs, reduced type scale |
| Mobile Large | 480–768px | 2-column product grid begins, navigation condensed |
| Tablet | 768–1024px | 2-column layout, horizontal nav visible |
| Desktop | 1024–1400px | 3–4 column product grids, full horizontal navigation, editorial typography at scale |
| Large Desktop | >1400px | Max-width content containers, hero photography at full resolution |

### Touch Targets
- Navigation items: generous horizontal padding at `{spacing.md}` minimum
- CTA buttons: minimum 44px height for reliable tap targets
- Cart and icon buttons: at least 44×44px clickable area in mobile nav

### Collapsing Strategy
- Navigation collapses to a hamburger icon below ~1000px; off-canvas drawer with stacked category links
- Hero photography stays full-bleed at every breakpoint — art direction preserved
- Product grid steps 4-col → 3-col → 2-col → 1-col as viewport narrows
- Display typography scales proportionally; negative letterSpacing tightens further at mobile sizes

### Image Behavior
- Full-bleed hero images serve as the primary atmospheric layer at all breakpoints
- Product photography never clips to circular shapes; square and portrait crops are preserved
- Lazy loading implied by the editorial pace — images load as the visual anchor, not as supplemental chrome

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (black canvas)
- Primary text on dark: `{colors.ink}` (parchment cream)
- Dark text on light: `{colors.ink-dark}` (black)
- Brand CTA ground: `{colors.primary}` (black)
- CTA text: `{colors.on-primary}` (parchment cream)
- Light surface (modal): `{colors.surface-light}` (white)
- Link hover: `{colors.text-hover}` (stone gray)
- Validation: `{colors.error}` (sharp red)
- Border on light: `{colors.border}` (black)

### Example Component Prompts

- "Build a product hero section on `{colors.background}`: full-bleed vintage travel photography edge-to-edge. Overlay the product name in `{typography.display}` parchment (`{colors.ink}`) uppercase with letterSpacing -3px. Below it, a subtitle in `{typography.body}` parchment at regular weight. No gradient scrim — the photograph must be dark and atmospheric enough to hold white text directly."
- "Create a primary CTA button: backgroundColor `{colors.primary}`, textColor `{colors.on-primary}`, fontFamily Sofia Pro 16px weight 400, textTransform uppercase, letterSpacing 0.5px, padding `14px 24px`, borderRadius `{rounded.none}`. Border: `2px solid {colors.border}`. Hover: backgroundColor shifts to `{colors.surface}`, textColor stays `{colors.ink}`."
- "Design an email capture modal on `{colors.surface-light}` white. Title 'DS&D URGA' in `{typography.heading-sub}` black centered. Subtitle copy in `{typography.body}` `{colors.ink-dark}`. Email input: border `1px solid {colors.border}`, `{rounded.sm}`, padding `12px 20px`, font `{typography.body}`. Below it: a full-width black button with parchment 'NEXT' text using `{typography.button-ui}`. Entire modal floats centered on the dark canvas."
- "Build a navigation bar on `{colors.background}`: logotype centered, category links in `{typography.nav-link}` parchment cream uppercase horizontally spaced. Right side: currency toggle with ghost button styling (`transparent` bg, `2px solid {colors.border}`, `{colors.ink-dark}` text) and icon buttons for search, account, cart. All links fade to `{colors.text-hover}` on hover with no underline."
- "Create a product listing tile directly on `{colors.background}` with no card chrome. Full-bleed product photograph (dark glass bottle, cream label art) filling the tile. Product name below in `{typography.heading-section}` `{colors.ink}`. Short descriptor in `{typography.caption}` `{colors.ink}` muted. Price in `{typography.body}`. No border, no shadow, no background — just image and text on black."
- "Design a fragrance detail banner: a wide editorial photograph of a desert or tropical scene with strong warm tones. Over it, a large display headline in `{typography.display-hero}` parchment, letterSpacing -6px, lowercase editorial case. A one-line descriptor in `{typography.body-large}` parchment below. The photograph handles all atmospheric depth — no overlay gradient, no blur vignette."

### Iteration Guide

1. Start from `{colors.background}` black as the absolute base — never substitute a dark gray, deep navy, or charcoal
2. All type on dark surfaces uses `{colors.ink}` parchment cream, never pure white
3. Display headlines use `{typography.display}` or `{typography.display-hero}` with tight negative letterSpacing — they should feel dense and composed
4. Border-radius is `{rounded.none}` everywhere in primary UI — enforce this before any other detail
5. CTA buttons pair `{colors.primary}` ground with `{colors.on-primary}` text — the only "color" action in the system
6. Modal and form surfaces break to `{colors.surface-light}` white — the contrast is intentional and dramatic
7. Photography carries all chromatic richness — warm pinks, desert tans, tropical greens live in the images, not the UI palette

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by D.S. & Durga. Brand names and trademarks belong to their respective owners.