🎨 Crawl4AI Brand Book

Crawl4AI Brand Guidelines

A comprehensive design system for building consistent, terminal-inspired experiences

📖 About This Guide

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.

🎨

Color System

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.

Primary Colors

Primary Cyan

#50ffff

Main brand color, links, highlights, CTAs

Primary Teal

#09b5a5

Hover states, dimmed accents, progress bars

Primary Green

#0fbbaa

Alternative primary, buttons, nav links

Accent Pink

#f380f5

Secondary accents, keywords, highlights

Background Colors

Deep Black

#070708

Main background, code blocks, deep containers

Secondary Dark

#1a1a1a

Headers, sidebars, secondary containers

Tertiary Gray

#3f3f44

Cards, borders, code backgrounds, modals

Block Background

#202020

Block elements, alternate rows

Text Colors

Primary Text

#e8e9ed

Headings, body text, primary content

Secondary Text

#d5cec0

Body text, descriptions, warm tone

Tertiary Text

#a3abba

Captions, labels, metadata, cool tone

Dimmed Text

#8b857a

Disabled states, comments, subtle text

Semantic Colors

Success Green

#50ff50

Success messages, completed states, valid

Error Red

#ff3c74

Errors, warnings, destructive actions

Warning Orange

#f59e0b

Warnings, beta status, caution

Info Blue

#4a9eff

Info messages, external links

✍️

Typography

Our typography system is built around Dank Mono, a monospace font that reinforces the terminal aesthetic while maintaining excellent readability.

Font Family

--font-primary: 'Dank Mono', dm, Monaco, Courier New, monospace;
--font-code: 'Dank Mono', 'Monaco', 'Menlo', 'Consolas', monospace;

Font Weights: - Regular: 400 - Bold: 700 - Italic: 400 (italic variant)

Type Scale

H1 / Hero

Size: 2.5rem (40px) Weight: 700 Line-height: 1.2

The Quick Brown Fox Jumps Over

H2 / Section

Size: 1.75rem (28px) Weight: 700 Line-height: 1.3

Advanced Web Scraping Features

H3 / Subsection

Size: 1.3rem (20.8px) Weight: 600 Line-height: 1.4

Installation and Setup Guide

H4 / Component

Size: 1.1rem (17.6px) Weight: 600 Line-height: 1.4

Quick Start Instructions

Body / Regular

Size: 14px Weight: 400 Line-height: 1.6

Crawl4AI is the #1 trending GitHub repository, actively maintained by a vibrant community. It delivers blazing-fast, AI-ready web crawling tailored for large language models and data pipelines.

Code / Monospace

Size: 13px Weight: 400 Line-height: 1.5

async with AsyncWebCrawler() as crawler:

Small / Caption

Size: 12px Weight: 400 Line-height: 1.5

Updated 2 hours ago • v0.7.2

🧩

Components

Buttons

Primary Button

HTML + CSS

<button class="brand-btn brand-btn-primary">
  Launch Editor →
</button>

Secondary Button

HTML + CSS

<button class="brand-btn brand-btn-secondary">
  View Documentation
</button>

Accent Button

HTML + CSS

<button class="brand-btn brand-btn-accent">
  Try Beta Features
</button>

Ghost Button

HTML + CSS

<button class="brand-btn brand-btn-ghost">
  Learn More
</button>

Badges & Status Indicators

Status Badges

Available Beta Alpha New! Coming Soon

HTML + CSS

<span class="brand-badge badge-available">Available</span>
<span class="brand-badge badge-beta">Beta</span>
<span class="brand-badge badge-alpha">Alpha</span>
<span class="brand-badge badge-new">New!</span>

Cards

🎨 C4A-Script Editor

A visual, block-based programming environment for creating browser automation scripts. Perfect for beginners and experts alike!

🧠 LLM Context Builder

Generate optimized context files for your favorite LLM when working with Crawl4AI. Get focused, relevant documentation based on your needs.

HTML + CSS

<div class="brand-card">
  <h3 class="brand-card-title">Card Title</h3>
  <p class="brand-card-description">Card description...</p>
</div>

Terminal Window

crawl4ai@terminal ~ %

$ pip install crawl4ai

Successfully installed crawl4ai-0.7.2

HTML + CSS

<div class="terminal-window">
  <div class="terminal-header">
    <div class="terminal-dots">
      <span class="terminal-dot red"></span>
      <span class="terminal-dot yellow"></span>
      <span class="terminal-dot green"></span>
    </div>
    <span class="terminal-title">Terminal Title</span>
  </div>
  <div class="terminal-content">
    Your content here
  </div>
</div>

📐

Spacing & Layout

Spacing System

Our spacing system is based on multiples of 10px for consistency and ease of calculation.

10px - Extra Small (xs)

20px - Small (sm)

30px - Medium (md)

40px - Large (lg)

60px - Extra Large (xl)

80px - 2XL

Layout Patterns

Terminal Container

Full-height, flex-column layout with sticky header

.terminal-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

Content Grid

Auto-fit responsive grid for cards and components

.component-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

Centered Content

Maximum width with auto margins for centered layouts

.content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

✅

Usage Guidelines

When to Use Each Style

Documentation Pages (docs/md_v2/core, /advanced, etc.) - Use main documentation styles from styles.css and layout.css - Terminal theme with sidebar navigation - Dense, informative content - ToC on the right side - Focus on readability and technical accuracy

Landing Pages (docs/md_v2/apps/crawl4ai-assistant, etc.) - Use assistant.css style approach - Hero sections with gradients - Feature cards with hover effects - Video/demo sections - Sticky header with navigation - Marketing-focused, visually engaging

App Home (docs/md_v2/apps/index.md) - Grid-based card layouts - Status badges - Call-to-action buttons - Feature highlights - Mix of informational and promotional

Interactive Apps (docs/md_v2/apps/llmtxt, /c4a-script) - Full-screen application layouts - Interactive controls - Real-time feedback - Tool-specific UI patterns - Functional over decorative

Chrome Extension (popup.css) - Compact, fixed-width design (380px) - Clear mode selection - Session indicators - Minimal but effective - Fast loading, no heavy assets

Do's and Don'ts

✅ DO

Use primary cyan for main CTAs and important actions

❌ DON'T

Don't use arbitrary colors not in the brand palette

✅ DO

                async with AsyncWebCrawler():
            

Use Dank Mono for all text to maintain terminal aesthetic

❌ DON'T

async with AsyncWebCrawler():

Don't use non-monospace fonts (breaks terminal feel)

✅ DO

Beta

New Feature

Use status badges to indicate feature maturity

❌ DON'T

New Feature (Beta)

Don't put status indicators in plain text

🎯

Accessibility

Color Contrast

All color combinations meet WCAG AA standards:

Primary Cyan (#50ffff) on Dark (#070708): 12.4:1 ✅
Primary Text (#e8e9ed) on Dark (#070708): 11.8:1 ✅
Secondary Text (#d5cec0) on Dark (#070708): 9.2:1 ✅
Tertiary Text (#a3abba) on Dark (#070708): 6.8:1 ✅

Focus States

All interactive elements must have visible focus indicators:

button:focus,
a:focus {
    outline: 2px solid #50ffff;
    outline-offset: 2px;
}

Motion

Respect prefers-reduced-motion for users who need it:

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

💾

CSS Variables

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;
}

📚

Resources

Download Assets

Dank Mono Font Files (Regular, Bold, Italic)
Brand CSS Template
Component Library

Reference Files

Main Documentation Styles: docs/md_v2/assets/styles.css
Layout System: docs/md_v2/assets/layout.css
Landing Page Style: docs/md_v2/apps/crawl4ai-assistant/assistant.css
App Home Style: docs/md_v2/apps/index.md
Extension Style: docs/md_v2/apps/crawl4ai-assistant/popup/popup.css

Questions?

If you're unsure about which style to use or need help implementing these guidelines:

Check existing examples in the relevant section
Review the "When to Use Each Style" guidelines above
Ask in our Discord community
Open an issue on GitHub

🎨 Keep It Terminal

When in doubt, ask yourself: "Does this feel like a terminal?" If yes, you're on brand.