# Angular True Black

## Overview
An aggressive prestige style for hypercar and performance brands. A pure `#000000` canvas holds hexagon and acute-diagonal clip-path panels that interlock asymmetrically, overlapping 16–32px so no panel floats alone. Hierarchy is carried by oversized all-caps condensed sans and a single gold accent. Gold never fills a surface — it lives on 1px angular borders, small tracked labels, and dividers, under 6% of the area. Dark is canonical; there are no rounded corners anywhere.

## Colors & Roles
Dark-canonical. `background` is true black (`#000000`, oklch 0 0 0) — not charcoal, not gray. Panel surfaces separate by value step (`card` = `#161616`, oklch 0.200). `foreground` is near-white `#E8E8E8`; `muted-foreground` is `#7C7C7C` for labels and line icons. The lone chromatic role is gold (`#C9A24A`, oklch 0.731 0.115 85.2), mapped to `primary`/`accent`/`border`/`input`/`ring` but applied only as thin edges, kickers, and rules. Body contrast `#E8E8E8` on `#000000` ≈ 15:1 (WCAG AAA). The light map is an authored derivation (darker golds `#8a6f28`/`#b8923f` for contrast) — reproduction should prefer dark.

## Typography Rules
Display is `Saira Condensed` 700, uppercase, line-height 0.98, letter-spacing 0.01em — vertically compressed and aggressive (`clamp(2.6rem, 6vw, 5.5rem)`). Body and labels use `Saira`. Kicker/section labels are `Saira` 600, uppercase, 0.72rem, wide tracking 0.22em, in gold. Spec/index numbers are `Saira` 700 `tabular-nums`, sized large. Fonts are OFL Google Fonts only — no commercial or proprietary faces.

## Layout Principles
Max content width 1320px; side padding 20px mobile / 56px desktop; breakpoints 768/1120px. The composition is asymmetric — not an even grid but hexagon/diagonal panels of differing size and angle interlocking with tension, overlapping 16–32px. Vertical rhythm is dense: `clamp(72px, 9vw, 112px)`. Every section reads complete; empty black voids are resolved with faint (opacity 0.06–0.12) hexagon-wireframe SVG and 1–3 gold 1px diagonal accent lines.

## Depth & Elevation
Flat by rule. No shadows, gradients, glow, or blur. Depth is made by panel value steps (`#161616` over `#000000`) and the gold 1px edge that traces each clip-path.

## Shapes
Zero border-radius everywhere. Form identity is `clip-path: polygon()` — hexagons and acute diagonals at 12–22°. Panel edges carry a 1px gold border (pseudo-element or SVG stroke); ordinary panel borders are a `#161616` step. Images are cut to hexagon/diagonal clip-paths, −10% saturation, dark grade — never rectangular.

## Component Stylings
- **Button**: parallelogram (diagonal clip-path), transparent fill, 1px gold border, gold text, uppercase letter-spacing 0.16em, padding 12px 28px, radius 0. Hover brightens the gold border and text one step — no fill.
- **Card**: hexagon clip-path, `#161616` surface, 1px gold border, 32px inner padding; line icon + gold kicker + condensed title + body, aligned to the panel shape (no dead space inside the hexagon).
- **Nav**: 68px, black, 1px gold bottom hairline; condensed wordmark left, tracked uppercase links right (`#7C7C7C`), parallelogram gold-border CTA. Mobile uses an angular hamburger line icon.
- **Icon**: 1.5px stroke, angular geometric lines, `#7C7C7C`, crafted from hexagon/acute motifs. No rounded icons or emoji.
- **Spec panel**: diagonal clip-path, huge tabular-nums figure + unit + gold 1px divider.

## Motion
Restrained micro-motion. Scroll-in expands the clip-path slightly plus opacity 0→1 over ~200ms with 80ms stagger. Hover sharpens the gold border one step and thickens the edge line 1px→1.5px; gold labels widen tracking 0.22em→0.26em. Panels never translate or scale. No bounce, spring, or snap clip-reveal. `prefers-reduced-motion` drops the transforms, keeping opacity/border changes only.

## Do's and Don'ts
**Do:** keep the canvas pure `#000000`; cut every panel to a hexagon/acute clip-path and overlap them 16–32px; reserve gold for 1px edges, labels, and rules (≤6% area); make headlines big all-caps condensed; fill voids with hexagon wireframe + gold diagonal lines.
**Don't:** use any border-radius; paint gold as a filled surface or solid button; add a second accent color, gradient, glow, or emoji; use rectangular images; leave flat dead voids or isolated floating panels; use playful/bounce/snap motion.

## Responsive Behavior
The interlocking panel field collapses to a single stacked column on mobile while preserving clip-paths; display type scales via `clamp()`. Overlaps reduce but panels still meet at angled edges. The gold-hairline nav swaps its link row for an angular hamburger.

## Agent Prompt Guide
> Build this in the 'Angular True Black' style: pure `#000000` canvas, hexagon/acute-diagonal clip-path panels interlocking asymmetrically (16–32px overlap), zero border-radius, a single gold accent used only as 1px angular borders / uppercase tracked labels / dividers under 6% area, oversized all-caps condensed sans headlines, depth from value steps and gold edges (no shadows), faint hexagon-wireframe voids, restrained 120–200ms micro-motion.

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-angular-true-black-prestige` (an authored spec, itself inspired by hypercar prestige web design). All tokens are `manual` confidence — no live URL was extracted. Gold, true black, `#161616`, `#E8E8E8`, and `#7C7C7C` come straight from the pack; the light map, `destructive` red, `secondary`, and chart ramp are declared derivations. Typography uses OFL substitutes (Saira / Saira Condensed) with no proprietary faces.