Design System

Current truth

• This is the company-wide Ghost Team design resource: use it for slides, websites, product UI, docs, reports, sales assets, and other client-facing or public materials.
• The current visual language is the Ghost design system: PP Neue Montreal, soft off-white canvas, white cards, ghost-dark text, emerald/teal brand accents, thin neutral borders, restrained shadows, and functional Lucide icons.
• The best source snapshot today is the product repo marketing frontend: frontends/marketing/src/styles/legacy/colors-and-type.css, frontends/marketing/src/app/globals.css, frontends/marketing/tailwind.config.ts, frontends/marketing/src/components/ui/button.tsx, and the tracker components under frontends/marketing/src/components/tracker/.
• New Ghost Team surfaces should reuse the role tokens below rather than copying one-off marketing-page values. The marketing site has a few campaign-level display exceptions; product apps should stay quieter, denser, and more repeatable; slides and reports can borrow the larger display scale.
• Typeface: use PP Neue Montreal for almost everything. Loaded weights are 400, 500, and 700; map semibold to 500 where possible to avoid synthetic 600 rendering.
• Default structured UI should use 8px radii for controls/cards, 999px for pills, 1px borders, 0 1px 2px shadows for normal surfaces, and the larger 14-18px shells only for marketing, report, deck, or product-preview frames.
• Brand UI chrome wears Ghost green. Data series can use platform colors; do not let platform colors become the whole product palette.
• Icons are Lucide, sized 14-18px in navigation/buttons/labels and 19-24px in feature cards. Stroke is usually 1.75-2px. Use icons to clarify actions or object types, not as filler decoration.
• This brain page is the durable company-level design resource and should be refreshed from source when the frontend, deck style, or public brand direction changes materially.

Source files

• Product repo: vincentmcleese/discoverability-platform.
• Core tokens: frontends/marketing/src/styles/legacy/colors-and-type.css.
• Tailwind token bridge: frontends/marketing/src/app/globals.css and frontends/marketing/tailwind.config.ts.
• Buttons: frontends/marketing/src/components/ui/button.tsx plus legacy .btn rules in frontends/marketing/src/styles/legacy/home.css.
• Marketing chrome: frontends/marketing/src/components/marketing-chrome.tsx.
• Tracker components: frontends/marketing/src/components/tracker/*.
• Docs theme alignment: docs/src/styles/custom.css.

Token Roles

Role	Token	Value	Use
Font sans	--ad-font-sans / --font-sans	"PP Neue Montreal", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif	Slides, websites, product UI, marketing, docs
Font mono	--ad-font-mono / --font-mono	"SF Mono", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace	Numbers, receipts, evidence, code-like data
Canvas	--ad-color-canvas / --canvas	#f7f8f8	Page background
App canvas	--color-background	#f8faf9	Tailwind app background
Surface	--ad-color-surface / --surface	#ffffff	Cards, panels, inputs
Raised surface	--ad-color-surface-raised / --surface-raised	#fbfcfc	Secondary panels, menu hover, subtle fills
Ink	--ad-color-ink / --ink	#111417	Main text
Ghost dark	--color-ghost-dark	#101010	Tailwind main text and dark brand chrome
Text soft	--ad-color-ink-soft / --ink-soft	#48515a	Body/deck copy
Text muted	--ad-color-ink-muted / --ink-muted	#737b84	Metadata, helper copy
Tailwind muted	--color-ghost-muted	#6b7280	Tracker muted text
Faint text	--ad-color-ink-faint / --ink-faint	#a3a9af	Axis labels and low-emphasis UI
Border	--ad-color-line / --line	#e1e5e4	Marketing borders
Tailwind border	--color-ghost-border	#e5e7eb	Tracker/app borders
Strong border	--ad-color-line-strong / --line-strong	#cbd1d0	Secondary buttons, menus

Brand Colors

Token	Value	Use
--ad-color-brand-300 / --ghost-300	#7ce8bd	Light gradient start, highlights on dark
--ad-color-brand-400 / --ghost-400	#1bc88c	Primary accent, underline, focus, gradient
--ad-color-brand-500 / --ghost-500 / --color-primary	#14a070	Primary solid action, readable brand text
--ad-color-brand-600 / --ghost-600	#0e7a55	Hover/pressed accent, link text
--ad-color-brand-700 / --ghost-700	#07553d	Deep accent, borders, labels
--ad-gradient-brand	linear-gradient(135deg, #7ce8bd, #1bc88c)	Primary marketing buttons
--ad-gradient-brand-flat / --ghost-brand-gradient	linear-gradient(to right, #1BC88C, #14A070)	Docs/theme gradient, tracker accents
--ad-color-brand-glow / --ghost-glow	rgba(27, 200, 140, 0.22)	Glow/focus backgrounds

Data Colors

Token	Value	Use
--ad-color-data-blue / --blue	#5b78d6	Codex/plugins, generic blue data series
--ad-color-data-orange / --orange	#bf765c	Warm data accent
--ad-color-data-violet / --violet	#8c6fb8	Secondary data accent
--ad-color-data-yellow / --yellow	#d6a64a	Warning/attention data
--ad-color-danger / --red	#c55549	Errors, negative gaps
Claude platform	#DE7356	Tracker platform color only
ChatGPT platform	#74AA9C	Tracker platform color only
Codex platform	#5B78D6	Tracker platform color only

Typography

Use	Size	Weight	Line height	Notes
Campaign hero H1	clamp(46px, 6.4vw, 92px)	500	.96	Homepage-scale only
Lead page H1	clamp(40px, 5.8vw, 72px)	500	.98	Lead forms / major conversion pages
Tracker/app page H1	clamp(34px, 4.5vw, 52px)	500	1.05	Best default for app-like pages and reusable screen/report headers
Section H2	clamp(38px, 5vw, 66px) or 40-78px	500	1 to 1.05	Marketing sections
Compact section H2	36px mobile, 52-56px desktop	500	1.02	Agencies/community sections
Card H3	23-25px	500	1.08-1.2	Feature cards and reason cards
Body/deck	18-22px	400	1.42-1.55	Marketing copy
Article prose	17-18px	400	1.68-1.74	Long-form reading
UI body	14-15px	400/500	1.45	Tables, rows, forms
Metadata/chips	11-13px	500	1 to 1.35	Labels, pills, counters
Big numerals	30-48px	500	1	Scores and KPIs, tabular nums

Rules:

• Prefer weight 500 for headings and action text. Use 700 only for strong numeric emphasis or special brand/art direction.
• Default letter spacing is 0. Legacy marketing heroes/cards sometimes use -0.01em to -0.04em; reserve that for campaign-scale display type, not dense product UI.
• Use tabular numerals for scores, dates, counts, and evidence receipts.
• Body copy should breathe: marketing copy usually sits at 18-22px; product/app copy sits at 14-15px.

Headers And Labels

• Top nav height: 68px desktop, 64px mobile.
• Brand mark: 30px square desktop, 28px mobile. Current mark is public/ghosts/speedyghost.webp.
• Wordmark: uppercase, 14px, weight 400, PP Neue Montreal, no letter spacing.
• Section label pattern: inline-flex, 13px, weight 500, uppercase, 0.08em tracking, soft text, optional 14px Lucide icon, 42px x 2px brand-gradient underline.
• Standard app/tracker page header: label first, then standalone H1, then deck copy. The icon belongs in the section label, not inline with the H1.
• Tracker shell header: max width 6xl, px-6, pt-16, pb-12, H1 max width 3xl, deck max width 2xl.
• Product dashboard H1 translation of the tracker header: 34px mobile, 42px tablet, 52px wide desktop, weight 500, line-height 1.05, letter spacing 0, Ghost dark text.
• Product dashboard deck copy: max width 2xl, 16px mobile / 18px desktop, relaxed line height, Ghost soft text.

Buttons

Base legacy marketing button:

• Min height 42px.
• Padding 0 16px.
• Radius 8px.
• Inline-flex, center aligned, gap 8px.
• Font weight 500.
• Icon size 17px, stroke 2.
• Transition 160ms for transform, background, border, color, shadow.
• Active state translates down 1px.

Button variants:

• Primary marketing: text #04130d, gradient linear-gradient(135deg, #7ce8bd, #1bc88c), deep-green translucent border, green shadow. Hover lightens the gradient and increases shadow.
• Primary app/Tailwind: bg-primary #14a070, white text, hover #118a61, 40px height, 8px radius, 14px text, mapped font-semibold 500.
• Secondary: white/surface background, ink text, line-strong border, subtle hover border/fill.
• Outline/app: transparent card background, border-border, foreground text, muted hover fill.
• Dark: #111417 background, white text, subtle white border. Use sparingly for dark panels.
• Mobile CTAs: full width when stacked; min height 46-52px.

Controls

• Inputs: 52px height for lead forms, 40-44px for compact app controls, 8px radius, 1px border, off-white fill, 14-16px text.
• Focus: brand border plus a 4px translucent green ring (rgba(27, 200, 140, 0.14) or similar).
• Segmented controls: fieldset with 1px border, muted background, 4px internal padding. Active segment uses Ghost brand green and white text. In tracker charts, segments are rounded-full; in listings, compact controls use rounded 4-6px buttons inside an 8px shell.
• Chips/pills: 28px minimum height, 999px radius, 10-12px horizontal padding, 12-13px text, optional colored dot.
• Live/active pulse: use the tracker ping dot pattern - a relative 6px dot wrapper, an absolute animate-ping rounded dot at 40% opacity, and a solid 6px rounded dot on top. Use Ghost green for product live/measured states; use platform color only inside platform count chips.
• Platform pills: use platform color only for text/dot/border/background tint; keep the rest of the UI on Ghost tokens.

Cards, Panels, And Shells

• Default app card: white/card background, 1px Ghost border, 8-12px radius, 0 1px 2px rgba(16,16,16,0.03-0.04) shadow.
• Interactive card: hover translateY(-0.5 to -2px), brand border, 0 12px 28px rgba(16,16,16,0.08) shadow.
• Marketing panels: 14px radius for content panels; 18px radius for large product-preview shells; use these only when the surface is intentionally illustrative.
• Dark shell: #080a0c / #111417, 18px radius, thin translucent border, large shadow, used for hero product mockups or thesis/CTA panels.
• Evidence/receipt blocks: dark background (#080a0c or #090b0d), mono font, 11-12px, line height around 1.65-1.7, 10-14px radius.

Spacing And Layout

• Content max width: 1180px.
• Page/container padding: clamp(20px, 5vw, 72px).
• Section padding: 96px desktop, 72px mobile; some campaign sections range 100-118px.
• Common app gaps: 8px, 10px, 12px, 14px, 16px, 24px, 32px.
• Marketing cards often use 22-26px padding. Tracker/app cards use 16-24px.
• Grids: use 1 column mobile, 2 columns tablet, 3 columns desktop for repeated cards unless the content needs a data-table layout.
• Grid texture: subtle 48px grid on marketing backgrounds; 16px dot/grid inside mini visuals. Use sparingly.

Icons

• Preferred icon set: Lucide.
• Current implementation has two paths: legacy pages use data-lucide hydrated by LucideHydrator; tracker/app components use lucide-react.
• Common icons in use: ChevronDown, Menu, ArrowLeft, ArrowRight, Search, Radar, Trophy, RadioTower, SearchCheck, ListChecks, CircleDashed, SlidersHorizontal, LineChart, BarChart3, PieChart, Sparkles, TrendingUp, Wrench, Hammer, Boxes, Crown, Swords, Tag, Plane, X.
• Sizes: 14px in nav/section labels, 17-18px in buttons and mobile menu, 19-24px in feature cards, 30px only for oversized marketing cards.
• Stroke: 1.75-2px. Brand green for labels/capability icons; muted text color for nav/control icons; platform colors only in data context.

Reusable CSS Export

:root {
  --gt-font-sans: "PP Neue Montreal", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --gt-font-mono: "SF Mono", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
 
  --gt-canvas: #f7f8f8;
  --gt-surface: #ffffff;
  --gt-surface-raised: #fbfcfc;
  --gt-ink: #111417;
  --gt-ink-soft: #48515a;
  --gt-ink-muted: #737b84;
  --gt-border: #e1e5e4;
  --gt-border-strong: #cbd1d0;
 
  --gt-brand-300: #7ce8bd;
  --gt-brand-400: #1bc88c;
  --gt-brand-500: #14a070;
  --gt-brand-600: #0e7a55;
  --gt-brand-700: #07553d;
  --gt-gradient-brand: linear-gradient(135deg, #7ce8bd, #1bc88c);
  --gt-gradient-brand-flat: linear-gradient(to right, #1bc88c, #14a070);
 
  --gt-radius-control: 8px;
  --gt-radius-panel: 14px;
  --gt-radius-shell: 18px;
  --gt-radius-pill: 999px;
  --gt-shadow-card: 0 1px 2px rgba(17, 20, 23, 0.08);
  --gt-shadow-soft: 0 20px 80px rgba(22, 28, 33, 0.08);
  --gt-content-max: 1180px;
  --gt-page-padding: clamp(20px, 5vw, 72px);
}

Open questions

• Should the dashboard and admin cockpit import a shared token package, or keep local Tailwind token copies until the next frontend consolidation pass?
• Should decks/slides get companion layout templates that use the same tokens without forcing product UI density?
• Should PP Neue Montreal live in a shared static asset package so every app can serve the same font files without duplicating /public/fonts?
• Should the brand name stay agentdiscoverability.com in the wordmark if the broader rebrand lands?

Timeline

• [2026-06-24] (human correction) Standardized app/dashboard page headers on the marketing tracker pattern: section label owns the icon and underline, H1 stands alone, deck copy sits below, and live/measured pills use the tracker green pulse.
• [2026-06-24] (human correction) Moved from product/design-system to brand/design-system because the resource is broader than product: it applies to slides, websites, product UI, docs, reports, and apps.
• [2026-06-24] (code review) Extracted this reusable design-token resource from the marketing frontend and tracker source in discoverability-platform: fonts, color roles, type scale, headers, icons, buttons, controls, cards, and spacing.