CortexBuild — Brand Guidelines¶
Version 1.0 · Brand foundation for GitHub issue #93 Single source of design tokens:
website/assets/css/tokens.css
These guidelines define how CortexBuild looks, sounds, and feels across every surface — website, product UI, documentation, decks, and social. They are written to be handed directly to an external designer or agency. When in doubt, prefer calm, confident, and precise over loud or hype-driven.
1. Brand Story & Positioning¶
One-liner¶
A team of AI agents that lives in your repo, works through your backlog, and modernises your legacy code.
Elevator pitch¶
CortexBuild is a team of AI agents that lives inside your repository. It works through your backlog, modernises legacy code, and ships changes the way a disciplined engineering team would — with user-controlled approval gates at every step. You bring your own LLM keys, so your code and your spend stay under your control. Generic enterprise best practices are baked in from day one, so the output is reviewable, auditable, and safe to merge. It is built for technical and non-technical leaders who want to adopt AI without handing over the keys to their codebase.
Mission¶
To let every organisation modernise and extend its software with AI it can actually trust — transparent, governed, and owned by the customer.
What we stand for¶
- Owned, not outsourced. Your repo, your keys, your approval gates.
- Governed by default. Enterprise best practices and audit trails are not add-ons.
- Calm competence. We replace anxiety about AI with control and clarity.
Positioning statement¶
For engineering and business leaders adopting AI, CortexBuild is an in-repo team of AI agents that modernises legacy code and clears the backlog under full human control — unlike opaque, hosted "autopilot" tools, it runs on your own LLM keys with approval gates and enterprise guardrails baked in.
2. Logo¶
The logo is the cortex mark — a rounded hexagon containing an abstract neural/circuit motif: interconnected nodes forming a stylised "C" with a central hub. It signals intelligence (neural), engineering (circuit/nodes), and stability (the contained hexagon). It is geometric, crisp, and legible down to 16px.
Lockups & assets¶
| Asset | File | Use |
|---|---|---|
| Mark (gradient) | website/assets/brand/logo-mark.svg |
Primary mark on dark or neutral surfaces |
| Mark (mono) | website/assets/brand/logo-mark-mono.svg |
Single-color, recolour via color / currentColor |
| Horizontal (dark bg) | website/assets/brand/logo-horizontal.svg |
Lockup on dark backgrounds (light wordmark) |
| Horizontal (light bg) | website/assets/brand/logo-horizontal-light.svg |
Lockup on light backgrounds (ink wordmark) |
| Favicon | website/assets/brand/favicon.svg |
Browser tab / 16–32px contexts |
Which lockup on which background¶
- Dark / ink surfaces (
--ink-900–--ink-700): uselogo-horizontal.svgor the gradientlogo-mark.svg. - Light surfaces (
--n-50–--n-200, white): uselogo-horizontal-light.svg. The mark keeps its gradient; only the wordmark switches to ink. - Monochrome / single-color print, embossing, watermarks, or when placed over
busy imagery: use
logo-mark-mono.svg(setcolor: var(--primary-600)on light,color: #FFFFFFon dark).
Clear space¶
Maintain clear space on all sides equal to the height of one node in the mark (≈ 25% of the mark height, or the cap-height of the "C" loop). Nothing — text, imagery, or edges — may intrude into this zone.
Minimum sizes¶
- Mark alone: 16px (favicon-grade simplified mark below 24px — use
favicon.svg). - Horizontal lockup: 120px wide minimum so the wordmark stays legible.
Wordmark¶
"CortexBuild" is set in Inter 700, letter-spacing -0.02em. Two approved
treatments:
1. Two-tone: "Cortex" in ink/white + "Build" in primary (--primary-400 on
dark, --primary-600 on light). (Used in the horizontal lockups.)
2. Single ink color beside the colored mark.
Logo do / don't¶
Do - Keep the mark's gradient orientation 135° (top-left → bottom-right). - Place the gradient mark on solid ink or neutral surfaces for maximum contrast. - Use the mono mark when one color is required.
Don't - ❌ Recolor the gradient or swap in unapproved colors. - ❌ Stretch, shear, rotate, or add drop shadows/bevels to the mark. - ❌ Re-letter the wordmark in a different typeface or weight. - ❌ Place the gradient mark on a low-contrast or busy photographic background — use the mono mark instead. - ❌ Box the logo or alter the clear space.
3. Color Palette¶
The system is anchored by ink (dark surfaces), a primary indigo-violet, and an electric cyan accent, balanced by a full neutral ramp. The signature gradient is reserved for the mark and rare hero moments.
Ink (dark surfaces / backgrounds)¶
| Swatch | Hex | CSS var | Usage |
|---|---|---|---|
| ◼ | #0B0E14 |
--ink-900 |
Primary dark background / page base |
| ◼ | #11151F |
--ink-800 |
Raised dark surface / cards |
| ◼ | #1A2030 |
--ink-700 |
Borders, dividers, hover on dark |
Primary (indigo-violet)¶
| Swatch | Hex | CSS var | Usage |
|---|---|---|---|
| ◼ | #8B7CF0 |
--primary-400 |
Primary text/links on dark, "Build" wordmark on dark |
| ◼ | #6C5CE7 |
--primary-500 |
Brand core, gradient start |
| ◼ | #5A4BD6 |
--primary-600 |
Buttons, primary actions on light, mono mark on light |
| ◼ | #4838B8 |
--primary-700 |
Pressed/active states, deep accents |
Accent (electric cyan)¶
| Swatch | Hex | CSS var | Usage |
|---|---|---|---|
| ◼ | #22D3EE |
--accent-400 |
Highlights, glow, gradient end |
| ◼ | #06B6D4 |
--accent-500 |
Secondary actions, data viz |
| ◼ | #0891B2 |
--accent-600 |
Accent text on light, hover |
Neutrals¶
| Swatch | Hex | CSS var | Usage |
|---|---|---|---|
| ◻ | #F8FAFC |
--n-50 |
Page background (light), text on dark |
| ◻ | #F1F5F9 |
--n-100 |
Subtle surfaces (light) |
| ◻ | #E2E8F0 |
--n-200 |
Borders / dividers (light) |
| ◻ | #CBD5E1 |
--n-300 |
Disabled, faint UI |
| ◻ | #94A3B8 |
--n-400 |
Muted text on dark, placeholders |
| ◻ | #64748B |
--n-500 |
Secondary text (light) |
| ◼ | #475569 |
--n-600 |
Body text (light, secondary) |
| ◼ | #334155 |
--n-700 |
Body text (light) |
| ◼ | #1E293B |
--n-800 |
Headings (light) |
| ◼ | #0F172A |
--n-900 |
Max-contrast headings (light) |
Semantic¶
| Swatch | Hex | CSS var | Usage |
|---|---|---|---|
| ◼ | #22C55E |
--success |
Success, passing gates, approvals |
| ◼ | #F59E0B |
--warning |
Warnings, pending review |
| ◼ | #EF4444 |
--danger |
Errors, blocked, destructive actions |
Signature gradient¶
linear-gradient(135deg, #6C5CE7 0%, #22D3EE 100%) → CSS var --gradient-signature.
Reserve for the logo mark, hero accents, and key CTAs. Do not use as a
text-background behind body copy or as a full-page wash.
4. Typography¶
Families¶
- Display, headings & body:
Inter, falling back to-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif(--font-sans). - Monospace (code & agent output):
JetBrains Mono, falling back toui-monospace, SFMono-Regular, Menlo, Consolas, monospace(--font-mono).
Type scale¶
| Token | Size (rem) | px | Typical use |
|---|---|---|---|
--fs-xs |
0.75 | 12 | Captions, labels, legal |
--fs-sm |
0.875 | 14 | Secondary text, metadata |
--fs-base |
1 | 16 | Body copy (base) |
--fs-md |
1.125 | 18 | Lead body, large UI |
--fs-lg |
1.25 | 20 | Small headings, subheads |
--fs-xl |
1.5 | 24 | H4 |
--fs-2xl |
1.875 | 30 | H3 |
--fs-3xl |
2.25 | 36 | H2 |
--fs-4xl |
3 | 48 | H1 |
--fs-5xl |
3.75 | 60 | Hero display |
Line height¶
- Body / UI:
1.5(--lh-body). - Display / headings:
1.1(--lh-display).
Weights¶
400 regular · 500 medium · 600 semibold · 700 bold · 800 extrabold.
- Body copy: 400 / 500.
- Headings: 600 / 700.
- Hero display & wordmark: 700 (wordmark) / 800 (rare display emphasis).
- Headings use letter-spacing -0.02em; body uses default tracking.
Usage notes¶
- Use mono (
--font-mono) for anything that represents code, file paths, terminal/agent output, diffs, or commit messages — it reinforces the "lives in your repo" story. - Avoid more than two type sizes in a single component.
5. Iconography & Illustration¶
- Geometry: built on the same vocabulary as the mark — rounded corners, ~2–2.4px strokes at 24px, nodes as small filled circles, connections as clean lines. Outline-first, two-tone where emphasis is needed.
- Grid: design icons on a 24×24 grid with a 2px safe margin; keep optical weight consistent across the set.
- Color: default to a single neutral or
--primary-600; use--accent-500sparingly for emphasis. Reserve the signature gradient for the brand mark, not generic icons. - Illustration: abstract circuit/neural networks, repository and node-graph metaphors, "agents working" as connected nodes. Calm palette on ink backgrounds with cyan/violet highlights. Avoid literal robots, anthropomorphic mascots, or stock-AI "glowing brain" clichés.
6. Motion¶
Motion is subtle and purposeful — it clarifies state and guides attention,
never decorates.
- Duration: 150–250ms for UI feedback; up to 400ms for larger transitions.
- Easing: standard ease-out for entrances (cubic-bezier(0.2, 0, 0, 1)),
ease-in-out for moves.
- Signature behaviours: gentle gradient shimmer on the mark/CTA; nodes that
connect sequentially when illustrating agents at work; soft glow
(--shadow-glow) on focus/active.
- Restraint: no bouncing, parallax overload, or autoplay motion that
competes with reading. Respect prefers-reduced-motion — disable non-essential
animation.
7. Voice & Tone¶
Confident, expert, trustworthy, modern, enterprise-grade, calm — never hypey. We speak like a senior engineer who has shipped to production for years: precise, plain, and reassuring. We sell control and quality, not magic.
Messaging pillars¶
- You stay in control. User-controlled approval gates at every step.
- Your keys, your code. BYO LLM keys — your data and spend never leave your hands.
- Enterprise best practices, baked in. Reviewable, auditable, safe to merge.
- It lives in your repo. Agents work where your code already is — through your real backlog.
- Modernise legacy without the rip-and-replace. Incremental, governed change.
Do / don't examples¶
Do — "CortexBuild works through your backlog and opens reviewable PRs you approve before anything merges." Don't — "CortexBuild magically fixes your entire codebase overnight — zero effort!"
Do — "Bring your own LLM keys. Your code and your spend stay yours." Don't — "Powered by next-gen AGI that thinks like a 10x engineer."
Do — "Every change passes the approval gates you define." Don't — "Fully autonomous — just sit back and let the robots ship."
Do — "Enterprise guardrails and audit trails come standard." Don't — "Move fast and break things with AI!"
Quick rules¶
- Prefer concrete verbs (works, reviews, modernises, approves) over hype adjectives.
- No exclamation-mark stacking, no "revolutionary/game-changing/mind-blowing".
- Address both technical and non-technical leaders — explain value without jargon walls.
- Sentence case for UI and most headings; reserve Title Case for proper nouns.
8. Accessibility¶
Target WCAG 2.1 AA for all text and UI.
Contrast guidance (AA = 4.5:1 normal text, 3:1 large/UI)¶
| Foreground | Background | Use | AA result |
|---|---|---|---|
--n-50 #F8FAFC |
--ink-900 #0B0E14 |
Body text on dark | ✅ AA (normal & large) |
--n-50 #F8FAFC |
--ink-800 #11151F |
Body text on raised dark | ✅ AA (normal & large) |
--n-400 #94A3B8 |
--ink-900 #0B0E14 |
Muted/secondary text on dark | ✅ AA (normal & large) |
--primary-400 #8B7CF0 |
--ink-900 #0B0E14 |
Links / "Build" on dark | ✅ AA (normal & large) |
--accent-400 #22D3EE |
--ink-900 #0B0E14 |
Accent text/icons on dark | ✅ AA (normal & large) |
--n-900 #0F172A |
--n-50 #F8FAFC |
Headings on light | ✅ AA (normal & large) |
--n-700 #334155 |
#FFFFFF |
Body text on white | ✅ AA (normal & large) |
--primary-600 #5A4BD6 |
#FFFFFF |
Primary button label / link on light | ✅ AA (normal & large) |
--accent-600 #0891B2 |
#FFFFFF |
Accent text on light | ✅ AA (normal & large) |
--primary-400 #8B7CF0 |
#FFFFFF |
Primary text on light | ⚠️ Large/UI only — not for body text |
--accent-400 #22D3EE |
#FFFFFF |
Cyan text on white | ❌ Fails — use --accent-600 for text on light |
--n-400 #94A3B8 |
#FFFFFF |
Muted text on white | ❌ Fails for body — use --n-500/--n-600 |
Practical rules¶
- Cyan on light: never use
--accent-400/--accent-500for text on white; switch to--accent-600. Cyan reads best as text on dark. - Primary on light: use
--primary-600/--primary-700for text and button labels;--primary-400is for dark backgrounds or large/non-text UI only. - Don't rely on color alone — pair semantic colors with an icon and text label (e.g. success ✓, warning !, error ✕).
- Maintain visible focus states (use
--shadow-glowor a--primary-500outline); never remove focus rings without a replacement. - Body text minimum 16px (
--fs-base); respect user zoom andprefers-reduced-motion.
9. Asset Index¶
| Asset | Path |
|---|---|
| Logo mark (gradient) | website/assets/brand/logo-mark.svg |
Logo mark (mono / currentColor) |
website/assets/brand/logo-mark-mono.svg |
| Horizontal lockup (dark backgrounds) | website/assets/brand/logo-horizontal.svg |
| Horizontal lockup (light backgrounds) | website/assets/brand/logo-horizontal-light.svg |
| Favicon | website/assets/brand/favicon.svg |
| Design tokens (CSS custom properties) | website/assets/css/tokens.css |
| Brand guidelines (this document) | docs/brand/BRAND_GUIDELINES.md |
CortexBuild brand foundation · v1.0 · Tokens are authoritative in
website/assets/css/tokens.css. Update tokens there first, then reflect changes
here.