Twelve design systems. Copy the file, paste the vibe.

---
version: alpha
name: Noir & Gold
description: "Black and gold luxury with high-contrast editorial typography."
colors:
  background: "#0d0d0d"
  surface: "#161616"
  surface-elevated: "#1e1e1e"
  on-background: "#f0ece2"
  on-surface-muted: "#9c9689"
  outline: "#2a2a2a"
  primary: "#c9a84c"
  primary-strong: "#f0d78c"
  on-primary: "#0d0d0d"
  success: "#6ba368"
  warning: "#d8a33a"
  danger: "#b4544a"
typography:
  display-hero:
    fontFamily: ""Didot", "Bodoni MT", Georgia, serif"
    fontSize: "5rem"
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: "-0.025em"
  headline-lg:
    fontFamily: ""Didot", "Bodoni MT", Georgia, serif"
    fontSize: "1.5rem"
    fontWeight: 700
    lineHeight: "2rem"
  title-md:
    fontFamily: ""Didot", "Bodoni MT", Georgia, serif"
    fontSize: "1.125rem"
    fontWeight: 600
    lineHeight: "1.75rem"
  body-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.9375rem"
    fontWeight: 400
    lineHeight: "1.5rem"
  label-sm:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: "1rem"
    letterSpacing: "0.06em"
  code-sm:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: "1.25rem"
rounded:
  control: "0px"
  card: "0px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  "2xl": "32px"
  "3xl": "48px"
  container-padding: "24px"
layout:
  container-max: "1320px"
  header-height: "64px"
  sidebar-expanded: "256px"
motion:
  fast: "150ms"
  normal: "220ms"
  slow: "320ms"
  easing-standard: "cubic-bezier(0.4, 0, 0.2, 1)"
components:
  button-primary:
    backgroundColor: "#c9a84c"
    textColor: "#0d0d0d"
    rounded: "0px"
    height: "40px"
    padding: "0 16px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "#f0ece2"
    border: "1px solid #2a2a2a"
    rounded: "0px"
    height: "40px"
  input:
    backgroundColor: "#1e1e1e"
    textColor: "#f0ece2"
    border: "1px solid #2a2a2a"
    rounded: "0px"
    height: "40px"
  card:
    backgroundColor: "#1e1e1e"
    textColor: "#f0ece2"
    border: "1px solid #2a2a2a"
    rounded: "0px"
    padding: "24px"
  badge:
    backgroundColor: "#161616"
    textColor: "#9c9689"
    rounded: "9999px"
    padding: "4px 10px"
---

## Overview
Noir & Gold is a luxury identity for jewellery, hospitality, private services and premium editorial. Black dominates, gold is rationed, and high-contrast serif display type does the heavy lifting.

## Colors
Near-black canvas with two barely-separated dark surfaces. Gold appears in hairlines, small caps, underlines and one button per screen — never as a large fill.

## Typography
High-contrast serif display at 3.5-5rem with tight tracking, paired with a quiet sans for body. Uppercase small labels use 0.2em tracking in gold.

## Layout & Spacing
1320px container, asymmetric two-column compositions, 120px section rhythm. Wide margins are part of the luxury signal.

## Elevation & Depth
No shadows. Depth comes from black-on-black layering and thin gold rules.

## Shapes
Square. Zero radius on every element including images and buttons.

## Components
Buttons are 1px gold outlines that fill gold on hover with black text. Inputs are underlined in gold. Cards are bordered black rectangles with a gold rule above the title.

## Do's and Don'ts
- Do keep gold rare and thin
- Do use square corners everywhere
- Do let whitespace signal expense
- Do pair serif display with quiet sans body

- Don't fill large areas with gold
- Don't round corners
- Don't add a third colour
- Don't crowd the layout