docs/md_v2/branding/index.md
This brand book documents the complete visual language of Crawl4AI. Whether you're building documentation pages, interactive apps, or Chrome extensions, these guidelines ensure consistency while maintaining the unique terminal-aesthetic that defines our brand.
Our color palette is built around a terminal-dark aesthetic with vibrant cyan and pink accents. Every color serves a purpose and maintains accessibility standards.
<div class="color-card click-to-copy" onclick="copyToClipboard('#09b5a5', this)">
<div class="color-swatch" style="background: #09b5a5;"></div>
<div class="color-info">
<p class="color-name">Primary Teal</p>
<code class="color-value">#09b5a5</code>
<p class="color-usage">Hover states, dimmed accents, progress bars</p>
</div>
</div>
<div class="color-card click-to-copy" onclick="copyToClipboard('#0fbbaa', this)">
<div class="color-swatch" style="background: #0fbbaa;"></div>
<div class="color-info">
<p class="color-name">Primary Green</p>
<code class="color-value">#0fbbaa</code>
<p class="color-usage">Alternative primary, buttons, nav links</p>
</div>
</div>
<div class="color-card click-to-copy" onclick="copyToClipboard('#f380f5', this)">
<div class="color-swatch" style="background: #f380f5;"></div>
<div class="color-info">
<p class="color-name">Accent Pink</p>
<code class="color-value">#f380f5</code>
<p class="color-usage">Secondary accents, keywords, highlights</p>
</div>
</div>
<div class="color-card click-to-copy" onclick="copyToClipboard('#1a1a1a', this)">
<div class="color-swatch" style="background: #1a1a1a;"></div>
<div class="color-info">
<p class="color-name">Secondary Dark</p>
<code class="color-value">#1a1a1a</code>
<p class="color-usage">Headers, sidebars, secondary containers</p>
</div>
</div>
<div class="color-card click-to-copy" onclick="copyToClipboard('#3f3f44', this)">
<div class="color-swatch" style="background: #3f3f44;"></div>
<div class="color-info">
<p class="color-name">Tertiary Gray</p>
<code class="color-value">#3f3f44</code>
<p class="color-usage">Cards, borders, code backgrounds, modals</p>
</div>
</div>
<div class="color-card click-to-copy" onclick="copyToClipboard('#202020', this)">
<div class="color-swatch" style="background: #202020;"></div>
<div class="color-info">
<p class="color-name">Block Background</p>
<code class="color-value">#202020</code>
<p class="color-usage">Block elements, alternate rows</p>
</div>
</div>
<div class="color-card click-to-copy" onclick="copyToClipboard('#d5cec0', this)">
<div class="color-swatch" style="background: #d5cec0;"></div>
<div class="color-info">
<p class="color-name">Secondary Text</p>
<code class="color-value">#d5cec0</code>
<p class="color-usage">Body text, descriptions, warm tone</p>
</div>
</div>
<div class="color-card click-to-copy" onclick="copyToClipboard('#a3abba', this)">
<div class="color-swatch" style="background: #a3abba;"></div>
<div class="color-info">
<p class="color-name">Tertiary Text</p>
<code class="color-value">#a3abba</code>
<p class="color-usage">Captions, labels, metadata, cool tone</p>
</div>
</div>
<div class="color-card click-to-copy" onclick="copyToClipboard('#8b857a', this)">
<div class="color-swatch" style="background: #8b857a;"></div>
<div class="color-info">
<p class="color-name">Dimmed Text</p>
<code class="color-value">#8b857a</code>
<p class="color-usage">Disabled states, comments, subtle text</p>
</div>
</div>
<div class="color-card click-to-copy" onclick="copyToClipboard('#ff3c74', this)">
<div class="color-swatch" style="background: #ff3c74;"></div>
<div class="color-info">
<p class="color-name">Error Red</p>
<code class="color-value">#ff3c74</code>
<p class="color-usage">Errors, warnings, destructive actions</p>
</div>
</div>
<div class="color-card click-to-copy" onclick="copyToClipboard('#f59e0b', this)">
<div class="color-swatch" style="background: #f59e0b;"></div>
<div class="color-info">
<p class="color-name">Warning Orange</p>
<code class="color-value">#f59e0b</code>
<p class="color-usage">Warnings, beta status, caution</p>
</div>
</div>
<div class="color-card click-to-copy" onclick="copyToClipboard('#4a9eff', this)">
<div class="color-swatch" style="background: #4a9eff;"></div>
<div class="color-info">
<p class="color-name">Info Blue</p>
<code class="color-value">#4a9eff</code>
<p class="color-usage">Info messages, external links</p>
</div>
</div>
Our typography system is built around Dank Mono, a monospace font that reinforces the terminal aesthetic while maintaining excellent readability.
--font-primary: 'Dank Mono', dm, Monaco, Courier New, monospace;
--font-code: 'Dank Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
Font Weights:
<div class="component-card">
<h3 class="component-title">Secondary Button</h3>
<div class="component-demo">
<button class="brand-btn brand-btn-secondary">View Documentation</button>
<button class="brand-btn brand-btn-secondary" disabled>Loading...</button>
</div>
<div class="code-showcase">
<div class="code-header">
<span class="code-language">HTML + CSS</span>
<button class="copy-code-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre style="margin: 0; padding: 1rem; background: #070708;"><code><button class="brand-btn brand-btn-secondary">
View Documentation </button></code></pre> </div> </div>
<div class="component-card">
<h3 class="component-title">Accent Button</h3>
<div class="component-demo">
<button class="brand-btn brand-btn-accent">Try Beta Features</button>
<button class="brand-btn brand-btn-accent" disabled>Unavailable</button>
</div>
<div class="code-showcase">
<div class="code-header">
<span class="code-language">HTML + CSS</span>
<button class="copy-code-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre style="margin: 0; padding: 1rem; background: #070708;"><code><button class="brand-btn brand-btn-accent">
Try Beta Features </button></code></pre> </div> </div>
<div class="component-card">
<h3 class="component-title">Ghost Button</h3>
<div class="component-demo">
<button class="brand-btn brand-btn-ghost">Learn More</button>
<button class="brand-btn brand-btn-ghost" disabled>Coming Soon</button>
</div>
<div class="code-showcase">
<div class="code-header">
<span class="code-language">HTML + CSS</span>
<button class="copy-code-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre style="margin: 0; padding: 1rem; background: #070708;"><code><button class="brand-btn brand-btn-ghost">
Learn More </button></code></pre> </div> </div>
</div><div class="brand-card">
<h3 class="brand-card-title">🧠 LLM Context Builder</h3>
<p class="brand-card-description">Generate optimized context files for your favorite LLM when working with Crawl4AI. Get focused, relevant documentation based on your needs.</p>
<button class="brand-btn brand-btn-primary" style="margin-top: 1rem;">Launch Builder →</button>
</div>
Our spacing system is based on multiples of 10px for consistency and ease of calculation.
<div class="spacing-demo"> <div class="spacing-item"> <div class="spacing-visual" style="width: 10px;"></div> <span class="spacing-label">10px - Extra Small (xs)</span> </div> <div class="spacing-item"> <div class="spacing-visual" style="width: 20px;"></div> <span class="spacing-label">20px - Small (sm)</span> </div> <div class="spacing-item"> <div class="spacing-visual" style="width: 30px;"></div> <span class="spacing-label">30px - Medium (md)</span> </div> <div class="spacing-item"> <div class="spacing-visual" style="width: 40px;"></div> <span class="spacing-label">40px - Large (lg)</span> </div> <div class="spacing-item"> <div class="spacing-visual" style="width: 60px;"></div> <span class="spacing-label">60px - Extra Large (xl)</span> </div> <div class="spacing-item"> <div class="spacing-visual" style="width: 80px;"></div> <span class="spacing-label">80px - 2XL</span> </div> </div>Full-height, flex-column layout with sticky header
.terminal-container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
Auto-fit responsive grid for cards and components
.component-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
Maximum width with auto margins for centered layouts
.content {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
Documentation Pages (docs/md_v2/core, /advanced, etc.)
styles.css and layout.cssLanding Pages (docs/md_v2/apps/crawl4ai-assistant, etc.)
assistant.css style approachApp Home (docs/md_v2/apps/index.md)
Interactive Apps (docs/md_v2/apps/llmtxt, /c4a-script)
Chrome Extension (popup.css)
<div class="dont-card">
<div class="card-header">❌ DON'T</div>
<div class="card-example">
<button style="padding: 0.75rem 1.5rem; background: #ff0000; color: white; border: none; border-radius: 6px;">Launch App →</button>
</div>
<div style="padding: 1rem; font-size: 0.875rem; color: #d5cec0;">
Don't use arbitrary colors not in the brand palette
</div>
</div>
<div class="dont-card">
<div class="card-header">❌ DON'T</div>
<div class="card-example">
<div style="font-family: 'Arial', sans-serif; color: #e8e9ed;">
async with AsyncWebCrawler():
</div>
</div>
<div style="padding: 1rem; font-size: 0.875rem; color: #d5cec0;">
Don't use non-monospace fonts (breaks terminal feel)
</div>
</div>
<div class="dont-card">
<div class="card-header">❌ DON'T</div>
<div class="card-example">
<div class="brand-card" style="padding: 1rem;">
<h4 style="margin: 0; font-size: 1rem;">New Feature (Beta)</h4>
</div>
</div>
<div style="padding: 1rem; font-size: 0.875rem; color: #d5cec0;">
Don't put status indicators in plain text
</div>
</div>
All color combinations meet WCAG AA standards:
All interactive elements must have visible focus indicators:
button:focus,
a:focus {
outline: 2px solid #50ffff;
outline-offset: 2px;
}
Respect prefers-reduced-motion for users who need it:
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Use these CSS variables for consistency across all styles:
:root {
/* Colors */
--primary-color: #50ffff;
--primary-dimmed: #09b5a5;
--primary-green: #0fbbaa;
--accent-color: #f380f5;
/* Backgrounds */
--background-color: #070708;
--bg-secondary: #1a1a1a;
--code-bg-color: #3f3f44;
--border-color: #3f3f44;
/* Text */
--font-color: #e8e9ed;
--secondary-color: #d5cec0;
--tertiary-color: #a3abba;
/* Semantic */
--success-color: #50ff50;
--error-color: #ff3c74;
--warning-color: #f59e0b;
/* Typography */
--font-primary: 'Dank Mono', dm, Monaco, Courier New, monospace;
--global-font-size: 14px;
--global-line-height: 1.6;
/* Spacing */
--global-space: 10px;
/* Layout */
--header-height: 65px;
--sidebar-width: 280px;
--toc-width: 340px;
--content-max-width: 90em;
}
docs/md_v2/assets/styles.cssdocs/md_v2/assets/layout.cssdocs/md_v2/apps/crawl4ai-assistant/assistant.cssdocs/md_v2/apps/index.mddocs/md_v2/apps/crawl4ai-assistant/popup/popup.cssIf you're unsure about which style to use or need help implementing these guidelines: