Creating Your Plan Design System

Color System

A sophisticated palette anchored by deep teal and gold accents. Warm, expert, approachable.

Primary Palette

Core Brand

Deep Teal

#0f2d3e

var(--deep-teal)

Slate Teal

#3e666e

var(--slate-teal)

Cream

#f1ede6

var(--cream)

Off-White

#f7f5f0

var(--off-white)

Gold

#b79d64

var(--gold)

LLM Instructions

Deep Teal (#0f2d3e) is the primary dark color. Use for: header, footer, dark section backgrounds, primary text on light backgrounds, and gradient start color.

Slate Teal (#3e666e) is the secondary dark color. Use for: body text on light backgrounds, card borders, gradient end color, and secondary text on cream.

Cream (#f1ede6) is the primary light background. Use for: card backgrounds, section backgrounds, testimonial cards, and body default.

Off-White (#f7f5f0) is the secondary light background. Use for: alternating sections, card interiors, and creating subtle contrast against cream. Slightly cooler than cream.

Gold (#b79d64) is the signature accent. Use for: buttons, eyebrow labels, borders, scrollbar, arrows, and any emphasis element.

CRITICAL: Never use pure white (#fff) as a background. Always use cream or off-white for warm, sophisticated feel.

Do

Use gold for CTAs, accents, arrows, and borders
Alternate cream/off-white/dark sections for rhythm
Use gradient (deep-teal → slate-teal) for dark sections at 135deg
Gold eyebrow labels on both dark and light backgrounds

Don't

Use pure white (#fff) as any background
Put gold text on cream (low contrast)
Use deep-teal and slate-teal as flat colors together
Overuse gold — it should feel premium

CSS Variables

/* Primary Palette */
--deep-teal: #0f2d3e;
--slate-teal: #3e666e;
--cream: #f1ede6;
--off-white: #f7f5f0;
--gold: #b79d64;

Supporting Colors

Extended

Gold Dark

#9d8556

var(--gold-dark)

Gold Light

#c4aa74

var(--gold-light)

Border

#d8d4cc

var(--border)

LLM Instructions

Gold Dark (#9d8556) — Use for button hover states and scrollbar hover.

Gold Light (#c4aa74) — Optional lighter gold for subtle highlights.

Border (#d8d4cc) — Use for card borders on light backgrounds, dividers, and subtle separation.

CSS Variables

/* Supporting Colors */
--gold-dark: #9d8556;
--gold-light: #c4aa74;
--border: #d8d4cc;

Opacity Patterns

Dark Sections

90% — Primary Text

80% — Body Text

70% — Muted Text

6% — Card BG

LLM Instructions

On dark backgrounds, use rgba cream values for text hierarchy:

rgba(241, 237, 230, 0.9) — Primary/important text
rgba(241, 237, 230, 0.8) — Body text, descriptions
rgba(241, 237, 230, 0.7) — Muted text, supporting
rgba(241, 237, 230, 0.06) — Card backgrounds on dark
rgba(183, 157, 100, 0.25) — Gold borders at reduced opacity

CSS

/* Text on Dark Backgrounds */
color: rgba(241, 237, 230, 0.9); /* Primary */
color: rgba(241, 237, 230, 0.8); /* Body */
color: rgba(241, 237, 230, 0.7); /* Muted */

/* Card on Dark */
background: rgba(241, 237, 230, 0.06);
border: 1px solid rgba(183, 157, 100, 0.25);

Typography

Fraunces for headlines and emphasis. Montserrat for body and UI. Confident, expert, approachable.

Font Families

Foundations

Fraunces

Display & Headlines — Weights: 400, 600, 700, 800, 900

Montserrat

Body, Navigation & UI — Weights: 300, 400, 500, 600, 700, 800

LLM Instructions

Fraunces (serif) — Use for all headlines (H1-H3), testimonial quotes, card titles, and any text that needs gravitas. Default weight 800 for H1/H2, 700 for H3.

Montserrat (sans-serif) — Use for body text, navigation, buttons, labels, and all UI elements. Default weight 400 for body, 500-600 for navigation, 700 for buttons.

Do

Fraunces 800 for H1/H2 headlines
Fraunces 700 for card/section titles
Montserrat 400-500 for body text
Montserrat 700 for buttons and CTAs

Don't

Use Fraunces for body paragraphs
Use Montserrat for headlines
Mix weights inconsistently
Use light weights (300) for important text

CSS / Google Fonts

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600;700;800;900&family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* Font Variables */
--font-serif: 'Fraunces', serif;
--font-sans: 'Montserrat', sans-serif;

Type Scale

Hierarchy

H1 / Hero 3.25rem / 52px
Fraunces 800
Line-height: 1.1 font-size: 3.25rem;

Escape Chief Everything Officer Mode

H2 / Section 2.8rem / 44.8px
Fraunces 800
Line-height: 1.2 font-size: 2.8rem;

Order of Operations Matters

H3 / Card Title 1.4rem / 22.4px
Fraunces 700
Line-height: 1.2 font-size: 1.4rem;

Your offer is packaged wrong

Eyebrow 0.85-0.9rem
Montserrat 700
Uppercase, 2px spacing letter-spacing: 2px;

The Approach

Body Large 1.1-1.15rem
Montserrat 400
Line-height: 1.6-1.7 font-size: 1.1rem;

The problem isn't effort. It's direction. And hard work in the wrong direction just gets you lost faster.

Body 0.95rem
Montserrat 400
Line-height: 1.6 font-size: 0.95rem;

Most service providers have two of these. Only one is killing your growth right now.

Small 0.85rem
Montserrat 400-600
Line-height: 1.5 font-size: 0.85rem;

Free · 20 minutes · Find your bottleneck

LLM Instructions

Headlines use tight line-heights (1.1-1.2) for impact. Body text uses looser line-heights (1.6-1.7) for readability.

Eyebrow labels always: uppercase, 2px letter-spacing, gold color (#b79d64), 700 weight.

Emphasis within body: Use <strong> tags with deep-teal (#0f2d3e) or gold depending on context.

CSS

/* Headlines */
h1 { 
    font-family: 'Fraunces', serif;
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1.1;
}

h2 { 
    font-family: 'Fraunces', serif;
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.2;
}

h3 { 
    font-family: 'Fraunces', serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Eyebrow */
.eyebrow {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #b79d64;
}

/* Body */
body {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

Signature Elements

Distinctive brand elements that make Creating Your Plan instantly recognizable.

Gold Scrollbar

Signature

Gold thumb on deep teal track

12px width, 6px border-radius on thumb

LLM Instructions

The gold scrollbar is a signature brand element. Include on ALL pages.

Width: 12px
Track: Deep teal (#0f2d3e)
Thumb: Gold (#b79d64)
Thumb hover: Gold dark (#9d8556)
Thumb border-radius: 6px

CSS

/* Gold Scrollbar — Include on ALL pages */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #0f2d3e; }
::-webkit-scrollbar-thumb { background: #b79d64; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #9d8556; }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #b79d64 #0f2d3e; }

Gold Border Accents

Signature

Top Border

Header, footer, cards

Left Border

Testimonials, quotes

Teal Left Border

List boxes, info

LLM Instructions

3px gold top border — Use on header, footer, and featured cards.

4px gold left border — Use on testimonials, pull quotes, objection blocks.

4px slate-teal left border — Use on "This is for you" list boxes, info cards.

These borders create visual anchors and brand recognition across the site.

CSS

/* Gold Top Border (header/footer/featured) */
border-top: 3px solid #b79d64;

/* Gold Left Border (testimonials) */
border-left: 4px solid #b79d64;

/* Teal Left Border (list boxes) */
border-left: 4px solid #3e666e;

Gold Arrow Lists

Signature

→Revenue that grows while your hours don't
→An offer that sells without customizing every deal
→Pipeline that brings conversations to you

LLM Instructions

Replace standard bullets with gold arrows (→) for all feature lists, benefit lists, and process steps.

Arrow character: → (Unicode: \2192)
Color: Gold (#b79d64)
Weight: 700 on light backgrounds
Padding-left: 1.25rem

CSS + HTML

/* Gold Arrow List */
ul.arrow-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.arrow-list li {
    padding-left: 1.25rem;
    position: relative;
    margin-bottom: 0.4rem;
}

ul.arrow-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #b79d64;
    font-weight: 700;
}

Spacing System

Consistent spacing tokens for rhythm and breathing room.

Spacing Tokens

Foundation

Token	Value	Usage
`--space-xs`	0.4rem (6.4px)	Tight spacing, list item margins
`--space-sm`	0.75rem (12px)	Small gaps, label spacing
`--space-md`	1rem (16px)	Default paragraph spacing
`--space-lg`	1.5rem (24px)	Component internal padding
`--space-xl`	2rem (32px)	Card padding, grid gaps
`--space-2xl`	3rem (48px)	Section internal spacing
`--space-section`	6rem (96px)	Section vertical padding

LLM Instructions

Section padding: 6rem vertical, 5% horizontal (responsive)

Max-widths:

Main container: 1400px
Text content: 800px
Narrow content: 680px
Proof strips: 1100px
Objection blocks: 900px

Grid gaps: 1.5rem for tight grids, 3rem for spacious grids

CSS

/* Spacing Tokens */
--space-xs: 0.4rem;
--space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-section: 6rem;

/* Section Pattern */
section {
    padding: 6rem 5%;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

Buttons

Clear, confident calls-to-action with gold as the primary action color.

Button Styles

Interactive

LLM Instructions

Primary Button (Gold) — Use for main CTAs. Works on both dark and light backgrounds.

Secondary Button (Outline) — Use for secondary actions. Gold outline on dark, deep-teal outline on light.

Border-radius: 4px (NOT rounded/pill)
Font-weight: 700
Font-size: 0.9rem (large), 0.85rem (medium)
Transition: 0.3s ease

CSS

/* Primary Button */
.btn-primary {
    display: inline-block;
    background: #b79d64;
    color: #0f2d3e;
    padding: 1rem 2rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-primary:hover {
    background: #9d8556;
}

/* Secondary Button (on dark) */
.btn-secondary {
    background: transparent;
    color: #b79d64;
    border: 1px solid #b79d64;
}

.btn-secondary:hover {
    background: #b79d64;
    color: #0f2d3e;
}

Button Sizes

Variations

LLM Instructions

Large: 1rem 2rem padding, 0.9rem font — Hero CTAs, section CTAs

Medium: 0.75rem 1.25rem padding, 0.85rem font — Cards, navigation

Small: 0.65rem 1.25rem padding, 0.8rem font — Inline actions, testimonial cards

CSS

/* Button Sizes */
.btn-large { padding: 1rem 2rem; font-size: 0.9rem; }
.btn-medium { padding: 0.75rem 1.25rem; font-size: 0.85rem; }
.btn-small { padding: 0.65rem 1.25rem; font-size: 0.8rem; }

Cards

Content containers for offers, testimonials, features, and more.

Offer Card

Light Background

The Offer Engine

90-Day Program

Lock your offer, test your message, and start selling. 90 days of implementation support.

$600/month

LLM Instructions

Use for offer/product cards on light backgrounds.

Off-white (#f7f5f0) background, 1px #d8d4cc border
Gold top bar via ::before (60px wide, 3px tall)
Hover: translateY(-4px), border-color to gold
Padding: 2rem
Badge: uppercase, 0.65rem, border pill

CSS

.offer-card {
    background: #f7f5f0;
    border: 1px solid #d8d4cc;
    padding: 2rem;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.offer-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 2rem;
    width: 60px;
    height: 3px;
    background: #b79d64;
}

.offer-card:hover {
    transform: translateY(-4px);
    border-color: #b79d64;
}

Testimonial Card

Light Background

"Within 2 weeks, I found $76K I'd been leaving on the table."

She showed me exactly where my pricing was falling flat and how to make it clearer, stronger.

Christina Hageny

President, Valor Payroll Solutions

LLM Instructions

Use for all testimonials and social proof.

Cream (#f1ede6) background
4px gold left border
Quote: Fraunces 700, 1.05rem
Body: 0.9rem, slate-teal
Hover: translateY(-4px), bg to off-white

CSS

.testimonial-card {
    background: #f1ede6;
    padding: 1.75rem;
    border-left: 4px solid #b79d64;
    transition: transform 0.3s ease, background 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    background: #f7f5f0;
}

.testimonial-card .quote {
    font-family: 'Fraunces', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f2d3e;
    line-height: 1.4;
    margin-bottom: 1rem;
}

Bottleneck Card (Dark Section)

Dark Background

01

Product

Your offer is packaged wrong

Positioned as a vendor, not an expert
Presenting options when you should prescribe
Selling time when you should sell outcomes

The fix: Locked Offer Method™

LLM Instructions

Use for feature cards on dark/gradient backgrounds.

Background: rgba(241, 237, 230, 0.06)
Border: 1px solid rgba(183, 157, 100, 0.25)
Border-radius: 6px
Hover: translateY(-4px), border to gold, bg to 0.1 opacity
Number: Fraunces, gold

CSS

.bottleneck-card {
    background: rgba(241, 237, 230, 0.06);
    border: 1px solid rgba(183, 157, 100, 0.25);
    border-radius: 6px;
    padding: 1.75rem;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.bottleneck-card:hover {
    transform: translateY(-4px);
    border-color: #b79d64;
    background: rgba(241, 237, 230, 0.1);
}

List Box

Light Background

This is for you if…

You're earning $250K–$2M but working harder than the revenue justifies
Most revenue comes from referrals
Every client requires YOU personally

LLM Instructions

Use for "This is for you" / "This is NOT for you" qualifier boxes.

Cream background
4px slate-teal left border
Title: Fraunces 700, 1.15rem
Gold arrows in list

Hero Info Card

Dark Background

One bottleneck is limiting your revenue.

It's not what you think. And trying to fix everything at once is why nothing moves.

In 20 minutes, you'll know which one—and exactly what to fix first.

LLM Instructions

Use for supplementary info cards in hero sections.

Glass-morphism: rgba(241, 237, 230, 0.05)
Border: 1px solid rgba(183, 157, 100, 0.3)
Gold top bar spanning most of width
No hover effect

Section Patterns

Consistent layouts for page sections with alternating dark/light rhythm.

Section Types

Layout

EYEBROW LABEL

Dark Section (Gradient)

EYEBROW LABEL

Cream Section

EYEBROW LABEL

Off-White Section

EYEBROW LABEL

Slate Teal Section

Gold Pull Quote Section

LLM Instructions

Section rhythm pattern:

Hero: Gradient (deep-teal → slate-teal)
Who It's For: Off-white
Proof strip: Cream (compact, no eyebrow)
The Approach: Gradient
Objections: Slate teal (flat)
Pull Quote: Gold background
Pathway: Cream
Results: Off-white
CTA Block: Gradient
About: Cream

Always include eyebrow label above H2 (except pull quotes). Eyebrow is centered or left-aligned per design.

CSS

/* Section Backgrounds */
.section-dark {
    background: linear-gradient(135deg, #0f2d3e 0%, #3e666e 100%);
    color: #f1ede6;
}

.section-cream {
    background: #f1ede6;
    color: #0f2d3e;
}

.section-off-white {
    background: #f7f5f0;
    color: #0f2d3e;
}

.section-teal {
    background: #3e666e;
    color: #f1ede6;
}

.section-gold {
    background: #b79d64;
    color: #0f2d3e;
}

/* Default Section Spacing */
section {
    padding: 6rem 5%;
}

section .container {
    max-width: 1400px;
    margin: 0 auto;
}

Pull Quote Section

Special

"Within 2 weeks, I discovered $76K I could have been collecting annually."

Christina Hageny · President, Valor Payroll Solutions

LLM Instructions

Use sparingly — one per page maximum. Creates a visual break and highlights key social proof.

Gold (#b79d64) background
Deep teal text
Quote: Fraunces 700, 2-2.5rem
Padding: 4rem 5%
Max-width: 900px centered

Animations

Subtle, purposeful motion that enhances without distracting.

Scroll Reveal

Animation

Elements fade up and in as they enter the viewport

1

2

3

LLM Instructions

Add .reveal class to content blocks that should animate on scroll.

Initial state: opacity 0, translateY(30px)
Visible state: opacity 1, translateY(0)
Transition: 0.7s ease
Trigger: 10% of element visible (threshold: 0.1)

CSS + JavaScript

/* CSS */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* JavaScript */
var observer = new IntersectionObserver(function(entries) {
    for (var i = 0; i < entries.length; i++) {
        if (entries[i].isIntersecting) {
            entries[i].target.classList.add('visible');
        }
    }
}, { threshold: 0.1 });

var reveals = document.querySelectorAll('.reveal');
for (var i = 0; i < reveals.length; i++) {
    observer.observe(reveals[i]);
}

Hover Transitions

Interactive

Element	Transition
Buttons	`background 0.3s ease`
Cards	`transform 0.3s ease, border-color 0.3s ease`
Testimonials	`transform 0.3s ease, background 0.3s ease`
Links	`color 0.3s ease`

LLM Instructions

All interactive elements use 0.3s ease transition. Card hovers lift 4px (translateY(-4px)).

Responsive Behavior

Breakpoints and adaptation rules for different screen sizes.

Breakpoints

Layout

Name	Max Width	Key Changes
Tablet	`968px`	Nav wraps, H1 → 2.5rem, grids → 1 col
Mobile Large	`840px`	H1 → 2.2rem, H2 → 1.8rem, section padding → 4rem
Mobile	`640px`	H1 → 1.8rem, H2 → 1.5rem, section padding → 3rem

LLM Instructions

Approach: Desktop-first with progressive reduction. Use max-width media queries.

Key responsive patterns:

Grids: 3-col → 2-col → 1-col
Section padding: 6rem → 4rem → 3rem (vertical)
Typography: H1 scales from 3.25rem → 1.8rem
Hero: 2-column → single column
Navigation: Horizontal links wrap, hamburger for small mobile

CSS

/* Breakpoint: 968px */
@media (max-width: 968px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* Breakpoint: 840px */
@media (max-width: 840px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    section { padding: 4rem 5%; }
}

/* Breakpoint: 640px */
@media (max-width: 640px) {
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    section { padding: 3rem 4%; }
}

Complete CSS Variables

Copy this block to initialize all brand tokens in any project.

Root Variables

Export

CSS

/* ═══════════════════════════════════════════════════════════════════
   CREATING YOUR PLAN DESIGN SYSTEM — CSS VARIABLES
   Escape Chief Everything Officer Mode
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Colors */
    --deep-teal: #0f2d3e;
    --slate-teal: #3e666e;
    --cream: #f1ede6;
    --off-white: #f7f5f0;
    --gold: #b79d64;
    --gold-dark: #9d8556;
    --gold-light: #c4aa74;
    --border: #d8d4cc;
    
    /* Typography */
    --font-serif: 'Fraunces', serif;
    --font-sans: 'Montserrat', sans-serif;
    
    /* Spacing */
    --space-xs: 0.4rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-section: 6rem;
    
    /* Animation */
    --duration-fast: 0.2s;
    --duration-default: 0.3s;
    --duration-slow: 0.7s;
    --ease-default: ease;
}

/* Gold Scrollbar — Include on ALL pages */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--deep-teal); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }
* { scrollbar-width: thin; scrollbar-color: var(--gold) var(--deep-teal); }