Build the Vandoko parent company site using canonical brand tokens and the self-referential pipeline

vandoko.com — Parent Brand

vandoko.com IS the brand that owns the tools. The pipeline builds its own creator's site. This means:

Brand tokens are canonical — they are the source of truth, not derived from a client brief
The vandoko-theme component from the registry IS the design system
No client interview needed; brand values are known constants
The site showcases the three Vandoko products (agency, AI platform, registry)

Key difference from a client site: For all client sites, brand tokens are extracted from the client's existing presence and then mapped to oklch. For vandoko.com, the oklch tokens ARE the source. There is no upstream brand to derive from — the registry's vandoko-theme component is the canonical design system artifact.

Prerequisites

Master Brand Tokens

registry.vandoko.com/brand/tokens.json — canonical oklch token set for all Vandoko properties

vandoko-theme Component

npx shadcn@latest add @vandoko/vandoko-theme — full oklch dark theme with hue-285 surfaces

Primary: Cyan #00EEFF

oklch(0.865 0.1475 204.0) — primary brand cyan for CTAs, links, and interactive states

Accent: Sand

oklch(0.71 0.04 70) — warm paired accent. Lime is retired from the core system and ships only via @vandoko/vandoko-campaign-tokens (celebration/CTA moments).

Secondary: Dark Teal #0A2A2E

Deep teal surface for section backgrounds and card variants

Background / Foreground

Background #0A0A0A · Foreground #FAFAFA — near-black base with high-contrast text

Command

Terminal

/go-vandoko vandoko.com --tier premium

Expected Flow

Stage 1 — Interview

Because brand values are constants, the interview answers are known up front:

Q1 URL: vandoko.com
Q2 tier: premium
Q3 context: "Parent company site for Vandoko — digital agency, AI platform, and component registry. Three product pillars."
Q4: (skip — no competitor URL needed; Vandoko defines its own category)
Q5 brand_maturity: established

No extended questions (Q6–Q20) are required. Brand strategy is pre-approved.

Stage 2 — INTAKE

The orchestrator scrapes the existing vandoko.com using Playwright (up to 4 pages). It extracts:

Canonical cyan/lime palette from rendered CSS
Inter typography stack
Dark theme (#0A0A0A base) confirmation
Existing section structure (hero, products, footer)

Because the brand is established, INTAKE primarily confirms that the live site matches the canonical token values rather than deriving new tokens.

Stage 3 — STRATEGY

Brand strategy uses the known Vandoko positioning. No discovery gap analysis is needed.

Template recommendation: aspect or scalar (SaaS/tech optimized)
em_dash_policy: "never" — Vandoko constant, applied to all brand copy
Positioning: "One command. Complete digital presence." — the pipeline as the product
Decision Point 1 (Strategy approval) is pre-approved; pipeline advances immediately

Stage 4 — WEBSITE Build

Decision Point: vandoko-theme must be installed first. Before ANY other component installation, run:

Terminal

npx shadcn@latest add @vandoko/vandoko-theme

This applies the full oklch dark theme with hue-285 surfaces to globals.css. ALL subsequent components inherit these tokens. The website-build skill enforces this order for all Vandoko-branded builds. Installing any other registry component before vandoko-theme will result in token conflicts that require manual CSS remediation.

See vandoko-theme for full token reference.

After vandoko-theme is applied, the build proceeds with:

Next.js 15 scaffold with App Router
Registry component installation (see Stage 5)
Section assembly: Hero → Products → Agency → Registry Gallery → Footer
Premium concept gallery generation (5 concepts + video backgrounds)

Stage 5 — Registry Components

The site installs from registry.vandoko.com:

Component	Purpose
`@vandoko/vandoko-theme`	Theme foundation (installed first — see Stage 4)
`@vandoko/vandoko-brushed-metal`	Component showcase cards for the registry gallery section
Additional `@vandoko/*` blocks	Selected from the gallery as needed for section layouts
Aceternity Pro components	Premium tier: animated backgrounds, spotlight effects
Cult UI components	Premium tier: interactive cards and hover states
Shadcnblocks Pro components	Premium tier: structured layout blocks

Premium tier components are sourced via the component-registry skill using stored license credentials.

Stage 6 — QA

Premium QA thresholds apply:

Threshold	Value
`min_qa_score`	90 — minimum for launch clearance
`min_dimension_score`	80 — minimum per dimension (visual, SEO, a11y, brand, conversion, content, production)
Polish pass trigger	Mandatory if overall score < 95

The qa-orchestrator runs 7 dimensions against the deployed preview URL. The QA report is saved to {output_root}/qa/QualityReport.json.

Verification Checklist

globals.css contains oklch tokens with hue 285 for surface colors
Primary cyan matches oklch(0.865 0.1475 204.0) in CSS custom properties
Lime is retired from the core system; the warm paired accent is sand (oklch(0.71 0.04 70)). Lime ships only via @vandoko/vandoko-campaign-tokens.
vandoko-theme is listed first in the component installation log
QA score >= 90 logged in QualityReport.json before launch clearance
em-dash characters absent from all copy (em_dash_policy = "never")
All three product pillars (agency, AI platform, registry) represented in site sections

Output

Artifact	Location
Next.js site	`{output_root}/website/`
Concept gallery	5 concepts + video backgrounds in `{output_root}/concepts/`
Brand guidelines PPTX	`{output_root}/brand/vandoko-brand-guidelines.pptx`
Design tokens	CSS, W3C DTCG JSON, and Figma Variables formats in `{output_root}/tokens/`
QA report	`{output_root}/qa/QualityReport.json`