Design System

Style Guide

The visual language of OwnTheAnswer.AI — colors, typography, spacing, and components.

Colors

Coral Fire
#FF5C41
Coral Deep
#D94430
Coral Light
#FF7A64
Ink
#1A0A08
Ink Alt
#2A1610
Ink Card
#231210
Midtone
#5C3D2E
Muted
#C4746A
Chalk
#FFF5F2
White
#FFFFFF

Typography

Design System

Display XL / 64px

Heading 1 / 48px

Heading 2 / 36px

Heading 3 / 30px

Heading 4 / 24px

Heading 5 / 20px
Body — DM Sans
Body XL / 24px — How B2B companies become the authority buyers encounter in AI-driven discovery.
Body LG / 20px — AI systems now synthesize answers directly. Buyers receive recommendations and solutions.
Body / 18px — Original research. Expert insight. Operational expertise. The content AI systems cite and trust.
Body SM / 16px — Authority compounds. Each piece of expert content strengthens the entire domain signal.
Body XS / 14px — Tracking label text used for labels and metadata across the site.
Label / 14px uppercase tracked — Section labels

Spacing Scale

8px / 2
16px / 4
24px / 6
32px / 8
48px / 12
64px / 16
80px / 20
96px / 24
128px / 32

Buttons

Secondary Button
Primary (Dark BG)

Cards & Surfaces

Label

White Card

Standard card surface with subtle border. Used on light backgrounds throughout the site.
Label

Chalk Card

Warm off-white background used for section alternation and subtle depth.
Label

Dark Card

Ink dark background used for emphasis sections and high-contrast content blocks.

Section Backgrounds

White — Default page background
bg-white
Chalk (#FFF5F2) — Warm alternating sections
#FFF5F2
Ink (#1A0A08) — Dark emphasis sections
#1A0A08
Ink Card (#231210) — Dark card / nested surfaces
#231210

Borders & Dividers

border-[#1A0A08]/5 — Subtle light card border
border-[#1A0A08]/10 — Section dividers on light backgrounds
border-white/5 — Subtle dividers on dark backgrounds
border-white/10 — Standard border on dark backgrounds
border-l-2 border-[#FF5C41] — Accent left border (active state)
Active / highlighted item

Accents & Decorative

Coral Dot
List Bullet
Mini Bullet
Hairline
Coral Hairline

01

Number Box

01

Ghost Number
Strategic authority positioning for B2B companies competing in AI-driven discovery. A 50 Marketing Company.

Framework

Company

Explore the 50 Family of Brands
50 Marketing 50 Capital Growth xbillwoods Missing Half Podcast 50 Web Dept. 50 Motion Scaled Virality Own the Answer AI AI Implementation Specialists
© 2026 OwnTheAnswer.AI · A 50 Marketing Company
www.owntheanswerai.com
Design by: Design by 50 Marketing

(DELETE THIS LINE) ALL ITEMS BELOW MUST BE SOMEWHERE IN THE FOOTER!

Privacy Notice • Sitemap

Copyright © xxxx-2026 *Company Name*. All Rights Reserved.
(DO NOT DELETE BELOW SECTION)
Reference/Dev Links: