Brand guidelines
The Answermark mark is an AI answer drawn as three lines; one of them is highlighted in blue. That line is your brand: the one that stands out in the answers of Google and AI assistants. The small dot is the AI spark.
Logo
- Clear space around the logo: at least half the height of the mark.
- Minimum size: 16 px for the mark alone, 96 px wide for the full logo.
- Wordmark: Manrope ExtraBold, letter-spacing −3.5 %, outlined in the SVG files; “Answer” in ink, “mark” in brand blue (blue-400 on dark). Never stretch, recolor or add effects.
- Files: mark, logo on light, logo on dark; in code, the Logo and LogoMark components.
Other directions explored
Kept for reference; the highlighted line was chosen for its meaning and its legibility at 16 px.
Colors
Ink
#09090b
Titles, primary text
Body
#52525b
Paragraphs
Muted
#6b6b73
Labels, secondary text
Line
#e4e4e7
Borders
Soft
#f1f5f9
Chips, selected menu, inputs
Tint
#eff6ff
Blue tinted cards
Brand
#2563eb
Primary action, links
Brand strong
#1d4ed8
Hover, gauge middle
Brand deep
#1e3a8a
Navy panels, gauge start
Brand light
#93c5fd
Gauge end, accents on navy
Sky
#0369a1
Secondary tag
Violet
#4f46e5
Tertiary tag
Success
#047857
Passed check
Danger
#b91c1c
Failed check
Night
#0b1120
Footer
Typography — Figtree
Display 64 / Bold
Heading 32 / Bold
Section 20 / Semibold
Body 17 / 27 — Regular. Used for article text and descriptions.
Label 14 — Muted
اجعل علامتك التجارية حاضرة في إجابات الذكاء الاصطناعي (Noto Sans Arabic)
Shapes
Buttons and inputs: 42–44 px high, radius 12 px. Cards: radius 16 px, 1 px border #e4e4e7, no heavy shadows. Primary action in near-black #18181b or brand blue for AI actions.