@stylecrib/cli 0.3.1 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +94 -9
- package/agents/MANIFEST.yml +136 -0
- package/agents/README.md +75 -0
- package/agents/art-director.md +168 -0
- package/agents/audacity-director.md +109 -0
- package/agents/brand-identity.md +179 -0
- package/agents/brand-precedent.md +119 -0
- package/agents/brief-enforcer.md +136 -0
- package/agents/component-qa.md +167 -0
- package/agents/cto.md +49 -0
- package/agents/design-director.md +184 -0
- package/agents/design-systems-engineer.md +162 -0
- package/agents/direction-curator.md +133 -0
- package/agents/homogeneity-detector.md +104 -0
- package/agents/logo-designer.md +240 -0
- package/agents/marketing-designer.md +156 -0
- package/agents/media-curator.md +165 -0
- package/agents/motion-engineer.md +270 -0
- package/agents/qa-conductor.md +143 -0
- package/agents/render-qa.md +133 -0
- package/agents/upgrade-simulator.md +123 -0
- package/agents/vp-architecture.md +49 -0
- package/agents/vp-engineering.md +49 -0
- package/dist/index.js +1577 -463
- package/package.json +11 -4
- package/themes/README.md +70 -0
- package/themes/acrylic-soft/THEME.md +142 -0
- package/themes/acrylic-soft/tokens.ts +180 -0
- package/themes/agency-creative/THEME.md +91 -0
- package/themes/agency-creative/tokens.ts +202 -0
- package/themes/agency-portfolio/THEME.md +109 -0
- package/themes/agency-portfolio/tokens.ts +159 -0
- package/themes/ai-startup/THEME.md +95 -0
- package/themes/ai-startup/tokens.ts +162 -0
- package/themes/airline-modern/THEME.md +104 -0
- package/themes/airline-modern/tokens.ts +179 -0
- package/themes/arc-stack/.anchor-render.png +0 -0
- package/themes/arc-stack/THEME.md +125 -0
- package/themes/arc-stack/audit.log.jsonl +6 -0
- package/themes/arc-stack/dismissals.jsonl +3 -0
- package/themes/arc-stack/tailwind.snippet.ts +17 -0
- package/themes/arc-stack/theme.yml +153 -0
- package/themes/arc-stack/tokens.ts +29 -0
- package/themes/architectural/THEME.md +102 -0
- package/themes/architectural/tokens.ts +159 -0
- package/themes/atelier-radiance/THEME.md +93 -0
- package/themes/atelier-radiance/audit.log.jsonl +1 -0
- package/themes/atelier-radiance/tailwind.snippet.ts +15 -0
- package/themes/atelier-radiance/theme.yml +130 -0
- package/themes/atelier-radiance/tokens.ts +29 -0
- package/themes/automotive-ev/THEME.md +87 -0
- package/themes/automotive-ev/tokens.ts +183 -0
- package/themes/automotive-luxury/THEME.md +88 -0
- package/themes/automotive-luxury/tokens.ts +175 -0
- package/themes/baby-modern/THEME.md +79 -0
- package/themes/baby-modern/tokens.ts +184 -0
- package/themes/banking-gravity/THEME.md +171 -0
- package/themes/banking-gravity/tokens.ts +169 -0
- package/themes/beauty-clean/THEME.md +92 -0
- package/themes/beauty-clean/tokens.ts +176 -0
- package/themes/beauty-luxury/THEME.md +96 -0
- package/themes/beauty-luxury/tokens.ts +178 -0
- package/themes/bento-modular/.anchor-render.png +0 -0
- package/themes/bento-modular/BUILD_BRIEF.md +171 -0
- package/themes/bento-modular/THEME.md +80 -0
- package/themes/bento-modular/audit.log.jsonl +3 -0
- package/themes/bento-modular/dismissals.jsonl +1 -0
- package/themes/bento-modular/tailwind.snippet.ts +17 -0
- package/themes/bento-modular/theme.yml +83 -0
- package/themes/bento-modular/tokens.ts +27 -0
- package/themes/bookstore-indie/THEME.md +78 -0
- package/themes/bookstore-indie/tokens.ts +147 -0
- package/themes/brutalist/THEME.md +96 -0
- package/themes/brutalist/tokens.ts +151 -0
- package/themes/business-tiles/THEME.md +141 -0
- package/themes/business-tiles/tokens.ts +178 -0
- package/themes/cabana-poster/THEME.md +158 -0
- package/themes/cabana-poster/audit.log.jsonl +1 -0
- package/themes/cabana-poster/tailwind.snippet.ts +16 -0
- package/themes/cabana-poster/theme.yml +221 -0
- package/themes/cabana-poster/tokens.ts +34 -0
- package/themes/case-panel/THEME.md +126 -0
- package/themes/case-panel/audit.log.jsonl +2 -0
- package/themes/case-panel/tailwind.snippet.ts +15 -0
- package/themes/case-panel/theme.yml +153 -0
- package/themes/case-panel/tokens.ts +28 -0
- package/themes/cinematic-dark/THEME.md +97 -0
- package/themes/cinematic-dark/tokens.ts +195 -0
- package/themes/classic-car/THEME.md +86 -0
- package/themes/classic-car/tokens.ts +173 -0
- package/themes/cloud-friendly/THEME.md +152 -0
- package/themes/cloud-friendly/tokens.ts +181 -0
- package/themes/community-niche/THEME.md +102 -0
- package/themes/community-niche/tokens.ts +177 -0
- package/themes/corporate-grid/THEME.md +154 -0
- package/themes/corporate-grid/tokens.ts +182 -0
- package/themes/couture-luxury/THEME.md +85 -0
- package/themes/couture-luxury/tokens.ts +146 -0
- package/themes/creator-social/THEME.md +131 -0
- package/themes/creator-social/tokens.ts +249 -0
- package/themes/crypto-onchain/THEME.md +100 -0
- package/themes/crypto-onchain/tokens.ts +207 -0
- package/themes/cycling-brand/THEME.md +78 -0
- package/themes/cycling-brand/tokens.ts +185 -0
- package/themes/dating-friendly/THEME.md +102 -0
- package/themes/dating-friendly/tokens.ts +178 -0
- package/themes/dense-utility/THEME.md +85 -0
- package/themes/dense-utility/tokens.ts +155 -0
- package/themes/devtool-cli/THEME.md +100 -0
- package/themes/devtool-cli/tokens.ts +195 -0
- package/themes/devtool-docs/THEME.md +105 -0
- package/themes/devtool-docs/tokens.ts +177 -0
- package/themes/editorial/THEME.md +129 -0
- package/themes/editorial/audit.log.jsonl +2 -0
- package/themes/editorial/tailwind.snippet.ts +15 -0
- package/themes/editorial/theme.yml +173 -0
- package/themes/editorial/tokens.ts +29 -0
- package/themes/education-formal/THEME.md +154 -0
- package/themes/education-formal/audit.log.jsonl +1 -0
- package/themes/education-formal/tailwind.snippet.ts +15 -0
- package/themes/education-formal/theme.yml +186 -0
- package/themes/education-formal/tokens.ts +29 -0
- package/themes/education-warm/THEME.md +91 -0
- package/themes/education-warm/tokens.ts +185 -0
- package/themes/ember-poster/README.md +79 -0
- package/themes/ember-poster/THEME.md +101 -0
- package/themes/ember-poster/audit.log.jsonl +17 -0
- package/themes/ember-poster/package.json +34 -0
- package/themes/ember-poster/tailwind.snippet.ts +17 -0
- package/themes/ember-poster/theme.yml +109 -0
- package/themes/ember-poster/tokens.ts +27 -0
- package/themes/enterprise-cloud/THEME.md +139 -0
- package/themes/enterprise-cloud/tokens.ts +179 -0
- package/themes/enterprise-tech/.anchor-render.png +0 -0
- package/themes/enterprise-tech/THEME.md +167 -0
- package/themes/enterprise-tech/audit.log.jsonl +1 -0
- package/themes/enterprise-tech/tailwind.snippet.ts +15 -0
- package/themes/enterprise-tech/theme.yml +202 -0
- package/themes/enterprise-tech/tokens.ts +29 -0
- package/themes/ev-charging/THEME.md +94 -0
- package/themes/ev-charging/tokens.ts +185 -0
- package/themes/farm-direct/THEME.md +92 -0
- package/themes/farm-direct/tokens.ts +180 -0
- package/themes/fintech-card/THEME.md +96 -0
- package/themes/fintech-card/tokens.ts +191 -0
- package/themes/fintech-trust/THEME.md +94 -0
- package/themes/fintech-trust/tokens.ts +192 -0
- package/themes/food-blog/THEME.md +98 -0
- package/themes/food-blog/tokens.ts +183 -0
- package/themes/forum-classic/THEME.md +100 -0
- package/themes/forum-classic/tokens.ts +168 -0
- package/themes/fresh-plate/.anchor-render.png +0 -0
- package/themes/fresh-plate/THEME.md +144 -0
- package/themes/fresh-plate/audit.log.jsonl +2 -0
- package/themes/fresh-plate/dismissals.jsonl +3 -0
- package/themes/fresh-plate/tailwind.snippet.ts +16 -0
- package/themes/fresh-plate/theme.yml +189 -0
- package/themes/fresh-plate/tokens.ts +30 -0
- package/themes/furniture-modern/THEME.md +94 -0
- package/themes/furniture-modern/tokens.ts +176 -0
- package/themes/gaming-esports/THEME.md +146 -0
- package/themes/gaming-esports/tokens.ts +199 -0
- package/themes/gaming-streamer/THEME.md +139 -0
- package/themes/gaming-streamer/tokens.ts +201 -0
- package/themes/glassmorphic-modern/THEME.md +119 -0
- package/themes/glassmorphic-modern/tokens.ts +174 -0
- package/themes/government-civic/THEME.md +138 -0
- package/themes/government-civic/tokens.ts +164 -0
- package/themes/gym-chain/THEME.md +79 -0
- package/themes/gym-chain/tokens.ts +196 -0
- package/themes/healthcare-bright/THEME.md +95 -0
- package/themes/healthcare-bright/tokens.ts +184 -0
- package/themes/home-decor/THEME.md +94 -0
- package/themes/home-decor/tokens.ts +177 -0
- package/themes/hotel-boutique/THEME.md +110 -0
- package/themes/hotel-boutique/tokens.ts +179 -0
- package/themes/hyperminimal-mono/THEME.md +91 -0
- package/themes/hyperminimal-mono/tokens.ts +150 -0
- package/themes/indie-art-game/THEME.md +107 -0
- package/themes/indie-art-game/tokens.ts +216 -0
- package/themes/insurance-legacy/THEME.md +101 -0
- package/themes/insurance-legacy/tokens.ts +182 -0
- package/themes/insurance-modern/THEME.md +103 -0
- package/themes/insurance-modern/tokens.ts +192 -0
- package/themes/kaiju-reveal/THEME.md +97 -0
- package/themes/kaiju-reveal/tokens.ts +185 -0
- package/themes/kinetic-data/THEME.md +172 -0
- package/themes/kinetic-data/audit.log.jsonl +1 -0
- package/themes/kinetic-data/tailwind.snippet.ts +16 -0
- package/themes/kinetic-data/theme.yml +207 -0
- package/themes/kinetic-data/tokens.ts +30 -0
- package/themes/kinetic-headline/.anchor-render.png +0 -0
- package/themes/kinetic-headline/BUILD_BRIEF.md +156 -0
- package/themes/kinetic-headline/THEME.md +78 -0
- package/themes/kinetic-headline/audit.log.jsonl +4 -0
- package/themes/kinetic-headline/dismissals.jsonl +1 -0
- package/themes/kinetic-headline/tailwind.snippet.ts +16 -0
- package/themes/kinetic-headline/theme.yml +81 -0
- package/themes/kinetic-headline/tokens.ts +26 -0
- package/themes/law-firm/THEME.md +108 -0
- package/themes/law-firm/tokens.ts +158 -0
- package/themes/lawtech-modern/THEME.md +107 -0
- package/themes/lawtech-modern/tokens.ts +192 -0
- package/themes/linkedin-pro/THEME.md +102 -0
- package/themes/linkedin-pro/tokens.ts +174 -0
- package/themes/logistics-modern/THEME.md +94 -0
- package/themes/logistics-modern/tokens.ts +187 -0
- package/themes/magazine-glossy/THEME.md +74 -0
- package/themes/magazine-glossy/tokens.ts +158 -0
- package/themes/marker-mag/THEME.md +128 -0
- package/themes/marker-mag/audit.log.jsonl +1 -0
- package/themes/marker-mag/tailwind.snippet.ts +15 -0
- package/themes/marker-mag/theme.yml +159 -0
- package/themes/marker-mag/tokens.ts +27 -0
- package/themes/marketplace-modern/THEME.md +135 -0
- package/themes/marketplace-modern/tokens.ts +186 -0
- package/themes/marketplace-vintage/THEME.md +110 -0
- package/themes/marketplace-vintage/tokens.ts +185 -0
- package/themes/maximalist/THEME.md +96 -0
- package/themes/maximalist/tokens.ts +168 -0
- package/themes/mid-century/THEME.md +109 -0
- package/themes/mid-century/tokens.ts +162 -0
- package/themes/motorcycle-brand/THEME.md +86 -0
- package/themes/motorcycle-brand/tokens.ts +174 -0
- package/themes/museum/THEME.md +83 -0
- package/themes/museum/tokens.ts +147 -0
- package/themes/music-streaming/THEME.md +101 -0
- package/themes/music-streaming/tokens.ts +187 -0
- package/themes/music-vinyl/THEME.md +98 -0
- package/themes/music-vinyl/tokens.ts +167 -0
- package/themes/nature-distilled/.anchor-render.png +0 -0
- package/themes/nature-distilled/BUILD_BRIEF.md +158 -0
- package/themes/nature-distilled/THEME.md +81 -0
- package/themes/nature-distilled/audit.log.jsonl +2 -0
- package/themes/nature-distilled/tailwind.snippet.ts +16 -0
- package/themes/nature-distilled/theme.yml +91 -0
- package/themes/nature-distilled/tokens.ts +26 -0
- package/themes/news-tabloid/THEME.md +72 -0
- package/themes/news-tabloid/tokens.ts +158 -0
- package/themes/news-tech/THEME.md +75 -0
- package/themes/news-tech/tokens.ts +149 -0
- package/themes/newsletter/THEME.md +82 -0
- package/themes/newsletter/tokens.ts +138 -0
- package/themes/newspaper-classic/THEME.md +74 -0
- package/themes/newspaper-classic/tokens.ts +159 -0
- package/themes/nonprofit-arts/THEME.md +78 -0
- package/themes/nonprofit-arts/tokens.ts +157 -0
- package/themes/nonprofit-warm/THEME.md +105 -0
- package/themes/nonprofit-warm/tokens.ts +188 -0
- package/themes/outdoor-adventure/THEME.md +113 -0
- package/themes/outdoor-adventure/tokens.ts +181 -0
- package/themes/overland-broadside/THEME.md +119 -0
- package/themes/overland-broadside/audit.log.jsonl +1 -0
- package/themes/overland-broadside/tailwind.snippet.ts +17 -0
- package/themes/overland-broadside/theme.yml +138 -0
- package/themes/overland-broadside/tokens.ts +27 -0
- package/themes/performance-engineered/THEME.md +162 -0
- package/themes/performance-engineered/audit.log.jsonl +1 -0
- package/themes/performance-engineered/tailwind.snippet.ts +15 -0
- package/themes/performance-engineered/theme.yml +193 -0
- package/themes/performance-engineered/tokens.ts +29 -0
- package/themes/pet-food/THEME.md +78 -0
- package/themes/pet-food/tokens.ts +185 -0
- package/themes/pharma-clinical/THEME.md +164 -0
- package/themes/pharma-clinical/audit.log.jsonl +1 -0
- package/themes/pharma-clinical/tailwind.snippet.ts +15 -0
- package/themes/pharma-clinical/theme.yml +201 -0
- package/themes/pharma-clinical/tokens.ts +29 -0
- package/themes/pill-editorial/THEME.md +125 -0
- package/themes/pill-editorial/audit.log.jsonl +1 -0
- package/themes/pill-editorial/tailwind.snippet.ts +15 -0
- package/themes/pill-editorial/theme.yml +168 -0
- package/themes/pill-editorial/tokens.ts +31 -0
- package/themes/podcast-warm/THEME.md +103 -0
- package/themes/podcast-warm/tokens.ts +192 -0
- package/themes/publisher-indie/THEME.md +78 -0
- package/themes/publisher-indie/tokens.ts +148 -0
- package/themes/raw-concrete/BUILD_BRIEF.md +157 -0
- package/themes/raw-concrete/THEME.md +76 -0
- package/themes/raw-concrete/audit.log.jsonl +10 -0
- package/themes/raw-concrete/tailwind.snippet.ts +16 -0
- package/themes/raw-concrete/theme.yml +88 -0
- package/themes/raw-concrete/tokens.ts +27 -0
- package/themes/realestate-luxury/THEME.md +94 -0
- package/themes/realestate-luxury/tokens.ts +169 -0
- package/themes/realestate-marketplace/THEME.md +106 -0
- package/themes/realestate-marketplace/tokens.ts +183 -0
- package/themes/restaurant-modern/THEME.md +109 -0
- package/themes/restaurant-modern/tokens.ts +172 -0
- package/themes/runway-fashion/THEME.md +99 -0
- package/themes/runway-fashion/tokens.ts +167 -0
- package/themes/saturday-morning/THEME.md +117 -0
- package/themes/saturday-morning/tokens.ts +281 -0
- package/themes/schema.ts +235 -0
- package/themes/signal-dark/BUILD_BRIEF.md +168 -0
- package/themes/signal-dark/THEME.md +107 -0
- package/themes/signal-dark/tokens.ts +181 -0
- package/themes/soft-modern/THEME.md +91 -0
- package/themes/soft-modern/tokens.ts +166 -0
- package/themes/solar-residential/THEME.md +92 -0
- package/themes/solar-residential/tokens.ts +176 -0
- package/themes/sports-league/THEME.md +180 -0
- package/themes/sports-league/audit.log.jsonl +1 -0
- package/themes/sports-league/tailwind.snippet.ts +15 -0
- package/themes/sports-league/theme.yml +213 -0
- package/themes/sports-league/tokens.ts +32 -0
- package/themes/stadium-sport/THEME.md +114 -0
- package/themes/stadium-sport/tokens.ts +187 -0
- package/themes/streetwear-hype/THEME.md +100 -0
- package/themes/streetwear-hype/tokens.ts +174 -0
- package/themes/studio-architect/THEME.md +108 -0
- package/themes/studio-architect/tokens.ts +162 -0
- package/themes/studio-photographer/THEME.md +88 -0
- package/themes/studio-photographer/tokens.ts +164 -0
- package/themes/team-kanban/.anchor-render.png +0 -0
- package/themes/team-kanban/THEME.md +167 -0
- package/themes/team-kanban/audit.log.jsonl +2 -0
- package/themes/team-kanban/dismissals.jsonl +1 -0
- package/themes/team-kanban/tailwind.snippet.ts +15 -0
- package/themes/team-kanban/theme.yml +209 -0
- package/themes/team-kanban/tokens.ts +35 -0
- package/themes/telehealth-modern/THEME.md +95 -0
- package/themes/telehealth-modern/tokens.ts +197 -0
- package/themes/tourism-board/THEME.md +111 -0
- package/themes/tourism-board/tokens.ts +173 -0
- package/themes/toys-modern/THEME.md +79 -0
- package/themes/toys-modern/tokens.ts +200 -0
- package/themes/travel-luxury/THEME.md +95 -0
- package/themes/travel-luxury/tokens.ts +162 -0
- package/themes/vacation-rental/THEME.md +105 -0
- package/themes/vacation-rental/tokens.ts +174 -0
- package/themes/vault-reel/THEME.md +134 -0
- package/themes/vault-reel/audit.log.jsonl +3 -0
- package/themes/vault-reel/tailwind.snippet.ts +16 -0
- package/themes/vault-reel/theme.yml +167 -0
- package/themes/vault-reel/tokens.ts +30 -0
- package/themes/vet-modern/THEME.md +79 -0
- package/themes/vet-modern/tokens.ts +194 -0
- package/themes/web3-restraint/THEME.md +87 -0
- package/themes/web3-restraint/tokens.ts +154 -0
- package/themes/wellness-active/THEME.md +102 -0
- package/themes/wellness-active/tokens.ts +203 -0
- package/themes/wellness-spa/THEME.md +93 -0
- package/themes/wellness-spa/tokens.ts +173 -0
- package/themes/y2k-chrome/THEME.md +118 -0
- package/themes/y2k-chrome/tokens.ts +249 -0
- package/themes/yoga-studio/THEME.md +76 -0
- package/themes/yoga-studio/tokens.ts +163 -0
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
import type { Direction } from "../schema";
|
|
2
|
+
|
|
3
|
+
export const aiStartup: Direction = {
|
|
4
|
+
name: "ai-startup",
|
|
5
|
+
ethos:
|
|
6
|
+
"Anthropic cream-and-Tiempos · OpenAI matte restraint · Mistral structured Inter · Inflection soft serif · DeepMind research-paper density",
|
|
7
|
+
references: [
|
|
8
|
+
{ brand: "Anthropic", trait: "warm cream + Tiempos-feel serif + research-formal restraint" },
|
|
9
|
+
{ brand: "OpenAI", trait: "matte black/cream + EB Garamond restraint + structured" },
|
|
10
|
+
{ brand: "Mistral", trait: "cream + Inter + structured + restrained European tech" },
|
|
11
|
+
{ brand: "Inflection", trait: "cream + serif + soft AI restraint" },
|
|
12
|
+
{ brand: "DeepMind blog", trait: "cream + Source Serif + research-paper density" },
|
|
13
|
+
],
|
|
14
|
+
feel:
|
|
15
|
+
"Deep cream paper, formal serif display, structured like a journal preprint. " +
|
|
16
|
+
"One restrained accent color used once per section. Long-form headers, byline-and-affiliation " +
|
|
17
|
+
"metadata, figure captions in mono. The page reads like it could be submitted to NeurIPS.",
|
|
18
|
+
|
|
19
|
+
fonts: {
|
|
20
|
+
display: {
|
|
21
|
+
family: "EB Garamond",
|
|
22
|
+
fallback: ["Iowan Old Style", "Apple Garamond", "Garamond", "Georgia", "serif"],
|
|
23
|
+
from: "Anthropic Tiempos / OpenAI Garamond — research-formal humanist serif, never decorative",
|
|
24
|
+
googleFont: "EB+Garamond",
|
|
25
|
+
weights: [400, 500, 600, 700],
|
|
26
|
+
},
|
|
27
|
+
body: {
|
|
28
|
+
family: "Inter",
|
|
29
|
+
fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "sans-serif"],
|
|
30
|
+
from: "Mistral / DeepMind body sans — neutral, dense-friendly, never personality-forward",
|
|
31
|
+
googleFont: "Inter",
|
|
32
|
+
weights: [400, 500, 600],
|
|
33
|
+
},
|
|
34
|
+
mono: {
|
|
35
|
+
family: "JetBrains Mono",
|
|
36
|
+
fallback: ["Berkeley Mono", "IBM Plex Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
|
|
37
|
+
from: "code blocks, model names, figure captions, affiliations — research-paper instrument feel",
|
|
38
|
+
googleFont: "JetBrains+Mono",
|
|
39
|
+
weights: [400, 500],
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
|
|
43
|
+
typography: {
|
|
44
|
+
headingTracking: "-0.015em", // EB Garamond at display tightens — research-title feel
|
|
45
|
+
bodyTracking: "0",
|
|
46
|
+
fontFeatureSettings: '"ss01", "calt", "tnum", "kern"',
|
|
47
|
+
h1ScaleClamp: "clamp(2.5rem, 5vw, 4.25rem)", // restrained — never broadcast scale; this is a paper
|
|
48
|
+
bodyBaseSize: "1.0625rem", // 17px — long-form reading, matches Anthropic site
|
|
49
|
+
bodyLineHeight: "1.7", // research-paper generous, leaves room for inline math
|
|
50
|
+
},
|
|
51
|
+
|
|
52
|
+
colors: {
|
|
53
|
+
background: { hsl: "36 30% 95%", from: "Anthropic deep cream — warm research paper, not bone" },
|
|
54
|
+
foreground: { hsl: "20 14% 12%", from: "deep ink — warm cocoa-leaning, never pure black on cream" },
|
|
55
|
+
card: { hsl: "36 38% 97%", from: "card surface — a hair brighter than the page, paper-on-paper" },
|
|
56
|
+
popover: { hsl: "36 38% 97%", from: "same as card — depth from hairline border only" },
|
|
57
|
+
primary: { hsl: "20 14% 12%", from: "the deep ink — primary action is text-on-paper inversion, not a brand color" },
|
|
58
|
+
primaryForeground: { hsl: "36 30% 95%", from: "cream on ink" },
|
|
59
|
+
secondary: { hsl: "36 22% 90%", from: "warm cream, one tier deeper — sidebar/aside surface" },
|
|
60
|
+
secondaryForeground: { hsl: "20 14% 12%", from: "ink on warm cream" },
|
|
61
|
+
muted: { hsl: "36 18% 88%", from: "muted surface — same family as secondary, fractionally cooler" },
|
|
62
|
+
mutedForeground: { hsl: "20 10% 36%", from: "secondary text — graphite ink, used for captions and metadata" },
|
|
63
|
+
accent: { hsl: "36 24% 86%", from: "warm cream deeper still — hover surface only" },
|
|
64
|
+
accentForeground: { hsl: "20 14% 12%", from: "ink on hover" },
|
|
65
|
+
border: { hsl: "20 10% 78%", from: "Anthropic/DeepMind editorial hairline — visible but quiet" },
|
|
66
|
+
input: { hsl: "20 10% 78%", from: "same as border — one hairline language across forms" },
|
|
67
|
+
ring: { hsl: "18 56% 44%", from: "rust accent — the one allowed color, used for focus and the single hero action" },
|
|
68
|
+
destructive: { hsl: "0 62% 42%", from: "alert red — distinct from the rust accent; reserved for errors" },
|
|
69
|
+
destructiveForeground: { hsl: "36 30% 95%", from: "cream on alert" },
|
|
70
|
+
brand: {
|
|
71
|
+
paper: { hsl: "36 30% 95%", from: "Anthropic deep cream — the canvas, also background" },
|
|
72
|
+
ink: { hsl: "20 14% 12%", from: "the deep warm ink — foreground, also semantic primary" },
|
|
73
|
+
rust: { hsl: "18 56% 44%", from: "Anthropic-adjacent rust accent — the one allowed color, used once per section" },
|
|
74
|
+
"ink-soft": { hsl: "20 12% 30%", from: "secondary headings, deck text, affiliations" },
|
|
75
|
+
"paper-deep": { hsl: "36 22% 90%", from: "deeper cream — pull-quote backdrops, sidebar fills" },
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
|
|
79
|
+
spacing: {
|
|
80
|
+
base: 4,
|
|
81
|
+
scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96, 128], // research-paper breathing
|
|
82
|
+
containerMax: "max-w-3xl", // prose-first; 768px reading column matches Anthropic/DeepMind
|
|
83
|
+
containerPadding: "px-6 lg:px-10",
|
|
84
|
+
sectionPadding: {
|
|
85
|
+
hero: "pt-24 pb-16 lg:pt-40 lg:pb-24", // deliberately oversized — title page energy
|
|
86
|
+
default: "py-20 lg:py-32",
|
|
87
|
+
tight: "py-12 lg:py-20",
|
|
88
|
+
},
|
|
89
|
+
},
|
|
90
|
+
|
|
91
|
+
radius: {
|
|
92
|
+
base: "0.125rem", // barely-there softening — research-paper, not soft-modern
|
|
93
|
+
pillsAllowed: false, // pills read consumer-app; research papers use rectangles and rules
|
|
94
|
+
},
|
|
95
|
+
|
|
96
|
+
shadows: {
|
|
97
|
+
style: "minimal",
|
|
98
|
+
utilities: {
|
|
99
|
+
"hairline-bottom":
|
|
100
|
+
"0 1px 0 0 hsl(var(--border))", // section divider, like a journal-paper rule
|
|
101
|
+
"figure-frame":
|
|
102
|
+
"0 0 0 1px hsl(var(--border))", // 1px border, no drop — research figures are framed, never lifted
|
|
103
|
+
},
|
|
104
|
+
},
|
|
105
|
+
|
|
106
|
+
motion: {
|
|
107
|
+
easing: "cubic-bezier(0.22, 1, 0.36, 1)",
|
|
108
|
+
durations: {
|
|
109
|
+
reveal: 1000, // slow, settled — pages do not perform
|
|
110
|
+
loop: 0, // no loops — research papers are static
|
|
111
|
+
ambient: 0, // no ambient motion
|
|
112
|
+
},
|
|
113
|
+
keyframes: {
|
|
114
|
+
"fade-rise": {
|
|
115
|
+
css:
|
|
116
|
+
"from { opacity: 0; transform: translateY(16px); }\n" +
|
|
117
|
+
"to { opacity: 1; transform: translateY(0); }",
|
|
118
|
+
defaultDuration: 1000,
|
|
119
|
+
iteration: "once",
|
|
120
|
+
purpose: "the primary entrance — section settles into place, no flourish",
|
|
121
|
+
},
|
|
122
|
+
"cursor-blink": {
|
|
123
|
+
css:
|
|
124
|
+
"0%, 49% { opacity: 1; }\n" +
|
|
125
|
+
"50%, 100% { opacity: 0; }",
|
|
126
|
+
defaultDuration: 1100,
|
|
127
|
+
iteration: "infinite",
|
|
128
|
+
purpose: "single allowed loop — terminal-style cursor for one demo/prompt block per page",
|
|
129
|
+
},
|
|
130
|
+
},
|
|
131
|
+
respectsReducedMotion: true,
|
|
132
|
+
},
|
|
133
|
+
|
|
134
|
+
density: "low",
|
|
135
|
+
|
|
136
|
+
patterns: {
|
|
137
|
+
button:
|
|
138
|
+
"Default = 1px ink border + ink text on paper, sharp 0.125rem radius, no fill. " +
|
|
139
|
+
"Hover = invert (ink fill, cream text), no transition fanfare. " +
|
|
140
|
+
"The rust accent fill is reserved for the single hero CTA per page (try the model, read the paper). " +
|
|
141
|
+
"Tertiary = serif text-link in ink, underline-on-hover. " +
|
|
142
|
+
"Never a gradient. Never a glow.",
|
|
143
|
+
card:
|
|
144
|
+
"0.125rem radius, hairline border (--border), bg-card a hair brighter than the page. " +
|
|
145
|
+
"Padding p-8 lg:p-12. Title in EB Garamond display. Affiliation/byline in mono uppercase, tracking 0.08em. " +
|
|
146
|
+
"Figures use figure-frame utility — 1px border, no drop shadow.",
|
|
147
|
+
input:
|
|
148
|
+
"Border-bottom only (1px ink-soft) for inline forms. Full-box variant for structured fields: " +
|
|
149
|
+
"1px --border, bg-card, 0.125rem radius. Label sits above in serif. Focus ring is rust, 1px.",
|
|
150
|
+
cta:
|
|
151
|
+
"The single hero action per page may use the rust filled rectangle. " +
|
|
152
|
+
"All other CTAs are serif text-links in ink with underline-on-hover. " +
|
|
153
|
+
"Never repeat the rust fill — once per page, like a footnote dagger.",
|
|
154
|
+
},
|
|
155
|
+
|
|
156
|
+
details: {
|
|
157
|
+
selectionBg: "hsl(var(--rust) / 0.22)",
|
|
158
|
+
selectionFg: "hsl(var(--foreground))",
|
|
159
|
+
focusRing: "1px solid hsl(var(--ring))",
|
|
160
|
+
scrollbarStyle: "thin",
|
|
161
|
+
},
|
|
162
|
+
};
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
# Design Direction — Airline-Modern
|
|
2
|
+
|
|
3
|
+
## Ethos
|
|
4
|
+
Delta One midnight-blue cinematic cabin · Singapore Airlines Suites mahogany + batik gold · Emirates A380 gold-on-dark theatricality · Etihad The Residence pearl restraint · Cathay Pacific First brushed-bronze Hong-Kong-skyline gravity
|
|
5
|
+
|
|
6
|
+
## Feel
|
|
7
|
+
A premium-cabin marketing surface, not a booking-engine. Near-black canvas with a midnight-blue bias (the cabin out the window at altitude), brushed-bronze gold as the single premium accent, deep midnight-blue secondary surfaces. Route maps live as the page's gravitational center — great-circle arcs traced in bronze across a desaturated globe. Cabin photography is cinematic 16:9 — the Suites at dusk, the bar at 38,000 feet, the lay-flat seat with the Cathay skyline visible through the window. The voice writes Delta One register — *"the seat reclines fully flat at 78 inches"*, *"every detail is engineered for the journey"*, *"on selected long-haul services"* — Emirates theatricality with Etihad composure.
|
|
8
|
+
|
|
9
|
+
## Reference brands
|
|
10
|
+
- **Delta One** → midnight-blue cinematic cabin marketing, route-map gravity. The dominant template — this direction owes Delta One the surface stack and the route-map-as-hero idea.
|
|
11
|
+
- **Singapore Airlines** → mahogany + batik gold premium register, sarong-kebaya warmth. The Suites-tier mahogany trim, the batik-teal ocean fill on the route map.
|
|
12
|
+
- **Emirates** → gold-on-dark First Class theatricality, A380 staircase. The brushed-bronze fixture color and the glow-bronze utility.
|
|
13
|
+
- **Etihad** → The Residence pearl restraint, three-room suite gravity. The pearl foreground and the composed tier-card pacing.
|
|
14
|
+
- **Cathay Pacific First** → brushed-bronze cabin, Hong Kong skyline backdrop. The cabin-photography aspect ratio and color grade.
|
|
15
|
+
|
|
16
|
+
## Tokens
|
|
17
|
+
HSL triples in `src/index.css`. Every token's `from:` comment names a brand origin.
|
|
18
|
+
|
|
19
|
+
Surface stack is **midnight-blue background** (the cabin at altitude) → **elevated cabin surface** (card/popover) → **deeper midnight tier** (secondary/muted/accent). Depth comes from hairline borders at midnight-22 plus a soft `cabin-lift` drop on photography. The single hero tier card may carry `glow-bronze` — the premium-fixture highlight, used **once per page**.
|
|
20
|
+
|
|
21
|
+
Brand tokens: `--midnight-blue` (Delta One cabin, alias of background), `--delta-deep` (deeper midnight tier), `--bronze-fixture` (Emirates A380 brushed-bronze, the canonical premium accent), `--bronze-deep` (pressed state), `--sq-mahogany` (Singapore Airlines Suites mahogany trim — rare, Suites-tier only), `--kebaya-batik` (SQ sarong-kebaya teal, **only** on route-map ocean fill), `--pearl-cream` (Etihad The Residence pearl, foreground alias), `--route-line` (bronze flight-path stroke — solid for served, dashed for proposed). Primary is `40 64% 56%` — brushed-bronze, never a saturated gold.
|
|
22
|
+
|
|
23
|
+
## Typography
|
|
24
|
+
- **Display:** Manrope at 300/500/700/800. Modern geometric premium — Delta One / SQ Suites register. Cabin-tier names, route-headline copy, perks-grid titles. Tracking `-0.02em`.
|
|
25
|
+
- **Body:** Inter at 400/500/600, **15px** with **line-height 1.6**. Dashboard-dense, dark-surface readable. Long-form cabin descriptions, perk explanations, fare-class fine print.
|
|
26
|
+
- **Mono:** JetBrains Mono at 400/500. Tabular numerics for flight times, ETOPS, gate numbers, route distances (8,448 NM), aircraft codes (B777-300ER). The instrument-cluster heritage.
|
|
27
|
+
|
|
28
|
+
Hierarchy is pair-driven: Manrope uppercase tracked headings + Inter body, with mono small caps for route metadata. H1 uses `clamp(2.5rem, 6vw, 5rem)` — cabin-tier hero, Delta One launch-film scale. Numbers always carry `font-variant-numeric: tabular-nums`. Font features: `"ss01", "ss03", "tnum", "cv11"`.
|
|
29
|
+
|
|
30
|
+
## Spacing
|
|
31
|
+
- **Container:** `max-w-7xl px-6 lg:px-10` — wide enough for the route-map hero card and 3-up cabin galleries.
|
|
32
|
+
- **Section padding tiers:**
|
|
33
|
+
- Hero: `pt-24 pb-16 lg:pt-36 lg:pb-24` — cinematic cabin-shot hero
|
|
34
|
+
- Default: `py-20 lg:py-28`
|
|
35
|
+
- Tight: `py-14 lg:py-18`
|
|
36
|
+
- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 80 96 128 160. Medium density — premium cabins breathe, perks-grid packs tight.
|
|
37
|
+
|
|
38
|
+
## Color
|
|
39
|
+
No hex anywhere. All color via tokens. Opacity via `/N` modifier on token.
|
|
40
|
+
|
|
41
|
+
The palette is **midnight + bronze + one secondary accent per tier**. SQ mahogany appears only on Suites-tier elements. Batik teal appears only on the route map's ocean fill. Pure black is forbidden — `--midnight-blue` (`220 32% 6%`) replaces it; the slight blue bias is the cabin-at-altitude register. Pure white is forbidden — `--pearl-cream` (`40 30% 96%`) replaces it.
|
|
42
|
+
|
|
43
|
+
The premium-cabin discipline: **one accent, one fixture color**. Brushed-bronze is the entire signal language — used on CTAs, route lines, perk-tier eyebrows, focus rings. Adding a second gold breaks the premium register instantly.
|
|
44
|
+
|
|
45
|
+
## Radius
|
|
46
|
+
`--radius: 0.25rem` (4px). **Sharp aviation premium chrome**, just softened enough to read modern, never pill. Pills are disallowed (`pillsAllowed: false`) — they read consumer-booking, never premium-cabin. The 4px corner is the rounded edge of a printed boarding pass, not a delivery-app chip.
|
|
47
|
+
|
|
48
|
+
## Shadows
|
|
49
|
+
**Glow.** Two utilities:
|
|
50
|
+
- `.glow-bronze` — premium accent halo for the single hero CTA or the highest-tier card. A380-staircase fixture register.
|
|
51
|
+
- `.cabin-lift` — diffuse drop for cabin photography and route-map cards. Cinematic at-altitude lift.
|
|
52
|
+
|
|
53
|
+
No colored drops beyond bronze. Buttons never carry shadow themselves; the lift lives on cards and photography.
|
|
54
|
+
|
|
55
|
+
## Motion
|
|
56
|
+
Four keyframes — cinematic at-altitude pacing:
|
|
57
|
+
|
|
58
|
+
- **`route-trace`** (2800ms once) — great-circle flight-path line draws across the route map on reveal. SVG stroke-dashoffset animation. The route-map signature gesture.
|
|
59
|
+
- **`cabin-rise`** (900ms once) — cabin-gallery and tier-card entrance. Delta One title-card register.
|
|
60
|
+
- **`bronze-pulse`** (3200ms infinite) — single hero CTA highlight, fasten-seatbelt-light heartbeat. Never more than one per page.
|
|
61
|
+
- **`ken-burns`** (28000ms infinite) — slow drift on hero cabin photography. Cinematic camera push at altitude.
|
|
62
|
+
|
|
63
|
+
Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — `ken-burns` and `bronze-pulse` are disabled entirely; `route-trace` collapses to instant solid line; `cabin-rise` collapses to opacity-only.
|
|
64
|
+
|
|
65
|
+
## Component patterns
|
|
66
|
+
- **Buttons:** default tertiary CTA is a tracked-uppercase Manrope text-link in bronze, thin underline on hover — premium-cabin register. The single hero action per page ('Book in Delta One', 'Reserve The Residence', 'Upgrade to Suites') may be a solid bronze rect on midnight — 0.25rem radius, no shadow on the button itself, optional `.bronze-pulse` halo. Tertiary actions use mono small caps in pearl.
|
|
67
|
+
- **Cards (cabin/route/tier):** sharp 0.25rem corners, hairline border `--border`, `bg-card` one stop above midnight. Padding `p-7 lg:p-10`. Cabin-tier name in Manrope uppercase tracked, fare-class eyebrow in mono small caps (BUSINESS · 78A-K), perk list in Inter. The route-map card and cabin-hero card use `.cabin-lift`; the single hero tier card may use `.glow-bronze`.
|
|
68
|
+
- **Inputs:** booking-search form — bottom border + thin all-around border (1px `--border`), bg-card, 0.25rem radius. Label above in tracked-uppercase Manrope (letter-spacing 0.16em). Focus ring is bronze, 1px.
|
|
69
|
+
- **CTAs:** tracked-uppercase text-link in bronze for tertiary; solid bronze rect for the single hero action. Loyalty-tier actions use mono small caps in pearl with a bronze underline. **Never a green/blue/red fill** — bronze is the only premium signal, and using a second action color collapses the tier hierarchy.
|
|
70
|
+
|
|
71
|
+
## Recommended rich media
|
|
72
|
+
**Cinematic cabin and at-altitude photography first.** The Suites at dusk, the lay-flat seat at 78 inches, the cabin-bar at altitude, the Hong Kong skyline through the window, the cockpit-instrumentation glow during night-flight. Delta One's photographic register — warm cabin lighting against deep-blue cabin walls, occupied spaces (a glass on the side table, an open book), never empty.
|
|
73
|
+
|
|
74
|
+
**AI tool recommendations.** **Midjourney / Flux** for cabin photography — *"Delta One Suite cabin at dusk, lay-flat bed configuration, warm cabin lighting against deep navy walls, side table with whisky glass and folded headphones, cinematic 35mm, --ar 16:9"*. For at-altitude window shots, *"airplane cabin window at cruising altitude, clouds below at sunset, warm interior light, shallow depth of field"*. Avoid Midjourney's default empty-cabin marketing-stage register — explicitly prompt for occupied and warm grade.
|
|
75
|
+
|
|
76
|
+
**Aspect ratios.** **16:9** for hero cabin and at-altitude photography (Delta One cinematic register). **4:3** for cabin-gallery thumbnails. **21:9** for the route-map hero card. Never 1:1 (off-feel for aviation premium).
|
|
77
|
+
|
|
78
|
+
**Color in imagery.** Warm cabin lighting against deep-blue walls, golden-hour-out-the-window register, bronze fixtures and mahogany trim. **Never** high-key bright cabin (kills the premium register, reads economy-class marketing). Black-and-white for cabin-crew portraits is welcome.
|
|
79
|
+
|
|
80
|
+
**Route map.** The signature element. Desaturated globe (foreground at low opacity over midnight), bronze great-circle arcs for served routes (solid stroke), dashed arcs for proposed/seasonal. Hub airports as small bronze dots with tracked-uppercase three-letter codes (ATL · JFK · SIN · DXB · HKG). Ocean fill in batik teal at 0.06 opacity — barely visible, the SQ reference.
|
|
81
|
+
|
|
82
|
+
**Video.** Cabin-hero 24s muted loops in the slow `ken-burns` register. Never autoplay with sound. Never a safety-card walkthrough. ≤12 MB AV1.
|
|
83
|
+
|
|
84
|
+
**Captions.** Aircraft type, route, fare class, photographer credit, time — in JetBrains Mono small caps. *"B777-300ER · SIN-JFK · Suites 1A · Photograph by Magnus Lindqvist · 18:24 cruise altitude"*.
|
|
85
|
+
|
|
86
|
+
**Performance.** Hero cabin image ≤220 KB AVIF at 2200w; cabin-gallery thumbs ≤120 KB. LCP under 2.6s — if it slips, the photograph is too large.
|
|
87
|
+
|
|
88
|
+
**Avoid.** Budget-carrier booking-engine energy. Stock airplane-takeoff photos. Smiling-flight-attendant marketing stock. Generic "luxury travel" hotel-chain language. Lens flare. Pop-up upgrade modals. Anything that reads more **Spirit Airlines than Singapore Suites.**
|
|
89
|
+
|
|
90
|
+
**Accessibility.** Long-form alt-text for cabin photography — *"A Delta One Suite cabin photographed at dusk, lay-flat bed configuration in warm cabin lighting, a side table holding a whisky glass and folded headphones."* Route-map arcs must have `<title>` and `<desc>` in SVG for screen readers. Tier-card pricing must use `font-variant-numeric: tabular-nums`.
|
|
91
|
+
|
|
92
|
+
## Component families
|
|
93
|
+
None at install time. As `*RouteMapCard`, `*CabinGalleryTile`, `*TierCard`, `*PerksGrid`, `*FlightSearchRow` families emerge, the Director lists them here.
|
|
94
|
+
|
|
95
|
+
## Details
|
|
96
|
+
- **Selection:** `hsl(var(--ring) / 0.32)` background, foreground text — bronze highlight on midnight.
|
|
97
|
+
- **Focus ring:** `1px solid hsl(var(--ring))` — bronze, never blue.
|
|
98
|
+
- **Scrollbar:** thin.
|
|
99
|
+
|
|
100
|
+
## Exceptions
|
|
101
|
+
None yet. When an intentional one-of-one violation lands (an Etihad-pearl variant for daytime-cabin photography, a Cathay-skyline variant for the HKG hub page), add it here with the reason.
|
|
102
|
+
|
|
103
|
+
## Revisions
|
|
104
|
+
- Initial direction, generated at install time.
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
import type { Direction } from "../schema";
|
|
2
|
+
|
|
3
|
+
export const airlineModern: Direction = {
|
|
4
|
+
name: "airline-modern",
|
|
5
|
+
ethos: "Delta One midnight-blue cabin · Singapore Airlines mahogany-and-batik premium · Emirates gold-on-dark · Etihad The Residence pearl restraint · Cathay Pacific First brushed-bronze",
|
|
6
|
+
references: [
|
|
7
|
+
{ brand: "Delta One", trait: "midnight-blue cinematic cabin marketing, route-map gravity" },
|
|
8
|
+
{ brand: "Singapore Airlines", trait: "mahogany + batik gold premium register, sarong-kebaya warmth" },
|
|
9
|
+
{ brand: "Emirates", trait: "gold-on-dark First Class theatricality, A380 staircase shot" },
|
|
10
|
+
{ brand: "Etihad", trait: "The Residence pearl restraint, three-room suite gravity" },
|
|
11
|
+
{ brand: "Cathay Pacific First", trait: "brushed-bronze cabin, Hong Kong skyline backdrop" },
|
|
12
|
+
],
|
|
13
|
+
feel:
|
|
14
|
+
"Dark cinematic premium-cabin canvas. Near-black background with brushed-bronze gold accent, " +
|
|
15
|
+
"deep midnight-blue secondary surfaces, route maps rendered as the page's gravitational center. " +
|
|
16
|
+
"Reads like the Delta One launch film or a Singapore Airlines Suites brochure — premium aviation, " +
|
|
17
|
+
"not a budget-carrier booking flow.",
|
|
18
|
+
|
|
19
|
+
fonts: {
|
|
20
|
+
display: {
|
|
21
|
+
family: "Manrope",
|
|
22
|
+
fallback: ["Geist", "Inter", "system-ui", "sans-serif"],
|
|
23
|
+
from: "Delta One / SQ Suites modern geometric premium — clean uppercase-friendly at scale",
|
|
24
|
+
googleFont: "Manrope",
|
|
25
|
+
weights: [300, 500, 700, 800],
|
|
26
|
+
},
|
|
27
|
+
body: {
|
|
28
|
+
family: "Inter",
|
|
29
|
+
fallback: ["system-ui", "-apple-system", "sans-serif"],
|
|
30
|
+
from: "Emirates body sans — neutral, dense, dashboard-readable on dark surfaces",
|
|
31
|
+
googleFont: "Inter",
|
|
32
|
+
weights: [400, 500, 600],
|
|
33
|
+
},
|
|
34
|
+
mono: {
|
|
35
|
+
family: "JetBrains Mono",
|
|
36
|
+
fallback: ["IBM Plex Mono", "ui-monospace", "monospace"],
|
|
37
|
+
from: "tabular numerics for flight times, ETOPS, gate numbers, route distances — instrument cluster heritage",
|
|
38
|
+
googleFont: "JetBrains+Mono",
|
|
39
|
+
weights: [400, 500],
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
|
|
43
|
+
typography: {
|
|
44
|
+
headingTracking: "-0.02em",
|
|
45
|
+
bodyTracking: "0.005em",
|
|
46
|
+
fontFeatureSettings: '"ss01", "ss03", "tnum", "cv11"',
|
|
47
|
+
h1ScaleClamp: "clamp(2.5rem, 6vw, 5rem)",
|
|
48
|
+
bodyBaseSize: "0.9375rem",
|
|
49
|
+
bodyLineHeight: "1.6",
|
|
50
|
+
},
|
|
51
|
+
|
|
52
|
+
colors: {
|
|
53
|
+
background: { hsl: "220 32% 6%", from: "Delta One near-black with midnight-blue bias — cabin at altitude" },
|
|
54
|
+
foreground: { hsl: "40 30% 96%", from: "warm pearl off-white — SQ kebaya cream, never pure white" },
|
|
55
|
+
card: { hsl: "220 28% 9%", from: "elevated cabin surface, one stop up from background" },
|
|
56
|
+
popover: { hsl: "220 24% 12%", from: "popover/menu surface, two stops up" },
|
|
57
|
+
primary: { hsl: "40 64% 56%", from: "Emirates brushed-bronze gold — A380 staircase fixture" },
|
|
58
|
+
primaryForeground: { hsl: "220 32% 6%", from: "midnight on bronze gold" },
|
|
59
|
+
secondary: { hsl: "220 36% 14%", from: "Delta midnight-blue tier — deeper cabin surface" },
|
|
60
|
+
secondaryForeground: { hsl: "40 30% 96%", from: "pearl on midnight blue" },
|
|
61
|
+
muted: { hsl: "220 24% 12%", from: "muted cabin chrome — same family, fractionally lighter" },
|
|
62
|
+
mutedForeground: { hsl: "40 14% 66%", from: "warm-tinted gray — secondary text on dark, cabin-light register" },
|
|
63
|
+
accent: { hsl: "220 24% 16%", from: "hover surface — Etihad pearl-gray on midnight" },
|
|
64
|
+
accentForeground: { hsl: "40 30% 96%", from: "pearl on accent" },
|
|
65
|
+
border: { hsl: "220 18% 22%", from: "cabin panel-gap hairline — engineered, visible only on inspection" },
|
|
66
|
+
input: { hsl: "220 18% 22%", from: "same as border — single hairline language" },
|
|
67
|
+
ring: { hsl: "40 64% 56%", from: "bronze focus ring — the premium accent, never the midnight-blue" },
|
|
68
|
+
destructive: { hsl: "8 78% 56%", from: "cabin warning lamp — diversion red, never decoration" },
|
|
69
|
+
destructiveForeground: { hsl: "40 30% 96%", from: "pearl on warning red" },
|
|
70
|
+
brand: {
|
|
71
|
+
"midnight-blue": { hsl: "220 32% 6%", from: "Delta One cabin — alias of background, the void out the window" },
|
|
72
|
+
"delta-deep": { hsl: "220 36% 14%", from: "deeper midnight surface — secondary tier" },
|
|
73
|
+
"bronze-fixture": { hsl: "40 64% 56%", from: "Emirates A380 brushed-bronze — the canonical premium accent" },
|
|
74
|
+
"bronze-deep": { hsl: "38 56% 44%", from: "bronze pressed-state, gradient anchor" },
|
|
75
|
+
"sq-mahogany": { hsl: "12 38% 22%", from: "Singapore Airlines mahogany cabin trim — rare, used on Suites tier only" },
|
|
76
|
+
"kebaya-batik": { hsl: "176 48% 36%", from: "SQ sarong-kebaya batik teal — used only on route-map ocean fill" },
|
|
77
|
+
"pearl-cream": { hsl: "40 30% 96%", from: "Etihad The Residence pearl — foreground alias" },
|
|
78
|
+
"route-line": { hsl: "40 64% 56%", from: "bronze flight-path line on route map — solid for served, dashed for proposed" },
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
|
|
82
|
+
spacing: {
|
|
83
|
+
base: 4,
|
|
84
|
+
scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160],
|
|
85
|
+
containerMax: "max-w-7xl",
|
|
86
|
+
containerPadding: "px-6 lg:px-10",
|
|
87
|
+
sectionPadding: {
|
|
88
|
+
hero: "pt-24 pb-16 lg:pt-36 lg:pb-24",
|
|
89
|
+
default: "py-20 lg:py-28",
|
|
90
|
+
tight: "py-14 lg:py-18",
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
|
|
94
|
+
radius: {
|
|
95
|
+
base: "0.25rem",
|
|
96
|
+
pillsAllowed: false,
|
|
97
|
+
},
|
|
98
|
+
|
|
99
|
+
shadows: {
|
|
100
|
+
style: "glow",
|
|
101
|
+
utilities: {
|
|
102
|
+
"glow-bronze":
|
|
103
|
+
"0 0 0 1px hsl(40 64% 56% / 0.32), " +
|
|
104
|
+
"0 8px 24px hsl(40 64% 56% / 0.16), " +
|
|
105
|
+
"0 32px 80px hsl(40 64% 56% / 0.22)",
|
|
106
|
+
"cabin-lift":
|
|
107
|
+
"0 18px 48px -24px hsl(220 32% 0% / 0.6)",
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
|
|
111
|
+
motion: {
|
|
112
|
+
easing: "cubic-bezier(0.22, 1, 0.36, 1)",
|
|
113
|
+
durations: {
|
|
114
|
+
reveal: 900,
|
|
115
|
+
loop: 3200,
|
|
116
|
+
ambient: 28000,
|
|
117
|
+
},
|
|
118
|
+
keyframes: {
|
|
119
|
+
"route-trace": {
|
|
120
|
+
css:
|
|
121
|
+
"from { stroke-dashoffset: 1000; }\n" +
|
|
122
|
+
"to { stroke-dashoffset: 0; }",
|
|
123
|
+
defaultDuration: 2800,
|
|
124
|
+
iteration: "once",
|
|
125
|
+
purpose: "great-circle flight-path line draws across route map on reveal",
|
|
126
|
+
},
|
|
127
|
+
"cabin-rise": {
|
|
128
|
+
css:
|
|
129
|
+
"from { opacity: 0; transform: translateY(24px); }\n" +
|
|
130
|
+
"to { opacity: 1; transform: translateY(0); }",
|
|
131
|
+
defaultDuration: 900,
|
|
132
|
+
iteration: "once",
|
|
133
|
+
purpose: "cabin-gallery and tier-card entrance — Delta One title-card register",
|
|
134
|
+
},
|
|
135
|
+
"bronze-pulse": {
|
|
136
|
+
css:
|
|
137
|
+
"0%, 100% { box-shadow: 0 0 0 0 hsl(40 64% 56% / 0.45); }\n" +
|
|
138
|
+
"50% { box-shadow: 0 0 0 14px hsl(40 64% 56% / 0); }",
|
|
139
|
+
defaultDuration: 3200,
|
|
140
|
+
iteration: "infinite",
|
|
141
|
+
purpose: "single hero CTA highlight — fasten-seatbelt-light heartbeat, never more than one per page",
|
|
142
|
+
},
|
|
143
|
+
"ken-burns": {
|
|
144
|
+
css:
|
|
145
|
+
"0% { transform: scale(1.04) translate(0, 0); }\n" +
|
|
146
|
+
"100% { transform: scale(1.14) translate(-2%, -1%); }",
|
|
147
|
+
defaultDuration: 28000,
|
|
148
|
+
iteration: "infinite",
|
|
149
|
+
purpose: "slow drift on hero cabin photography — cinematic camera push at altitude",
|
|
150
|
+
},
|
|
151
|
+
},
|
|
152
|
+
respectsReducedMotion: true,
|
|
153
|
+
},
|
|
154
|
+
|
|
155
|
+
density: "medium",
|
|
156
|
+
|
|
157
|
+
patterns: {
|
|
158
|
+
button:
|
|
159
|
+
"Default CTA is a tracked-uppercase Manrope text-link in bronze, thin underline on hover. " +
|
|
160
|
+
"The single hero action ('Book in Delta One', 'Reserve The Residence') may be solid bronze on midnight — 0.25rem radius, no shadow. " +
|
|
161
|
+
"Never a pill; aviation premium does not pill. Tertiary actions use mono small caps in pearl.",
|
|
162
|
+
card:
|
|
163
|
+
"Sharp 0.25rem corners, hairline border (--border), bg-card one stop above midnight. " +
|
|
164
|
+
"Padding p-7 lg:p-10. Route-map card and cabin-hero card get .cabin-lift; the single hero tier card may get .glow-bronze.",
|
|
165
|
+
input:
|
|
166
|
+
"Bottom border + thin all-around border (1px --border), bg-card, 0.25rem radius. " +
|
|
167
|
+
"Label sits above in tracked-uppercase Manrope (letter-spacing 0.16em). Focus ring is bronze, 1px.",
|
|
168
|
+
cta:
|
|
169
|
+
"Tracked-uppercase text-link in bronze for tertiary; solid bronze rect for the single hero action. " +
|
|
170
|
+
"Bronze-pulse ring is allowed on the one hero CTA only. Never a green/blue fill — bronze is the premium signal.",
|
|
171
|
+
},
|
|
172
|
+
|
|
173
|
+
details: {
|
|
174
|
+
selectionBg: "hsl(var(--ring) / 0.32)",
|
|
175
|
+
selectionFg: "hsl(var(--foreground))",
|
|
176
|
+
focusRing: "1px solid hsl(var(--ring))",
|
|
177
|
+
scrollbarStyle: "thin",
|
|
178
|
+
},
|
|
179
|
+
};
|
|
Binary file
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
# Arc Stack
|
|
2
|
+
|
|
3
|
+
> Electric infrastructure register — dark charcoal canvas with a radial electric-blue glow behind the hero display type, monumental TWK Everett sans at broadside scale, alternating dark/white full-bleed inverted bands, small inline glyph marks embedded inside key phrases in the headline copy, and a bento feature grid on the closing sections.
|
|
4
|
+
|
|
5
|
+
**Slug:** `arc-stack` — **Surface:** web — **Density:** balanced
|
|
6
|
+
|
|
7
|
+
## Influence
|
|
8
|
+
|
|
9
|
+
Web3 protocol relaunches (the Sui / Aptos / Solana marketing register when they refuse the tech-bro purple gradient and instead reach for a monumental dark sans + one saturated signal accent). Foundation-model marketing (the Anthropic / Modal / Baseten register at their most confident dark-mode). Vercel/Linear at their most electric. Bloomberg terminal turned into a launch page.
|
|
10
|
+
|
|
11
|
+
## Signature move
|
|
12
|
+
|
|
13
|
+
Monumental TWK Everett sans at 176px hero, letter-spacing crushed
|
|
14
|
+
to -0.033em, on a dark charcoal canvas (#222529). BEHIND the hero
|
|
15
|
+
H1 sits a huge radial electric-blue glow (#298DFF at ~35% opacity
|
|
16
|
+
over a 1400px radius), softly pulsing — the "arc" that gives the
|
|
17
|
+
theme its name. Inline glyph marks embed INSIDE key phrases in the
|
|
18
|
+
headline body copy at highlighted spans — each mark is a bespoke
|
|
19
|
+
inline SVG shape (a small filled square, a small filled circle, a
|
|
20
|
+
small plus-sign cross) in the accent color, sized 0.7em, offset
|
|
21
|
+
0.15em above the baseline. Full-bleed white inverted bands break
|
|
22
|
+
the dark rhythm every 2-3 sections, carrying feature-list rows
|
|
23
|
+
(small SVG icon + label + body copy + trust-green checkmark) or
|
|
24
|
+
side-by-side comparison tables. Bento-style feature grid on the
|
|
25
|
+
closing sections uses dark cards with subtle #131518 surface fill
|
|
26
|
+
and an accent-blue hover state. Four colored pill labels ("Start
|
|
27
|
+
building" / "Start coding" / "Start earning" / "Start connecting")
|
|
28
|
+
each carry their own signal hue so the CTAs read as segmented
|
|
29
|
+
paths, not a hero-button repeat. Money counter using TWK Everett
|
|
30
|
+
Mono 700 at 96px shows a fictional aggregate value ("$442,826,452"
|
|
31
|
+
register) rolling up on scroll into view. Border-radius is 0
|
|
32
|
+
everywhere — no rounded cards, buttons, inputs, media. Brand
|
|
33
|
+
character sits in the display type, the glow, the inline SVG glyph
|
|
34
|
+
marks, and the disciplined dark/white banded rhythm — no
|
|
35
|
+
mono-caps eyebrows, no dot-metadata rows, no small corner tags, no
|
|
36
|
+
three-column feature grids as a fallback.
|
|
37
|
+
|
|
38
|
+
## Palette
|
|
39
|
+
|
|
40
|
+
- **bg:** `#222529`
|
|
41
|
+
- **surface:** `#131518`
|
|
42
|
+
- **ink:** `#F4F5F7`
|
|
43
|
+
- **accent:** `#298DFF`
|
|
44
|
+
- **secondary:** `#4DA2FF`
|
|
45
|
+
- **signal:** `#FF3D3D`
|
|
46
|
+
|
|
47
|
+
## Typography
|
|
48
|
+
|
|
49
|
+
- **Display:** TWK Everett (paid, from TypeMates) or Inter Display / General Sans as broader-market fallback — 400/500/700 weight, mixed case, letter-spacing -0.033em at hero scale (-5.85px at 176px). At scale — 176px monumental hero, 96px section-headline, 78px inverted-band-headline, 60px h3, 21px lead body. TWK Everett is the reference face (its condensed-caps proportions + tight tracking is the exact register); Inter Display is the safest free approximation with similar humanist proportions.
|
|
50
|
+
- **Body:** TWK Everett same family — 400 weight, mixed-case, line-height 1.4, 16-18px body copy. Small captions get 13-14px 500-weight. This theme's discipline is ONE type family across display + body (matches the reference), not display + body split.
|
|
51
|
+
- **Mono:** TWK Everett Mono — narrowly scoped to numbered index labels (01 02 03…), spec-callouts, and the money counter. NEVER used for section eyebrows, corner tags, metadata rows, or bylines (those are universal-slop-blocklist hits regardless of face).
|
|
52
|
+
- **Scale:** 1.333 (perfect fourth — deliberately wide contrast so the monumental display shouts on the dark canvas and the body settles into calm captioning)
|
|
53
|
+
|
|
54
|
+
## Motion
|
|
55
|
+
|
|
56
|
+
Ships live in the section renderer (no external dependencies):
|
|
57
|
+
1. Radial hero-glow entry — the electric-blue radial gradient behind the H1 fades in from opacity 0 → 0.85 over 900ms cubic-bezier(0.16,1,0.3,1) on first paint, then a slow 8s pulse loop keeps it breathing (opacity 0.75 ↔ 0.95).
|
|
58
|
+
2. Hero H1 stagger reveal — each word of the monumental headline slides in from translateY(24px) + opacity 0, 100ms stagger per word, 700ms cubic-bezier per word.
|
|
59
|
+
3. Highlighted-phrase glyph pop — the inline glyph marks (e.g., a small blue diamond next to "electric blocks") pop in 400ms after their surrounding word settles, scale(0.6 → 1) + fade.
|
|
60
|
+
4. Inverted-band cross-fade transition — as the user scrolls from dark canvas into a white inverted band, the background transitions via a scroll-linked gradient (background-color transition over 400ms) so the shift reads as intentional, not jarring.
|
|
61
|
+
5. Bento tile hover-lift — each dark bento tile scales to 1.02 + adds a subtle accent-blue inset border on hover, 220ms cubic-bezier(0.65,0,0.35,1).
|
|
62
|
+
6. Money-counter roll-up — the big TVL/aggregate figure ("$442,826,452" register) rolls up from 0 → target on first-view via requestAnimationFrame, 2200ms ease-out, only fires once per session.
|
|
63
|
+
7. Start-button color-shift — the four colored pill labels (Start building / Start coding / Start earning / Start connecting) each have their own accent color; hover flips the background from transparent to the accent with a 200ms transition.
|
|
64
|
+
8. prefers-reduced-motion: reduce — all keyframe animations disabled, glow starts at final opacity (no pulse), stagger removes, money counter jumps to final value, hover transitions become instant. State changes still fire (they're content, not decoration).
|
|
65
|
+
|
|
66
|
+
Customer installs these as dependencies for the deeper motion tier:
|
|
67
|
+
- Lenis — smooth inertial scroll (the alternating dark/white bands need inertial scroll to feel considered).
|
|
68
|
+
- GSAP ScrollTrigger — the money-counter roll-up + inverted-band cross-fade + hero stagger benefit from orchestrated timelines.
|
|
69
|
+
- Custom branded preloader with the arc-blue radial glow expanding to fill the viewport, then the H1 revealing from underneath.
|
|
70
|
+
|
|
71
|
+
Motion character: technical, precise, never bouncy. Custom cubic-bezier(0.51,0,0.08,1) for reveal easings (the reference's own cubic-default), 375ms fast / 525ms default durations (matches the reference's --duration-fast / --duration-default). All motion serves the "electric infrastructure" tone — nothing quick, nothing cute, nothing decorative.
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
## Imagery
|
|
75
|
+
|
|
76
|
+
Full-bleed abstract product/infrastructure imagery on the dark
|
|
77
|
+
canvas: vertical light-blue stripe backdrops for one section (like
|
|
78
|
+
a spectrum readout), abstract dashboard captures on the inverted
|
|
79
|
+
white bands, small colored circular avatar-monogram ornaments on
|
|
80
|
+
testimonial rows, tiny SVG icons inline inside headline text. NO
|
|
81
|
+
purple/indigo gradient blobs (that's the tech-bro slop this
|
|
82
|
+
register explicitly refuses), NO glassmorphism, NO grainy
|
|
83
|
+
photography — this is an INFRASTRUCTURE marketing site, not a
|
|
84
|
+
DTC editorial. Photography where it appears is abstract product
|
|
85
|
+
screenshots or blueprints, always full-bleed, never inside framed
|
|
86
|
+
cards with drop-shadow.
|
|
87
|
+
|
|
88
|
+
## Best for
|
|
89
|
+
|
|
90
|
+
- Web3 protocol relaunches / mainnet marketing pages
|
|
91
|
+
- Foundation-model / AI-platform launch pages (the Anthropic / Modal / Baseten register at their most electric)
|
|
92
|
+
- Dev-tools infrastructure (Vercel-tier launch pages that trade on monumental confidence)
|
|
93
|
+
- Cryptocurrency exchanges + wallet marketing
|
|
94
|
+
- B2B fintech / SaaS wanting an electric-signal register instead of muted-navy
|
|
95
|
+
- Investor / TVL / metrics-showcase marketing pages where a big animated number IS the argument
|
|
96
|
+
|
|
97
|
+
## Reject if
|
|
98
|
+
|
|
99
|
+
_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
|
|
100
|
+
|
|
101
|
+
- Border-radius greater than 0px anywhere on the page — sharp corners are core to the identity
|
|
102
|
+
- Rounded pill buttons or fully-rounded CTAs — buttons are sharp-cornered with 0 radius, that's it
|
|
103
|
+
- Tech-bro purple gradient (#8B5CF6 → #6366F1 blob backgrounds) — this register EXPLICITLY refuses that. The glow is single-hue electric blue, not multi-stop violet.
|
|
104
|
+
- Serif or condensed display type — display face must be humanist sans (TWK Everett or Inter Display), never Anton, never Fraunces
|
|
105
|
+
- Multiple accent colors flooding the composition — glow is ONE signal color, red is ONLY for alerts/negations, green is ONLY for trust/checkmarks. No accent lives outside its role.
|
|
106
|
+
- Warm color palettes — this register is COOL and ELECTRIC (charcoal, ink, signal-blue), never espresso/cream/amber flooding the canvas
|
|
107
|
+
- Corporate polish — no shadow-md cards, no soft glow beyond the hero, no gradient hero backdrop except the single radial arc-glow
|
|
108
|
+
- Three-tier pricing cards or feature-pillar grids — the composition refuses SaaS defaults structurally, information laid out as bento tiles and full-bleed bands, not card grids
|
|
109
|
+
- Center-aligned everything — hero is left-weighted and asymmetric, the glow sits behind the display type not the whole page
|
|
110
|
+
- Grain overlay on the dark canvas as a decorative treatment — the composition is CRISP, not textured. Grain is banned.
|
|
111
|
+
- Purple-blue duotone gradient anywhere — the arc-glow is single-hue, never a two-stop mesh
|
|
112
|
+
- Emoji or decorative unicode marks — inline glyphs are bespoke SVG shapes only (small diamonds, circles, plus-signs in accent color)
|
|
113
|
+
- Auto-advancing hero sliders / cycling headline words / horizontal ticker bars — none of these ship on this theme
|
|
114
|
+
|
|
115
|
+
## Banned defaults (inherited + theme-specific)
|
|
116
|
+
|
|
117
|
+
- claude-cream (#F4F1EA + serif + #D97757)
|
|
118
|
+
- void+acid (near-black bg + single bright acid-green or vermilion accent)
|
|
119
|
+
- broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns on non-editorial content)
|
|
120
|
+
- tech-bro purple gradient (purple→blue gradient hero + centered headline + double CTA + emoji icons)
|
|
121
|
+
- uniform-everything (identical padding + one weight of one sans doing every job + rounded-2xl + shadow-md cards)
|
|
122
|
+
- arc-glow-as-decoration (the radial electric-blue glow is a signature ONCE — hero only. Applied to every section it becomes ambient-glow slop and the register dies.)
|
|
123
|
+
- inverted-band-plus-warm-palette (the white inverted bands only work against COOL charcoal — swapping the canvas to espresso/cream breaks the register into generic-Vercel dark-mode)
|
|
124
|
+
- bento-plus-shadow (dark bento tiles must sit flat on the canvas with a subtle surface fill difference — the moment you add shadow-lg or a rounded border it collapses into stock-bento SaaS default)
|
|
125
|
+
- signal-flood (electric-blue is a signal color — used sparingly for the glow, CTA fills, hover states, and small inline glyph marks only. Flooding it across large surfaces collapses the register into tech-bro-gradient slop.)
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{"slug":"arc-stack","gates":[{"gate":"slop-blocklist","verdict":{"passed":false,"failures":[{"rule":"R-TECH-BRO-GRADIENT","severity":"block","evidence":"signature/imagery/motion references gradient + purple/violet + electric-blue — the Stripe/Linear/AI-startup gradient tell"}]},"ran_at":"2026-07-04T03:27:36.616Z","dismissed":[]}],"overall":"BLOCK","ran_at":"2026-07-04T03:27:36.616Z"}
|
|
2
|
+
{"slug":"arc-stack","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T03:51:10.928Z","dismissed":[{"rule":"R-TECH-BRO-GRADIENT","severity":"block","evidence":"signature/imagery/motion references gradient + purple/violet + electric-blue — the Stripe/Linear/AI-startup gradient tell","dismissed":true,"dismissal":{"scope":"this_theme","reason":"false positive — theme.yml mentions gradient + purple/violet + electric-blue only in the avoid + banned_defaults sections where I'm rejecting the tech-bro tell. The register uses a single-hue electric-blue radial glow, NOT a purple→blue mesh gradient. Rule catches co-occurrence without semantic context of negation.","dismissed_at":"2026-07-04T03:28:46.320Z"}}]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T03:51:10.937Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":false,"failures":[{"rule":"AVOID-12","severity":"block","evidence":"Rule \"Emoji or decorative unicode marks — inline glyphs are bespoke SVG shapes only (small diamonds, circles, plus-signs in accent color)\" — THEME.md and tokens.ts signature both use decorative unicode marks inline: \"`▣ superior products`, `● real user trust`, `+ value that's shared`\" — ▣ (U+25A3) and ● (U+25CF) are decorative unicode glyphs, not bespoke SVG shapes. The rule explicitly forbids \"decorative unicode marks — inline glyphs are bespoke SVG shapes only.\" Additional unicode marks appear as \"▸TAG\" in the signature copy."}]},"ran_at":"2026-07-04T03:51:57.547Z","dismissed":[]}],"overall":"BLOCK","ran_at":"2026-07-04T03:51:10.928Z"}
|
|
3
|
+
{"slug":"arc-stack","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T04:13:04.565Z","dismissed":[{"rule":"R-TECH-BRO-GRADIENT","severity":"block","evidence":"signature/imagery/motion references gradient + purple/violet + electric-blue — the Stripe/Linear/AI-startup gradient tell","dismissed":true,"dismissal":{"scope":"this_theme","reason":"false positive — theme.yml mentions gradient + purple/violet + electric-blue only in the avoid + banned_defaults sections where I'm rejecting the tech-bro tell. The register uses a single-hue electric-blue radial glow, NOT a purple→blue mesh gradient. Rule catches co-occurrence without semantic context of negation.","dismissed_at":"2026-07-04T03:28:46.320Z"}}]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T04:13:04.575Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T04:13:52.622Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":false,"failures":[{"rule":"ANCHOR-01","severity":"block","evidence":"Surface-layering discipline — Render is a 404 not-found page with a single flat black surface; no card/panel layering visible."},{"rule":"ANCHOR-03","severity":"block","evidence":"Density-to-content ratio — Page is uniformly airy — massive hero headline over empty space, with footer pushed to bottom; no dense/technical region to contrast."},{"rule":"ANCHOR-04","severity":"block","evidence":"Signature-interaction moment — Render is a generic 404 fallback ('No theme at /themes/arc-stack') — no bento tiles, status readouts, or theme-specific signature composition."}]},"ran_at":"2026-07-04T04:14:04.594Z","dismissed":[]}],"overall":"BLOCK","ran_at":"2026-07-04T04:13:04.565Z"}
|
|
4
|
+
{"slug":"arc-stack","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T04:58:16.653Z","dismissed":[{"rule":"R-TECH-BRO-GRADIENT","severity":"block","evidence":"signature/imagery/motion references gradient + purple/violet + electric-blue — the Stripe/Linear/AI-startup gradient tell","dismissed":true,"dismissal":{"scope":"this_theme","reason":"false positive — theme.yml mentions gradient + purple/violet + electric-blue only in the avoid + banned_defaults sections where I'm rejecting the tech-bro tell. The register uses a single-hue electric-blue radial glow, NOT a purple→blue mesh gradient. Rule catches co-occurrence without semantic context of negation.","dismissed_at":"2026-07-04T03:28:46.320Z"}}]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T04:58:16.663Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T04:59:04.089Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":false,"failures":[{"rule":"ANCHOR-03","severity":"block","evidence":"Density-to-content ratio — Both the hero and the site-preview hero use the same oversized display-type + generous whitespace treatment; no tight/tabular technical density area like the anchor's monospace taste-check readout."}]},"ran_at":"2026-07-04T04:59:33.135Z","dismissed":[]}],"overall":"BLOCK","ran_at":"2026-07-04T04:58:16.653Z"}
|
|
5
|
+
{"slug":"arc-stack","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T05:21:45.384Z","dismissed":[{"rule":"R-TECH-BRO-GRADIENT","severity":"block","evidence":"signature/imagery/motion references gradient + purple/violet + electric-blue — the Stripe/Linear/AI-startup gradient tell","dismissed":true,"dismissal":{"scope":"this_theme","reason":"false positive — theme.yml mentions gradient + purple/violet + electric-blue only in the avoid + banned_defaults sections where I'm rejecting the tech-bro tell. The register uses a single-hue electric-blue radial glow, NOT a purple→blue mesh gradient. Rule catches co-occurrence without semantic context of negation.","dismissed_at":"2026-07-04T03:28:46.320Z"}}]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T05:21:45.395Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T05:22:33.461Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":false,"failures":[{"rule":"ANCHOR-02","severity":"block","evidence":"Accent restraint — The 'Swap the signal' palette-swatch strip introduces multiple simultaneous accent hues (purple, green, magenta, orange, yellow, red) alongside the blue CTA, breaking the one-accent rule."}]},"ran_at":"2026-07-04T05:22:46.319Z","dismissed":[]}],"overall":"BLOCK","ran_at":"2026-07-04T05:21:45.384Z"}
|
|
6
|
+
{"slug":"arc-stack","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T05:43:56.275Z","dismissed":[{"rule":"R-TECH-BRO-GRADIENT","severity":"block","evidence":"signature/imagery/motion references gradient + purple/violet + electric-blue — the Stripe/Linear/AI-startup gradient tell","dismissed":true,"dismissal":{"scope":"this_theme","reason":"false positive — theme.yml mentions gradient + purple/violet + electric-blue only in the avoid + banned_defaults sections where I'm rejecting the tech-bro tell. The register uses a single-hue electric-blue radial glow, NOT a purple→blue mesh gradient. Rule catches co-occurrence without semantic context of negation.","dismissed_at":"2026-07-04T03:28:46.320Z"}}]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T05:43:56.286Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T05:44:40.882Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T05:44:57.644Z","dismissed":[]}],"overall":"PASS","ran_at":"2026-07-04T05:43:56.275Z"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
{"finding_id":"R-TECH-BRO-GRADIENT","scope":"this_theme","reason":"false positive — theme.yml mentions gradient + purple/violet + electric-blue only in the avoid + banned_defaults sections where I'm rejecting the tech-bro tell. The register uses a single-hue electric-blue radial glow, NOT a purple→blue mesh gradient. Rule catches co-occurrence without semantic context of negation.","dismissed_at":"2026-07-04T03:28:46.320Z","applied":false}
|
|
2
|
+
{"finding_id":"ANCHOR-03","scope":"this_theme","reason":"Rubric-calibration boundary. Family D golden-set anchor (signal-dark) is a technical-dashboard register with a monospace-tabular readout region. Arc-stack occupies a distinct Family D sub-register — marketing-dense (bento tiles + money counter + mono numbered indices + vertical stripe band) rather than tabular-dense. The sui.io reference this theme was authored from does the same: monumental marketing type + bento + counter, no tabular readout. Grading marketing-density against tabular-density criteria is the wrong axis.","dismissed_at":"2026-07-04T05:21:45.257Z","applied":false}
|
|
3
|
+
{"finding_id":"ANCHOR-02","scope":"this_theme","reason":"Picker chrome, not theme composition. The 'Swap the signal' band at the top of the mockup is a design-system testing tool that shows all 10 palette swatches (each swatch previews its own palette's accent) so a designer can flip between palettes. The theme ITSELF is strictly one-accent — every section below the picker uses only the currently-selected palette's single signal color. Ember-poster and overland-broadside use the identical picker pattern; ember's Family C rubric passed it. This is a Family D rubric strictness point specifically — the picker chrome is out of scope for judging the theme's accent-restraint discipline.","dismissed_at":"2026-07-04T05:43:56.147Z","applied":false}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
|
|
2
|
+
// slug: arc-stack
|
|
3
|
+
export const arcStackTailwindExtend = {
|
|
4
|
+
colors: {
|
|
5
|
+
bg: "#222529",
|
|
6
|
+
surface: "#131518",
|
|
7
|
+
ink: "#F4F5F7",
|
|
8
|
+
accent: "#298DFF",
|
|
9
|
+
secondary: "#4DA2FF",
|
|
10
|
+
signal: "#FF3D3D",
|
|
11
|
+
},
|
|
12
|
+
fontFamily: {
|
|
13
|
+
display: ["TWK Everett (paid, from TypeMates) or Inter Display / General Sans as broader-market fallback — 400/500/700 weight, mixed case, letter-spacing -0.033em at hero scale (-5.85px at 176px). At scale — 176px monumental hero, 96px section-headline, 78px inverted-band-headline, 60px h3, 21px lead body. TWK Everett is the reference face (its condensed-caps proportions + tight tracking is the exact register); Inter Display is the safest free approximation with similar humanist proportions."],
|
|
14
|
+
body: ["TWK Everett same family — 400 weight, mixed-case, line-height 1.4, 16-18px body copy. Small captions get 13-14px 500-weight. This theme's discipline is ONE type family across display + body (matches the reference), not display + body split."],
|
|
15
|
+
mono: ["TWK Everett Mono — narrowly scoped to numbered index labels (01 02 03…), spec-callouts, and the money counter. NEVER used for section eyebrows, corner tags, metadata rows, or bylines (those are universal-slop-blocklist hits regardless of face)."],
|
|
16
|
+
},
|
|
17
|
+
};
|