Brand Guidelines · v1.0 · May 2026

The brand is the green dot.

Relay is the irreducibly human moment between AI’s automation and a builder’s confusion. The mark is calm. The voice is plain. The dot is the promise. This document codifies what the brand looks like, sounds like, and does not do, so that everyone who builds for Relay builds it the same way.

OwnerBrand · Relay TechnoForge, Inc.
StatusLiving document
AudienceDesign, Eng, Marketing, Sales, Partners
CadenceReviewed quarterly
01, Essence

What Relay actually is.

Read this once. Everything else in this document follows from it. If a design, a line of copy, or a feature decision contradicts the essence, it’s wrong, even if it looks great.

Promise

Build with AI. Ship with engineers.

One tap. One software engineer. One promise, a real person, by name and face, joins in seconds and stays through launch.

Position

Software-as-a-Service has a Service in it again.

Relay restores the human half of SaaS. Not a chatbot, not a forum, not a marketplace. A software engineer who stays from build to shipped to running.

Personality

Calm. Plain-spoken. Quietly confident.

We sound like a software engineer at a whiteboard, not a tech company at a launch event. No exclamation marks. No “revolutionize.” No emoji.

The one-line test
Would a software engineer say this out loud, with a straight face, to another engineer?
If yes, ship it. If not, rewrite it. This applies to headlines, button labels, error messages, sales decks, everything.
02, Mark

Wordmark + green dot.

The mark is a word and a dot. RELAY set in uppercase sans, tracked open, with a single perfect circle in Relay Green sitting one space after. The word is the company. The dot is the press. Together they are the entire system.

RELAY
Primary · CreamRELAY
Reverse · InkRELAY
Green block · sparinglyRELAY
Dot alone · favicon, app icon, badge
Do
Use the wordmark with a single dot, always at the baseline-period position.
Maintain clear space equal to the dot diameter on all sides.
Animate the dot with a subtle pulse only when it represents an active “press for a human” moment.
Use the dot alone (no word) for app icons, favicons, status indicators, and merchandise.
Don't
Don’t add a tagline lockup. The mark stands alone.
Don’t enclose the mark in a shape, badge, or container.
Don’t recolor the dot to anything other than Relay Green (or cream, on a green field).
Don’t animate the dot decoratively, it pulses to mean something, never to look interesting.
Don’t spell it “relay.green” in the mark. The URL is the URL; the brand is “Relay.”
03, Color

Cream and ink, with a single green.

The palette is two warm neutrals and one earned green. Green is reserved for the dot, for state changes the user caused (“Engineer joined”), and for the act of human contact. Never decorative. If you find yourself reaching for green, ask whether a human is involved.

Primary tokens
Cream
--cream
#F4F2EE
Default page background. Warm, paper-like. Sets the editorial tone of the brand.
Ink
--ink
#1A1814
Body text, primary buttons, dark sections. Almost-but-not-quite black, warm-tinted.
Moss
--green-bright
#4F6B3A
The brand. The dot. Human presence. Use sparingly, it is the only color that earns attention.
Deep Moss
--green-deep
#3F5C2E
Italic emphasis in serif headlines. Hyperlink color. Accessible on cream.
Surface + support
Paper
--paper
#F9F7F3
Card and tile surface. Half-step lighter than cream.
Cream-2
--cream-2
#ECE8E0
Alternate section background. Differentiating two-up splits.
Rule
--rule
#D8D2C5
Hairlines, dividers, card borders. Never as a fill.
Green Tint
--green-tint
#E6F4EA
Background for “baton pass” cards and successful-action notifications.
The 80/15/5 rule

On any given screen: 80% cream / paper as background, 15% ink as type and structure, 5% green as the moment of human contact. If your green creeps above 5%, you’re using it as decoration, not as meaning.

04, Typography

Serif for the promise.
Sans for the work.

Display and body in Source Serif 4, the editorial serif that mirrors anthropic.com’s house feel, calm, authoritative, no flourishes. UI and eyebrows in Inter, the neutral grotesque that sits quietly behind the type. Mono in JetBrains for code and numerical labels. Three families. Done.

Display
Source Serif 4 · 400 / italic
Clamp 32–56px
Build with AI.
Ship with engineers.
Heading 1
Source Serif 4 · 400
48px / -0.018em
Your engineer becomes your engineer.
Heading 2
Source Serif 4 · 400
32px / -0.014em
From build to shipped, with the same engineer.
Eyebrow
JetBrains Mono · 500
12px / 0.05em / UPPER
How it works · 06 frames
Body
Source Serif 4 · 400
17px / 1.65
Software is following the path coal once did: when a thing gets cheaper, we use a lot more of it. AI dev tools were supposed to reduce demand for engineers, instead they multiplied builders by an order of magnitude.
Caption
Inter · 400
14px / 1.55
Median time-to-human · 74 seconds in beta. Priority dispatch on Max plan targets 30 seconds.
Italic, with intent
Italics in Source Serif 4 are reserved for the human moment in a sentence. They mark the part where Relay is the answer.
Italics carry Deep Moss color (#3F5C2E) in headlines. Never in body copy.
Mono numerals
Use font-variant-numeric: tabular-nums on stat blocks so digits align column-to-column.
Eyebrows always lead with an em-dash and end with a section number: Pricing · 03
05, Voice

Plain words, fewer of them.

Imagine a software engineer explaining the product to a friend on a Sunday walk. That’s the register. Direct, slightly understated, occasionally dry. We never sell, we describe what is true. The product does the convincing.

, Yes
Build with AI. Ship with engineers.
, No
Revolutionize your workflow with the world’s first AI-native human assistance platform!
, Yes
Same engineer. Three legs. One relationship.
, No
End-to-end engineer continuity across the full development lifecycle.
, Yes
Your team is already building. Make sure it doesn’t break.
, No
Empower your enterprise with AI governance solutions for citizen developers.
Lexicon · use

builder · ship · pass the baton · same engineer · on demand · ready

Words that come from how the work actually feels. Specific, concrete, drawn from the user’s mouth.

Lexicon · avoid

solution · empower · revolutionize · seamless · world-class · cutting-edge

Boilerplate B2B vocabulary. If a competitor could say it, we don’t.

Punctuation

Em-dash, sparingly. No exclamation marks. Periods earn the line.

Sentences are short. Paragraphs are short. White space is part of the message.

06, Components

Five primitives. That’s the kit.

Buttons, the press-for-a-human button, the engineer card, the modality toggle, and the numbered tile. Everything else is composition. Resist adding a sixth.

Button · Ink (default)

Primary CTA in body sections. Pill, 40px tall.

Button · Green (the moment)

Reserved for the act of summoning a human.

Button · Ghost

Secondary action. Always paired with a primary.

Press-for-a-human (the hero CTA)

The single most important component. Used once per screen, max. Pulses on hover. Means something.

Engineer card
P
Priya R. · Stripe
Online · joined in 71s
07, Layout & Spacing

Air, then density. Never the reverse.

Every section starts with vast top-padding and an eyebrow. Content sits in a 1200px max-width container with 32px gutters. Headlines don’t fill the column, they wrap intentionally, around an idea.

Spacing scale (8pt base)
4--sp-1
8--sp-2
16--sp-4
24--sp-6
32--sp-8
48--sp-12
64--sp-16
96--sp-24
128--sp-32
Section rhythm

96 / 100 / 128

Sections breathe. Top padding is 100–128px. Anything tighter feels like marketing software, not editorial.

Containers

1200 / 820 / 32

1200px primary container. 820px narrow container for long-form prose. 32px gutter on both sides.

Radii

8 · 12 · 16 · 999

Cards: 12px. Hero panels: 16px. Buttons: full pill (999). Don’t mix radii within a composition.

08, Imagery & Motion

Faces, not illustrations.

When we show a human, we show a real one, first name, photo, expertise. We never use stock illustration, never use 3D abstract shapes, never use AI-generated faces. The product is humans; the brand should look like it.

Imagery rules

Documentary, not directed.

Engineer photos are square crops, ink-and-cream toned, with a green dot status bug at the bottom-right. Backgrounds neutral. No corporate-stock smiles.

Product UI is shown the way it actually looks, in real terminal windows, real chat threads, real code. Never “futuristic” mockups.

Motion principles

Pulse means presence. Everything else is still.

The dot pulses at 2s ease-in-out, ±20% scale. That motion is the brand. Reserve it for active “a human is here” states.

Transitions are 200ms, ease-out. Page changes are instant scroll-to-top. We don’t do parallax, we don’t do scroll-triggered reveals, we don’t do auto-playing video.

09, Naming & Architecture

What things are called, and what they aren’t.

A product’s vocabulary is part of its design. Get the words right once, and every team uses them the same way forever.

Concept
Say this
Not this
The brand name
Relay
relay.green, Relay.Green, ReLay, Relay AI
The promise
Build with AI. Ship with engineers.
A real engineer, in your AI build / The press for a person / From build to shipped
The CTA
Try Relay / Press for a human
Get started / Sign up / Request a demo
The user
Builder
Citizen developer / Vibe coder / Non-developer / Customer
The expert
Engineer (always by name)
Agent / Operator / Specialist / Consultant / Pro
The session
Session / Build moment
Ticket / Chat / Conversation / Inquiry
The handoff
Pass the baton (Leg 1 → 2 → 3)
Upsell / Conversion / Plan upgrade
The categories
Track (Claude track, Cursor track, Lovable track…)
Vertical / Practice / Channel / Pillar
The promise time
On demand
Instant / Real-time / Lightning-fast
10, Independence & posture

A new company. By design.

Relay is an independent company. We don’t lead with org charts, parent companies, or anyone’s logo but our own. The brand stands on the press, the engineer, the moment of relief.

What we say about ourselves

Independent

“Relay TechnoForge, Inc., independent.” That’s the full corporate line. Anything more belongs in legal, not on the page.

What we don’t do

No backers in the wordmark. No logos in the hero.

Investors and partners are mentioned where it’s honest to mention them, never as a credibility crutch in the marketing surface. The press and the engineer carry the brand.