---

name: calm-cto-brand description: Generate on-brand visual assets and web pages for The Calm CTO. Use for HTML pages, UI components, diagrams, quote cards, social images, infographics, or any visual content. Supports both web development (Tailwind CSS) and image export (HTML to JPEG/PNG).

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:

Copypython3 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

Copy--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

Copy<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:

Copytailwind.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:

Copy<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:

Copy<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:

Copy<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

Copy/* 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:

Copypython3 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:

Copypip install playwright --break-system-packages
playwright install chromium