Files

unclecode 0d8d043109 feat(docs): add brand book and page copy functionality

- Add comprehensive brand book with color system, typography, components
- Add page copy dropdown with markdown copy/view functionality
- Update mkdocs.yml with new assets and branding navigation
- Use terminal-style ASCII icons and condensed menu design

2025-09-30 18:28:05 +08:00

37 KiB

Raw Permalink Blame History

🎨 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

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

Background Colors

Deep Black

#070708

Main background, code blocks, deep containers

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

Text Colors

Primary Text

#e8e9ed

Headings, body text, primary content

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

Semantic Colors

Success Green

#50ff50

Success messages, completed states, valid

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

✍️

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

Launch Editor → Processing...

HTML + CSS Copy

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

<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>&lt;button class="brand-btn brand-btn-secondary"&gt;

View Documentation </button>

<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>&lt;button class="brand-btn brand-btn-accent"&gt;

Try Beta Features </button>

<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>&lt;button class="brand-btn brand-btn-ghost"&gt;

Learn More </button>

Badges & Status Indicators

Status Badges

Available Beta Alpha New! Coming Soon

HTML + CSS Copy

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

Launch Editor →

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

HTML + CSS Copy

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

<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

Launch App →

Use primary cyan for main CTAs and important actions

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

✅ DO

async with AsyncWebCrawler():

Use Dank Mono for all text to maintain terminal aesthetic

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

✅ DO

Beta

New Feature

Use status badges to indicate feature maturity

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

🎯

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.

37 KiB Raw Permalink Blame History

🎨 Crawl4AI Brand Book

Crawl4AI Brand Guidelines

📖 About This Guide

Color System

Primary Colors

Background Colors

Text Colors

Semantic Colors

Typography

Font Family

Type Scale

The Quick Brown Fox Jumps Over

Advanced Web Scraping Features

Installation and Setup Guide

Quick Start Instructions

Components

Buttons

Primary Button

Badges & Status Indicators

Status Badges

Cards

🎨 C4A-Script Editor

Terminal Window

Spacing & Layout

Spacing System

Layout Patterns

Terminal Container

Content Grid

Centered Content

Usage Guidelines

When to Use Each Style

Do's and Don'ts

New Feature

Accessibility

Color Contrast

Focus States

Motion

CSS Variables

Resources

Download Assets

Reference Files

Questions?

🎨 Keep It Terminal

37 KiB

Raw Permalink Blame History