AI Essentials — Design System

01Brand Foundation

Not an education company.

AI Essentials positions itself as the operating system for ambitious people who refuse to become obsolete. Every asset must communicate intelligence, speed, execution, authority, transformation, future readiness, and economic leverage.

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

over

Technology

Outcome

over

Features

Execution

over

Education

Leverage

over

Labor

Systems

over

Prompts

Authority

over

Trendiness

Clarity

over

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.

Design principles

01

One idea per composition

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

02

Fixed hierarchy

1. Headline → 2. Human → 3. Supporting message → 4. Brand. Everything else is optional. One thousand no's for every yes.

03

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.

04

Negative space is a feature

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

05

Survive four crops

Every layout must 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.

02Color System

The 80 / 15 / 5 ratio.

Non-negotiable. 80% neutral, 15% Electric Operator Blue, 5% accent. An accent should mark one thing on a screen — a live status dot, the primary CTA, a struck-through anchor price.

80% Neutral

15% Primary

5% Accent

Brand primaries

Primary · 15%

Electric Operator Blue

#1A22FF

--blue-electric

Dark ground

Deep Intelligence Navy

#08125C

--navy-deep

Deepest

Navy 900

#050B36

--navy-900

Neutrals scale

Signal White

#F9FAFC

--white

Paper

#FFFFFF

--paper

Hairline

#E4E6F0

--line

Ink 300 — Captions

#8C90A8

--ink-300

Ink 500 — Muted

#4A4F6A

--ink-500

Ink 700 — Body

#1B1E33

--ink-700

Ink 900 — Display

#060814

--ink-900

Accents — the 5%

Heat / Urgency

Deployment Orange

#FF6A1A

--orange-deploy

Live / Status

Signal Lime

#D8FF32

--lime-signal

Alerts / Emphasis

Editorial Red

#FF3B30

--red-editorial

Color rules

Do

Flat color fields. Light / dark section alternation creates depth.
Maximum two background colors per artifact.
A soft radial glow is permitted only on dark hero/CTA surfaces, at low opacity, as lighting — never as a shape.

Never

No decorative gradients. The only gradient lives inside the logo mark itself.
No bluish-purple SaaS gradients, no glows-as-decoration.
No textures, patterns, or repeating motifs.

03Typography

Three voices.

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

Sora — Display + UI workhorseGeometric grotesque · Huge · Tracked tight · −0.03em

Stop studying AI.
Start deploying it.

Instrument Serif — Editorial accentUsually italic · Pull-quotes · One per surface · Sparingly

This isn't a course — it's a corporate cheat code.

Inter — Body textQuiet · Readable · Dense UI text · Never a headline

AI Essentials is the operating system for ambitious people who refuse to become obsolete. The CAIO Sprint transforms professionals into AI-native builders who create leverage through systems, automation, agents, and applications.

Fluid display scale

Token	Value	Preview
--fs-display-1	clamp(3.25rem, 8vw, 6.5rem)	Hero headline
--fs-display-2	clamp(2.5rem, 5.5vw, 4.25rem)	Section headline
--fs-display-3	clamp(1.85rem, 3.5vw, 2.75rem)	Sub-headline

The tracked label — the brand signature

Cohort 06 // Enrollment Open

The Agent Layer / 2026

Proof // Graduate Outcomes

Curriculum // 8 Modules

04Spacing & Layout

4px base unit.

Generous gutters and tall section rhythm are brand-critical, not adjustable defaults. White space is a feature, not a gap to fill.

--space-1

4px

--space-2

8px

--space-4

16px

--space-6

24px

--space-8

32px

--space-12

48px

--space-16

64px

--space-24

96px

05Radius, Borders & Elevation

Hairlines do the work.

Structure comes from hairlines and light/dark contrast — not from heavy dropshadows. Hairlines are the primary structural device.

XS

4px

SM

8px

MD

12px

LG

16px

Pill

999px

06Motion & Interaction

Crisp and short.

Confident settle easing. No bounce, no decorative infinite loops, no parallax.

Ease Out

cubic-bezier(0.16, 1, 0.3, 1)

Ease In-Out

cubic-bezier(0.65, 0, 0.35, 1)

Press State

scale(0.985)

07Imagery, Art Direction & Live Creatives

Human over technology. Always.

Founders, creators, designers, operators, developers, thinkers, builders. Capture confidence, agency, competence, execution, focus, momentum, curiosity.

Live brand campaign posters (1080 × 1350)

Click any creative to view in full resolution. Notice the 40–70% typography ratio, low-angle dramatic portraiture, high-contrast hairlines, and strict zero-emoji discipline.

Click to Zoom ↗

Creative 01 // 1080 × 1350

Cinematic Closer

"Close Deals. Change Careers. Get Paid." Low-angle cinematic portrait with warm gel lighting and punchy editorial hierarchy.

EdTech Sales Recruitment Dark Ground

Click to Zoom ↗

Creative 02 // 1080 × 1350

Sassy Hiring Callout

"We Are Hiring. Not Just Anyone." Direct confrontational copy with stacked typographic columns and tracked tags.

High Typography Couplet Rhythm Tag Clusters

Click to Zoom ↗

Creative 03 // 1080 × 1350

Gift of the Gab

"Got the gift of the gab?" Dialogue bubbles and conversational micro-copy leading to "Enrolled ✓".

Conversational UI Micro-Proof Signal Lime

Click to Zoom ↗

Creative 04 // 1080 × 1350

Career Impact

"Your next 'YES' can change a career." Candid high-energy human interaction celebrating learner transformation.

Human First Editorial Crop Action CTA

Click to Zoom ↗

Creative 05 // 1080 × 1350

No-Fluff Sales Culture

"Sell Value. Not Vibes." Pure typographic density, structured value pillars, and confident minimal aesthetic.

No Fluff Values Grid Operator Grade

Click to Zoom ↗

Founder // Editorial

Pulidevan · Founder

Direct gaze, high-contrast studio portraiture, warm skin tones against dark intelligent navy.

Authority Human First

Art direction rules

Technique

Low-angle photography, wide lens
Environmental + studio portraits
Dramatic gel lighting (warm-red against dark)
Unexpected, aggressive crops
Fashion-editorial composition
Campaign-style, cinematic
Rich, warm-to-moody color — never clinical

Absolutely Never

Robots or AI brain graphics
Circuit boards or neural network diagrams
Futuristic holograms or 3D AI heads
Blue glowing faces or cyberpunk
Stock photos or corporate handshakes
People pointing at screens
Generic SaaS illustrations

08Iconography

Near-iconless by design.

Density comes from type and photography, not glyphs. No emoji, ever. No icon font is used or required.

Mark	Usage
→	Arrow affordance. Appended to forward/commit actions. Plain Unicode. "Reserve Seat →", "Enroll Now →"
★	Testimonial stars. 5-star ratings only, tinted Deployment Orange.
	Status dot. 6px, usually Signal Lime. Marks "live / open" in labels and badges.
W01	Index codes. Act as visual anchors in place of icons. Set in tabular-nums.
//	Label separators. A typographic device, part of the voice. Used in tracked labels.

09Voice & Copywriting

Operator-grade.

Imperative and confident to the point of confrontation. Copy commands action and sells transformation and status. Unafraid of an implied threat: if you don't learn this, you become obsolete.

Sentence shape

Learn Less. Deploy More.

Small Team. Massive Output.

Human + AI. Unfair Advantage.

Results, not theory.

Say this / not this

Say This

Stop studying AI. Start deploying it.
Small team. Massive output.
Results, not theory.
Build your corporate brain.
Learn less. Deploy more.
Human + AI. Unfair advantage.

Not This

Learn the fundamentals of AI
Unlock your potential today!
The future is here
Discover amazing AI tools
Join thousands of learners
Your AI journey starts now

Brand vocabulary

LeverageOperatorDeploymentExecutionSystemsAutomationIntelligenceAdvantageScaleVelocityAgencyFutureTransformationAI NativeBuilderCreatorChief AI OfficerDigital WorkforceSynthetic KnowledgeAgent LayerPersonal Operating SystemVibe CodingUnfair Advantage

10Component Library

Ten components.

Distilled from the brochure's recurring blocks. Deliberately omits a generic UI kit — the brand's surfaces are editorial/marketing, not application chrome.

1. Button

primary · dark · heat · outline · ghost. Sizes: sm/md/lg. Arrow affordance appends →.

Cohort 06 // Open Design System v1.0 Flash Offer

2. Badge

Status announcements and availability. Tones: live · brand · heat.

Claude Code Antigravity Make ChatGPT Cursor

3. Tag

Tool/capability chip. Variants: default · solid · brand.

W07 Vibe Coding

Enrollment Open

The Agent Layer / 2026

4. SectionLabel

The signature tracked-out eyebrow. Optional index code + status dot.

100+

Systems Deployed

5k+

Graduates

5. StatBlock

Oversized editorial metric. The number is the visual object.

★★★★★

This isn't a course — it's a corporate cheat code.

Scale-Up Founder · Verified Graduate

6. TestimonialCard

Default: card with hairline, Sora 500. Featured: Instrument Serif italic pull-quote.

AI Essentials

Design System

7. Logo

Gradient "A" monogram on electric-blue tile. Always on its blue tile.

W07

Vibe Coding

Direct Claude Code inside Google Antigravity to ship apps.

Claude Code Antigravity

8. ModuleCard

Numbered curriculum module. 4-column grid. Code in --fs-h3 Sora 700.

D01

Founders & Execs

Automate operations and cut overhead with autonomous agents.

9. DomainCard

Target-audience row. 64px 1fr grid · 24px gap · hairline border-top.

Cohort 06 // Enrollment

₹19,999 ₹25,999

Full value — save ₹6,000

10. PriceCard

Pricing tier with struck-through red anchor price, checklist, and CTA.

11Quality Control

The checklist.

Before finalizing any design, answer every question. If the answer to any is no — redesign.

Would they publish this?

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?

12Complete Token Reference

Every design decision, codified.

Click any token name to copy var(--token) to your clipboard.

Token	Value	Role
--blue-electric	#1A22FF	The signature
--navy-deep	#08125C	Dark section ground
--navy-900	#050B36	Deepest ground
--white	#F9FAFC	Signal White — page ground
--paper	#FFFFFF	Cards, raised surfaces
--line	#E4E6F0	Hairline borders
--orange-deploy	#FF6A1A	Heat, urgency, stars
--lime-signal	#D8FF32	Live / open status
--red-editorial	#FF3B30	Alerts, strikethrough

13Raw Specification

Exact copyable DESIGN.md

The complete, unedited design markdown specification. Copy it directly to your clipboard or download the raw file.

📄 DESIGN.md (AI Essentials Design System v1.0)

Download .md

Loading DESIGN.md specification...

Design
System.

Not an education company.

The 80 / 15 / 5 ratio.

Three voices.

4px base unit.

Hairlines do the work.

Crisp and short.

Human over technology. Always.

Near-iconless by design.

Operator-grade.

Ten components.

The checklist.

Every design decision, codified.

Exact copyable DESIGN.md

Download the complete brand book.

DesignSystem.

Not an education company.

The 80 / 15 / 5 ratio.

Three voices.

4px base unit.

Hairlines do the work.

Crisp and short.

Human over technology. Always.

Near-iconless by design.

Operator-grade.

Ten components.

The checklist.

Every design decision, codified.

Exact copyable DESIGN.md

Download the complete brand book.

Design
System.