The Agent Space mark is a geodesic sphere — a multi-point polyhedron whose vertices and edges form a three-dimensional mesh rendered with a teal-to-purple gradient. It references connectivity, agent networks, and distributed intelligence. The mark is always transparent — no background fill — and adapts to dark and light contexts through the text and surrounding surface. The wordmark uses Berkeley Mono in two weights.
| File | Use case | Background |
|---|---|---|
| logo-dark.svg | Full lockup with tagline — dark surfaces | Transparent mark, dark wordmark text |
| logo-light.svg | Full lockup with tagline — light surfaces | Transparent mark, light wordmark text |
| wordmark-dark.svg | Mark + wordmark, no tagline — dark bg | Transparent |
| wordmark-light.svg | Mark + wordmark, no tagline — light bg | Transparent |
| mark-icon.svg | Standalone mark, favicon, app icon — any bg | Fully transparent, gradient mark only |
| mark-icon-lg.svg | High-res standalone mark, OG images | Fully transparent, 96×96 |
| mark-icon-mono.svg | Single-color wireframe for overlays, embossing | Transparent, green (#2ea043) only |
| readme.svg | GitHub README, documentation headers | Transparent, 80×80 |
Always maintain clear space equal to the height of the mark on all sides. Never crowd the logo with other elements.
The palette is anchored in GitHub-dark aesthetics — deep navy backgrounds, precise border grays, and sharp accent colors. Green is the primary action color. Blue, purple, and teal are used for categorical meaning in features and tier differentiation.
| Use | Color | HEX | Context |
|---|---|---|---|
| Starter tier | ■ Green | #39d353 / #238636 | Starter pricing card, Starter CTA button, Starter badge |
| Professional tier | ■ Blue | #1f6feb / #388bfd | Professional card, Professional CTA, Professional badge |
| Agency tier | ■ Purple | #6e40c9 / #a371f7 | Agency card, Agency CTA, Agency badge |
| Success / active | ■ Teal green | #39d353 | Active status dots, task completion badges |
| Pending / waiting | ■ Blue | #388bfd | Awaiting approval badges, in-progress states |
Two typefaces are used throughout Agent Space. Berkeley Mono anchors the brand identity and all technical/code-adjacent elements. Inter handles all body text, UI, and long-form reading. The combination signals technical precision without sacrificing readability.
| Role | Size | Weight | Font | Usage |
|---|---|---|---|---|
| Hero H1 | 60px | 700 | Inter | Main page hero heading only |
| Section title | 32px | 600 | Inter | Major section headings |
| Card title | 15–16px | 600 | Inter | Service card headings, feature names |
| Body | 14–15px | 400 | Inter | Descriptions, paragraph text |
| Small body | 13px | 400 | Inter | Card descriptions, FAQ answers |
| Caption / meta | 12px | 400 | Inter | Secondary labels, sub-descriptions |
| Badge / tag | 11–12px | 400 | Berkeley Mono | Status badges, tier tags, code labels |
| Section label | 11px | 400 | Berkeley Mono | 01 / 02 section eyebrows, ALL CAPS, letter-spacing 1.5px |
| Nav brand | 14–15px | 700/400 | Berkeley Mono | Logo wordmark in navigation |
| Color | HEX | Usage |
|---|---|---|
| Primary text | #e6edf3 | Headings, key labels, active navigation items, card titles |
| Secondary text | #8d96a0 | Body descriptions, supporting copy, nav links |
| Tertiary text | #4d5460 | Subdued metadata, section labels, timestamps, dim wordmark suffix |
| Link / accent text | #388bfd | Inline links, "view all" links |
Spacing follows a base-8 scale. All major spacing increments are multiples of 8px. This creates consistent rhythm across the layout without needing to specify every possible value.
| Width | Usage |
|---|---|
| 1100px | Main content sections — services grid, pricing, agents |
| 820px | Hero section, chat demo, centered single-column content |
| 700px | FAQ, centered text sections |
| 580px | CTA box, email capture forms |
| 540–600px | Section descriptions (sec-desc) |
All components follow the flat, dark aesthetic. No drop shadows. No gradients on backgrounds. Borders define depth. Color communicates meaning.
Primary CTA always uses green (#238636). Secondary uses bg2 + border. Tier-specific CTAs use the tier color. Ghost uses transparent + border. All buttons: 6px border-radius, 13–15px Inter, font-weight 500.
All badges: Berkeley Mono, 11px, 20px border-radius (pill), low-opacity background of the accent color, matching border at 20–30% opacity. Never use solid fills for badges.
The 2px top accent bar is used on service cards and pricing cards to communicate tier/category. It appears at full opacity on hover, 0 opacity at rest — except pricing cards where it is always visible.
The site uses a subtle 40×40px grid texture on the page background — 1px lines in #30363d at 8–12% opacity, fixed position so it doesn't scroll. This adds depth without competing with content. Do not increase opacity above 15%.
Key panels (cover, CTA box) use a 2–3px top border with a left-to-right gradient through the three accent colors: teal green (#39d353) → blue (#388bfd) → purple (#a371f7). This gradient represents the three service tiers and adds visual interest at the top of important containers.
Agent Space is a professional tool for serious business owners. The voice is direct, capable, and matter-of-fact — never hype, never corporate jargon, never condescending. The product does real work. The copy reflects that.
| Context | Tone | Example |
|---|---|---|
| Marketing copy | Confident, direct, outcome-focused | "Your business runs while you sleep." |
| Pricing | Transparent, no-nonsense | "A one-time setup fee of $499. Then $499/month, flat." |
| Feature descriptions | Functional, specific | "Tracks tasks, catches stalled work, monitors deadlines." |
| FAQ | Direct answers, plain language | "None at all. You communicate with your assistant the same way you'd message a team member." |
| Error / edge case | Calm, helpful, no blame | "Something went wrong. Your assistant flagged this and is waiting for your input." |
| Assistant messages | Professional, brief, action-oriented | "Done. Invoices sent. I'll notify you when payments clear." |
| Rule | Rationale |
|---|---|
| No exclamation marks in marketing copy | They undermine the professional, confident tone. Confidence doesn't need to shout. |
| Use "assistant" not "AI" when referring to the named agent | "Your assistant Alex" feels personal. "Your AI Alex" feels clinical. |
| Always name the action in feature lists | "Tracks deadlines" not "Deadline management." Verbs over nouns. |
| Never use "seamless", "effortless", or "powerful" | Overused and meaningless. Describe the actual outcome instead. |
| Approval gates are always "you review and approve" | Keeps the human in control. Never say the system "automatically sends to clients." |
| Prices are always written as $X/mo not $X per month | Consistent with the UI and tab/badge style. |