# AI ESSENTIALS — DESIGN SYSTEM

**Version 1.0 · Operator Edition**
A complete, self-contained specification. Everything needed to design or build on-brand without opening another file.

> **Stop studying AI. Start deploying it.**

---

## 0. TABLE OF CONTENTS

1. [Brand Foundation](#1-brand-foundation)
2. [Design Principles](#2-design-principles)
3. [Color System](#3-color-system)
4. [Typography](#4-typography)
5. [Spacing & Layout](#5-spacing--layout)
6. [Radius, Borders, Elevation](#6-radius-borders-elevation)
7. [Motion & Interaction States](#7-motion--interaction-states)
8. [Imagery & Art Direction](#8-imagery--art-direction)
9. [Iconography](#9-iconography)
10. [Voice & Copywriting](#10-voice--copywriting)
11. [Component Library](#11-component-library)
12. [Layout Patterns](#12-layout-patterns)
13. [Quality Control](#13-quality-control)
14. [Complete Token Reference](#14-complete-token-reference)
15. [Implementation](#15-implementation)

---

## 1. BRAND FOUNDATION

### What AI Essentials is

**Not** an education company. It positions itself as *the operating system for ambitious people who refuse to become obsolete.*

| | |
|---|---|
| **Category** | AI Operator Education · AI Systems · AI Workforce Transformation |
| **Flagship** | The CAIO Sprint — 8 weeks, 20 live classes, Cohort 06 |
| **Promise** | Stop Studying AI. Start Deploying It. |
| **Transformation** | Professionals → AI-native builders who create leverage through systems, automation, agents, and applications |
| **Audience feeling** | *"If I don't learn this, I become obsolete."* |

### Value hierarchy

```
Human        >  Technology
Outcome      >  Features
Execution    >  Education
Leverage     >  Labor
Systems      >  Prompts
Authority    >  Trendiness
Clarity      >  Decoration
```

### Visual reference points

The work sits at the intersection of:

**Vogue meets Linear · Apple meets A24 · Anthropic meets Wired · Notion meets Pentagram**

Editorial design, magazine covers, luxury fashion campaigns, technology product launches, creative-agency case studies, modern SaaS branding.

### Every composition must communicate

Intelligence · Speed · Execution · Authority · Transformation · Future Readiness · Economic Leverage

---

## 2. DESIGN PRINCIPLES

### 2.1 One idea per composition

Before designing, ask: **What is the ONE idea?** If multiple ideas exist, remove them.

### 2.2 Fixed hierarchy

```
1. Headline
2. Human
3. Supporting Message
4. Brand
```

Everything else is optional. One thousand no's for every yes.

### 2.3 Typography is the hero

Text is treated as a **visual object**, not a label on a layout. Typography should occupy **40–70%** of a composition. Never create safe typography.

### 2.4 Negative space is a feature

An empty-feeling section is a layout problem, not a content gap. Never pad with filler.

### 2.5 Every composition must survive four crops

Each layout should work as a **magazine cover**, a **billboard**, a **website hero**, and a **campaign poster**. If it only works at one size, the idea isn't strong enough.

---

## 3. COLOR SYSTEM

### 3.1 The 80 / 15 / 5 ratio — non-negotiable

```
████████████████████████████████████████░░░░░░░░▓▓
        80% NEUTRAL              15% PRIMARY   5% ACCENT
```

- **80% Neutral** — Signal White on light surfaces, Deep Navy on dark
- **15% Primary** — Electric Operator Blue, the single signature
- **5% Accent** — rare, intentional, load-bearing. Never decorative.

An accent should mark *one* thing on a screen: a live status dot, the primary CTA, a struck-through anchor price.

### 3.2 Brand primaries

| Token | Hex | Name | Role |
|---|---|---|---|
| `--blue-electric` | `#1A22FF` | Electric Operator Blue | The signature. CTAs, brand tile, key emphasis. |
| `--navy-deep` | `#08125C` | Deep Intelligence Navy | Dark section ground |
| `--navy-900` | `#050B36` | Navy 900 | Deepest ground — dark editorial sections |

### 3.3 Neutrals — Signal White scale (light surfaces)

| Token | Hex | Role |
|---|---|---|
| `--white` | `#F9FAFC` | Signal White — the page ground |
| `--paper` | `#FFFFFF` | Cards, raised surfaces |
| `--surface-sunken` | `#F0F2F8` | Recessed sections, chip fills |
| `--line` | `#E4E6F0` | Hairline borders — the primary structural device |
| `--line-strong` | `#C9CCDC` | Emphasized borders, large index codes |
| `--ink-300` | `#8C90A8` | Captions, disabled, tertiary |
| `--ink-500` | `#4A4F6A` | Muted body copy |
| `--ink-700` | `#1B1E33` | Body copy |
| `--ink-900` | `#060814` | Headlines, near-black ink |

### 3.4 Neutrals on dark

Expressed as **low-opacity Signal White**, never as separate greys. This keeps text optically consistent when it sits over photography.

| Token | Value | Role |
|---|---|---|
| `--on-dark-100` | `#F9FAFC` | Headlines, primary text |
| `--on-dark-70` | `rgba(249,250,252,0.70)` | Body copy |
| `--on-dark-45` | `rgba(249,250,252,0.45)` | Captions, legal |
| `--on-dark-line` | `rgba(249,250,252,0.14)` | Hairlines |
| `--on-dark-fill` | `rgba(249,250,252,0.06)` | Card fills |

### 3.5 Accents — the 5%

| Token | Hex | Name | Used for |
|---|---|---|---|
| `--orange-deploy` | `#FF6A1A` | Deployment Orange | Heat, urgency, testimonial stars, flash offers |
| `--lime-signal` | `#D8FF32` | Signal Lime | Live / open status, on-dark group labels, "Best Value" |
| `--red-editorial` | `#FF3B30` | Editorial Red | Alerts, strikethrough on anchor prices |

### 3.6 Blue support ramp

| Token | Value | Role |
|---|---|---|
| `--blue-700` | `#141AC7` | Pressed state |
| `--blue-tint-12` | `rgba(26,34,255,0.12)` | Brand tag borders |
| `--blue-tint-06` | `rgba(26,34,255,0.06)` | Brand tag fills |

### 3.7 Semantic aliases

Prefer these over raw values in components.

```css
--surface-page      → --white
--surface-card      → --paper
--surface-sunken    → #F0F2F8
--surface-invert    → --navy-900
--surface-brand     → --blue-electric

--text-strong       → --ink-900     /* headlines */
--text-body         → --ink-700
--text-muted        → --ink-500
--text-faint        → --ink-300
--text-brand        → --blue-electric
--text-on-dark      → --on-dark-100
--text-on-dark-muted→ --on-dark-70
--text-on-dark-faint→ --on-dark-45

--border-hairline   → --line
--border-strong     → --line-strong
--border-on-dark    → --on-dark-line

--action-primary    → --blue-electric
--action-primary-press → --blue-700
--action-heat       → --orange-deploy
--focus-ring        → --blue-electric

--signal-live       → --lime-signal
--signal-alert      → --red-editorial
--signal-deploy     → --orange-deploy
```

### 3.8 Color rules

- ✅ Flat color fields. Light ↔ dark section alternation creates depth.
- ✅ Maximum **two** background colors per artifact.
- ❌ **No decorative gradients.** The only gradient in the system lives *inside the logo mark itself.*
- ❌ No bluish-purple SaaS gradients, no glows-as-decoration.
- ⚠️ A soft radial glow is permitted **only** on dark hero/CTA surfaces, at low opacity, as lighting — never as a shape.

---

## 4. TYPOGRAPHY

### 4.1 Three voices

| Family | Role | Character |
|---|---|---|
| **Sora** | Display + UI workhorse | Geometric grotesque. Huge, tracked tight. Carries all headlines, buttons, labels. |
| **Instrument Serif** | Editorial accent | Usually italic. Pull-quotes, taglines, emphasis. Used *sparingly* — one per surface. |
| **Inter** | Body | Quiet, readable, dense UI text. Never a headline. |

```css
--font-display: 'Sora', system-ui, -apple-system, sans-serif;
--font-body:    'Inter', system-ui, -apple-system, sans-serif;
--font-serif:   'Instrument Serif', Georgia, serif;
```

All three are Google Fonts (no substitution was needed — these are the brand's specified families).

### 4.2 Fluid display scale

For hero and section headlines. Magazine-cover thinking.

| Token | Value | Use |
|---|---|---|
| `--fs-display-1` | `clamp(3.5rem, 9vw, 8rem)` | Hero headline — the one idea |
| `--fs-display-2` | `clamp(2.75rem, 6vw, 5rem)` | Section headline |
| `--fs-display-3` | `clamp(2rem, 4vw, 3.25rem)` | Sub-headline |

### 4.3 Fixed scale

| Token | px | Use |
|---|---|---|
| `--fs-h1` | 40 | |
| `--fs-h2` | 32 | |
| `--fs-h3` | 24 | Large index codes |
| `--fs-h4` | 20 | Card titles |
| `--fs-lg` | 18 | Lead paragraph |
| `--fs-body` | 16 | Body |
| `--fs-sm` | 14 | Captions, tags, card body |
| `--fs-xs` | 12 | Legal, metadata |
| `--fs-label` | 11 | The tracked micro-label |

### 4.4 Weights, line heights, tracking

```css
--fw-light: 300;   --fw-regular: 400;  --fw-medium: 500;
--fw-semibold: 600; --fw-bold: 700;    --fw-extra: 800;

--lh-tight:   0.98   /* display */
--lh-snug:    1.1
--lh-normal:  1.5    /* body */
--lh-relaxed: 1.65   /* lead paragraphs */

--tracking-display: -0.03em   /* huge headlines pull tight */
--tracking-tight:   -0.015em
--tracking-normal:   0
--tracking-wide:     0.08em
--tracking-label:    0.32em   /* ← the signature */
```

### 4.5 The tracked label — the brand signature

The single most identifiable typographic device. **Sora 600, 11px, uppercase, 0.32em letter-spacing.**

```
C O H O R T   0 6   / /   E N R O L L M E N T   O P E N
T H E   A G E N T   L A Y E R   /   2 0 2 6
P R O O F   / /   G R A D U A T E   O U T C O M E S
C U R R I C U L U M   / /   8   M O D U L E S
```

The `//` and `/` separators are part of the voice. Use as eyebrows above headlines and as section markers. It is the connective tissue across every surface.

### 4.6 Typography rules

- ✅ Headlines in **sentence case** — "Become a Chief AI Officer.", "Beyond prompting."
- ✅ Labels in **tracked UPPERCASE**.
- ✅ Line-break headlines manually for editorial rhythm (`Become a` / `Chief AI Officer.`).
- ✅ Use `text-wrap: balance` on headlines, `pretty` on body.
- ✅ Index codes (`W01`, `D03`) as visual anchors — set in `tabular-nums`.
- ❌ Never all-caps a headline. Never center long body copy.
- ❌ Never use Inter for display, or Instrument Serif for UI.
- **Minimums:** 1920×1080 slide text never below 24px. Print never below 12pt. Mobile hit targets never below 44px.

---

## 5. SPACING & LAYOUT

### 5.1 Scale — 4px base unit

| Token | px | | Token | px |
|---|---|---|---|---|
| `--space-1` | 4 | | `--space-10` | 40 |
| `--space-2` | 8 | | `--space-12` | 48 |
| `--space-3` | 12 | | `--space-16` | 64 |
| `--space-4` | 16 | | `--space-20` | 80 |
| `--space-5` | 20 | | `--space-24` | 96 |
| `--space-6` | 24 | | `--space-32` | 128 |
| `--space-8` | 32 | | `--space-40` | 160 |

### 5.2 Layout tokens

```css
--container-max:  1240px   /* standard content width */
--container-wide: 1440px
--gutter:         clamp(20px, 5vw, 80px)
--section-y:      clamp(64px, 10vw, 160px)   /* section rhythm */

--pad-card:    32px   --pad-card-lg: 48px
--gap-tight:    8px   --gap: 16px   --gap-loose: 32px
```

### 5.3 Layout rules

- Generous gutters and tall section rhythm are **brand-critical**, not adjustable defaults.
- Always lay out sibling groups with **flex/grid + `gap`** — never margins or source whitespace.
- Sticky intro columns pair well with long list sections (see Domains pattern).
- Section rhythm alternates ground color: `light → sunken → light → dark → light → dark`.

---

## 6. RADIUS, BORDERS, ELEVATION

### 6.1 Radius

| Token | Value | Use |
|---|---|---|
| `--radius-xs` | 4px | Tiny chips |
| `--radius-sm` | 8px | Inputs |
| `--radius-md` | **12px** | **Default card** |
| `--radius-lg` | 18px | Price cards, large panels |
| `--radius-xl` | 24px | Full-bleed CTA blocks |
| `--radius-pill` | 999px | Buttons, tags, badges |
| `--radius-none` | 0 | Editorial hard-edge blocks |

The logo tile uses `~26% of its size` as radius (a squircle-adjacent tile).

### 6.2 Borders

```css
--bw-hairline: 1px    /* the default — does most structural work */
--bw-medium:   1.5px  /* buttons */
--bw-strong:   2px
```

**Hairlines are the primary structural device.** Top-rule dividers (`border-top: 1px solid var(--line)`) separate list rows. Cards get a hairline, not a shadow.

### 6.3 Shadows — restrained

| Token | Value | Use |
|---|---|---|
| `--shadow-sm` | `0 1px 2px rgba(6,8,20,0.06)` | Logo tile on light |
| `--shadow-md` | `0 8px 28px -12px rgba(6,8,20,0.18)` | Hover lift |
| `--shadow-lg` | `0 24px 60px -20px rgba(6,8,20,0.28)` | Highlighted price tier |
| `--shadow-brand` | `0 18px 44px -16px rgba(26,34,255,0.42)` | **Electric lift** — primary CTA only |
| `--ring` | `0 0 0 3px rgba(26,34,255,0.35)` | Focus |

**Rule:** structure comes from hairlines and light/dark contrast — *not* from shadow. If a card needs a shadow to read, the layout is wrong.

### 6.4 What a card looks like

```
Default card:      #FFFFFF · 1px #E4E6F0 border · 12px radius · no shadow · 32px padding
Card on dark:      rgba(255,255,255,.06) fill · 1px rgba(255,255,255,.14) border · 12px radius
Highlighted tier:  #050B36 ground · no border · 18px radius · --shadow-lg
```

---

## 7. MOTION & INTERACTION STATES

### 7.1 Easing & duration

```css
--ease-out:    cubic-bezier(0.16, 1, 0.3, 1)   /* confident settle */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1)
--dur-fast: 120ms   --dur: 220ms   --dur-slow: 420ms
```

### 7.2 State conventions

| State | Treatment |
|---|---|
| **Hover** | Subtle lift + slightly deeper/brighter fill. Never a color *change*. |
| **Press** | `transform: scale(0.985)` + deeper color. **No bounce, no spring.** |
| **Focus** | `--ring` — 3px electric blue at 35% |
| **Disabled** | `opacity: 0.45`, `cursor: not-allowed` |
| **Sticky nav on scroll** | Backdrop blur `saturate(180%) blur(12px)` + `rgba(249,250,252,0.86)` + hairline appears |

### 7.3 Motion rules

- ✅ Crisp and short. Entrances fade and rise.
- ❌ **No bounce. No decorative infinite loops. No parallax.**
- ✅ Always respect `prefers-reduced-motion`.

### 7.4 Transparency & blur

Minimal. Blur is used in exactly one place: the sticky nav backdrop. No frosted-glass panels unless sitting over photography. On-dark neutrals use opacity rather than separate greys.

---

## 8. IMAGERY & ART DIRECTION

### 8.1 The rule

**Human > Technology. Always.**

### 8.2 Subjects

Founders · Creators · Designers · Operators · Developers · Thinkers · Builders

Capture: **confidence, agency, competence, execution, focus, momentum, curiosity.**

### 8.3 Technique

- Low-angle photography
- Wide lens
- Environmental portraits and studio portraits
- Dramatic gel lighting (the reference founder portrait is warm-red-lit against a dark ground)
- Unexpected, aggressive crops
- Fashion-editorial composition
- Campaign-style, cinematic
- **Color vibe:** rich, warm-to-moody, cinematic. Never clinical, never cool-blue-tech.

### 8.4 ABSOLUTELY NEVER

```
✗ Robots                    ✗ Cyberpunk
✗ AI brain graphics         ✗ Tech-bro visuals
✗ Circuit boards            ✗ Blue glowing faces
✗ Neural network diagrams   ✗ Stock photos
✗ Futuristic holograms      ✗ Corporate handshakes
✗ 3D AI heads               ✗ People pointing at screens
✗ Artificial-looking humans ✗ Generic SaaS illustrations
```

### 8.5 Illustration

**There is none.** The brand uses photography or nothing. No hand-drawn illustration, no textures, no repeating patterns, no background motifs. Depth comes from type, contrast, and photography.

---

## 9. ICONOGRAPHY

The brand is **near-iconless by design.** Density comes from type and photography, not glyphs.

| Mark | Usage |
|---|---|
| **`→`** | The house affordance. Appended to forward/commit actions: "Reserve Seat →", "Enroll Now →". Plain Unicode, rendered in the type family. |
| **`★`** | Testimonials only (5-star ratings), tinted Deployment Orange. |
| **`●`** | 6px status dot, usually Signal Lime — marks "live / open" in labels and badges. |
| **`W01` `D03`** | Index codes act as visual anchors *in place of* icons. |
| **`//` `/`** | Label separators — a typographic device, part of the voice. |

**No emoji, ever. No icon font is used or required.**

If a future surface genuinely needs a UI icon set (nav chevrons, close, etc.), use **[Lucide](https://lucide.dev)** from CDN — its thin geometric 1.5–2px stroke matches Sora's construction. Keep icons monochrome (`currentColor`). ⚠️ *This is a substitution recommendation — the brand ships no icons of its own.*

---

## 10. VOICE & COPYWRITING

### 10.1 Voice

Operator-grade, imperative, and confident to the point of confrontation. Copy **commands action** and sells transformation and status. It is unafraid of an implied threat: *if you don't learn this, you become obsolete.*

### 10.2 Person

- Speaks **to "you"** — "We position you for the market."
- Speaks of the brand as **"we"**.
- The audience is always the **operator** — never a "student," "learner," or "user."

### 10.3 Sentence shape

Short, punchy, often fragments stacked as couplets:

> **Learn Less. Deploy More.**
> **Small Team. Massive Output.**
> **Human + AI. Unfair Advantage.**
> **Results, not theory.**

### 10.4 Casing

| Element | Casing |
|---|---|
| Headlines | Sentence case — "Become a Chief AI Officer." |
| Micro-labels | Tracked UPPERCASE — `COHORT 06 // ENROLLMENT OPEN` |
| Buttons | Sentence case — "Reserve your seat" |
| Legal | Tracked caps — `*NO GUARANTEES. SUCCESS RELIES ENTIRELY ON YOUR EXECUTION.` |

### 10.5 Brand vocabulary

Leverage · Operator · Deployment · Execution · Systems · Automation · Intelligence · Advantage · Scale · Velocity · Agency · Future · Transformation · AI Native · Builder · Creator · **Chief AI Officer** · Digital Workforce · Synthetic Knowledge · **Agent Layer** · Personal Operating System · **Vibe Coding** · Unfair Advantage

### 10.6 Proof style

Concrete and unglamorous. Real numbers, real currency (₹), real time.

> *"I used to pay an agency ₹50,000 a month for what I now automate in 2 hours on a Sunday."*
> *"The vibe coding module alone saved us ₹4 lakhs in developer costs."*
> *"I automated 3 departments in 90 days."*

### 10.7 Say this / not this

| ✅ Say | ❌ Not |
|---|---|
| Stop studying AI. Start deploying it. | Learn the fundamentals of AI |
| Small team. Massive output. | Unlock your potential today! |
| Results, not theory. | The future is here 🚀 |
| Build your corporate brain. | Discover amazing AI tools |

### 10.8 Absolute prohibitions

❌ **No emoji.** ❌ No hype punctuation ("!!!"). ❌ No motivational quote cards. ❌ No engagement bait. ❌ No generic startup copy.

Confidence comes from **restraint and scale**, not exclamation.

### 10.9 Content categories

Every social/editorial post must belong to one of: **Founder Insight · Operator Lesson · Market Shift · AI Breakdown · Case Study · Transformation Story · Community Proof · Tool Analysis.**

---

## 11. COMPONENT LIBRARY

Ten components. Import from the compiled bundle:

```js
const { Logo, Button, SectionLabel, Tag, Badge,
        ModuleCard, DomainCard, StatBlock,
        TestimonialCard, PriceCard } = window.AIEssentialsDesignSystem_bfa348;
```

---

### `Logo` — brand

The gradient "A" monogram on an electric-blue tile, paired with the wordmark.

| Prop | Type | Default |
|---|---|---|
| `variant` | `'lockup' \| 'mark' \| 'wordmark'` | `'lockup'` |
| `theme` | `'light' \| 'dark'` | `'light'` |
| `size` | `number` (mark height in px) | `40` |
| `markSrc` | `string` | `'assets/logo-mark.png'` |

```jsx
<Logo variant="lockup" theme="light" size={40} markSrc="assets/logo-mark.png" />
```

> ⚠️ **The mark fades into blue at its terminals**, so it is *only ever* shown on its blue tile — never knocked out onto another color. There is no monochrome or transparent variant.

---

### `Button` — core

| Prop | Type | Default |
|---|---|---|
| `variant` | `'primary' \| 'dark' \| 'outline' \| 'ghost' \| 'heat'` | `'primary'` |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` |
| `arrow` | `boolean` — appends `→` | `false` |
| `disabled` | `boolean` | `false` |
| `onDark` | `boolean` | `false` |
| `as` | element type | `'button'` |

| Variant | Fill | Use |
|---|---|---|
| `primary` | Electric Blue | The one main CTA |
| `dark` | Navy 900 | Secondary commit |
| `heat` | Deployment Orange | Rare urgency |
| `outline` | Transparent + 1.5px border | Secondary |
| `ghost` | Transparent | Tertiary |

**Sizes:** `sm` 9/16px padding · `md` 13/24px · `lg` 18/34px. All pill radius.

```jsx
<Button variant="primary" size="lg" arrow>Reserve your seat</Button>
<Button variant="outline" onDark>View curriculum</Button>
```

---

### `SectionLabel` — core

The signature tracked-out eyebrow.

| Prop | Type | Default |
|---|---|---|
| `code` | `string` — index prefix | — |
| `color` | `'default' \| 'brand' \| 'heat' \| 'live' \| 'onDark'` | `'default'` |
| `tick` | `boolean` — leading dot | `false` |

```jsx
<SectionLabel code="W07" color="brand">Vibe Coding</SectionLabel>
<SectionLabel tick color="live">Enrollment Open</SectionLabel>
```

---

### `Tag` — core

Tool / capability chip. Clusters under curriculum modules.

| Prop | Type | Default |
|---|---|---|
| `variant` | `'default' \| 'solid' \| 'brand' \| 'onDark'` | `'default'` |

Spec: 14px Inter 500 · 6px/13px padding · pill radius · 1px border.

```jsx
<Tag variant="brand">Claude Code</Tag>
```

---

### `Badge` — core

Status line for announcements and availability.

| Prop | Type | Default |
|---|---|---|
| `tone` | `'live' \| 'brand' \| 'heat' \| 'neutral' \| 'onDark'` | `'live'` |
| `dot` | `boolean` | `true` |

Spec: 11px Sora 600 · `0.08em` tracking · uppercase · 7px/13px padding · pill.

```jsx
<Badge tone="live">Cohort 06 // Enrollment Open</Badge>
<Badge tone="heat">Flash Offer · Valid Until June 15</Badge>
```

---

### `ModuleCard` — content

Numbered curriculum module. Tiles in a 4-column grid (the brochure runs 8).

| Prop | Type |
|---|---|
| `code` | `string` — e.g. `"W07"` |
| `title` | `string` |
| `description` | `string` |
| `tools` | `string[]` — rendered as Tags |
| `onDark` | `boolean` |

Spec: 12px radius · hairline border · 32px padding · min-height 220px · code in `--fs-h3` Sora 700 `--line-strong`.

```jsx
<ModuleCard code="W07" title="Vibe Coding"
  description="Direct Claude Code inside Google Antigravity to ship apps."
  tools={['Claude Code', 'Antigravity']} />
```

---

### `DomainCard` — content

Target-audience row. Stack several to form a list.

| Prop | Type |
|---|---|
| `code` | `string` — e.g. `"D01"` |
| `title` · `description` | `string` |
| `onDark` | `boolean` |

Spec: `64px 1fr` grid · 24px gap · 24px vertical padding · `border-top` hairline · code in electric blue.

```jsx
<DomainCard code="D01" title="Business Owners & Founders"
  description="Automate operations, scale outbound sales, and cut overhead using autonomous agents." />
```

---

### `StatBlock` — content

Oversized editorial metric. The number is the visual object.

| Prop | Type | Default |
|---|---|---|
| `value` · `label` | `ReactNode` | — |
| `color` | `'default' \| 'brand' \| 'onDark'` | `'default'` |
| `align` | `'left' \| 'center' \| 'right'` | `'left'` |

Spec: value `clamp(2.75rem, 5vw, 4.5rem)` Sora 700, `lh 0.9`, tabular-nums · label = tracked micro-label.

```jsx
<StatBlock value="100+" label="Systems Deployed" color="brand" />
```

---

### `TestimonialCard` — content

| Prop | Type | Default |
|---|---|---|
| `quote` | `ReactNode` | — |
| `name` · `role` · `initials` | `string` | — |
| `stars` | `number` | `5` |
| `featured` | `boolean` | `false` |
| `onDark` | `boolean` | `false` |

**Default:** card with hairline, quote in Sora 500 at `--fs-h4`.
**Featured:** no border, quote in **Instrument Serif italic** at `clamp(1.75rem, 3.2vw, 2.75rem)`. Use **one per surface.**

```jsx
<TestimonialCard featured
  quote="This isn't a course — it's a corporate cheat code."
  name="Scale-Up Founder" role="Verified Graduate" initials="S" />
```

---

### `PriceCard` — content

| Prop | Type | Default |
|---|---|---|
| `eyebrow` | `string` | — |
| `price` | `ReactNode` | — |
| `anchor` | `ReactNode` — struck-through | — |
| `note` | `string` | — |
| `features` | `string[]` — `→`-bulleted | `[]` |
| `cta` | `string` | `'Enroll now'` |
| `highlight` | `boolean` — navy ground + `--shadow-lg` | `false` |
| `onDark` | `boolean` | `false` |

Anchor price uses `text-decoration-color: var(--red-editorial)`.

```jsx
<PriceCard eyebrow="Full Enrollment" price="₹19,999" anchor="₹25,999"
  note="Full value — save ₹6,000"
  features={['8 weeks · 20 live classes', '100% placement guidance']}
  cta="Enroll now" highlight />
```

---

### Intentional scope note

This set was distilled from the brochure's recurring blocks — no code component library was provided. It **deliberately omits a generic UI kit** (inputs, switches, dialogs, tabs, toasts) because the brand's surfaces to date are editorial/marketing, not application chrome. Add those only when a real product surface requires them.

---

## 12. LAYOUT PATTERNS

### 12.1 Section rhythm

```
Light (hero)  →  Sunken (domains)  →  Light (curriculum)
  →  DARK (agent layer)  →  Light (proof)  →  DARK (pricing)
```

Dark sections carry the two highest-conviction moments: the capability claim and the close.

### 12.2 Hero

```
Badge row  →  Oversized headline (manual line breaks)  →  Lead paragraph (54ch max)
→  Dual CTA  →  hairline rule  →  three-up StatBlock
```

Max content width 980px. Everything left-aligned. Headline at `--fs-display-1`, `lh 0.95`.

### 12.3 Sticky-intro list

`1fr 1.6fr` grid. Left column `position: sticky; top: 100px` holds label + headline + one line of context. Right column holds the DomainCard stack.

### 12.4 Curriculum grid

Header row: label + headline left, context paragraph right-aligned at `38ch`. Below: `repeat(4, 1fr)` ModuleCard grid with 16px gap.

### 12.5 Dark capability section

`1fr 3fr` grid per group — tracked label left, `repeat(3,1fr)` card row right. Group labels in Signal Lime. Optional low-opacity radial glow behind.

### 12.6 Closing CTA

Centered, dark ground. `Badge → oversized headline → lead → 1fr 1.15fr price tiers → legal microcopy`. Highlighted tier is wider and elevated.

### 12.7 Slide geometry (1280×720)

| Slide | Ground | Structure |
|---|---|---|
| Title | Electric Blue | 64/72px padding · brand + label top · 104px headline bottom-anchored · footer meta row |
| Curriculum | Signal White | Header row + `4×2` module grid filling remaining height |
| Capability | Navy 900 | Label + 60px headline + lead, then 3-up card row |
| Big Quote | Split `1.5fr 1fr` | Left: label / stars / 46px serif italic quote / attribution. Right: full-bleed portrait |
| Pricing | Navy 900 | Badge + 72px headline + `1fr 1.15fr` tiers + footer |

---

## 13. QUALITY CONTROL

Before finalizing **any** design, answer:

- [ ] Would **Apple** publish this?
- [ ] Would **Linear** publish this?
- [ ] Would **Anthropic** publish this?
- [ ] Would **A24** approve this poster?
- [ ] Would **Pentagram** present this to a client?
- [ ] Would this be **featured on Behance**?

If the answer is no → **redesign.**

### System checks

- [ ] One idea only?
- [ ] Typography occupying 40–70%?
- [ ] Color ratio holding at 80/15/5?
- [ ] Accent used **once**, and load-bearing?
- [ ] Zero emoji, zero robots, zero circuit boards?
- [ ] Headline sentence case, labels tracked caps?
- [ ] Hairlines doing the structural work — not shadows?
- [ ] Max two background colors?
- [ ] Would this work as a billboard?

### Never produce

Average startup design · Generic AI design · Social-media template design.
**Every output must feel like a premium campaign.**

---

## 14. COMPLETE TOKEN REFERENCE

```css
:root {
  /* ── BRAND ─────────────────────────────── */
  --blue-electric: #1A22FF;
  --navy-deep:     #08125C;
  --navy-900:      #050B36;

  /* ── NEUTRALS (light) ──────────────────── */
  --white:       #F9FAFC;
  --paper:       #FFFFFF;
  --ink-900:     #060814;
  --ink-700:     #1B1E33;
  --ink-500:     #4A4F6A;
  --ink-300:     #8C90A8;
  --line:        #E4E6F0;
  --line-strong: #C9CCDC;

  /* ── NEUTRALS (dark) ───────────────────── */
  --on-dark-100:  #F9FAFC;
  --on-dark-70:   rgba(249,250,252,0.70);
  --on-dark-45:   rgba(249,250,252,0.45);
  --on-dark-line: rgba(249,250,252,0.14);
  --on-dark-fill: rgba(249,250,252,0.06);

  /* ── ACCENTS (the 5%) ──────────────────── */
  --orange-deploy: #FF6A1A;
  --lime-signal:   #D8FF32;
  --red-editorial: #FF3B30;

  /* ── BLUE RAMP ─────────────────────────── */
  --blue-700:     #141AC7;
  --blue-tint-12: rgba(26,34,255,0.12);
  --blue-tint-06: rgba(26,34,255,0.06);

  /* ── SURFACES ──────────────────────────── */
  --surface-page:   var(--white);
  --surface-card:   var(--paper);
  --surface-sunken: #F0F2F8;
  --surface-invert: var(--navy-900);
  --surface-brand:  var(--blue-electric);

  /* ── TEXT ──────────────────────────────── */
  --text-strong: var(--ink-900);
  --text-body:   var(--ink-700);
  --text-muted:  var(--ink-500);
  --text-faint:  var(--ink-300);
  --text-brand:  var(--blue-electric);
  --text-on-dark:       var(--on-dark-100);
  --text-on-dark-muted: var(--on-dark-70);
  --text-on-dark-faint: var(--on-dark-45);

  /* ── BORDERS / ACTION / SIGNAL ─────────── */
  --border-hairline: var(--line);
  --border-strong:   var(--line-strong);
  --border-on-dark:  var(--on-dark-line);
  --action-primary:       var(--blue-electric);
  --action-primary-press: var(--blue-700);
  --action-heat:          var(--orange-deploy);
  --focus-ring:           var(--blue-electric);
  --signal-live:   var(--lime-signal);
  --signal-alert:  var(--red-editorial);
  --signal-deploy: var(--orange-deploy);

  /* ── TYPE ──────────────────────────────── */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-serif:   'Instrument Serif', Georgia, serif;

  --fs-display-1: clamp(3.5rem, 9vw, 8rem);
  --fs-display-2: clamp(2.75rem, 6vw, 5rem);
  --fs-display-3: clamp(2rem, 4vw, 3.25rem);
  --fs-h1: 2.5rem;   --fs-h2: 2rem;      --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;  --fs-lg: 1.125rem;  --fs-body: 1rem;
  --fs-sm: 0.875rem; --fs-xs: 0.75rem;   --fs-label: 0.6875rem;

  --fw-light: 300; --fw-regular: 400; --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800;

  --lh-tight: 0.98; --lh-snug: 1.1; --lh-normal: 1.5; --lh-relaxed: 1.65;

  --tracking-display: -0.03em;  --tracking-tight: -0.015em;
  --tracking-normal: 0;         --tracking-wide: 0.08em;
  --tracking-label: 0.32em;

  /* ── SPACING ───────────────────────────── */
  --space-1: 4px;    --space-2: 8px;    --space-3: 12px;
  --space-4: 16px;   --space-5: 20px;   --space-6: 24px;
  --space-8: 32px;   --space-10: 40px;  --space-12: 48px;
  --space-16: 64px;  --space-20: 80px;  --space-24: 96px;
  --space-32: 128px; --space-40: 160px;

  --container-max: 1240px;  --container-wide: 1440px;
  --gutter:    clamp(20px, 5vw, 80px);
  --section-y: clamp(64px, 10vw, 160px);
  --pad-card: 32px; --pad-card-lg: 48px;
  --gap-tight: 8px; --gap: 16px; --gap-loose: 32px;

  /* ── RADIUS / BORDER ───────────────────── */
  --radius-xs: 4px;  --radius-sm: 8px;  --radius-md: 12px;
  --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px;
  --radius-none: 0px;
  --bw-hairline: 1px; --bw-medium: 1.5px; --bw-strong: 2px;

  /* ── ELEVATION ─────────────────────────── */
  --shadow-none: none;
  --shadow-sm:    0 1px 2px rgba(6,8,20,0.06);
  --shadow-md:    0 8px 28px -12px rgba(6,8,20,0.18);
  --shadow-lg:    0 24px 60px -20px rgba(6,8,20,0.28);
  --shadow-brand: 0 18px 44px -16px rgba(26,34,255,0.42);
  --shadow-inset-line: inset 0 0 0 1px var(--line);
  --ring: 0 0 0 3px rgba(26,34,255,0.35);

  /* ── MOTION ────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms; --dur: 220ms; --dur-slow: 420ms;
}
```

---

## 15. IMPLEMENTATION

### 15.1 Link the system

```html
<link rel="stylesheet" href="styles.css" />
<script src="_ds_bundle.js"></script>
```

`styles.css` is an `@import` list only — it reaches `tokens/fonts.css`, `colors.css`, `typography.css`, `spacing.css`, `radius-shadow.css`. Fonts load from the Google Fonts CDN.

### 15.2 Assets

| File | Contents |
|---|---|
| `assets/logo-mark.png` | The "A" monogram on electric blue — the primary lockup tile |
| `assets/founder-pulidevan.png` | Editorial founder portrait — the imagery reference standard |
| `assets/glow-mask.png` | Optional soft radial lighting overlay for dark surfaces |

### 15.3 Project structure

```
styles.css                 → global entry (link this)
DESIGN.md                  → this document
readme.md                  → brand guide + file index
SKILL.md                   → Agent Skills entry point
tokens/                    → fonts · colors · typography · spacing · radius-shadow
assets/                    → logo, portrait, glow
components/
  brand/   → Logo
  core/    → Button · SectionLabel · Tag · Badge
  content/ → ModuleCard · DomainCard · StatBlock · TestimonialCard · PriceCard
guidelines/                → 15 foundation specimen cards
ui_kits/website/           → CAIO Sprint marketing site (8 sections)
slides/                    → 5 brochure-style 1280×720 templates
templates/marketing-landing/ → copyable landing starter
```

### 15.4 Sources this system was built from

- `aiessdesignmd/AI Essentials Master Design System v3.md` — the brand's own master brief
- `uploads/Aiessentials Jun 26 Brochure.pdf` — 8-page Cohort 06 enrollment brochure (primary source for copy, layout, curriculum, testimonials, pricing, portrait)
- `uploads/Untitled Design from Canva.png` — the logo mark
- The Creative Director custom-instruction brief — art-direction north star

### 15.5 Known gaps

1. **No vector logo.** Only a raster mark on blue. No transparent, monochrome, or knockout variant exists — the mark's strokes fade into the blue field, so it cannot be cleanly keyed.
2. **No self-hosted font binaries.** Sora / Inter / Instrument Serif load from Google Fonts.
3. **One photograph only.** All other imagery should be replaced with real brand photography.
4. **No product/app surfaces.** The system covers marketing and brochure surfaces; a dashboard or community UI would need a form/navigation component layer added.

---

## FINAL STANDARD

> Do not design like an educator.
> Do not design like a marketer.
> Do not design like a startup.
>
> **Design like the visual operating system for the next generation workforce.**
>
> Every asset should feel like a movement.
> Not a campaign. Not a course. **A movement.**