§ Brand Guide

Ink on paper,
with a highlighter mark.

Everything a designer or developer needs to build on-brand — color tokens, typography, voice, and components. This page is the source of truth.

01 Color

Primary Tokens

--paper #F4EFE4 Canvas — warm newsprint background
--ink #15140F Text, dark surfaces, near-black
--graphite #5C574B Secondary text, borders, muted UI
--mention #FFD23F THE accent — highlighter yellow. CTAs, active states, highlights
--citation #7A1D2C Hyperlinks, pull-quotes, chart-primary

Ink Scale

--ink-900 #0F0E0A
--ink-800 #15140F
--ink-700 #23211A
--ink-600 #2E2B22
--ink-300 #8A8576
--ink-200 #C8C2B2
--ink-100 #F4EFE4

Paper Scale

--paper-50 #FAF7EF
--paper-100 #F4EFE4
--paper-200 #EAE3D3
--paper-300 #D9D0BC

Status Colors

--st-draft Draft Saved, unpublished
--st-review Review Awaiting approval
--st-publish Publish Live, succeeded
--st-fail Fail Error state

02 Typography

Font Families

--f-display · Newsreader

The quick brown fox cited four sources.

Headings, display text, pull-quotes, editorial body copy. Always set in warm near-black on paper.

--f-sans · Geist / Inter

The quick brown fox cited four sources.

UI text, navigation, body in product surfaces, form inputs, descriptions.

--f-mono · JetBrains Mono

The quick brown fox cited four sources.

Eyebrows, labels, code, section numbers, terminal-style callouts.

--f-brand · Quicksand

mentionwell

Logo wordmark only. Weight 500–600. Never use for body copy or headings.

Type Scale

--t-display 96px Display

Mentioned.

--t-h1 64px H1

Blog that gets cited.

--t-h2 40px H2

Start with the seven that matter.

--t-h3 28px H3

Answer Engine Optimization

--t-h4 22px H4

What makes a citable article?

--t-lead 19px Lead

A headless blog engine that ships AEO-first articles every week.

--t-body 16px Body

Mentionwell researches, writes, and publishes structured content for your domain on autopilot.

--t-small 13px Small

No CMS migration · Drop-in on any framework · 60s onboarding

--t-micro 12px Micro

Last updated May 1, 2026

--t-eyebrow 11px Eyebrow

§ BRAND GUIDE · TYPOGRAPHY

04 Voice & Tone

Editorial

We write like a newspaper, not a startup pitch deck. Precise nouns, active verbs, no jargon inflation. A sentence should earn its period.

"Mentionwell ships the blog your site should have been running for three years."

Direct

Say the thing. No hedge words, no softening adverbs, no "leveraging our robust platform." If the product does something, say what it does.

"Drop in your domain. We handle everything else."

Warm but not casual

We're not a chatbot. We're not your friend on Slack. We respect the reader's time and intelligence — serious product, human voice.

"We'll email you when your spot is ready."

Cited, not claimed

Everything measurable gets a source. We don't say "AI-powered" and move on. We say what the model does, why it matters, what evidence looks like.

"Princeton 2023. Tactics that increase visibility inside generated answers."

Writing rules

  • Use Oxford comma.
  • Em dash for asides — no spaces around it.
  • Numbers above ten spelled out in editorial contexts, numerals in UI and data.
  • Headline case for page titles; sentence case for subheads and UI labels.
  • Never write "leverage," "synergy," "ecosystem," "empower," or "seamlessly."
  • AEO, GEO, LLMO, SEO — acronyms always uppercase, no periods.
  • Product name is lowercase: mentionwell in prose, Mentionwell at sentence start.

05 UI Components

Buttons

.btn.btn-primary
.btn.btn-secondary
.btn.btn-ghost
On dark surface

Badges & Eyebrows

Legal .legal-eyebrow
AEO .term-eyebrow
Feature .changelog-tag
New mention accent

Status Badges

Draft
In Review
Published
Failed

Pull Quote / Blockquote

The practice of writing for ChatGPT, Claude, and Perplexity the way SEO was written for Google in 2008.

Inline Code

Set --mention as your accent token and use var(--ink) for all body text. Never hardcode #FFD23F directly — always via the token.

Cards

01 · AEO

Answer Engine Optimization

Shape content so AI assistants cite you by name when they answer questions about your category.

02 · GEO

Generative Engine Optimization

Statistical evidence, named entities, direct quotation, and structural cues — what the model wants to lift.

03 · LLMO

LLM Optimization

Clean structure, fact-density, citation-shape — optimized for language models that summarize the web.

Form Inputs

default state
focused / filled — border: --mention

06 Do / Don't

✓ Do

  • Use --mention (#FFD23F) for interactive accents, CTAs, and highlights on light paper surfaces.
  • Use --ink (#15140F) for all primary text and dark surfaces.
  • Use --citation (#7A1D2C) for hyperlinks and data-viz primary — the warm claret reads as "cited content."
  • Use Newsreader for display and editorial headings — the serif signals authority.
  • Use JetBrains Mono for eyebrows and labels — monospace at small sizes reinforces the editorial data aesthetic.
  • Keep surfaces warm: --paper, --paper-50, --paper-100.
  • Use --graphite for secondary text and borders — never pure gray.

✗ Don't

  • Don't use electric blue (#1F4FD9) — it was the old brand and has been fully removed.
  • Don't put --mention text on a white or very light background — the contrast is insufficient.
  • Don't use Quicksand for body copy or headings — it's the logo wordmark font only.
  • Don't hardcode hex values in component CSS — always use the token variables.
  • Don't mix cool grays (like #6B7280) into the palette — all neutrals must come from the warm ink/paper scale.
  • Don't use "leverage," "synergy," "seamlessly," or similar corporate filler in copy.
  • Don't place the wordmark on a busy background or at sizes below 14px.

Color on color — approved combinations

ink on paper --ink / --paper
ink on mention --ink / --mention
paper on ink --paper / --ink
mention on ink --mention / --ink
ink on paper-200 --ink / --paper-200
citation on paper --citation / --paper
66 beta testing now