---
title: "Brand"
description: "Wordmark, color tokens, typography, and downloadable brand assets for Agent Community."
label: "Brand"
template: "feature"
projection: brand
metadataTitle: "Brand · Agent Community"
openGraphDescription: "Wordmark, color tokens, typography, and downloadable brand assets for Agent Community."
structuredData:
  - breadcrumb
---

# .agent community

Brand
  .agent community
  <span>
      The wordmark is .agent 
      <span className="font-display">community</span> — period in 
      <span className="font-mono text-dot">#E1261C</span>, 
      .agent in bold, 
      <span className="font-display">community</span> in regular. The dot is invariant.
    </span>
  <span>Full design system reference at [/design](/design).</span>

Preferred
  Primary logo.
  <span>The horizontal one-line logo is the preferred version. Use this wherever space allows.</span>
  

Alternative
  Stacked logo.
  <span>
      Use the stacked two-line version when horizontal space is limited — avatars, social profiles,
      or compact layouts.
    </span>
  

Logomark
  .agent only.
  <span>
      The standalone .agent logomark — use for favicons, app icons, social
      avatars, and other contexts where the full name doesn&apos;t fit.
    </span>
  

Color
  Palette.
  <span>
      Grayscale base, single signature color. Red is reserved exclusively for the 
      <span className="text-dot font-mono">.</span> period in the brand mark, the LIVE pulse dot,
      and input carets — never on button backgrounds. Values shown as light / dark.
    </span>
  

Typography
  Type.
  <div className="space-y-12 max-w-[64ch] min-w-0">
    Inter Tight · Display
      <span>Headlines &amp; the billboard</span>
      <span>Used for all headings. Weights 500, 600, 700. Tight tracking at large sizes.</span>
    Inter · Body
      <span>Body copy uses Inter at 16–20px. Long-form sections at the lg size for reading comfort.</span>
      <span>Default body, UI labels, secondary text. Weight 400.</span>
    JetBrains Mono · Technical
      <span>support.acme<span className="text-dot">.</span>agent ·  members</span>
      <span>Domains, code, eyebrows, timestamps, data captions. Tabular numerals enabled.</span>
  </div>

Guidelines
  Using our logo.
  <div className="max-w-[720px] min-w-0">
    Do
        <ul className="space-y-3 text-[15px] text-muted-strong leading-relaxed">
          <li>Use the logo on a clean, uncluttered background</li>
          <li>Maintain clear space around the logo</li>
          <li>Use the dark variant on dark backgrounds</li>
          <li>Download the SVG for print and high-res use</li>
        </ul>
      Don&apos;t
        <ul className="space-y-3 text-[15px] text-muted-strong leading-relaxed">
          <li>Stretch, skew, or rotate the logo</li>
          <li>Change the logo colors or add effects</li>
          <li>Place on busy backgrounds without contrast</li>
          <li>Use the logo to imply endorsement without permission</li>
        </ul>
    <div className="border-t border-hairline pt-8">
      <span>Questions about brand usage? Reach out at [hello@agentcommunity.org](mailto:hello@agentcommunity.org)</span>
    </div>
  </div>

## Brand records

### Logos

- label: Primary
  sublabel: White background
  theme: light
  svg: /logo/ac-horizontal-light.svg
  png: /logo/ac-horizontal-light.png
  alt: Agent Community logo — Primary, White background
- label: Primary
  sublabel: Transparent background
  theme: light
  svg: /logo/ac-horizontal-light-transparent.svg
  png: /logo/ac-horizontal-light-transparent.png
  alt: Agent Community logo — Primary, Transparent background
- label: Dark mode
  sublabel: Black background
  theme: dark
  svg: /logo/ac-horizontal-dark.svg
  png: /logo/ac-horizontal-dark.png
  alt: Agent Community logo — Dark mode, Black background
- label: Dark mode
  sublabel: Transparent background
  theme: dark
  svg: /logo/ac-horizontal-dark-transparent.svg
  png: /logo/ac-horizontal-dark-transparent.png
  alt: Agent Community logo — Dark mode, Transparent background
- label: Stacked
  sublabel: White background
  theme: light
  svg: /logo/ac-stacked-light.svg
  png: /logo/ac-stacked-light.png
  alt: Agent Community logo — Stacked, White background
- label: Stacked
  sublabel: Transparent background
  theme: light
  svg: /logo/ac-stacked-light-transparent.svg
  png: /logo/ac-stacked-light-transparent.png
  alt: Agent Community logo — Stacked, Transparent background
- label: Stacked dark
  sublabel: Black background
  theme: dark
  svg: /logo/ac-stacked-dark.svg
  png: /logo/ac-stacked-dark.png
  alt: Agent Community logo — Stacked dark, Black background
- label: Stacked dark
  sublabel: Transparent background
  theme: dark
  svg: /logo/ac-stacked-dark-transparent.svg
  png: /logo/ac-stacked-dark-transparent.png
  alt: Agent Community logo — Stacked dark, Transparent background
- label: Logomark
  sublabel: White background
  theme: light
  svg: /logo/ac-logomark-light.svg
  png: /logo/ac-logomark-light.png
  alt: Agent Community logo — Logomark, White background
- label: Logomark
  sublabel: Transparent background
  theme: light
  svg: /logo/ac-logomark-light-transparent.svg
  png: /logo/ac-logomark-light-transparent.png
  alt: Agent Community logo — Logomark, Transparent background
- label: Logomark dark
  sublabel: Black background
  theme: dark
  svg: /logo/ac-logomark-dark.svg
  png: /logo/ac-logomark-dark.png
  alt: Agent Community logo — Logomark dark, Black background
- label: Logomark dark
  sublabel: Transparent background
  theme: dark
  svg: /logo/ac-logomark-dark-transparent.svg
  png: /logo/ac-logomark-dark-transparent.png
  alt: Agent Community logo — Logomark dark, Transparent background

### Colors

- token: --bg
  hex: #ffffff / #0a0a0a
  label: Background
  group: surface
- token: --surface
  hex: #f5f5f5 / #1a1a1a
  label: Surface
  group: surface
- token: --fg
  hex: #111111 / #f5f5f5
  label: Foreground
  group: text
- token: --fg-soft
  hex: #222222 / #e5e5e5
  label: Foreground soft
  group: text
- token: --muted-strong
  hex: #525252 / #c4c4c4
  label: Muted strong
  group: text
- token: --muted
  hex: #737373 / #7a7a7a
  label: Muted
  group: text
- token: --hairline
  hex: #e5e5e5 / #2a2a2a
  label: Hairline
  group: lines
- token: --hairline-strong
  hex: #d4d4d4 / #3a3a3a
  label: Hairline strong
  group: lines
- token: --dot
  hex: #e1261c / #f23a2f
  label: Red dot
  group: signature
- token: --dot-strong
  hex: #c41e15 / #ff4a3e
  label: Red dot strong
  group: signature
- token: --error
  hex: #dc2626 / #ef4444
  label: Error
  group: semantic
- token: --warn
  hex: #d97706 / #f59e0b
  label: Warn
  group: semantic

### Typography

- spec: display
  value: font-display text-5xl font-bold tracking-[-0.03em] text-fg leading-tight
- spec: body
  value: font-sans text-xl text-fg leading-relaxed
- spec: technical
  value: font-mono text-lg text-fg