NOIRFRAME® | Editorial Fashion Studio

Design Specification — NOIRFRAME® | Editorial Fashion Studio

Overview

This design system was extracted programmatically from the source page. It is built on a dark canvas (#030202), ink text (#F7EFE4). Display headings use a distinct face (ui-serif, Georgia, serif) over the body stack ('Inter'). Detected font weights: 300, 400, 500, 600. Shapes are dominated by pill radii (9999px) — the page otherwise favors sharp, unrounded edges.

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Gradients

• `radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .26) 0 1px, transparent 1px),

radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .18) 0 1px, transparent 1px)`

• linear-gradient(to bottom, transparent 0, transparent 4px, rgba(255, 255, 255, .16) 5px, transparent 6px)
• `radial-gradient(circle at 72% 18%, rgba(247,239,228,.11), transparent 34%),

linear-gradient(180deg, #070605 0%, #030202 52%, #000 100%)`

Typography

Primary typeface: Inter — stack: 'Inter'

Display / heading typeface: ui-serif, Georgia, serif (used for large headings; body uses the primary stack)

Font stacks (most used first)

• 'Inter'
• 'Playfair Display'
• "Inter", sans-serif
• "Playfair Display", serif
• ui-serif, Georgia, serif

Web font sources

• fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@400;500;600&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 500, 600

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 30px 80px rgba(0,0,0,.45)
• 0 -80px 120px rgba(0,0,0,.72)

Layout

Container max-width: 768px

Grid columns (largest detected grid): 12

Breakpoints

• 640px
• 767px
• 768px
• 1024px

Animation & Motion

Transitions

• grid-template-rows .45s cubic-bezier(.16, 1, .3, 1)
• transform .35s cubic-bezier(.16, 1, .3, 1)
• transform .45s cubic-bezier(.16, 1, .3, 1), opacity .45s cubic-bezier(.16, 1, .3, 1)
• all 150ms cubic-bezier(0.4, 0, 0.2, 1)
• transform 150ms cubic-bezier(0.4, 0, 0.2, 1)
• color, background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)

Easing curves

• cubic-bezier(.16, 1, .3, 1)
• cubic-bezier(0.4, 0, 0.2, 1)

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “Start”

button-secondary — sample text: “Start a project”

navigation-link

CTA labels found on page

• Start Project
• View Editorials

Effects

• backdrop-filter: blur(14px)
• backdrop-filter: blur(18px)

Source Design Tokens (CSS custom properties)

:root {
  --white: #f7efe4;
  --muted: rgba(247, 239, 228, 0.58);
  --faint: rgba(247, 239, 228, 0.14);
  --line: rgba(247, 239, 228, 0.13);
  --line-strong: rgba(247, 239, 228, 0.26);
  --black: #000;
  --header-side-gap: 16px;
  --header-max-width: 1536px;
  --page-max-width: 1536px;
  --page-gutter: clamp(16px, 2.6vw, 48px);
  --sticky-header-height: 58px;
  --header-hero-gap: 12px;
  --body-bg: #030202;
  --body-color: var(--white);
  --heading-font: ui-serif, Georgia, serif;
}

Do's and Don'ts

Do

• Do keep the canvas at #030202; surfaces should stay within the detected neutral ramp.
• Do set large headings in ui-serif, Georgia, serif with tight tracking (-0.055em), and body copy in the primary stack.
• Do stick to the detected font weight(s): 300, 400, 500, 600.
• Do align spacing to the 8px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't round cards or containers; only pill-shaped elements (9999px) carry a radius on this page.

Design Tokens (copy-paste)

:root {
  --color-background: #030202;
  --color-surface: #F7EFE4;
  --color-text-primary: #F7EFE4;
  --color-secondary: #000000;
  --color-text-secondary: #030202;
  --color-border: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --font-sans: 'Inter';
  --font-size-display: 162px;
  --font-size-headline-lg: 36px;
  --font-size-headline-md: 30px;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-pill: 9999px;
  --shadow-sm: 0 30px 80px rgba(0,0,0,.45);
  --shadow-md: 0 -80px 120px rgba(0,0,0,.72);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --font-display: ui-serif, Georgia, serif;
  --tracking-display: -0.055em;
  --tracking-label: .16em;
  --container-max: 768px;
}