detectabli

Brand Guidelines

Everything you need to design, communicate, and build on-brand. Version 1.0 — April 2026.

01 — Logo

Our Logo

The detectabli mark combines a teal gradient icon with a bold wordmark. Always use approved versions — never recreate or modify the logo.

detectabli
Primary — Light Background
detectabli
Reversed — Dark Background
Icon Mark Only
⚠️Clearspace rule: Always maintain a minimum clearspace equal to the height of the "U" in Unlocked around all sides of the logo. Never place other elements inside this zone.
02 — Colour

Colour Palette

Our palette is built around two anchors — deep navy and signal teal. All other tones are derived from them. Use the hex values as the source of truth.

Primary
Midnight NavyPrimary brand colour. Headlines, navbars, CTAs, dark sections.
#0A2540RGB 10 37 64HSL 210° 73% 15%
Signal TealAccent colour. CTAs, highlights, icons, active states, badges.
#4ECDC4RGB 78 205 196HSL 176° 52% 55%
Detect BlackIndustry pages, premium surfaces, high-contrast hero backdrops.
#0B0F14RGB 11 15 20HSL 213° 29% 6%
Pure WhitePage backgrounds, cards on navy, reversed text and icons.
#FFFFFFRGB 255 255 255HSL — 0% 100%
Secondary & Utility
Teal MistHero backgrounds, tint sections, callout boxes.#F0FDFA
SlateBody copy, secondary text, icons on light backgrounds.#475569
MutedCaptions, placeholders, disabled states, metadata.#64748B
BorderDividers, card borders, input strokes on white.#E2E8F0
SurfaceAlternating section backgrounds, table rows, nav fill.#F8FAFC
03 — Typography

Type System

We use a single typeface across the entire product and brand: Manrope. Its geometric precision, optical sizing, and wide weight range (200–800) make it versatile for headlines, UI, and legal copy alike.

Manrope — Primary Typeface
Aa Bb Cc
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( ) . , ?
Display
Get started
56–64px
800 (ExtraBold)
105%
Hero headlines
Heading 1
AI Visibility Score
36–40px
700 (Bold)
110%
Section headings
Heading 2
Citation Signals
24–28px
700 (Bold)
120%
Card titles, subheadings
Body
Track how every major AI engine perceives your brand.
16px
400 (Regular)
160%
Paragraphs, descriptions
Label / UI
Dashboard · Pricing · Settings
13–14px
500–600 (Medium)
140%
Nav links, buttons, tabs
Caption / Overline
GETTING STARTED
11–12px
700 (Bold)
140%
Section labels, badges, tags
04 — Spacing & Grid

Spacing System

All spacing is based on a 4px base unit. Use multiples of 4 for all padding, margin, and gap values. The grid is 12 columns with 120px gutters on desktop.

Spacing Scale
4xs
8sm
12—
16md
24lg
32xl
482xl
643xl
804xl
120gutter
Desktop Grid
Breakpoint≥ 1440px
Columns12
Gutters120px left + right
Column gap24px
Max content width1200px
Tablet Grid
Breakpoint768–1439px
Columns8
Gutters48px left + right
Column gap16px
Max content width100%
Mobile Grid
Breakpoint< 768px
Columns4
Gutters24px left + right
Column gap16px
Max content width100%
05 — Components

UI Components

Core building blocks used across the product and marketing site. Always use these exact specs — do not deviate in size, radius, or colour.

Buttons
Height44px (default) · 36px (sm) · 52px (lg)
Padding14px 28px (default)
Border radius8px
FontManrope 600–700, 14–15px
Badges & Pills
Getting StartedPricingMost PopularSave 20%ActiveError
Cards
📊
Visibility ScoreSee exactly how AI engines perceive and describe your brand across 7 platforms.Default card — radius 16px · border #E2E8F0 · pad 28px
🏆
Competitive IntelTrack competitor visibility scores and see where you win or fall behind in AI answers.Elevated card — shadow 0 4px 24px rgba(10,37,64,0.08)
⭐
Pro PlanThe most popular plan for growth-stage brands serious about AI visibility.Dark card — navy bg · teal 1.5px border