The Calm CTO — Brand Design System

Generate any visual asset or web page following The Calm CTO brand guidelines.

Quick Start

For web pages: Use Tailwind CSS configuration below with the colour system and typography.

For image export: Create HTML using inline styles, then run:

python3 scripts/export_image.py input.html output.jpg

Colour System (WCAG AA Compliant)

Primary Palette

Usage:

• •Decorative: dots, borders, light backgrounds (not for text containers)
• •Text Container: use with white text for WCAG AA compliance
• •Dark: hover states
• •Light: callout backgrounds

Gradients

--sage-gradient: linear-gradient(135deg, #5F8A5A 0%, #4A7548 100%);
--coral-gradient: linear-gradient(135deg, #C4716A 0%, #A85D52 100%);
--sky-gradient: linear-gradient(135deg, #4A8FA0 0%, #3A7A8A 100%);

Backgrounds

Text Colours

Supporting Colours

Typography

Fonts

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Caveat:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Sizing Scale

• •xs: 12px, sm: 13px, base: 14px, md: 16px
• •lg: 18px, xl: 20px, 2xl: 24px, 3xl: 28px
• •4xl: 32px, 5xl: 36px, 6xl: 48px, 7xl: 64px

Letter Spacing

• •Headings: -0.5px (tighter)
• •Body: 0 (normal)
• •Labels/Badges: 0.5px to 1px (wider)

Spacing & Layout

Spacing Scale

• •xs: 4px, sm: 8px, md: 16px, lg: 24px
• •xl: 32px, 2xl: 48px, 3xl: 56px, 4xl: 64px

Border Radius

• •Outer containers: 16px
• •Cards/boxes: 12px
• •Small elements: 8px
• •Pills/tags: 20px
• •Circle: 50%

Canvas Sizes (for images)

Tailwind CSS Configuration

For web development, use this Tailwind config:

tailwind.config = {
  theme: {
    extend: {
      colors: {
        sage: {
          DEFAULT: '#8FAE8B',
          text: '#5F8A5A',
          dark: '#4A7548',
          light: '#D4E4D2'
        },
        coral: {
          DEFAULT: '#E8998D',
          text: '#C4716A',
          dark: '#A85D52',
          light: '#F4DCD8'
        },
        sky: {
          DEFAULT: '#89B9C4',
          text: '#4A8FA0',
          dark: '#3A7A8A',
          light: '#D0E5EA'
        },
        cream: '#F8F6F3',
        'off-white': '#FDFCFB',
        charcoal: '#2D3436',
        sand: '#D4C5B5',
        border: '#E5E7EB',
        'text-heading': '#2D3436',
        'text-body': '#4B5563',
        'text-muted': '#6B7280',
        'text-annotation': '#57606A',
        focus: '#2563EB',
      },
      fontFamily: {
        heading: ['DM Sans', 'system-ui', 'sans-serif'],
        body: ['DM Sans', 'system-ui', 'sans-serif'],
        annotation: ['Caveat', 'cursive'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      borderRadius: {
        'xl': '16px',
        'lg': '12px',
        'md': '8px',
        'pill': '20px',
      }
    }
  }
}

Brand Mark

Include on all visuals, typically top-left corner.

On light backgrounds:

<div style="display: flex; align-items: center; gap: 8px;">
  <div style="width: 8px; height: 8px; background: #8FAE8B; border-radius: 50%;"></div>
  <span style="font-size: 12px; font-weight: 500; color: #6B7280; letter-spacing: 0.5px; font-family: 'DM Sans', sans-serif;">THE CALM CTO</span>
</div>

On dark backgrounds:

<div style="display: flex; align-items: center; gap: 8px;">
  <div style="width: 8px; height: 8px; background: #8FAE8B; border-radius: 50%;"></div>
  <span style="font-size: 12px; font-weight: 500; color: #9CA3AF; letter-spacing: 0.5px;">THE CALM CTO</span>
</div>

On coloured backgrounds:

<div style="display: flex; align-items: center; gap: 8px;">
  <div style="width: 8px; height: 8px; background: white; border-radius: 50%;"></div>
  <span style="font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.8); letter-spacing: 0.5px;">THE CALM CTO</span>
</div>

Accessibility Requirements

All designs MUST include:

1. •Skip link for keyboard navigation
2. •Focus states: outline: 3px solid #2563EB; outline-offset: 2px
3. •Reduced motion: @media (prefers-reduced-motion: reduce)
4. •Links identifiable by underline, not colour alone
5. •Semantic HTML with proper heading hierarchy
6. •ARIA roles where appropriate

/* Focus states */
*:focus-visible {
  outline: 3px solid #2563EB;
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Design Principles

1. •Generous whitespace — Let elements breathe. Padding 48px minimum on containers.
2. •Soft corners — Never use sharp corners. 8-16px radius.
3. •Colour sequence — Multi-step visuals always use Sage → Coral → Sky (left to right, top to bottom).
4. •One emoji max — If using emojis, limit to one per card. Keep them simple.
5. •Annotations in Caveat — Hand-drawn feel for informal notes.
6. •Muted palette — Colours signal calm confidence, not attention-seeking energy.

Brand Voice

• •Tagline philosophy: "Not '10x faster.' 'Still here in three years.'"
• •Emphasise: deliberate decisions, sustainable pace, compounding quality
• •Tone: calm, experienced, anti-hustle culture
• •The Slow Development Path: Deliberate Decisions → Sustainable Pace → Compounding Quality

Visual Templates

See references/visual-templates.md for ready-to-use templates:

• •Process Flow (linear steps)
• •Quote Card (statement with attribution)
• •Concept Grid (2-4 related concepts)
• •Comparison (before/after, vs)
• •Stats Card (big numbers with context)
• •Timeline (chronological steps)
• •List Card (bullet points, checklist)
• •Social Post (text-focused for LinkedIn/Twitter)
• •Bold Statement (dark background with highlight)

Web Component Patterns

See references/web-components.md for Tailwind-based components:

• •Buttons (primary, secondary, outline, dark)
• •Cards (default, cream, dark, accent borders)
• •Callouts (sage tip, coral warning, sky note)
• •Tags/Badges
• •Navigation
• •CTA sections
• •Checklists
• •Section titles

Export to JPEG/PNG

Use the bundled script to export HTML to images:

python3 scripts/export_image.py input.html output.jpg --width 1200 --height 630

Options:

• •--width / --height: Canvas size (default: 1200×630)
• •--quality: JPEG quality 1-100 (default: 95)
• •--scale: Device scale factor (default: 2 for retina)

Requirements:

pip install playwright --break-system-packages
playwright install chromium