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).
Generate any visual asset or web page following The Calm CTO brand guidelines.
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 | Decorative | Text Container | Dark (hover) | Light (bg) |
|---|---|---|---|---|
| Sage | #8FAE8B |
#5F8A5A (4.8:1) |
#4A7548 |
#D4E4D2 |
| Coral | #E8998D | #C4716A (4.5:1) | #A85D52 | #F4DCD8 |
| Sky | #89B9C4 | #4A8FA0 (4.6:1) | #3A7A8A | #D0E5EA |
Usage:
--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%);
| Name | Hex | Use |
|---|---|---|
| Cream | #F8F6F3 | Default canvas, warm feel |
| Off-white | #FDFCFB | Page background |
| White | #FFFFFF | Cards, clean/minimal style |
| Charcoal | #2D3436 | Dark/bold style, headers, footers |
| Context | Hex | Contrast | Use |
|---|---|---|---|
| Heading | #2D3436 | 11.76:1 | Primary headings on light bg |
| Body | #4B5563 | 7.01:1 | Body text on light bg |
| Muted | #6B7280 | 5.39:1 | Secondary text, labels |
| Annotation | #57606A | 6.46:1 | Caveat font annotations |
| On dark | #FFFFFF | 12.68:1 | Text on charcoal |
| On dark muted | #9CA3AF | 4.99:1 | Secondary text on charcoal |
| Name | Hex | Use |
|---|---|---|
| Sand | #D4C5B5 | Arrows, connectors, decorative |
| Border | #E5E7EB | Card borders, dividers |
| Focus | #2563EB | Keyboard focus rings |
<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">
| Type | Font | Weight | Use |
|---|---|---|---|
| Headings | DM Sans | 700 (Bold) | Titles, headers |
| Body | DM Sans | 400/500 | Body text, labels |
| Annotations | Caveat | 400 | Hand-drawn notes, informal asides |
| Code | JetBrains Mono | 400/500 | Code blocks, technical content |
| Type | Dimensions | Ratio |
|---|---|---|
| OG/Social | 1200 × 630px | 1.91:1 |
| Square | 1080 × 1080px | 1:1 |
| 1200 × 627px | 1.91:1 | |
| 1200 × 675px | 16:9 | |
| Presentation | 1920 × 1080px | 16:9 |
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',
}
}
}
}
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>
All designs MUST include:
outline: 3px solid #2563EB; outline-offset: 2px@media (prefers-reduced-motion: reduce)/* 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;
}
}
See references/visual-templates.md for ready-to-use templates:
See references/web-components.md for Tailwind-based components:
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