The agent readiness platform

Brand
guidelines

01Brand essence 02Logo & mark 03Product naming 04Color, surfaces & accent 05Typography & type scale 06Spacing system 07Geometric constructions 08Pixel constellations 09Voice & tone 10Components 11Scan results 12The terminal 13Templates 14Motion 15Do's & don'ts 16Developer tokens
01

Brand essence

A precision instrument on a dark surface. Quiet until it speaks. When it speaks, it's specific.

01Dark by default−
Every surface is dark. There is no light mode. Color enters only when it carries meaning.
02Data is the design−
No illustrations. No stock photography. The scan output IS the visual. The score IS the hero.
03Mono as default voice−
The body font is monospace. Sans-serif appears only in headlines and long-form content.
04One system, every surface+
Landing page, dashboard, PDF report, email — all the same visual language.
FeelingInspiration
PromiseThe future is coming. You can be ready.
ArchetypeThe hacker tool that earns trust

The name Serge comes from a father who built a company from nothing. That energy — one person with the right tools — is in every decision.

03

Product naming

Consistent naming prevents "SERGE" leaking into press releases or "serge" showing up lowercase in partner decks.

ProductSerge
Free scannerSerge Scanner
MCP serviceSerge MCP
Logo / wordmarkSERGE — uppercase mono, logo only
In prose"Serge" — title case, body font
In code"serge" — lowercase
Domainserge.ai
CompanySuperstellar LLC

Boilerplate: Serge is the agent readiness platform. It scans your API and tells you exactly how visible and integrable your product is for AI agents — with specific scores and specific fixes.

04

Color, surfaces & accent

Built for long sessions, low fatigue, high data density.

Surfaces

Background
#0B0B0B
Surface 1
#0F0F0F
Surface 2
#141414
Surface 3
#1A1A1A
Surface 4
#222222

Surface map

Background
Page
Surface 1
Cards
Surface 2
Hover
Surface 3
Active
Surface 4
Modals

Text

Shell
#E7E6D9
Muted
#B9B8AE
Dim
#666666
Faint
#444444

The content / action principle

Shell — content

Headlines, body text, data, primary CTA, logo. "Read this. Do this first."

Signal Teal — action

Secondary CTA, active states, links, highlights. One teal element per viewport. It reads as a scanner signal: alive, precise, not decorative.

Every CTA decision: "Is this content (Shell) or action (Teal)?" If two teal buttons are visible simultaneously, one should be outline instead.

Semantic

Pass
#3DDC84
Fail
#F04438
Warning
#F5A623
Signal Teal
#00D4AA
Border#252525 — solid, 1px
Radius0px everywhere
Gaps1px seam
ShadowsNone. Ever.
05

Typography & type scale

Two fonts. Four named registers. DISPLAY is 700. HEADING is 500. The weight contrast separates the brand voice from the product voice.

DM Sans 700 — DISPLAY
Is your platform
agent ready?

Hero headlines only. 72–120px. -.05em tracking. The brand moment.

DM Sans 500 — HEADING
Color, surfaces & accent

Section titles, accordion titles, card headings. 24–64px. -.03em tracking.

Space Mono 400 — BODY / DATA
The default voice for everything.
DISCOVERY 17% · SCHEMA 22% · PROTOCOL 15%

BODY: 14–16px/1.6. DATA: 11–16px uppercase. Switches to DM Sans 300/16/1.75 for long-form only.

DISPLAYDM Sans 700 / 72–120px / -.05em / lh .95
HEADINGDM Sans 500 / 24–64px / -.03em / lh 1.1
BODYSpace Mono 400 / 14–16px / lh 1.6
DATASpace Mono 400–700 / 11–16px / uppercase
EyebrowDM Sans 300 italic / 18–22px
ButtonsSpace Mono 400 / 14px / uppercase / ls .7px
06

Spacing system

Base unit: 4px. Nine steps. No values outside this scale.

sp-1 · 4pxIcon gaps, badge padding
sp-2 · 8pxInline elements, swatch gaps
sp-3 · 16pxParagraph spacing, card gaps
sp-4 · 24pxHeading to content
sp-5 · 32pxCard padding, content blocks
sp-6 · 48pxBetween subsections
sp-7 · 64pxMajor content blocks
sp-8 · 80pxMobile section padding
sp-9 · 160pxDesktop section padding (standard)

Section padding varies by energy: 200px for atmospheric sections, 160px for standard, 120px for dense data. Documented as .s-atm, .s-std, .s-dense.

07

Geometric constructions

Thin-stroke figures. Circles, lines, intersections. Engineering diagrams. They give dark surfaces depth without competing with data.

01The formula−
Overlapping circles (same radius, centers 10–15px apart) crossed by a single line offset 15–30px from center. Circles in #252525. Lines in Shell at 15–25%. Optional dot at intersection.
02Parameters−
Radius 50–280px. 3–7 circles per cluster. 1px stroke. Vary across page. A connecting line between distant constructions creates continuity. Teal lines permitted at ≤15% opacity.
03Misuse — what this is not−
Not a loading spinner. Not a hover animation. Not an illustration. Not a wallpaper. Never animated. Never interactive. Never over text or data. Never filled or colored. If they draw attention, they're too prominent.
Stroke1px / #252525
Radius range50–280px
Center spacing10–15px
Section dividersUse as floating geo-div between sections
Max per page2–3 plus section dividers
AnimationNone. Static only.
08

Pixel constellations

Clusters of 4×4px squares in small formations. Behind product cards. Background layer only.

Dot size4×4px on 4px grid
Canvas315×315 SVG
Background dots#252525
Highlight dots#E7E6D9 at 40–60%
Clusters8–12 per canvas
09

Voice & tone

The senior engineer who wants you to succeed. Direct, specific, constructive.

Do

Is your platform agent ready?

Don't

Unlock the power of agent-ready APIs

Do

No llms.txt — add one so agents can read your product description

Don't

We detected that your llms.txt may be missing

Do

19 / 100

Don't

Your score is low

Numbers over adjectives"17%" not "low"
Active voice"Agents can't find you"
Fix includedEvery failure includes a fix
No emojiAnywhere. Ever.
$ serge scan yoursite.com
resolving ........................ 200 OK

LAYER 1: DISCOVERY
  /llms.txt ................. MISSING
  /.well-known/agents.json .. MISSING
  JSON-LD ................... FOUND

LAYER 2: SCHEMA
  /openapi.json ............. NOT FOUND
  schema coverage ........... 38%
yoursite.com
19/ 100
Discovery
17%
Schema
22%
Protocol
65%
Auth
locked
Behavior
locked
Pricing
locked
10

Components

Buttons

Shell = primary content action. Signal Teal = secondary. Outline = tertiary.

Get your score Talk to our team Learn more →

Badges

PASS 72% FAIL 17% PARTIAL 45%

Cards

01

Discovery

llms.txt, agent cards, structured data.

02

Schema

OpenAPI quality, typed schemas, rate limits.

03

Protocol

MCP servers, A2A cards, SDKs, webhooks.

Radius0px — everything
Primary CTAShell bg / Background text
Secondary CTASignal Teal bg / Background text
Button padding17px 36px
Card padding32px 32px 60px
Grid gaps1px seam
11

Scan results

The most-viewed screen. This is the brand for 90% of users.

Layer bars

01
Discovery
17%
02
Schema
22%
03
Protocol
65%

Check items

×
no llms.txt — add one so agents can read a machine-readable product description
✓
json-ld with Organization schema present
○
sitemap exists but does not reference /api or /developers
Layer bar track4px / Surface 3
Passing bar glowbox-shadow 0 0 12px teal at 30% + 0 0 4px at 50%
Check icon20×20px / semantic bg 8% + border 12%
Fail textShell — always includes fix
Pass/warn textMuted
12

The terminal

The scanner's signature moment. Deeper black (#050505) than the page.

$ serge scan yoursite.com
resolving ........................ 200 OK

LAYER 1: DISCOVERY
/llms.txt ................. MISSING
/.well-known/agents.json .. MISSING
JSON-LD ................... FOUND
[##..................] 17%
Background#050505
FontSpace Mono 400 / 11px / lh 1.9
Scanlines0.8% white / 2px
Border1px solid #252525
Radius0px
13

Templates

Surfaces where the brand appears outside serge.ai.

01Report email−
Background: #0B0B0B. Header: radar mark + wordmark, Shell. Body: Space Mono 14px. Score at DM Sans 700/48px in semantic color. Footer CTA: Signal Teal button → serge.ai/mcp. 600px max width.
02OG / social image−
1200×630px. #0B0B0B background. Domain top-left in DATA. Score large center-right in semantic color. Mark + wordmark bottom-left. Geometric construction bottom-right at 40%. Score min 48px for thumbnail readability.
03PDF report cover−
A4 dark. "Agent Readiness Report" in DISPLAY. Score at DM Sans 700/120px. Layer table below. Geometric construction spanning right 40%.
04Slack preview−
Uses OG image. Score number large enough to read at thumbnail. Domain visible. Mark visible.
Email width600px max
OG image1200×630px
PDFA4 / dark throughout
Score min in OG48px
14

Motion

Radar pulse3s ease infinite · 12%→28%
Terminal linesSequential · 100–400ms stagger
Score counter0→N · 1.2s · ease-out
Layer barsWidth 0→N% · 1s
Hover0.15s
Page transitionsNone

Forbidden: parallax, slide-from-below, bounce, elastic, loading spinners, skeleton screens, gradient animations, particles, scroll-triggered reveals.

15

Do's & don'ts

Do

  • Every surface #0B0B0B or darker
  • Shell for content, Signal Teal for actions (max 1 per viewport)
  • 0px radius on everything
  • 1px #252525 borders, 1px gaps
  • Monospace as the default body font
  • Varied section padding (200/160/120)
  • Use the 4px spacing scale only
  • Geometric constructions as section dividers
  • Fix-it suggestion with every failure
  • Write "Serge" in prose, "SERGE" in logo

Don't

  • Rounded corners on anything
  • Light mode or white backgrounds
  • Drop shadows, glows, or gradients
  • Illustrations, photos, or 3D renders
  • Emoji anywhere
  • Multiple teal elements visible at once
  • Animate geometric constructions
  • "AI" imagery (neural nets, sparkles)
  • Spacing values outside the scale
  • Pure white (#FFFFFF) anywhere
16

Developer tokens

/* Serge Brand Tokens — v7.0 */ :root { /* Surfaces */ --bg: #0B0B0B; /* page */ --s1: #0F0F0F; /* cards */ --s2: #141414; /* hover */ --s3: #1A1A1A; /* active */ --s4: #222222; /* modals */ --border: #252525; /* Text */ --shell: #E7E6D9; /* primary / content */ --muted: #B9B8AE; --dim: #666666; --faint: #444444; /* Semantic + accent */ --pass: #3DDC84; --fail: #F04438; --warn: #F5A623; --accent: #00D4AA; /* Signal Teal */ /* Terminal */ --term-bg: #050505; --term-green: #33FF33; --term-red: #FF4444; --term-amber: #FFAA00; /* Type: DISPLAY=700, HEADING=500 */ --sans: 'DM Sans', sans-serif; --mono: 'Space Mono', monospace; /* Spacing (4px base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 80px; --sp-9: 160px; --radius: 0px; }
Primary domainserge.ai
Scannerserge.ai
MCP serviceserge.ai/mcp
Brand guideserge.ai/brand
Docsserge.ai/docs
SERGE
Brand Guide v7.0 — March 2026
serge.ai · Zug, Switzerland