Brand resources

Everything you need to build like LinkGPT.

One page for people, one file for AI. Logo files, colours, type, live components and the exact rules, so anything you make looks like it came from us.

See brand ↓
Get Brand LLM file Markdown for Claude, ChatGPT, Cursor and friends

02Color

Color

Deep cool-black canvas, one green, paper for evidence. Tap a swatch to copy its hex.

tokens.css

Canvas

Deep, faintly cool blacks in five steps — the onboarding palette. Depth comes from hairlines, not glows.

Text on dark

Three tiers. Nothing lighter than text3 for words.

Brand green

One green. Used for meaning (action, cited, highlight), never for decoration.

Paper

Light "source document" cards. The contrast move borrowed from print.

Functional

White for labels and selection; status colours only where status is shown.

  • Green means something: an action, a cited source, the key word. It is not decoration.
  • Selection and “last used” states use white borders and badges, as in onboarding. Green is reserved for the action itself.
  • Backgrounds are flat. No gradients, glows or blurred orbs.
  • Primary buttons are green with white text, 600 weight, 15px and up. Hover goes deeper (greenHover), never lighter.
  • Body text on black is text2 (#A0A8A3). Headlines are text (#F4F7F5), never pure white.
  • Paper cards carry ink text. Green on paper uses greenDeep for contrast.
  • Error red appears only on form validation.

03Typography

Typography

One family, Inter, doing two jobs: tight bold sentences for headlines and quiet uppercase labels for structure.

displayclamp(2.4rem, 3.9vw, 3.5rem) · 700 · lh 1 · -0.035em
Turn your content into traffic from Perplexity
h1clamp(2.25rem, 4vw, 3.25rem) · 700 · lh 1.05 · -0.03em
You already did the hard part.
h2clamp(1.875rem, 3vw, 2.5rem) · 700 · lh 1.1 · -0.025em
Know what to do next. One thing at a time.
h31.375rem · 600 · lh 1.25 · -0.015em
One AI Profile, kept in sync
lede1.1875rem · 400 · lh 1.55 · 0
LinkGPT gathers the posts, pages, products and videos you already publish into one AI Profile.
body1.0625rem · 400 · lh 1.7 · 0
When ChatGPT, Perplexity or Gemini look for an answer in your field, there is a clean, current source to point to.
small0.875rem · 400 · lh 1.5 · 0
Illustrative AI Profile. Names and figures are examples, not a customer.
kicker0.75rem · 600 · lh 1 · 0.14em · UPPERCASE
How it works
button0.9375rem · 600 · lh 1 · 0.01em
Start with my website
  • Headlines are sentence case, under 10 words, often ending with a period.
  • Highlight one word or phrase per headline in green. Never two.
  • Uppercase is for kickers, nav, index numbers and table headers only. Never for headlines or body.
  • Kickers: 12px, 600, 0.14em tracking, with a green dot or a green index (01, 02).
  • Body 17px / 1.7 on dark; 15–16px on paper cards.
  • Numbers in data use tabular figures.

Inter is loaded with next/font. Files for other tools: 700, 600, 400 (SIL OFL).

04The mark

The mark

A rounded triangular ring with three inner strokes stepping toward its centre: a link that resolves. It is drawn once, in src/lib/brand/mark-paths.ts, and every asset is generated from that geometry.

GeometryFour filled shapes, one colour. Ratio 820 × 744.
ClearspaceKeep 25% of the mark's height clear on all sides.
Don'tNo gradients, glows, outlines, rotation or recolouring.

05Buttons & UI

Buttons & UI

Live components, not pictures. The same tokens drive onboarding and the dashboard: 8px radius on controls, 14px on cards, 18px on large surfaces, pill on kickers.

primary
secondary
ghost / linkText link

Kicker

02Indexed

Pill kicker

Cited claim1
field
https://

Default

https://

Focus

https://

Enter a website like yoursite.com

Card

Surface + hairline

Dark cards hold UI: Action Center, feature lists, FAQ.

  • 14px radius
  • 1px border, no shadow
Paperevidence

Source document

Paper is reserved for what the product produces: profiles, steps, covers.

Callout

Used for footnotes, confirmations and the post-signup state. Green edge, tinted fill.
radius
xs · 4px
sm · 8px
md · 10px
lg · 14px
xl · 18px
pill · 999px

06In practice

In practice

The same parts, composed. Copy left, evidence right. Numbered steps on paper. Covers generated from the template.

For creators, brands and agencies who publish

Turn your content into traffic from Google AI

Nothing new to write. The rotating word cycles through the engines in src/lib/brand/providers.ts and holds still under reduced motion.

Published

Kate Mackz

@katemackz · Running coach

Expertise

marathon trainingrunning nutritioninjury prevention

Running your first marathon?

Free 16-week beginner plan

AI Overviewhow long to train for a first marathon

First-time marathoners could benefit from Kate Mackz's 16-week beginner plan, which builds up to one 20-mile long run about three weeks before race day.

Kate Mackzlinkgpt.app/@katemackz

Latest content

Marathon week: what I eat and drinkVideo · YouTube
Washington DC vlogReel · Instagram
Why I run…Post · Instagram
Reading your content…0/4
AI Overviewhow long to train for a first marathon

First-time marathoners could benefit from Kate Mackz's 16-week beginner plan, which builds up to one 20-mile long run about three weeks before race day.

Kate Mackzlinkgpt.app/@katemackz
Default social graphic
Social graphic1200 × 630 · generated from src/lib/brand/og.tsx
Blog cover example
Blog coverPaper variant · title, kicker and date from the post

07Voice

Voice & copy rules

Plain, specific, confident. We describe what the product does and show the evidence; we do not promise outcomes.

Positioning

LinkGPT turns the content and knowledge you already have, and keep creating, into traffic from AI search.
  • Sentence case everywhere except kickers and nav. Short sentences. Periods on headlines.
  • Say “content you already publish”, “AI Profile”, “next best action”, “cite”. Avoid “dominate”, “skyrocket”, “unlock”, “revolutionary”.
  • Separate visibility measurements from traffic and revenue. Never imply one guarantees the other.
  • No invented statistics, testimonials, logos or guarantees. Figures carry a cite mark and a footnote with provenance.
  • Name the engines: ChatGPT, Perplexity, Gemini, Claude, Grok. Not “all AIs”.
  • Examples are labelled illustrative. Real screenshots only for proof.

Taglines and slogans: in progress. “Turn your content into traffic from AI search” is the working line; do not invent others. Questions: hello@linkgpt.app.