Skip to content

Aesthetic Design

Jump to bottom
deepelement.ai edited this page Apr 9, 2026 · 1 revision

Aesthetic Design

🎨 ClawCode Aesthetic Design — User Guide

From visual experience to engineering aesthetics — craft your own terminal workspace.

Table of Contents

Design Philosophy

ClawCode's aesthetic design follows three core principles:

  1. Terminal-Native Visual Quality — Achieve GUI-level visual refinement within a pure terminal environment. Powered by the Textual TUI framework and Rich rendering engine, ClawCode delivers a CSS-driven styling system, real-time Markdown rendering, syntax highlighting, and dynamic animations — all inside your terminal.

  2. Multi-Layer Customization — From global color themes to layout modes, from AI-driven automatic style selection to manually locked brand styles, users can adjust the interface appearance at any granularity level.

  3. Engineering Aesthetics Driven — Every visual decision is backed by semantic intent. Colors aren't just "pretty" — they carry functional roles: information hierarchy, action feedback, and cognitive guidance.

Theme System

ClawCode ships with 8 hand-picked themes spanning warm to cool tones, classic to trendy aesthetics. Each theme defines 11 semantic color tokens, ensuring every UI element's coloration has a clear design purpose.

8 Built-in Themes at a Glance

Theme Background Primary Accent Style
Yellow ⭐ Default #1c1b1a Deep Charcoal #eab700 Amber Gold #f0c14b Warm Gold Warm high contrast, ideal for long coding sessions
Catppuccin #1e1e2e Deep Indigo #cba6f7 Lavender #f9e2af Cream Soothing pastel palette, visually comfortable
Dracula #282a36 Midnight Gray #bd93f9 Electric Purple #f1fa8c Neon Yellow Classic Dracula, high recognizability
Gruvbox #282828 Dark Brown #d3869b Rose Pink #fabd2f Retro Gold Retro warm tones, unique personality
Monokai #272822 Dark Olive #ae81ff Violet #e6db74 Lemon Yellow Classic editor palette, developer favorite
One Dark #282c34 Graphite Blue #c678dd Lavender #e5c07b Amber Atom editor style, balanced elegance
Tokyo Night #1a1b26 Deep Night Blue #bb9af7 Lavender Blue #e0af68 Warm Orange Japanese aesthetics, serene and deep
Light #ffffff Pure White #9d7cd8 Soft Purple #ff9e64 Warm Orange Light mode, ideal for bright environments

💡 Tip: Dark is an alias for Yellow — selecting Dark uses the default Yellow theme.

How to Switch Themes

Action Shortcut Description
Cycle to next theme Ctrl + T Cycles through Yellow → Catppuccin → Dracula → …
Open theme selector Ctrl + Shift + T Opens a theme list panel; current theme is marked with *
Confirm in dialog Enter Selects and applies the highlighted theme

Theme Color Semantics

Each theme defines 11 semantic color tokens corresponding to different element roles in the interface:

Token Purpose
background Global background color
foreground Body text color
primary Primary actions, highlights, links
secondary Secondary information, auxiliary labels
accent Accent color for drawing attention
error Error states, failure indicators
warning Warning states, caution indicators
success Success states, confirmation feedback
muted De-emphasized text, comments, disabled states
border Borders, dividers
panel Panel backgrounds, card surfaces

This semantic design ensures that when switching between themes, the functional meaning of UI elements remains consistent — errors are always red-ish, successes are always green-ish — preventing cognitive disorientation caused by theme changes.

Display Modes

Themes control colors; display modes control layout. ClawCode offers 6 display modes, each defining a distinct interface layout and color atmosphere.

6 Layout Modes

🟡 OpenCode Mode (Default)

┌──────────────────────────────────────────────────┐
│              Chat Area     │  Info Panel          │
│                            │  Code Awareness      │
│  [Message List]            │                      │
│                            │                      │
│  ┌──────────────────────┐  │                      │
│  │ > Input Box          │  │                      │
│  └──────────────────────┘  │                      │
│  [HUD Status Bar]          │                      │
└──────────────────────────────────────────────────┘
  • No sidebar, right info panel visible
  • OpenCode-style input box (> prompt)
  • Bottom HUD status bar
  • Warm amber #fab283 as the primary tone

🔵 ClawCode Mode

  • Same layout structure as OpenCode
  • Neutral blue-gray tone #11141c background
  • Ideal for users who prefer calm, cool tones

🟠 Claude Mode

┌──────────────────────────────────────────────────┐
│              Chat Area (Full Width)                │
│                                                    │
│  [Message List]                                    │
│                                                    │
│  ┌──────────────────────────────────────────────┐  │
│  │ Claude-style Input Box                       │  │
│  └──────────────────────────────────────────────┘  │
│  [HUD Status Bar]                                  │
└──────────────────────────────────────────────────┘
  • Full-width chat area, no right panel
  • Anthropic orange #da7756 as the primary tone
  • Deep indigo background #1a1a2e
  • Claude-style input box

🟡 Classic Mode

┌──────────┬───────────────────────────────────────┐
│ Sidebar  │              Chat Area                 │
│          │                                        │
│ [Session]│  [Message List]                        │
│ [Session]│                                        │
│ [Session]│  ┌──────────────────────────────────┐  │
│          │  │ Classic Input Box                 │  │
│          │  └──────────────────────────────────┘  │
└──────────┴───────────────────────────────────────┘
  • Left session sidebar visible
  • Top status bar replaces bottom HUD
  • One Dark warm tone #e5c07b

🟢 Minimal Mode

  • Bare-bones interface: only message list and input box
  • No sidebar, no right panel
  • Solarized Dark high-contrast palette
  • Ideal for focused conversation scenarios

🔷 Zen Mode

  • Centered narrow-column layout (max width 100 characters)
  • No sidebar, no panels, no bottom HUD
  • Nord-inspired palette #88c0d0 frost blue
  • Maximum focus and immersion

How to Switch Display Modes

Shortcut Description
Ctrl + D Opens the display mode selection dialog

Choose your preferred mode in the popup dialog — the layout and color scheme will switch instantly.

54 Brand Design Catalogs

What Is a Brand Design Catalog

ClawCode includes design language references from 54 world-class brands. Each brand directory contains:

File Description
DESIGN.md Complete design system documentation (colors, typography, layout, component specs)
README.md Brand overview with preview screenshots
preview.html Light mode HTML visual preview
preview-dark.html Dark mode HTML visual preview
tokens.compact.json Compact design tokens (primary color, background, text, border radius, shadow, font family)

These brand catalogs are not just for ClawCode's own UI aesthetics — they serve as a design reference library for AI code generation. When you ask ClawCode to generate UI code, it can automatically reference the corresponding brand's design language to ensure output quality.

Complete Brand List

📋 Click to expand all 54 brands
# Brand # Brand # Brand
1 Airbnb 19 Intercom 37 Resend
2 Airtable 20 Kraken 38 Revolut
3 Apple 21 Linear 39 RunwayML
4 BMW 22 Lovable 40 Sanity
5 Cal 23 MiniMax 41 Sentry
6 Claude 24 Mintlify 42 SpaceX
7 Clay 25 Miro 43 Spotify
8 ClickHouse 26 Mistral 44 Stripe
9 Cohere 27 MongoDB 45 Supabase
10 Coinbase 28 Notion 46 Superhuman
11 Composio 29 NVIDIA 47 Together.ai
12 Cursor 30 Ollama 48 Uber
13 ElevenLabs 31 OpenCode 49 Vercel
14 Expo 32 Pinterest 50 VoltAgent
15 Figma 33 PostHog 51 Warp
16 Framer 34 Raycast 52 Webflow
17 HashiCorp 35 Replicate 53 Wise
18 IBM 36 RunwayML 54 x.ai / Zapier

Example — Stripe Compact Tokens:

{
  "primary_color": "#533afd",
  "background": "#ffffff",
  "text": "#061b31",
  "radius": "8px",
  "shadow": "0 8px 24px rgba(50,50,93,0.25)",
  "font_family": "sohne-var, SourceCodePro"
}

Example — Vercel Design Characteristics:

  • Geist Sans / Mono fonts with extreme negative letter-spacing
  • Shadow-as-border technique (using box-shadow instead of border)
  • Near-pure white canvas #ffffff + deep black text #171717
  • Workflow colors: Ship Red #ff5b4f, Preview Pink #de1d8d, Develop Blue #0a72ef

AI Smart Style Selection Engine

ClawCode's most distinctive aesthetic feature is its AI-driven UI style auto-matching system. When you make a UI-related request, the system automatically selects the best-matching design style from the 54 brand catalogs.

Auto-Matching Pipeline

User Input Prompt
    │
    ▼
┌─────────────────────┐
│  UI Keyword Detection │ ← Recognizes "ui", "界面", "design", "theme", etc.
└─────────┬───────────┘
          │
          ▼
┌─────────────────────┐
│  TF-IDF Vectorization│ ← Converts user input into feature vectors
│  + Synonym Expansion  │ ← 28 synonym groups expand matching scope
└─────────┬───────────┘
          │
          ▼
┌─────────────────────┐
│  Multi-Dim Weighted  │ ← 5 dimensions scored independently
│  Scoring             │
└─────────┬───────────┘
          │
          ▼
┌─────────────────────┐
│  RRF Fusion Ranking  │ ← Reciprocal Rank Fusion combining keyword & semantic matching
└─────────┬───────────┘
          │
          ▼
┌─────────────────────┐
│  Anti-Pattern Check  │ ← Filters out non-compliant design proposals
└─────────┬───────────┘
          │
          ▼
   Recommended Brand Style

TF-IDF + Synonym Expansion

The system uses TF-IDF (Term Frequency-Inverse Document Frequency) to vectorize user input for matching, and expands the matching scope through 28 synonym groups. Examples:

Synonym Group Covered Terms
Dashboard dashboard, admin_panel, control_panel, 管理后台, 管理面板
Landing Page landing_page, product_landing, 落地页, 首页, 主页
E-commerce ecommerce, shopping, 商城, 电商, shop, store
Fintech fintech, 金融, finance, banking, 银行, 支付
Minimal minimal, minimalist, 简洁, 极简, clean
Documentation docs, documentation, 文档, 文档站, 知识库

Multi-Dimension Weighted Scoring

The system scores each candidate brand independently across 5 dimensions:

Dimension Weight Description
fit_surfaces 2.0 Matching surface types (landing page, dashboard, blog, etc.)
fit_domains 1.6 Matching industry domains (fintech, e-commerce, dev tools, etc.)
tags 1.2 Tag matching (minimal engineering, technical premium, etc.)
tone_keywords 0.8 Tone keywords (professional, friendly, bold, etc.)
identity 0.4 Brand identity characteristics

The final ranking is produced by Reciprocal Rank Fusion (RRF), which merges two signal sources — keyword matching and TF-IDF cosine similarity — into a unified ranking.

CJK / Chinese Language Support

The system natively supports Chinese input matching through 4-gram extraction for CJK characters:

  • Direct recognition of Chinese keywords: 界面 (interface), 页面 (page), 主页 (homepage), 仪表盘 (dashboard), 组件 (component), 样式 (style), 布局 (layout), 主题 (theme), 颜色 (color), 字体 (font), 按钮 (button), 表单 (form), 导航 (navigation), 交互 (interaction), etc.
  • Synonym groups include Chinese-English cross-references: 电商 ↔ ecommerce, 金融 ↔ fintech, 极简 ↔ minimal

Anti-Pattern Guardian System

Style selection isn't just about "what looks good" — it's also about knowing "what to avoid." ClawCode includes an anti-pattern guardian system that actively detects and prevents bad design practices during style recommendation and code generation.

Global Anti-Patterns

The following anti-patterns apply to all brand styles:

Anti-Pattern Severity Fix Suggestion
Rainbow gradient headline Medium Use a single primary accent with neutral typographic hierarchy
Glassmorphism with heavy blur High Replace blur cards with subtle border-shadow cards
Excessive animation Medium Reduce the number of animations, keep it simple
Neon glow borders Medium Use softer borders or shadows instead
Multiple conflicting accent colors High Limit to one primary color + one semantic status color

Brand-Specific Anti-Patterns

Each brand also has its own anti-pattern rules:

Brand Anti-Patterns Fix Suggestion
Vercel Skeuomorphic textures, thick ornamental borders, emoji-heavy hero copy Use flat monochrome surfaces with concise technical copy
Linear Rounded cartoon cards, oversized marketing slogans, bright multi-color CTAs Use tighter radius and structured issue-tracking density
Airbnb Dark-only monochrome palette, dense enterprise dashboard grid Increase whitespace and use lifestyle-oriented visual hierarchy

HUD — Heads-Up Display

The HUD (Heads-Up Display) is ClawCode's bottom real-time status bar, inspired by aircraft cockpit instrument panels — delivering maximum contextual information in minimal visual space.

HUD Display Content

Section Information
Model Currently active LLM model name (e.g., claude-sonnet-4-20250514)
Running Tools Tool name and target file currently executing (with spinner animation)
Tool Done Names of completed tools (marked with done-color)
Agent Type Currently active Agent role (e.g., architect, implementer, etc.)
TODO Progress Task list completion progress (●●●○○ style)
Context Window Current token usage

HUD Color Configuration

Each HUD information section has independent color configuration, determined by the current display mode's DisplayModeChromeStyle:

Element Purpose
hud_model_color Model name color
hud_tool_running_color Pulse animation color for running tools
hud_tool_name_color Tool name color
hud_tool_done_color Completion marker color for finished tools
hud_agent_type_color Agent type label color
hud_todo_bullet_color TODO bullet dot color

Welcome Panel & Claw Mascot

Every time you open a new blank session, ClawCode presents a carefully crafted welcome panel.

Visual Composition

┌─────────────────────────────────────────────────┐
│                                                   │
│  Welcome to ClawCode — your AI coding cockpit    │
│  Model: claude-sonnet-4-20250514                  │
│  Workspace: ~/my-project                          │
│                                                   │
│  ┌─────────────────┐  ┌─────────────────────┐    │
│  │ 💡 Tips          │  │ 📋 Recent Activity   │    │
│  │ • Use /help      │  │ • Fix auth bug       │    │
│  │ • Ctrl+K commands│  │ • Refactor API       │    │
│  │ • Ctrl+T theme   │  │ • Add tests          │    │
│  └─────────────────┘  └─────────────────────┘    │
│                                                   │
└─────────────────────────────────────────────────┘

Welcome panel highlights:

  • Claw Pixel Mascot — ASCII pixel art rendered using Rich Text + bgcolor fills
  • Brand Information — Version number, current model, workspace path
  • Two-Column Layout — Tips on the left + Recent activity on the right (Rich Columns component)
  • Adaptive Coloring — Panel border, accent, and muted colors all follow the current display mode

Keyboard Shortcuts Quick Reference

Below are the ClawCode shortcuts related to aesthetic design:

Shortcut Function Description
Ctrl + T Cycle theme Switches to the next theme in preset order
Ctrl + Shift + T Open theme selector Opens the full theme list panel
Ctrl + D Switch display mode Opens the display mode selection dialog
Ctrl + K Command palette Search and execute any command
Ctrl + M Toggle mouse mode Enable/disable mouse interaction (affects hover effects)
Ctrl + H / F1 Help panel View the full keyboard shortcuts list
Ctrl + Q Quit Exit ClawCode

Configuration & Persistence

ClawCode automatically saves your UI preferences and restores them on the next launch.

Preference Storage Location

~/.config/clawcode/.clawcode_ui.json

Saved Settings

Setting Description
Current theme e.g., tokyonight, dracula
Current display mode e.g., opencode, zen
Right panel width Width after drag-resize

Manual Style Locking

Beyond AI auto-selection, you can manually lock a brand style:

  • Manual Lock — Explicitly specify which brand's design language to use
  • Auto Pick — Let AI match automatically based on context
  • Hybrid — AI suggests a candidate list; you pick from it

Design Team Workflow

ClawCode isn't just a tool — it includes a built-in virtual design team. Through the /designteam command, you can launch an AI design team composed of 6 specialized design roles:

Role Responsibility
Experience Design Expert Overall UX strategy and evaluation
Interaction Designer Interaction patterns and user flow design
UI Designer Interface layout, component hierarchy and density
Product Designer Aligning product functionality with design objectives
Visual/Ops Designer Visual execution and operational material design
User Researcher User needs research and usability testing

Each design team role has its own YAML configuration file (located in .claw/design/designteam/), defining the role's domain expertise, working methods, and delivery standards. This multi-role collaboration ensures comprehensive and professional design solutions.

Architecture Overview

From a technical perspective, ClawCode's aesthetic design system consists of three layers:

┌────────────────────────────────────────────────────────────────┐
│                     User Interaction Layer                      │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐       │
│  │  Theme    │  │  Mode    │  │  Brand   │  │ Shortcut │       │
│  │  Switch   │  │  Switch  │  │  Select  │  │ Actions  │       │
│  └────┬─────┘  └────┬─────┘  └────┬─────┘  └────┬─────┘       │
│       │             │             │              │              │
├───────┴─────────────┴─────────────┴──────────────┴──────────────┤
│                      Style Engine Layer                          │
│  ┌──────────────────┐  ┌──────────────────────────────────┐    │
│  │  Theme Engine     │  │  Display Mode Engine             │    │
│  │  8 themes ×       │  │  6 modes ×                       │    │
│  │  11 color tokens  │  │  (65+ chrome + chat style slots) │    │
│  └──────────────────┘  └──────────────────────────────────┘    │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │  AI Style Engine                                         │  │
│  │  TF-IDF + Synonym + RRF + Anti-Pattern + Session Memory  │  │
│  └──────────────────────────────────────────────────────────┘  │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│                       Resource Layer                             │
│  ┌──────────────────┐  ┌──────────────────────────────────┐    │
│  │ .tcss Stylesheets │  │ 54 Brand Design Catalogs         │    │
│  │ (Textual CSS)     │  │ (.claw/design/UI/*)              │    │
│  └──────────────────┘  └──────────────────────────────────┘    │
│  ┌──────────────────┐  ┌──────────────────────────────────┐    │
│  │ Rich Rendering    │  │ Anti-Pattern Rule Library         │    │
│  │ (Markdown/Syntax) │  │ (anti_patterns.json)             │    │
│  └──────────────────┘  └──────────────────────────────────┘    │
└─────────────────────────────────────────────────────────────────┘

Core Dual Rendering Engine:

  1. Textual (Widget Layer) — Manages screen layout, keyboard events, focus management, mouse interactions, and CSS styling. Uses .tcss files for structural styles.
  2. Rich (Content Layer) — Handles all in-widget content rendering. Widget render() methods return Rich RenderableType objects, including Markdown, Syntax, Panel, Text, and more.

This layered architecture ensures decoupling of layout logic from content rendering, allowing themes and modes to be switched independently of content.

ClawCode — Creative Engineering Cockpit for Serious AI Builders

Experience engineering aesthetics in the terminal.

Clone this wiki locally