detectabli brand system / landing pages

Build every landing page like it belongs to detectabli.

The source of truth for detectabli landing pages and public website surfaces: visual language, marketing components and AI-forward content.

Applies toLanding pages
TypefaceManrope
Signal#4ECDC4
ModesLight + dark
01PrinciplesLanding-page standard

Simple, vertical and unmistakably AI-forward.

The system should make information feel obvious. Strong typography and signal teal do the work; decorative containers do not.

01

One reading axis

Left-align the page and let sections flow vertically. Do not alternate content from left to right.

02

Type before chrome

Create hierarchy with scale, weight and whitespace before adding a background or container.

03

Teal is a signal

Use teal for primary actions, active states and a few decisive words—not for every surface.

04

Product is proof

When a landing page discusses a feature, show the exact dashboard component and data structure rather than an illustrative imitation.

05

Concise, not empty

Give people and AI crawlers enough explicit context to understand the entity, platform and value proposition.

06

Every mode, every width

A component is unfinished until it works in light mode, dark mode, phone, tablet and desktop layouts.

03ColourLanding-page standard

Black, white and one clear teal signal.

Build with semantic tokens so the same component works in both themes. Hex values are references; page code should use the corresponding token.

Signal teal#4ECDC4--color-teal

Primary actions, active states, key words and signal moments.

Deep ink#0A2540--color-ink

Primary text and navigation in light mode.

Detect black#0B0F14--color-black

High-contrast marketing data and dark actions.

Page white#FFFFFF--color-page

Primary light-mode page surface.

Dark page#0A0A0A--color-page · dark

Primary dark-mode page surface.

Dark teal ink#061311teal contrast

Required text colour on signal teal.

Contrast ruleSignal teal always uses #061311 text. Never white.
TokenLightDarkUse
Page#FFFFFF#0A0A0AMain canvas
Ink#0A2540#EEF2F7Primary text
Surface#F6F9FC#161616Alternating sections
Body#425466#8899AFParagraph copy
Muted#8792A2#576B84Metadata and placeholders
Hairline#E6EBF1white / 9%Dividers, not card frames
Utility colours · reserve for meaning
Success #27AE60 Warning #FF9F43 Danger #E74C3C Comparison iris #635BFF
04TypographyLanding-page standard

Manrope carries the entire brand.

Use the variable font from weight 200 to 800. Headlines are tight and confident; body copy is open and calm. System monospace is reserved for indices and data.

Manrope · variable 200—800Aa Bb Cc

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 · AI visibility, measured.

Display XLclamp(56px, 9.5vw, 128px)Weight 800 · line 0.90 · tracking −0.060emMain landing-page statement only

The right answer.

Displayclamp(40px, 6.6vw, 96px)Weight 800 · line 1.02 · tracking −0.055emPage heroes

Make AI accurate.

Heading 1clamp(34px, 5vw, 64px)Weight 800 · line 1.04 · tracking −0.050emPrimary page title

Measure what AI says.

Heading 2clamp(28px, 3.6vw, 48px)Weight 780 · line 1.10 · tracking −0.045emSection heading

One vertical story.

Heading 3clamp(22px, 2.4vw, 30px)Weight 700 · line 1.20 · tracking −0.020emSubsection heading

Evidence, not decoration.

Lead17–21pxWeight 560 · line 1.55 · tracking 0Hero support copy

detectabli evaluates how AI engines discover, interpret and surface your brand.

Body15–17pxWeight 500 · line 1.65–1.75 · tracking 0Editorial and feature explanation

Keep paragraphs concise, factual and easy to scan. One idea per paragraph is the standard.

UI / label13–15pxWeight 600–760 · line 1.25 · tracking 0Buttons, navigation and controls

Run a free scan · Contact sales

Eyebrow10–11pxWeight 750–800 · line 1.40 · tracking +0.18emSection markers and metadata

PLATFORM STANDARD

Headlines

Use sentence case, balance line breaks and keep important statements under twelve words.

Paragraphs

Keep a readable 55–72 character line length and use one idea per paragraph.

Emphasis

Prefer weight or a single teal phrase. Avoid italics except for editorial voice moments.

Numbers

Use tabular figures for scores, percentages, timing and dashboard comparisons.

05LayoutLanding-page standard

A centered shell with a left-aligned story.

Marketing pages use a single 920px reading column. Product embeds may use their native wider layout, but the surrounding explanation stays on the same vertical axis.

Header · 68px
920px reading shell

Headline → explanation → exact product surface → next section

Teal closing surface
Outer canvas1640px max

Only product surfaces and shared navigation use the widest canvas.

Reading shell880–920px

Marketing copy, section markers, resources and legal content.

Section padding90–160px

Use fluid vertical whitespace with clamp().

Page gutter20–120px

Use fluid horizontal padding; never let content touch the viewport.

Spacing scale · 4px base
4812162432486496128
Phone< 640px

Single column, 16–20px side padding, full-width controls.

Tablet640–1023px

Still one reading column. Increase whitespace, not complexity.

Compact desktop1024–1279px

Product surfaces may expand; marketing remains vertical.

Desktop≥ 1280px

Full navigation, 920px reading shell, up to 1640px for product UI.

Alignment rule

Keep content left-aligned and vertically progressive. Do not alternate sections from left to right or rotate decorative content across the page.

06ComponentsLanding-page standard

A small set of consistent building blocks.

Landing-page components stay flat, readable and responsive. Borders are functional hairlines—not a frame around every idea.

Buttons

One primary action per section. Teal buttons have no dark border. Minimum touch target: 44px.

Section marker
02PlatformA quiet label, a hairline and clear context
Form controls

Use borderless hairline inputs. Signup dropdown options open inside the website, support keyboard navigation and remain compact.

Product proof
AI visibility72+8 this scan
Brand accuracy91%Verified claims
Avg. scan time<60sLive measurement

Landing pages must import the real dashboard component or its exact presentation structure. This rule governs the marketing embed—not the dashboard UI around it.

Radius6–13px for controls; avoid oversized floating cards.
Dividers1px semantic hairlines between rows and sections.
ShadowsReserved for menus, drawers and temporary elevation.
IconsLucide at 1.6–1.8 stroke or approved engine/brand assets.
07Motion + accessLanding-page standard

Motion explains progression. It never becomes the product.

Use a few GSAP reveals to connect sections and signal state. The page must remain complete and understandable with motion disabled.

Reveal distance18–28px

Mostly vertical. Horizontal movement is limited to step transitions.

Duration0.5–0.9s

Short enough to feel immediate, long enough to read.

Easingpower3.out

Use power2.out for quieter supporting content.

TriggerOnce at 78–85%

Do not repeatedly animate content while the user reads.

Reduced motion

Respect prefers-reduced-motion and immediately reveal every element.

Keyboard

All menus, dropdowns, drawers and forms must work without a pointer.

Focus

Use a visible 2px teal outline with at least 4px offset.

Contrast

Use semantic tokens and test button text in both themes. White never sits on signal teal.

Touch

Interactive targets are at least 44px high with clear spacing between them.

Overflow

Tables scroll inside their region; the page itself must never scroll horizontally.

08Content + AILanding-page standard

Write for people and machines at the same time.

Every public page should make the entity, offering and relevance explicit without turning into an information dump.

Approved entity statement

detectabli is an AI visibility platform that evaluates how AI systems discover, interpret, cite and recommend brands. It helps teams measure visibility, verify factual accuracy and improve the information AI engines use in their answers.

01What do we do?

We measure what AI says about a brand, whether the information is accurate and what should improve next.

02What is our platform?

A self-serve AI visibility platform for scans, prompt tracking, competitive analysis, improvement planning and reporting.

03Who are we?

detectabli is a Canadian technology company focused on measurable, accurate brand representation in AI-generated answers.

Supported engine naming · use exactly
ChatGPTChatGPTClaudeClaudePerplexityPerplexityGrokGrokGeminiGeminiGoogle AI OverviewsGoogle AI Overviews
Be direct

Lead with the answer and use concrete nouns. Avoid “revolutionary,” “game-changing” and vague AI claims.

Be factual

State capabilities precisely. Use real product names, supported engines and verifiable metrics.

Be concise

Prefer short headings and two-to-three sentence explanations. Add detail only when it helps a decision.

Be consistent

Use “AI visibility,” “AI engines,” “brand accuracy” and lowercase “detectabli” consistently.

New landing-page release checklist
  1. Clear value proposition in the first viewport
  2. Explicit entity and platform context in semantic HTML
  3. Left-aligned vertical flow with no alternating composition
  4. Real product UI wherever a feature is discussed
  5. Semantic colours verified in light and dark mode
  6. Phone, tablet, compact desktop and wide-screen behavior checked
  7. Keyboard, focus, contrast and reduced-motion behavior checked
  8. One decisive teal closing surface and a clear next action
LANDING-PAGE STANDARD / 08

Keep it clear. Keep it vertical. Make it detectabli.

When in doubt, remove decoration, strengthen the hierarchy and make the product truth easier to understand.