# Angular True Black
순흑 캔버스에 헥사곤·예각 사선 clip-path 패널이 비대칭으로 맞물리고 골드 1px 보더·all-caps 콘덴스드 산세리프로 외치는 공격적 프레스티지 다크 스타일.
- taxonomy: cinematic-dark · true-black, angular, clip-path, prestige, gold-accent, condensed-caps, asymmetric · complexity=high
- page types: landing, marketing, portfolio
- best for: 하이퍼카·퍼포먼스 브랜드 랜딩, 프리미엄 제품 론칭 페이지, 공격적 무드의 브랜드 매니페스토
- avoid for: 텍스트 밀도 높은 문서·블로그, 밝고 친근한 소비자 앱, 데이터 대시보드
- provenance: authored (design-diversity 팩 'web-angular-true-black-prestige' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual
## Design rules
# 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.
## Tokens (theme.css — use these values verbatim, do not re-derive)
```css
/* Angular True Black — theme.css (generated, do not edit) */
:root {
--radius: 0px;
--radius-selector: 0px;
--radius-field: 0px;
--font-sans: 'Saira', 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'Saira', ui-monospace, 'SFMono-Regular', monospace;
--font-display: 'Saira Condensed', 'Oswald', 'Arial Narrow', sans-serif;
--spacing: 8px;
--shadow: 0px 0px 0px 0px color-mix(in oklab, oklch(0 0 0) 0%, transparent);
--ks-display-weight: 700;
--ks-display-tracking: 0.01em;
--background: oklch(0.985 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.554 0.094 87.7);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.970 0 0);
--secondary-foreground: oklch(0.252 0 0);
--muted: oklch(0.970 0 0);
--muted-foreground: oklch(0.500 0 0);
--accent: oklch(0.554 0.094 87.7);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.55 0.22 27);
--destructive-foreground: oklch(0.985 0 0);
--border: oklch(0.680 0.110 84.2);
--input: oklch(0.680 0.110 84.2);
--ring: oklch(0.554 0.094 87.7);
--chart-1: oklch(0.554 0.094 87.7);
--chart-2: oklch(0.500 0 0);
--chart-3: oklch(0.145 0 0);
--chart-4: oklch(0.870 0 0);
--chart-5: oklch(0.680 0.110 84.2);
}
.dark {
--background: oklch(0 0 0);
--foreground: oklch(0.931 0 0);
--card: oklch(0.200 0 0);
--card-foreground: oklch(0.931 0 0);
--popover: oklch(0.200 0 0);
--popover-foreground: oklch(0.931 0 0);
--primary: oklch(0.731 0.115 85.2);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.252 0 0);
--secondary-foreground: oklch(0.931 0 0);
--muted: oklch(0.200 0 0);
--muted-foreground: oklch(0.586 0 0);
--accent: oklch(0.731 0.115 85.2);
--accent-foreground: oklch(0 0 0);
--destructive: oklch(0.55 0.20 27);
--destructive-foreground: oklch(0.931 0 0);
--border: oklch(0.731 0.115 85.2);
--input: oklch(0.731 0.115 85.2);
--ring: oklch(0.731 0.115 85.2);
--chart-1: oklch(0.731 0.115 85.2);
--chart-2: oklch(0.586 0 0);
--chart-3: oklch(0.931 0 0);
--chart-4: oklch(0.252 0 0);
--chart-5: oklch(0.311 0.042 86.2);
}
```
## Golden example (exemplar.html — match this structure and token usage)
```html
Prestige / 001
Cut from Pure Black
Hexagon panels interlock at acute angles. Gold traces every edge — never a surface.
```
## Apply
- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/angular-true-black-prestige.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `