Mastery Monetization Lab — Design System

01

Color System

Dark-first palette with amber accent

Core Surface Palette

Foundation

Black

#0a0a0a

--ml-black

Dark

#111111

--ml-dark

Surface

#171717

--ml-surface

Surface 2

#1c1c1c

--ml-surface-2

Surface 3

#222222

--ml-surface-3

LLM Instructions

--ml-black (#0a0a0a) is the deepest background. Use for: hero sections, page background, header, footer. This is the primary canvas color.

--ml-dark (#111111) is the secondary background. Use for: alternating section backgrounds to create subtle depth.

--ml-surface (#171717) is for card backgrounds, elevated containers, and interactive surfaces.

--ml-surface-2 / surface-3 are progressively lighter surfaces for nested containers, hover states, and input fields.

The surface scale creates depth through subtle value shifts. Never use flat black (#000). The hierarchy runs: black → dark → surface → surface-2 → surface-3.

Accent — Amber/Gold

Brand Accent

Accent Dark

#d97706

--ml-accent-dark

Accent

#f59e0b

--ml-accent

Accent Light

#fbbf24

--ml-accent-light

Accent Subtle

12% opacity

--ml-accent-subtle

LLM Instructions

--ml-accent (#f59e0b) is the primary accent. Use for: CTA buttons, badges, section numbers, active nav indicators, important labels, and any element that needs to pop against the dark canvas.

--ml-accent-light (#fbbf24) for hover states on accent elements.

--ml-accent-dark (#d97706) for pressed/active states and gradient endpoints.

--ml-accent-subtle (12% opacity) for tag/badge backgrounds, subtle highlight areas, and tinted containers.

The amber communicates warmth, revenue, and premium positioning against the dark canvas. It's the monetary "gold" — never use it for decorative purposes, only for actionable or important elements.

Do

Use accent for CTAs and actionable elements
Use accent-subtle for tag/badge backgrounds
Pair accent with --ml-black text on buttons

Don't

Use accent for body text or large areas
Put accent text on light backgrounds
Use more than 2-3 accent elements per section

Pillar Colors — Business / AI / Monetize

Semantic

Business

#3b82f6

--ml-pillar-business

AI

#a855f7

--ml-pillar-ai

Monetize

#22c55e

--ml-pillar-monetize

LLM Instructions

The three pillars each have a distinct color used in pillar badges, gradient accents, and section identifiers.

Pillar 01 — Business (#3b82f6): Blue. Represents strategy, positioning, and offer design.

Pillar 02 — AI (#a855f7): Purple. Represents technology, automation, and AI infrastructure.

Pillar 03 — Monetize (#22c55e): Green. Represents revenue, sales, and scaling.

These colors appear at low opacity (6-12%) for backgrounds and borders, and full saturation for small indicators like dots and text. They should never be used as large background fills. The tri-pillar gradient (blue → purple → green) appears in the header stripe and hero accent elements.

Text & Border Colors

Neutrals

White

#ffffff

--ml-white

Text Primary

#e5e5e5

--ml-text

Text Secondary

#a0a0a0

--ml-text-secondary

Stone

#888888

--ml-stone

Muted

#666666

--ml-muted

LLM Instructions

--ml-white (#fff) for headlines, hero titles, and maximum emphasis. Use sparingly — not for body text.

--ml-text (#e5e5e5) for primary body text, card titles, and general readable content.

--ml-text-secondary (#a0a0a0) for card descriptions, body paragraphs, and supporting text.

--ml-stone (#888) for labels, metadata, and tertiary information.

--ml-muted (#666) for disabled states, placeholder text, and the lowest hierarchy text.

Borders: --ml-border (#2a2a2a) for standard borders, --ml-border-light (#333) for hover states and emphasis borders.

02

Typography

Space Grotesk display + Inter body

Font Families

Typefaces

Space Grotesk 300–700 var(--font-display)

You Use AI. Now Make It Pay You.

The AI Monetization Lab closes that gap.

Inter 300–600 var(--font-body)

Regular 400 — Default body text for paragraphs, descriptions, and readable content that needs to be clean and functional.

Light 300 — Used for secondary body text, captions, and supporting descriptions.

JetBrains Mono 400–500 var(--font-mono)

BETA PRICING · 14px · 0.06em tracking

var(--ml-accent) • font-size: 56px • background: #171717

LLM Instructions

Space Grotesk is the display/heading font. Use for: all headlines (h1–h4), section titles, card titles, stat numbers, button text, nav brand, and any text that needs presence. It brings a geometric, modern, tech-forward feel. Use font-weight: 700 for hero titles, 600 for section headers, 500 for card titles and buttons.

Inter is the body font. Use for: body text, descriptions, FAQ answers, and all readable long-form content. Default weight 400 for body, 300 for secondary text, 500–600 for UI labels when needed.

JetBrains Mono for: code snippets, technical tokens, pricing labels, metadata badges, and anywhere a monospaced or "system" feel is needed.

Critical: Never use Space Grotesk below 13px — it loses legibility at small sizes. Use Inter or JetBrains Mono for small text instead.

Type Scale

Hierarchy

Hero Title — 64px

Section Title — 48px

Block Title — 32px

Card Title — 22px

Subtitle — 17px / 500

Body Default — 16px / Inter / 1.7 line-height

Body Small — 14px / Inter / secondary content

Button — 14px / Space Grotesk / 600

EYEBROW — 14PX / MONO / 0.06EM

TAG — 14PX / MONO / 0.06EM

LLM Instructions

Display sizes (Space Grotesk):

64px — Hero h1. Weight 700. letter-spacing: -0.03em. Use clamp(40px, 5vw, 64px)
48px — Section h2. Weight 700. letter-spacing: -0.03em
32px — Block titles, month headers. Weight 600
22px — Card titles, persona names. Weight 600
17px — Subtitles, lead paragraphs. Weight 500
14px — Button text. Weight 600

Body sizes (Inter):

16px — Default body. Weight 400. line-height: 1.7
14px — Small body, card descriptions, FAQ answers
13px — Nav links, compact text

System sizes (JetBrains Mono):

12px — Eyebrow labels, badges. Uppercase + tracking
11px — Tags, code tokens. Uppercase + tracking

CSS

/* Hero Title */
h1 {
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--ml-white);
}

/* Section Title */
h2 {
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* Body Text */
p {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--ml-text-secondary);
}

03

Spacing System

8px base unit, generous whitespace

Spacing Scale

Foundation

8px — xs (icon gaps)

12px — sm (tight margins)

16px — md (default gap)

24px — lg (card padding, grid gap)

32px — xl (card inner padding)

40px — 2xl (section inner padding)

48px — 3xl (title bottom margin)

64px — 4xl (section gaps)

80px — 5xl (major block gaps)

120px — section vertical padding

LLM Instructions

Base unit: 8px. All spacing values are multiples of 8. The dark canvas needs more breathing room than light designs.

8-12px — Micro: icon gaps, badge padding, tight margins
16px — Default gap between related elements, grid gaps
24-32px — Card padding, component internal spacing
40-48px — Section inner padding, title to content gaps
64-80px — Major block separations
100-120px — Section vertical padding (desktop)

Key principle: Dark interfaces need MORE whitespace than light ones. When in doubt, add space.

Border radius: 8px for buttons/inputs, 12px for cards, 16px for large containers, 100px for pills/badges.

Section Padding & Max Widths

Layout

Context	Value	Usage
Section padding	`120px 60px`	Standard content sections
Section (compact)	`80px 60px`	Tighter sections, transitions
Mobile sections	`80px 24px`	Reduced horizontal padding
Max width (content)	`1200px`	Primary content container
Max width (text)	`680px`	Readable text columns
Max width (wide)	`1400px`	Full-width sections with grids

04

Buttons

Primary, secondary, ghost variants

Button Variants

Interactive

.btn-primary

.btn-secondary

.btn-ghost

LLM Instructions

.btn-primary: Amber background (#f59e0b) with black text. Rounded corners (8px). Lifts on hover with glow shadow. Use for: primary CTAs — "Join the Beta", "Get Started", "Apply Now".

.btn-secondary: Transparent with white text and subtle border (#333). On hover, border brightens to white and gets a subtle fill. Use for: secondary actions — "Take Free Assessment", "Learn More".

.btn-ghost: Transparent with amber text and amber border. On hover, gets a subtle amber fill. Use for: tertiary actions and inline CTAs.

Button text: Space Grotesk, 14px, font-weight 600, slight letter-spacing (0.02em). Never use all-caps on buttons in this system — use sentence case.

Hover: Primary lifts 1px with box-shadow. Secondary brightens border. Ghost fills background. All use transition: all 0.3s ease.

05

Cards

Persona, timeline, price, operator, stat

Persona Card

Who Is This For

The Launcher

Going Solo

You have real expertise and you're going independent. AI should accelerate you, not confuse you.

LLM Instructions

Purpose: Display target persona types in "Who Is This For" sections. Used in a 3-column grid.

Anatomy: Accent eyebrow (persona type), display title (persona name), body description. Background: --ml-surface, border: --ml-border, border-radius: 12px.

Hover: Card lifts 4px, border lightens, deep shadow appears. Transition: 0.4s ease.

Timeline / Rhythm Card

How It Runs

Friday

Lab Pack Drops

Your materials and prep land Friday. Read it, try it — come Tuesday ready to build.

Tuesday

Group Session

2 hours, live. All three of us in the room. Build together, real feedback.

Thursday

15-Min Blocks

One-on-one check-ins to unblock whatever's in the way.

LLM Instructions

Purpose: Display weekly rhythm / timeline steps. Used in a 3-column horizontal layout.

Anatomy: Day label (accent, mono, uppercase), title (display, white), description (body, secondary). Keep descriptions to 2 lines max.

Price Card

Investment

Beta Pricing

$1,500

$3,000

90-Day Sprint — Beta Cohort. Everything included.

LLM Instructions

Purpose: Display pricing with urgency. Gradient top-border (amber scale). Centered layout.

Anatomy: Badge (mono, accent-subtle background), price amount (56px, display, white), strikethrough original price (muted), description, full-width CTA button.

Visual treatment: Surface background with border. Top gradient stripe in amber tones. Border-radius: 16px for premium feel.

Stat Cards

Proof Points

30+

Years Experience

15+

AI Systems Deployed

3

Proven Operators

LLM Instructions

Layout: 3-column grid with 1px gap. Container has --ml-border background so gaps create separator lines. Each cell has --ml-surface background.

Number: Space Grotesk, 42px, weight 700, white. Label: 13px, stone color, slight tracking.

Operator Card

Team

Productization & Ventures

Jason MacDonald

MasteryMade Founder

30+ years building businesses from scratch. Giving you the same productization playbook used across dozens of ventures.

LLM Instructions

Anatomy: Role label (mono, accent), name (display, 20px, white), title (13px, stone), bio (14px, text-secondary). Surface background, 12px border-radius.

Pillar Badges

Labels

Pillar 01 Business Pillar 02 AI Pillar 03 Monetize

LLM Instructions

Pill-shaped badges with pillar color at low opacity for background and border. Dot indicator + text. border-radius: 100px. Use to tag content by pillar or show the three-pillar system.

06

Components

FAQ, navigation, pain-point cards

FAQ Accordion

Interactive

Take the free assessment. Score 60+ and you get the application link. We review every application personally. Only 5 spots this cohort.

No. You need a paid AI subscription (ChatGPT Plus or Claude Pro) and the willingness to use it. We build the technical systems together.

LLM Instructions

Structure: Stack of items with bottom borders. Toggle button spans full width with space-between layout. Chevron rotates 180° on active.

Question: Space Grotesk, 16px, weight 500. Chevron: 18px, muted color.

Answer: Hidden by default (max-height: 0). Animated open with max-height transition. Body text at 14px, text-secondary color.

"+" toggle variant: The Vercel page uses "+" that rotates to "×". Either approach works — chevron is cleaner.

Pain Point / Quote Card

Sound Familiar

"I use AI every day but it's not making me more money"

You've got the subscription. You use it constantly. But your revenue looks the same as before.

→ We turn your AI habit into a revenue system

LLM Instructions

Purpose: Display relatable pain points with resolution. Creates empathy and shows understanding.

Anatomy: Quote headline (display, 18px, white), explanation (body, secondary), resolution line (accent color with → arrow prefix, weight 500).

Pattern: Quote → Problem description → Solution promise. The → arrow and accent color create a visual "this is the answer" moment.

07

Section Patterns

Hero, numbered sections, alternating

Section Header Pattern

Layout

02

Who Is This For

Three Paths In.
One Outcome.

LLM Instructions

Structure: Three-layer header hierarchy used at the top of every content section on the page.

Layer 1 — Number: Section number (01-07), Space Grotesk, 14px, weight 600, accent color
Layer 2 — Eyebrow: Section descriptor, 13px, uppercase, 0.12em tracking, stone color
Layer 3 — Title: Display headline, 42-48px, weight 700, white, negative tracking

This creates a consistent rhythm across all page sections. The number serves as a visual anchor and progress indicator.

Month Block Pattern

Curriculum

1

Month 01 / March

Build Your Offer

— Pick your lane, nail your positioning

— Design an offer people want to buy

— Price it with confidence

— Map your full value ladder

LLM Instructions

Purpose: Display 3-month curriculum breakdown. Large ghost number (56px, border-light color) as background anchor, month label (eyebrow style), title (display, 24px), and bullet list with em-dash prefix.

List items: Use "—" (em-dash) prefix instead of bullets. 14px, text-secondary color. One line per item, no wrapping.

Guarantee / Info Block

Trust

The Guarantee

$1,000 of your $1,500 is tuition — fully refundable if you attend 3+ sessions and complete the work. The remaining $500 is your accountability stake.

LLM Instructions

Purpose: Call out important trust-building information — guarantees, terms, post-program details.

Visual: Surface background with accent left border (3px). Title in display font, body in secondary text. Creates visual callout without being aggressive.

08

Animations & Transitions

Subtle, purposeful motion

Timing & Easing Tokens

Foundation

Token	Value	Usage
--duration-fast	`0.15s`	Color changes, opacity, icon state
--duration-default	`0.3s`	Hover states, border transitions
--duration-medium	`0.4s`	Card lifts, expand/collapse
--duration-slow	`0.6s`	Scroll reveals, page transitions
--ease-default	`ease`	Standard transitions
--ease-smooth	`cubic-bezier(0.25, 0.46, 0.45, 0.94)`	Button fills, card lifts
--ease-bounce	`cubic-bezier(0.34, 1.56, 0.64, 1)`	Playful interactions (sparingly)

LLM Instructions

Philosophy: Animations serve function, not decoration. Every motion should feel purposeful and tight — never sluggish or bouncy. Dark interfaces should feel precise and responsive.

Hover states: Combine transform + color/opacity in a single transition. Example: transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.2s ease

Scroll reveals: Elements fade-in + translate up 20px with IntersectionObserver at 0.1 threshold. Stagger children by 100ms each. Use opacity: 0; transform: translateY(20px) as initial state.

Button glow: On primary CTA hover, add box-shadow: 0 8px 24px rgba(245, 158, 11, 0.25) for a warm halo effect.

09

Responsive Behavior

Desktop-first with progressive reduction

Breakpoints

Layout

Name	Max Width	Key Changes
Large Desktop	`1200px`	3-col persona cards → 2-col, reduce section padding
Tablet	`1024px`	Timeline 3-col → stack, operator cards 2-col
Mobile	`768px`	Single column everything, padding: 80px 24px, hide nav brand
Small Mobile	`480px`	Hero title 32px, compact stat cards, full-width buttons

LLM Instructions

Approach: Desktop-first with max-width queries. Dark interfaces need careful mobile treatment — spacing compresses but never goes below 16px horizontal padding.

Grids: 3-col → 2-col → 1-col
Horizontal padding: 60px → 24px → 20px
Section padding: 120px → 80px → 64px vertical
Typography: Use clamp() for fluid hero/section titles
Buttons: Stack vertically and go full-width on mobile
Nav: Horizontal scroll on mobile, hide brand mark

10

Complete CSS Variables

Copy to initialize any project

CSS — Root Variables

/* ═══════════════════════════════════════════════════════════════════
   MASTERY MONETIZATION LAB — CSS VARIABLES
   AI Monetization Lab Brand System
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* Surfaces */
    --ml-black: #0a0a0a;
    --ml-dark: #111111;
    --ml-surface: #171717;
    --ml-surface-2: #1c1c1c;
    --ml-surface-3: #222222;
    
    /* Borders */
    --ml-border: #2a2a2a;
    --ml-border-light: #333333;
    
    /* Text */
    --ml-white: #ffffff;
    --ml-text: #e5e5e5;
    --ml-text-secondary: #a0a0a0;
    --ml-stone: #888888;
    --ml-muted: #666666;
    
    /* Accent — Amber */
    --ml-accent: #f59e0b;
    --ml-accent-light: #fbbf24;
    --ml-accent-dark: #d97706;
    --ml-accent-subtle: rgba(245, 158, 11, 0.12);
    --ml-accent-glow: rgba(245, 158, 11, 0.06);
    
    /* Pillars */
    --ml-pillar-business: #3b82f6;
    --ml-pillar-ai: #a855f7;
    --ml-pillar-monetize: #22c55e;
    
    /* Typography */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* Spacing */
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 40px;
    --space-3xl: 48px;
    --space-4xl: 64px;
    --space-5xl: 80px;
    --space-section: 120px;
    
    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 100px;
    
    /* Animation */
    --ease-default: ease;
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --duration-fast: 0.15s;
    --duration-default: 0.3s;
    --duration-medium: 0.4s;
    --duration-slow: 0.6s;
}

Color System

Core Surface Palette

LLM Instructions

Accent — Amber/Gold

LLM Instructions

Do

Don't

Pillar Colors — Business / AI / Monetize

LLM Instructions

Text & Border Colors

LLM Instructions

Typography

Font Families

LLM Instructions

Type Scale

LLM Instructions

Spacing System

Spacing Scale

LLM Instructions

Section Padding & Max Widths

Buttons

Button Variants

LLM Instructions

Cards

Persona Card

Going Solo

LLM Instructions

Timeline / Rhythm Card

Lab Pack Drops

Group Session

15-Min Blocks

LLM Instructions

Price Card

LLM Instructions

Stat Cards

LLM Instructions

Operator Card

LLM Instructions

Pillar Badges

LLM Instructions

Components

FAQ Accordion

LLM Instructions

Pain Point / Quote Card

LLM Instructions

Section Patterns

Section Header Pattern

Three Paths In.One Outcome.

LLM Instructions

Month Block Pattern

LLM Instructions

Guarantee / Info Block

LLM Instructions

Animations & Transitions

Timing & Easing Tokens

LLM Instructions

Responsive Behavior

Breakpoints

LLM Instructions

Complete CSS Variables

Three Paths In.
One Outcome.