Aetherweave Design System

AETHERWEAVE DESIGN SYSTEM

The Complete, AI-Agent-Ready Specification

Version 3.0 — 2026 Edition | Black Bleak Modern Extremism Pivot Supersedes v2.0 (warm-earth edition) and Style Guide v1.1

This document is the single source of truth for every interface, artifact, website, application, stage visual, print, and spatial experience produced under the Aetherweave identity. It is written to be consumed by AI agents and human designers alike. Every token, rule, component spec, and edge case is defined explicitly — no "use judgment," no "it depends," unless a decision tree is provided.

This version pivots Aetherweave into its most extreme form: ultra-dark, bleakly opulent, monochromatically hypnotic. The warm-earth + jewel palette is retired. Obsidian dominates. Stark contrast and metallic glints carry dopamine.

0. HOW TO USE THIS DOCUMENT (AI Agent Primer)

0.1 Order of Precedence

When rules appear to conflict, resolve in this order:

1. Accessibility (Section 14) — never compromised
2. Core Design Tokens (Section 3) — values are absolute
3. Component Specifications (Section 8) — patterns are canonical
4. Motion & Animation (Section 9)
5. Aesthetic Directives (Sections 2, 4, 5)

0.2 AI Agent Decision Rules

• Never invent a color. Pull from the defined palette in Section 3.2. All chromatic choices are black, off-black, or achromatic metallic — no hues.
• Never invent a spacing value. Use the 4px base scale in Section 3.4.
• Never invent animation timing. Use the easing + duration system in Section 9.
• Never ship without at least 5 Aetherweave visual elements per meaningful surface (see Section 4.1).
• Always provide a prefers-reduced-motion fallback.
• Always provide a prefers-reduced-transparency fallback for the dark liquid glass system.
• Always verify contrast against WCAG AA minimum (AAA target for body text). Extreme-contrast is the house style — err high.
• When uncertain, default to the void. Aetherweave is maximal in layering, not in hue. Depth is sacred, breath is the abyss (Section 4.4).

0.3 What This Document Covers

Philosophy → Tokens → Visual Language → Dark Liquid Glass system → Layout → Typography → Components → Motion → Imagery → Responsive → Themes → Accessibility → Edge Cases → Code Patterns → Quality Checklist.

1. CORE PHILOSOPHY

Aetherweave is a luxury abstract design language synthesizing silk-print craftsmanship, spatial computing fluidity, and culturally expansive storytelling — now channeled through an extreme black monochromatic lens. It retains the masterful layering, narrative depth, and luxurious craftsmanship of the original silk-heritage synthesis (multi-layered storytelling, hand-rendered intricacy, emotional resonance), but delivered as obsidian depth, high-contrast starkness, and hypnotic intensity that commands the eye, rewards prolonged gaze, and triggers dopamine through discovery, rhythm, and perceptual tension.

This is dark luxury extremism: bleak yet opulent, somber yet addictive. Rick Owens' void silhouettes fused with Reinhardt's near-black monochromes and modern cyber-goth dark-glass interfaces — surfaces that pull you in, layered energy maps that reveal new detail the longer you stare, tactile-digital tension that feels ancient and futuristic at once.

Mantra: Weave the void. Layer the infinite dark. Illuminate with stark intensity.

Five non-negotiables:

1. Originality — no replication of existing artists or brands; synthesis only.
2. Layered void depth — every surface has 4+ perceptible planes of black.
3. Tactile-digital hypnosis — hand-crafted bleak tactility meets refractive dark-glass fluidity.
4. Cultural expansiveness (dark lens) — global threads abstracted into voids: Japanese ink in obsidian, African rhythmic geometry in charcoal relief, Islamic tessellation as etched shadow, Indigenous fields as subtle dot voids. Respectful, universal, never literal.
5. Dopamine through bleak intensity — extreme contrast edges, rhythmic repetition with variation, hidden strata, metallic glints that reward focus. Bleak immersion, never cold sterility.

Dopamine stimulation mechanics:

• Extreme high-contrast edges and optical play (subtle illusions, rhythmic pulses).
• Hidden strata that reward close inspection at 100% zoom.
• Textural hypnosis (impasto ridges on matte black, metallic glints in deep voids).
• Perceptual motion and rhythmic variation that feel impossible to look away from.

2. DESIGN PRINCIPLES (Operational)

3. DESIGN TOKENS

All tokens are CSS custom properties, prefixed --aw-. These are the only values permitted in production. The palette is strictly monochromatic.

3.1 Token Naming Convention

--aw-[category]-[variant]-[state?]-[scale?]

Examples: --aw-color-obsidian-500, --aw-space-6, --aw-radius-lg, --aw-shadow-void-hover.

3.2 Color System

3.2.1 Obsidian Core — The Bleak Foundation (primary use: backgrounds, body, structural elements — ≥90% of any surface)

Usage covenant: at any zoom, ≥90% of pixels in a meaningful surface must come from abyss through charcoal-500. The two "hint" blacks (ink-umber, midnight-slate) are restricted to subtle warmth/coolness bias inside a texture or noise layer, never flat fills.

3.2.2 Stark Contrast Edge (primary use: primary text on dark, gestural marks, stark edges — dopamine anchor)

Stark edges are the sole carrier of high-contrast dopamine. They replace what jewels did in v2.0. They must never wash across more than 8% of a meaningful surface — they are edges, strokes, gestures, type. Not fills.

3.2.3 Metallic Threads (primary use: borders, fine detail, refractive glints — 1–2px hairlines, text accents at ≥14px)

Metallics are the only non-black, non-bone chroma allowed. They're what makes the void feel luxurious rather than austere.

3.2.4 Restricted Ember (absolute last-resort chromatic — destructive actions + critical system alerts ONLY)

The ember palette exists only to meet WCAG status-differentiation requirements for destructive UX. It must never be used decoratively, in marketing, on brand surfaces, or in data visualization. If a designer is tempted to use it outside role="alert" or a confirmed-destructive button, the answer is no — use tone, iconography, and typography weight instead.

3.2.5 Refractive Glint Layer (primary use: rare generative/motion highlights, metallic light-bends — max 2% of surface area)

No saturated hues. All glints sit within the grayscale-to-bone spectrum, distinguished only by micro temperature shifts. Used for prism edges on Tier-3 glass, hero motif shimmers, and focus-state light-through-void effects.

3.2.6 Semantic Tokens (use these in components, not raw palette values)

/* Surfaces */
--aw-bg-canvas: var(--aw-color-obsidian-800);   /* page base */
--aw-bg-surface: var(--aw-color-obsidian-900);  /* recessed surface */
--aw-bg-sunken: var(--aw-color-abyss);          /* deepest sunken */
--aw-bg-raised: var(--aw-color-jet-600);        /* cards at rest */
--aw-bg-elevated: var(--aw-color-jet-500);      /* cards on hover */
--aw-bg-inverse: var(--aw-color-bone-100);      /* extreme-contrast inversion — use sparingly */

/* Foreground */
--aw-fg-primary: var(--aw-color-bone-100);
--aw-fg-secondary: var(--aw-color-bone-200);
--aw-fg-muted: var(--aw-color-ash-cream);
--aw-fg-disabled: var(--aw-color-graphite-400);
--aw-fg-inverse: var(--aw-color-obsidian-900);  /* on inverse bg only */
--aw-fg-accent: var(--aw-color-chrome-glint);   /* the stark dopamine edge */
--aw-fg-link: var(--aw-color-bone-50);          /* underlined silver */

/* Borders */
--aw-border-subtle: rgba(240, 237, 227, 0.06);
--aw-border-default: rgba(240, 237, 227, 0.12);
--aw-border-strong: rgba(240, 237, 227, 0.24);
--aw-border-silver: var(--aw-color-silver-thread);
--aw-border-glint: rgba(214, 211, 204, 0.35);

/* Status (tonal-first, ember reserved for danger only) */
--aw-status-success: var(--aw-color-platinum-300); /* paired with ✓ iconography */
--aw-status-info:    var(--aw-color-chrome-glint); /* paired with ◐ iconography */
--aw-status-warning: var(--aw-color-silver-thread);/* paired with △ iconography */
--aw-status-danger:  var(--aw-color-ember-edge);   /* only chromatic status */

Status design covenant: Because four of the five status tokens are tonal siblings, every status treatment must pair with a unique icon shape + a typography weight shift. Color alone never carries status.

3.3 Typography Tokens

Type families:

--aw-font-display: "Gotham", "Montserrat", "Work Sans", system-ui, sans-serif;
--aw-font-body: "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
--aw-font-mono: "JetBrains Mono", "SF Mono", "Berkeley Mono", ui-monospace, monospace;
--aw-font-etched: "Gotham", "Montserrat", system-ui, sans-serif; /* rare, for void pull quotes — always italic, always ultralight */

Scale (modular, 1.250 major third on desktop, 1.200 minor third on mobile):

Typographic bleak rules:

• Display weights skew ultralight (200–300) — extreme thin type floating over void is the house voice.
• Body weights stay regular. Never bold body copy; emphasis via italic or all-caps caption.
• Letter-spacing on display is tighter than v2.0; on caption/micro it is looser. Both heighten extremism.
• Display uses the Gotham stack (--aw-font-display). Body uses the Neue Haas Grotesk stack (--aw-font-body). Mono is for code, data, technical specs only. Etched is reserved for ≤1 use per page, always italic, always ≥ 28px, always ultralight (200).

3.4 Spacing Scale (4px base)

--aw-space-0:  0;
--aw-space-px: 1px;
--aw-space-0-5: 2px;
--aw-space-1:  4px;
--aw-space-2:  8px;
--aw-space-3:  12px;
--aw-space-4:  16px;
--aw-space-5:  20px;
--aw-space-6:  24px;
--aw-space-8:  32px;
--aw-space-10: 40px;
--aw-space-12: 48px;
--aw-space-16: 64px;
--aw-space-20: 80px;
--aw-space-24: 96px;
--aw-space-32: 128px;
--aw-space-40: 160px;
--aw-space-48: 192px;
--aw-space-64: 256px;

Rhythm rules (bleak spacing skews wider than v2.0):

• Paragraph spacing: --aw-space-4.
• Section spacing (within a view): --aw-space-20 minimum desktop, --aw-space-12 mobile.
• Hero-to-content: --aw-space-32 desktop / --aw-space-16 mobile. Void breath is extreme.
• Never use values outside this scale. No 15px, no 37px.

3.5 Radii

--aw-radius-none: 0;              /* preferred for extremism moments */
--aw-radius-sm: 2px;              /* tighter than v2.0 */
--aw-radius-md: 6px;
--aw-radius-lg: 12px;             /* default component radius */
--aw-radius-xl: 20px;
--aw-radius-2xl: 32px;
--aw-radius-pill: 9999px;
--aw-radius-void-a: 63% 37% 54% 46% / 55% 48% 52% 45%;
--aw-radius-void-b: 38% 62% 41% 59% / 44% 39% 61% 56%;

Default component radius: --aw-radius-lg (12px). Sharp 0-radius corners are encouraged on architectural surfaces (hero panels, modals in extreme mode). Pills reserved for tags, avatars, status dots. Void radii reserved for decorative biomorphic masks, never interactive controls.

3.6 Shadow & Elevation System

Aetherweave v3.0 shadows are deep black, sharp, and high-contrast. No warm cast. Shadows now also carry a secondary hairline glint on top-edge for luxury definition against the void.

--aw-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.55);
--aw-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(240, 237, 227, 0.04);
--aw-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.70), 0 0 0 1px rgba(240, 237, 227, 0.06);
--aw-shadow-lg: 0 22px 52px rgba(0, 0, 0, 0.80), 0 0 0 1px rgba(240, 237, 227, 0.08);
--aw-shadow-xl: 0 40px 96px rgba(0, 0, 0, 0.88), 0 0 0 1px rgba(240, 237, 227, 0.10);

/* Specialty: void inset for sunken surfaces */
--aw-shadow-inset-void: inset 0 2px 8px rgba(0, 0, 0, 0.70);

/* Specialty: silver thread outline for luxury emphasis (use sparingly) */
--aw-shadow-silver-thread: 0 0 0 1px rgba(181, 178, 172, 0.45), 0 12px 32px rgba(0, 0, 0, 0.75);

/* Specialty: chrome-glint top highlight — signature dopamine hairline on raised surfaces */
--aw-shadow-chrome-glint: inset 0 1px 0 rgba(214, 211, 204, 0.14);

/* Focus: metallic halo around focused element */
--aw-shadow-focus: 0 0 0 2px var(--aw-color-chrome-glint), 0 0 0 5px rgba(214, 211, 204, 0.22);

Elevation map:

3.7 Blur & Refraction Tokens (Dark Liquid Glass foundation)

--aw-blur-xs: 4px;
--aw-blur-sm: 12px;
--aw-blur-md: 24px;
--aw-blur-lg: 44px;
--aw-blur-xl: 72px;

--aw-saturate-glass: 0.6;   /* DESATURATE — v3.0 pulls color OUT of what's behind */
--aw-brightness-glass: 0.58; /* DARKEN what's refracted */
--aw-contrast-glass: 1.18;   /* Boost contrast for dopamine edge */

Dark liquid glass inverts v2.0's glass philosophy: rather than brightening and saturating what's beneath, v3.0 pulls everything toward the void, then stakes high-contrast edges and hairlines. What sits behind a panel becomes a shadow of itself — the panel's chrome-glint edge is the hero.

3.8 Z-index Scale

--aw-z-hide: -1;
--aw-z-base: 0;
--aw-z-raised: 10;
--aw-z-dropdown: 100;
--aw-z-sticky: 200;
--aw-z-overlay: 300;
--aw-z-modal: 400;
--aw-z-popover: 500;
--aw-z-toast: 600;
--aw-z-tooltip: 700;
--aw-z-debug: 9999;

3.9 Breakpoints

--aw-bp-xs:  480px;
--aw-bp-sm:  640px;
--aw-bp-md:  768px;
--aw-bp-lg:  1024px;
--aw-bp-xl:  1280px;
--aw-bp-2xl: 1536px;
--aw-bp-3xl: 1920px;

Mobile-first. Media queries use min-width only.

3.10 Content Width Tokens

--aw-width-prose: 64ch;        /* tighter than v2.0 for extremism */
--aw-width-narrow: 640px;
--aw-width-content: 960px;
--aw-width-wide: 1200px;
--aw-width-full: 1440px;
--aw-width-cinema: 1760px;

3.11 Opacity Scale

--aw-opacity-0: 0;
--aw-opacity-3: 0.03;
--aw-opacity-6: 0.06;
--aw-opacity-12: 0.12;
--aw-opacity-24: 0.24;
--aw-opacity-48: 0.48;
--aw-opacity-72: 0.72;
--aw-opacity-92: 0.92;
--aw-opacity-100: 1;

Micro-opacities (3, 6, 12) are critical to bleak extremism — they're how you layer 10+ near-black strata without mud.

4. AETHERWEAVE VISUAL LANGUAGE

4.1 The Seven-Elements Rule (Bleak Edition)

Every meaningful surface (page, hero, major section, hero product card) must contain at least 5 of these 7 elements. Minor surfaces (buttons, inputs) may carry fewer, inherited from context.

1. Layered void translucency — 4+ overlapping planes of near-black with blur or opacity differentiation.
2. Organic-geometric extremism — a sharp grid/tessellation intersecting a biomorphic void flow.
3. Metallic thread — a hairline silver/chrome/platinum detail (1–2px).
4. Rhythmic repetition with variation — subtle dot fields, etched strokes, radial pulses in charcoal-on-jet that pulse like a heartbeat.
5. Obsidian dominance + stark edge — ≥90% obsidian surface area with stark bone/chrome accents ≤8%.
6. Gestural void mark — a hand-drawn, brushstroke, or calligraphic element disappearing into darkness.
7. Refractive glint — a singular light-through-void micro-highlight (platinum or chrome).

4.2 Composition: the 8-to-18 Layer Rule (raised from v2.0)

Hero surfaces carry 8 to 18 distinct strata. Count includes: abyss wash, noise grain, impasto ridge, pattern layer, motif layer(s), dark glass panel, foreground content, metallic thread, gestural overlay, refractive glint, void dot-field, edge-mask.

Fewer than 8: feels flat — add depth. More than 18: feels chaotic — consolidate.

4.3 Texture System (Extreme Tactility)

Every Aetherweave surface carries micro-texture. Use at least two of these per meaningful surface:

• Fractal noise — 0.06 opacity fractal noise SVG, mix-blend-mode: overlay on dark. (Heavier than v2.0's 0.04 — bleak texture is the voice.)
• Woven thread illusion — 45°/135° 1px silver-thread lines at 0.04 opacity.
• Impasto void ridges — layered radial gradients in near-blacks at low opacity creating matte depth.
• Sgraffito etch — sparse 1px bone-100 lines at 0.06 opacity, rotated randomly (scratched into the void).
• Ink bleed in void — radial blur spots in obsidian-700 at 0.12 opacity on abyss.
• Metallic grain — 1px silver/chrome specks at 0.05 opacity, simulating refractive flecks.

Reference CSS — fractal noise overlay on dark:

.aw-texture-void-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/textures/aw-noise-fractal.svg');
  mix-blend-mode: overlay;
  opacity: 0.06;
  pointer-events: none;
  z-index: 1;
}

4.4 Negative Space ("The Abyss")

Negative space in v3.0 is not blank — it is the void. It actively carries tension.

• Minimum hero abyss: 45% of viewport height untouched by primary content.
• Minimum section abyss: 25% of section width on at least one side.
• Typography abyss: min --aw-space-8 above any heading display-md or larger.

Abyss areas may carry a single sub-5% opacity textural element (noise, lone dot-field, distant gestural mark) — but must never hold secondary content. The void is sacred.

4.5 Motif Library (invoke by name — all rendered in obsidian extremism)

All motifs are original inventions rendered in extreme black. Motifs are SVG assets stored at /assets/motifs/{motif-id}.svg. They accept CSS custom property color overrides via currentColor or var(--aw-motif-color) — which defaults to var(--aw-color-charcoal-500).

5. DARK LIQUID GLASS SYSTEM

The refractive dark glass panel is Aetherweave v3.0's signature digital surface. Three tiers — all frosted black, desaturating and darkening what sits behind them.

5.1 Glass Tier 1 — Veil (subtlest)

Use: sticky headers, tooltips, subtle overlays.

.aw-glass-veil {
  background: rgba(10, 10, 14, 0.62);
  backdrop-filter: blur(var(--aw-blur-sm))
                   saturate(var(--aw-saturate-glass))
                   brightness(var(--aw-brightness-glass))
                   contrast(var(--aw-contrast-glass));
  -webkit-backdrop-filter: blur(var(--aw-blur-sm))
                           saturate(var(--aw-saturate-glass))
                           brightness(var(--aw-brightness-glass))
                           contrast(var(--aw-contrast-glass));
  border: 1px solid rgba(240, 237, 227, 0.06);
  border-top-color: rgba(214, 211, 204, 0.14); /* chrome-glint top hairline */
  box-shadow: var(--aw-shadow-sm);
}

5.2 Glass Tier 2 — Pane (standard)

Use: cards, modals, dropdown content.

.aw-glass-pane {
  background: linear-gradient(
    135deg,
    rgba(10, 10, 14, 0.78) 0%,
    rgba(5, 5, 8, 0.66) 100%
  );
  backdrop-filter: blur(var(--aw-blur-md))
                   saturate(var(--aw-saturate-glass))
                   brightness(var(--aw-brightness-glass))
                   contrast(var(--aw-contrast-glass));
  -webkit-backdrop-filter: blur(var(--aw-blur-md))
                           saturate(var(--aw-saturate-glass))
                           brightness(var(--aw-brightness-glass))
                           contrast(var(--aw-contrast-glass));
  border: 1px solid rgba(240, 237, 227, 0.10);
  border-top-color: rgba(214, 211, 204, 0.22);
  box-shadow: var(--aw-shadow-md), inset 0 1px 0 rgba(214, 211, 204, 0.12);
  border-radius: var(--aw-radius-lg);
}

5.3 Glass Tier 3 — Prism-Void (signature)

Use: hero panels, feature showcases, singular extremism moments. Max 1 per view.

.aw-glass-prism-void {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(10, 10, 14, 0.82) 0%,
    rgba(29, 29, 37, 0.52) 50%,
    rgba(5, 5, 8, 0.78) 100%
  );
  backdrop-filter: blur(var(--aw-blur-lg)) saturate(0.4) brightness(0.5) contrast(1.25);
  border-radius: var(--aw-radius-xl);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: var(--aw-shadow-xl), var(--aw-shadow-silver-thread);
}

.aw-glass-prism-void::before { /* monochrome refractive edge */
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 180deg at 50% 50%,
    var(--aw-color-glint-cold),
    var(--aw-color-silver-thread),
    var(--aw-color-platinum-300),
    var(--aw-color-gunmetal-500),
    var(--aw-color-glint-warm),
    var(--aw-color-glint-cold)
  );
  opacity: 0.35;
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

The prism-void ring is the only place where multiple metallic hues co-exist — forming a bleak rainbow across the grayscale-to-platinum spectrum. No chromatic hues enter this gradient.

5.4 Light-Inversion Glass (accessibility / extreme-contrast moment)

When [data-theme="inverse"] is active (Section 12.3 — a rare bone-dominant inversion), glass inverts to:

• Background rgba(245, 243, 238, 0.72) (bone-on-bone)
• Border rgba(29, 29, 37, 0.24) (jet hairline)
• Top-highlight rgba(255, 255, 255, 0.55)

5.5 Glass Fallback (no backdrop-filter support)

@supports not (backdrop-filter: blur(1px)) {
  .aw-glass-veil,
  .aw-glass-pane,
  .aw-glass-prism-void {
    background: var(--aw-bg-raised);
    box-shadow: var(--aw-shadow-md);
    border-color: var(--aw-border-default);
  }
}

5.6 Glass Performance Rules

• Never stack more than 2 backdrop-filter layers. Nested blur is expensive and muddy.
• Never use blur ≥ --aw-blur-xl on scrollable content — kills FPS on mid-range devices.
• Disable backdrop-filter when prefers-reduced-transparency: reduce is set. Fall back to solid --aw-bg-raised with a chrome-glint top border.

6. LAYOUT SYSTEM

6.1 Grid

12-column fluid grid. Gutters scale with breakpoint:

6.2 Container Pattern

.aw-container {
  width: 100%;
  max-width: var(--aw-width-full);
  margin-inline: auto;
  padding-inline: var(--aw-space-4);
}
@media (min-width: 768px)  { .aw-container { padding-inline: var(--aw-space-6); } }
@media (min-width: 1024px) { .aw-container { padding-inline: var(--aw-space-10); } }
@media (min-width: 1536px) { .aw-container { padding-inline: var(--aw-space-16); } }

6.3 Section Rhythm

Every section has inherent vertical padding via tokens. Don't override with margin hacks. Abyss breath is wider than v2.0.

.aw-section { padding-block: var(--aw-space-20); }
.aw-section--hero { padding-block: var(--aw-space-32) var(--aw-space-24); }
.aw-section--compact { padding-block: var(--aw-space-12); }
@media (min-width: 1024px) {
  .aw-section { padding-block: var(--aw-space-32); }
  .aw-section--hero { padding-block: var(--aw-space-48) var(--aw-space-40); }
}

6.4 Asymmetric Composition Rule

Aetherweave v3.0 layouts are extremely asymmetrically balanced — more often than centered. For hero sections, prefer 8/4 or 9/3 splits over 6/6. Center only for singular statement moments where the subject demands axis-dominance.

6.5 Architectural Edge Rule

Every full-bleed section carries one architectural edge: a 1px silver-thread hairline, a thin charcoal rule, or a vertical gutter of abyss. This edge defines the rhythm of the composition. Never ship a section without one.

7. TYPOGRAPHY SYSTEM

7.1 Hierarchy Rules

• One display-2xl per view maximum.
• Heading levels must descend sequentially in the DOM (h1 → h2 → h3). Skip levels only with role="heading" aria-level.
• Body copy default: --aw-text-body-md, --aw-fg-primary, measure capped at --aw-width-prose (64ch).
• Display weights default to ultralight (200–300). Never ship display copy in weight ≥ 400.

7.2 Display Treatment

Display text uses --aw-font-display (Gotham stack), extremely tight tracking, ultralight weight. It floats in the void — never shrink line-height below 1.00 at display-2xl. Display copy should feel almost disembodied.

.aw-display-2xl {
  font: 200 var(--aw-text-display-2xl) / 1.00 var(--aw-font-display);
  letter-spacing: -0.04em;
  color: var(--aw-color-bone-100);
}

7.3 Pull Quotes (etched void treatment)

.aw-pull-quote {
  font-family: var(--aw-font-etched);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.35;
  color: var(--aw-color-ash-cream);
  border-inline-start: 1px solid var(--aw-color-silver-thread);
  padding-inline-start: var(--aw-space-6);
  max-width: 52ch;
}

7.4 Drop Caps (editorial void moments)

.aw-dropcap::first-letter {
  font-family: var(--aw-font-display);
  font-weight: 200;
  font-size: 5.5em;
  line-height: 0.82;
  float: inline-start;
  padding-inline-end: var(--aw-space-3);
  padding-block-start: var(--aw-space-2);
  color: var(--aw-color-bone-50);
}

7.5 Links

.aw-link {
  color: var(--aw-fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(181, 178, 172, 0.45); /* silver-thread */
  text-underline-offset: 0.18em;
  transition: text-decoration-color 220ms var(--aw-ease-silk),
              color 220ms var(--aw-ease-silk);
}
.aw-link:hover {
  color: var(--aw-color-chrome-glint);
  text-decoration-color: var(--aw-color-chrome-glint);
}
.aw-link:focus-visible { /* see Section 14.3 */ }

7.6 Numerals

Use tabular numerals for tables, data, timestamps, prices: font-variant-numeric: tabular-nums. Oldstyle numerals are prohibited in v3.0 — they introduce organic warmth that conflicts with extremism. Only lining + tabular numerals.

7.7 All-Caps Caption Treatment (signature)

Caption and micro tiers default to all-caps for structural moments (eyebrow labels, section indicators, metadata):

.aw-caption-eyebrow {
  font: 600 var(--aw-text-micro) / 1.4 var(--aw-font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aw-color-silver-thread);
}

8. COMPONENT LIBRARY

Every component is specified with: anatomy, default state, all interactive states, variants, sizes, do's, don'ts, edge cases. All components default to obsidian surfaces, bone text, silver-thread borders, chrome-glint hover.

8.1 BUTTON

Anatomy

[optional leading icon] [label] [optional trailing icon] — padding, radius, border, fill, shadow.

Variants

• Primary (Void) — filled obsidian-900, bone-100 text, 1px silver-thread border. The hero action.
• Secondary (Etched) — transparent fill, 1px silver-thread border, bone-200 text.
• Tertiary / Ghost — no border, no fill, label only in --aw-fg-accent.
• Glass — .aw-glass-pane fill, silver-thread border on hover.
• Destructive — ember-danger fill, bone-100 text (the ONLY chromatic button).
• Link button — renders as inline .aw-link semantically a button.

Sizes

States (all variants)

• Default
• Hover — elevation rise (+1 shadow step), chrome-glint top border intensifies, translateY(-1px), 220ms silk ease
• Focus-visible — 2px chrome-glint outline offset 3px + silver halo (see --aw-shadow-focus)
• Active — translateY(0), shadow drops to elevation-1
• Disabled — opacity 0.35, cursor not-allowed, no hover
• Loading — spinner replaces leading icon, label visible, aria-busy="true"

Primary (Void) button reference CSS

.aw-btn-void {
  display: inline-flex;
  align-items: center;
  gap: var(--aw-space-2);
  height: 44px;
  padding-inline: var(--aw-space-5);
  border-radius: var(--aw-radius-lg);
  border: 1px solid rgba(181, 178, 172, 0.35);
  background: linear-gradient(180deg, var(--aw-color-obsidian-700) 0%, var(--aw-color-obsidian-900) 100%);
  color: var(--aw-color-bone-100);
  font: 500 var(--aw-text-body-md) / 1 var(--aw-font-body);
  letter-spacing: 0.02em;
  box-shadow: var(--aw-shadow-sm), inset 0 1px 0 rgba(214, 211, 204, 0.14);
  cursor: pointer;
  transition:
    transform 220ms var(--aw-ease-silk),
    box-shadow 220ms var(--aw-ease-silk),
    border-color 220ms var(--aw-ease-silk),
    background 220ms var(--aw-ease-silk);
}
.aw-btn-void:hover {
  transform: translateY(-1px);
  border-color: var(--aw-color-chrome-glint);
  box-shadow: var(--aw-shadow-md), inset 0 1px 0 rgba(214, 211, 204, 0.22);
  background: linear-gradient(180deg, var(--aw-color-jet-600) 0%, var(--aw-color-obsidian-800) 100%);
}
.aw-btn-void:active { transform: translateY(0); box-shadow: var(--aw-shadow-xs); }
.aw-btn-void:focus-visible {
  outline: 2px solid var(--aw-color-chrome-glint);
  outline-offset: 3px;
}
.aw-btn-void:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

Destructive button reference CSS

.aw-btn-destructive {
  /* same structure as aw-btn-void, with ember fill */
  background: linear-gradient(180deg, var(--aw-color-ember-edge) 0%, var(--aw-color-ember-danger) 100%);
  border: 1px solid rgba(240, 237, 227, 0.24);
  color: var(--aw-color-bone-100);
}

Edge cases

• Long label → don't wrap buttons; if label > 24 chars, shorten or switch to link.
• Icon-only → set aria-label, add aspect-ratio: 1, same height as sized counterpart.
• In a form → must have type="button" unless it's the submit.
• Adjacent buttons → use --aw-space-3 gap minimum.
• Full-width → only in mobile CTAs, single stack, never in rows.

8.2 INPUT / TEXT FIELD

Anatomy

[label] [optional description] [leading-icon? input trailing-icon/action?] [helper text / error]

States

Default → Hover → Focus → Filled → Error → Disabled → Read-only.

Reference CSS

.aw-field-input {
  width: 100%;
  height: 44px;
  padding: 0 var(--aw-space-4);
  border-radius: var(--aw-radius-md);
  border: 1px solid var(--aw-border-default);
  background: var(--aw-color-obsidian-900);
  color: var(--aw-fg-primary);
  font: 400 var(--aw-text-body-md) / 1.4 var(--aw-font-body);
  box-shadow: var(--aw-shadow-inset-void);
  transition: border-color 180ms var(--aw-ease-silk), box-shadow 180ms var(--aw-ease-silk);
}
.aw-field-input::placeholder { color: var(--aw-fg-muted); }
.aw-field-input:hover { border-color: var(--aw-border-strong); }
.aw-field-input:focus-visible {
  outline: none;
  border-color: var(--aw-color-chrome-glint);
  box-shadow: 0 0 0 3px rgba(214, 211, 204, 0.22), var(--aw-shadow-inset-void);
}
.aw-field-input[aria-invalid="true"] {
  border-color: var(--aw-color-ember-edge);
  box-shadow: 0 0 0 3px rgba(162, 53, 53, 0.20);
}
.aw-field-input:disabled { opacity: 0.4; cursor: not-allowed; background: var(--aw-bg-sunken); }

Label & Helper Pattern

<div class="aw-field">
  <label class="aw-field__label" for="email">EMAIL ADDRESS</label>
  <p class="aw-field__description">We'll never share this.</p>
  <input id="email" class="aw-field-input" type="email" aria-describedby="email-help" />
  <p id="email-help" class="aw-field__helper">Use the address linked to your account.</p>
</div>

Label is always visible (no placeholder-as-label), rendered as .aw-caption-eyebrow all-caps treatment. If space demands, use floating label variant — floating label animates from placeholder position to eyebrow position via 220ms silk ease.

Edge cases

• Autofill — override browser's yellow with -webkit-box-shadow: 0 0 0 1000px var(--aw-color-obsidian-900) inset; -webkit-text-fill-color: var(--aw-fg-primary);
• Long text overflow — text-overflow: ellipsis only on read-only; editable fields scroll horizontally.
• Number inputs — right-align, tabular-nums, disable native steppers with custom +/-.
• Password visibility toggle — trailing icon button, aria-pressed, switches type between password and text.

8.3 TEXTAREA

Same as input, but: min-height: 120px; padding-block: var(--aw-space-3); resize: vertical;. Character counter if maxLength set: bottom-right, --aw-text-caption, turns ember-edge at 90% full.

8.4 SELECT / DROPDOWN

Custom only — never rely on native <select> for aesthetic parity. Built on a listbox pattern with full ARIA.

• Closed: styled like input, chevron trailing.
• Open: .aw-glass-pane panel, --aw-shadow-lg, max-height 280px, scrollable.
• Options: 44px height, hover rgba(214, 211, 204, 0.06), selected rgba(214, 211, 204, 0.14) + silver-thread leading line (2px).

8.5 CHECKBOX & RADIO

• 20×20 box, --aw-radius-sm (checkbox), full pill (radio).
• Unchecked: 1.5px border --aw-border-strong, --aw-color-obsidian-900 fill.
• Checked: filled --aw-color-bone-100, obsidian-900 checkmark (hand-drawn SVG, not geometric ✓). The inversion is the dopamine — a tiny bright square in the void.
• Focus: 3px chrome-glint ring, offset 2px.
• Disabled: opacity 0.35.
• Animation: 180ms silk ease for check mark path-length reveal.

8.6 SWITCH / TOGGLE

• 44×24px track.
• Off: --aw-color-obsidian-700 track, graphite-300 thumb.

…(truncated)