# LinkGPT Brand System — LLM Design File # Give this file to an AI (Claude, ChatGPT, Cursor etc.) so it designs and writes on-brand for LinkGPT. # Source of truth: linkgpt.app/brand · Tokens: src/lib/brand/tokens.ts · Last updated: September 2026 ## What LinkGPT is LinkGPT turns the content and knowledge people already have — and keep creating — into traffic from AI search. It gathers a publisher's posts, pages, products and videos into one public AI Profile (structured data + llms.txt + a backlink to their own site), keeps it in sync, reaches ChatGPT, Perplexity, Gemini, Claude and Grok, checks where the publisher is cited, and tells them the next best action (the Action Center). Two audiences: (1) creators & influencers, (2) brands, businesses and agencies. Today the live product is a Shopify app; non-Shopify websites are onboarded in waves. Design language: deep cool-black canvas (the onboarding palette), one green, hairline borders, paper-white "source document" cards for product evidence, Inter set tight, uppercase kickers with index numbers (01, 02, 03). Professional and quiet — closer to a research tool than a growth-hack landing page. The same tokens and components run the public site, onboarding and dashboard; onboarding is the reference for product UI (dark inset fields, white selection rings, plan card). ## Hard rules (read first) - NO INVENTED PROOF. Never write statistics, testimonials, customer names, logos, guarantees, prices or "X% more traffic" claims. The only approved figure is "Trusted by 200+ brands and creators" (collated from Shopify reviews and Trustpilot; carries a cite mark [2] and a footnote). Examples must be labelled "Illustrative". - SEPARATE visibility from traffic and revenue. "Cited by", "appears in", "visibility score" describe measurement. Never imply they guarantee sales. - TAGLINES ARE NOT FINALIZED. Working line: "Turn your content into traffic from AI search." Reuse approved page copy verbatim or write plain descriptive copy. Do not invent slogans. - Backgrounds are FLAT black or paper. No gradients, glows, blurred orbs, gradient text or coloured shadows. - Green means something (action, cited, highlighted key word). Never use it as wallpaper, and never highlight two phrases in one headline. - Mobile first (390 wide), semantic HTML, visible focus rings, and every animation has a prefers-reduced-motion fallback (the rotating provider word holds still on "ChatGPT"). - Name the engines: ChatGPT, Perplexity, Gemini, Claude, Grok. Not "all AIs". ## Color tokens (CSS var → hex → use) One palette, two vocabularies. `--c-*` is used by the public website; the app names (`--background`, `--card`, `--primary`, …) are used by onboarding, the dashboard and `src/components/ui/design-system.tsx`. Both are emitted on `:root` from `src/lib/brand/tokens.ts`. Never hard-code a hex. Canvas (flat) - --c-bg / --background #070807 Page background. Deep, faintly cool. - --c-surface-subtle / --surface-subtle #0B0D0C Inputs, plan cards, inset panels. - --c-surface / --card #101311 Cards, nav, dashboard panels, action bars. - --c-surface2 / --surface-raised #131714 Toggles, chips, table heads, secondary button fill. - --c-surface-hover / --surface-hover, --muted #191E1B Hover fill for rows and secondary buttons. - --surface-sidebar #090C0A App sidebar rail. - --c-border / --border #252B27 Hairlines and card borders. - --c-border-strong / --border-strong #363E39 Interactive borders. Text on dark - --c-text / --foreground #F4F7F5 Headlines and primary text (never pure white for words). - --c-text2 #A0A8A3 Marketing body copy. - --muted-foreground #939B96 Product UI secondary text (a step dimmer). - --c-text3 #6F7872 Captions, metadata; 13px and up only. Brand green - --c-green / --primary #10A37F THE brand colour: logo mark, primary button fill, links, the highlighted headline word, cite marks, step dots, kicker dots. - --c-green-hover / --primary-hover #0D8F6F Primary button hover (deeper, never lighter). - --c-green-deep #0B7A5F Pressed state; green text on paper. - --c-green-tint / --primary-muted rgba(16,163,127,.12) Callout fills, focus ring, "next" row. Paper (light evidence surfaces on the black canvas) - --c-paper #F6F5F0 Step cards, blog covers, print. - --c-paper2 #E9E7DF Paper card footers. - --c-ink #070807 Text on paper. - --c-ink2 #4B4C46 Secondary text on paper. - --c-ink3 #7A7B74 Captions on paper. - --c-paper-line #D6D4CB Hairlines on paper. Functional - --c-white / --primary-foreground #FFFFFF Primary button label, selection rings and "last used" badges, logo on dark. - --c-error / --destructive #EF4444 Errors and destructive actions. - --c-warning / --secondary #F59E0B Warnings / pending status (dashboard only). - --c-info / --accent #6D8CFF Informational chart accent (dashboard only). Retired (do not use): pink #EC4899, purple #8B5CF6, the emerald gradient #10A37F→#34D399, gradient text and gradient buttons. ## Typography - One family: Inter (next/font). Fallback: -apple-system, Segoe UI, sans-serif. - Product UI (dashboard, onboarding, /edit, /settings, profiles) sets font-size-adjust: 0.525 (--font-size-adjust), rendering Inter ~4% smaller than nominal. Marketing pages (.lg-marketing) render at nominal size. - display clamp(2.4rem,3.9vw,3.5rem) / 700 / lh 1.0 / -0.035em Hero only. - h1 clamp(2.25rem,4vw,3.25rem) / 700 / lh 1.05 / -0.03em - h2 clamp(1.875rem,3vw,2.5rem) / 700 / lh 1.1 / -0.025em - h3 1.375rem / 600 / lh 1.25 / -0.015em - lede 1.1875rem / 400 / lh 1.55 / colour text2 - body 1.0625rem / 400 / lh 1.7 / colour text2 (15–16px on paper cards) - small 0.875rem / 400 / colour text3 - kicker 0.75rem / 600 / UPPERCASE / 0.14em, with a green dot, a green index ("01") or a pill border. Kickers are the only uppercase text besides nav links, table headers and button-sized labels on paper bars. - button 0.9375rem / 600 / 0.01em, sentence case. - Headlines: sentence case, under ~10 words, often ending with a period. Exactly one green highlight word/phrase where it earns it, e.g. "Turn your content into traffic from " (the engine name rotates). - Emphasis inside body: 600 weight in --c-text. No italics for emphasis. - Data: tabular numerals. ## Logo assets (place these files; never retype or rebuild) The mark is a rounded triangular ring with three inner strokes that step inward toward its centre — a link that closes (ratio 820x744). The wordmark is "LinkGPT" in Inter Bold, -0.03em. Geometry source: src/lib/brand/mark-paths.ts. Files: /public/brand, listed with provenance in /brand/manifest.json. Logo (lockup) — SVG then PNG (2400px wide): - Green mark + white wordmark (default, on black): linkgpt-logo-white.svg/.png - Green mark + black wordmark (on white/paper): linkgpt-logo-black.svg/.png - All white (single colour on dark/green/photo): linkgpt-logo-mono-white.svg/.png - All black (single colour on light, print): linkgpt-logo-mono-black.svg/.png Note: the SVG lockups keep the wordmark as live text (provisional); PNGs are final. Outline the text before print. Mark — SVG then PNG (1024px): - Green (default on dark): linkgpt-mark-green.svg/.png - White (on dark/green): linkgpt-mark-white.svg/.png - Black (on light): linkgpt-mark-black.svg/.png Box logo (avatar / app icon / favicon, any background) — 1024px: - Black box + green mark (primary): linkgpt-box-logo.svg/.png (also src/app/icon.svg) - Green box + black mark (alternate): linkgpt-box-logo-green.svg/.png Rules: clearspace 25% of the mark height on all sides; minimum 20px mark / 90px lockup on screen; never stretch, rotate, outline, add effects or recolour outside these variants; never white on light or black on dark. ## Surfaces, radius, shadows - One radius scale everywhere (`--radius-*` / `--r-*`): xs 4px chips and badges; sm 8px controls (buttons, inputs, toggles); md 10px menus, toasts, small cards; lg 14px cards; xl 18px large surfaces; pill 999. - Content max-width 1200px (site) / --content-lg 80rem (app); prose 42rem; section padding clamp(4rem,8vw,6.5rem). - Dark cards: --card fill + 1px --border. Inset panels and inputs: --surface-subtle. No shadow on flat UI. - Paper cards: --c-paper fill, ink text, a top "bar" (uppercase label left, green identifier right, hairline below) and an optional paper2 footer. Shadow only here: 0 0 0 1px rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.55). - Focus ring: 2px --primary outline, 3px offset on buttons, links and tiles. Text fields are the exception: on focus they take a white border plus 0 0 0 3px rgba(255,255,255,.14), matching the white selection language. - Text selection (::selection): bright green #10A37F with white type, everywhere. - Selection / active / "last used": white border (--c-white) and white badge with ink text, as in onboarding. Not green. ## Buttons - Primary: fill #10A37F, label #FFFFFF, 600, 15–16px, 8px radius, height 48px, padding 0 20px. Hover #0D8F6F, active #0B7A5F + translateY(1px). Loading: label hidden, 18px spinner. (The label sits at 3.1:1 — keep it bold and 15px+, never thin or small.) - Secondary: --surface-raised (#131714) fill, 1px #363E39 border, text #F4F7F5; hover --surface-hover fill. Filled, never transparent — it may sit over scrolling content (onboarding action bar). - Ghost: #101311 fill, 1px #363E39 border (platform connectors, "Continue with…"). - On paper: #070807 fill, paper text. - Text link: green, underlined, 600, optional trailing arrow (→). - Never: gradient fills, glows, pill-shaped primary buttons, uppercase labels, thin weights. ## Plan card (pricing) Shared component `src/components/ui/PlanCard.tsx`, rendered identically on the onboarding paywall and /pricing: Monthly / "Yearly · Save 2 months" toggle → --surface-subtle card → price (2rem, tabular) with the five assistant marks stacked top-right → one-line description → check list (green checks) → full-width primary button. Data comes from `src/lib/brand/offer.ts` only. ## Signature patterns - Hero: copy left / evidence right. Pill kicker → display headline with the rotating engine word in green → lede → URL field ("https://" prefix + "Start with my website") → "or connect" hairline → ghost OAuth button → three green check items → trust row (avatars, "Trusted by 200+ brands and creators [1]", "Reaches ChatGPT · Perplexity · Gemini · Claude · Grok"). Right: the AI Profile paper card + caption "Illustrative AI Profile…". - Route line: 01 → 02 → 03 steps on paper cards under a hairline with dots; the active step's dot is green. Labels: "You bring / LinkGPT builds / AI can cite you". - Action Center card: dark card, bar "ACTION CENTER · NEXT BEST ACTION", rows numbered 1, 2, ✓; the next row has a green number, a tinted left edge, a "why" line and a primary button. - Cite mark: small green bordered superscript [1] after any figure; the footnote lives at the end of the page. - Section heads: indexed kicker ("01 / HOW IT WORKS") → h2 → lede, max 40rem. - FAQ: native
, hairline rows, green "+" that rotates to "×". - Social / blog cover: 1200x630 from src/lib/brand/og.tsx — logo top-left, kicker top-right, title bottom-left, green uppercase working line in the footer rule. Dark variant for site pages, paper variant for guides. ## Iconography & imagery - Icons: 1.5–2px stroke line icons (lucide-style) in currentColor, 16px in buttons. No filled emoji-style icons, no emoji in UI. - Product evidence: real screenshots (e.g. /public/images/ai-traffic) with a hairline border and 6px radius, captioned with source and date. Illustrative UI (AI Profile, Action Center) must be captioned as such. - Third-party marks (Shopify, ChatGPT…) appear only as names or their official glyphs, never recoloured. ## Accessibility - text2 on bg 8.6:1 (muted-foreground 7.0:1), text3 on bg 4.0:1 (13px+ captions only), green on bg 6.6:1, white on green 3.1:1 (large/bold labels only), ink2 on paper 8.1:1. - Every interactive element has a visible focus ring. Details/summary for FAQs; buttons are