Primary mark
open ↗Body in currentColor, accent in Axiom Violet. Default — works on any surface.
Loading brand kit…
Brand kit · v2 · codingassist.bot
Every brand format,
production-ready.
Seven marks · six wordmarks · four favicons · four social formats · five animated SVGs · five React components · two CLI banners. All vector, all theme-aware, all served from /brand/v2/.
Live · React components
Animations in motion
These five components ship under components/brand/. They respect prefers-reduced-motion automatically.
<Spinner />loading<ScanLine />review in progresslive
<HeartbeatDot />live status3 s video / hero intro
codingassist.bot
Evidence · not faith
Identity
Marks
Monochrome
open ↗Single colour. Watermarks, merch, embossing, screen-print.
On dark surface
open ↗Hard-coded #F5F5F7 / #A78BFA. Use when ambient currentColor is unreliable.
On light surface
open ↗Hard-coded #0A0A0B / #7C3AED. Deeper purple for AAA contrast on white.
On accent surface
open ↗All white. For violet/coloured backgrounds and stickers.
Solid silhouette
open ↗Filled head, knocked-out eyes. Use over photographs or busy backgrounds.
Favicon-optimised
open ↗No antenna or ears (too thin at 16px). Bigger eyes, thicker mouth.
Identity
Wordmarks
Primary lockup
open ↗Mark + coding (current) + assist (accent) + .bot pill. Use everywhere.
On dark — hard-coded
open ↗Fixed colours. Best for OG, social, video frames.
On light — hard-coded
open ↗Fixed colours. Best for print, light templates, partner sites.
Single colour
open ↗Outlined .bot pill — cohesive on grayscale prints.
Compact (no pill)
open ↗For tight nav contexts (< 220 px wide).
Stacked
open ↗Mark above, wordmark below. Square contexts: cards, badges.
Browsers & OS
Favicons
favicon.svg
open ↗32×32 with rounded-square background. Dark-system default.
favicon-light.svg
open ↗Light-system variant. Wire via `<link media='(prefers-color-scheme:light)'>`.
apple-touch-icon
open ↗180×180 with ambient halo. iOS adds its own rounded mask.
safari-pinned.svg
open ↗Single-colour mask. Safari colours it via `<meta name='theme-color'>`.
Distribution
Social formats
OG card · 1200 × 630
open ↗Default Open Graph share. Mark + wordmark + tagline + live dot.
X / Twitter · 1200 × 600
open ↗Slightly squarer crop. Same brand DNA, fewer side elements.
GitHub avatar · 400 × 400
open ↗Square with rounded corners. GitHub applies its own avatar mask.
Slack / Discord · 256 × 256
open ↗Circle-safe — extra padding so the mark survives chat-app cropping.
Distribution
Animated SVGs
Self-contained SVGs with embedded CSS animations. Drop into <img src="…" /> and they animate without JS. Use the React components above when you need motion that responds to props.
Loading spinner
open ↗Antenna pulses, eyes scan, mouth blinks. Heavy-page loading.
Scan / review
open ↗Sweep line + eye drift. Use for 'review in progress' states.
Live heartbeat
open ↗Pulsing dot for status pages and live indicators.
Wink
open ↗Subtle right-eye blink every ~7 s. Hero microinteraction.
Assemble
open ↗Mark draws itself piece by piece. Video intro, splash.
System
Colour tokens
Axiom Violet
#A78BFAPrimary accent · .bot pill · right eye
Axiom Deep
#7C3AEDOn-light accent · hover state
Off-black
#0A0A0BBody surface (dark)
Off-white
#F5F5F7Body text (dark) · mark body
Live Green
#34D399Heartbeat / success
Signal Coral
#F87171Errors only
Hairline
rgba(255,255,255,.08)Borders on dark
Hairline·light
rgba(0,0,0,.08)Borders on light
Inline mark
<BotMark /> as a primitive
Pure server component — no JS. Inherits currentColor from its parent. Three variants: color (default), mono, solid.
variant="color"adopts currentColor + violet accentvariant="mono"single tonevariant="solid"filled silhouetteTerminal
CLI banner
Use printBanner() from @/lib/brand/cli on CLI startup. Respects NO_COLOR + FORCE_COLOR.
● │ ┌───┴───┐ ──┤ ● ● ├── │ ───── │ └─────────┘ codingassist .bot v1.4 ───────────────────────────── Deterministic code review · evidence, not faith
Rules
Do · Don't
Do
- Always leave at least 0.5× the mark's height as clear space around the lockup.
- Use the on-dark or on-light variants for fixed-colour exports (OG, video, print).
- Pair the wordmark with `.bot` whenever the brand introduces itself the first time on a surface.
- Use the heartbeat dot only when something is actually live or healthy.
Don't
- Don't rotate, skew, or shear the mark.
- Don't recolour the right eye / antenna dot — those are the brand signature.
- Don't put the wordmark on a busy photo without the solid variant or a darkening overlay.
- Don't loop the assemble animation — it's a one-shot intro.