INTERNAL · DESIGN SYSTEM

Deep harbor style guide

The live Deep harbor design system for convertwithcontent.com, shown with the real classes and markup from the homepage so new pages are built from it.

Internal reference. Not indexed (noindex, nofollow), not in the sitemap, nav or footer. Sample content keeps its “Illustrative” labels. Staging only.

1 Palette
2 Contrast
3 Logo
4 Typography
5 Buttons and links
6 Form
7 Components
8 Spacing and shape

1 · PALETTE

Colour tokens

Thirteen tokens, defined once on .theme-deep-harbor. Use the variable, never the raw hex.

--navy#0A2A4APrimary button, proof and testimonial bands.

--harbor#14436FAudit band, button hover, loading state.

--abyss#061A2EFooter band.

--blue#1A5C9EAccent: eyebrows, links, featured-plan border, focus and hover.

--tint#E8F0F9Tags, featured-plan fill, soft panels.

--paper#F4F8FCLight section background.

--line#CEDCEACard borders and dividers.

--field#7D93ABForm field border.

--text#0C1C2CBody and heading text on light.

--muted#56697DCaptions, notes, secondary text on light.

--on-dark#DCE7F2Secondary text on navy, harbor and abyss.

--star#F2B04AGold. Star ratings only.

--error#C5282DRed. Form validation only.

Gold is for ratings only. Red is for validation only. Neither is used for decoration, buttons, links or backgrounds.

The three dark bands

Navy · --navyProof band and testimonials.

Harbor · --harborAudit (closing) band.

Abyss · --abyssFooter.

Navy against harbor is 1.43:1 and harbor against abyss is 1.73:1: a visible but subtle step.

2 · CONTRAST

Text and background pairs

WCAG 2 contrast ratios. Body text needs 4.5:1, large text and UI borders 3:1. Every pair below passes.

Sample

Pair

Ratio

Source

--text on white

17.24

Round 13 (CON-1516 §5)

--text on --paper

16.16

Round 13 (CON-1516 §5)

--text on --tint

14.99

Round 13 (CON-1516 §5)

--blue on white

6.84

Round 13 (CON-1516 §5)

--blue on --paper

6.41

Round 13 (CON-1516 §5)

--blue on --tint

5.95

Round 13 (CON-1516 §5)

--muted on white

5.66

Round 13 (CON-1516 §5)

--muted on --paper

5.30

Round 13 (CON-1516 §5)

--muted on --tint

4.92

Round 13 (CON-1516 §5)

White on --navy (primary button)

14.55

Round 13 (CON-1516 §5)

White on --harbor (hover, audit band)

10.18

Round 13 (CON-1516 §5)

--on-dark on --navy

11.61

Round 13 (CON-1516 §5)

--on-dark on --abyss

14.02

Round 13 (CON-1516 §5)

--field border on white (3:1 UI minimum)

3.17

Round 13 (CON-1516 §5)

Ring

Focus ring (--ring-light, --text) on white

17.24

Round 13 (CON-1516 §5)

Ring

Focus ring (--ring-dark, --tint) on --navy

12.66

Round 13 (CON-1516 §5)

White on --blue

6.84

New, measured for this guide

--on-dark on --harbor

8.13

New, measured for this guide

White on --abyss (footer logo)

17.57

New, measured for this guide

★

--star on --navy (ratings)

7.68

New, measured for this guide

--error on white (validation)

5.65

New, measured for this guide

Round 13 figures are carried over from CON-1516 §5. The “new” rows were calculated from the token hex values with the WCAG 2 relative-luminance formula, not from a rendered page.

3 · LOGO

Logo

Header harbor logo on white. Shown at the header height of 36px.

Reversed logo on --abyss. Shown at the footer height of 26px, with no plate behind it.

Clear space and minimum size

Header use is 36px tall and footer use is 26px tall. Do not go smaller than the footer size.
Keep clear space around the logo of at least the height of the “C” in the wordmark. Nothing else sits inside that margin.
Harbor logo on white or light backgrounds only. Reversed logo on --abyss or other dark bands only.
Do not recolour, stretch, outline or add a background plate to either logo.

Original brand logo (red and charcoal). Reference only: it is not used in the Deep harbor design.

4 · TYPOGRAPHY

Poppins for headings, Inter for body

Poppins 600

Headings, card titles, numbers, names.

Inter 400 / 600

Body, buttons, labels, captions, eyebrows.

H1 · .hero-h1Poppins 600
Desktop 64px / 1.1
≤767px 42px · ≤479px 36px

Desktop 64px

Be the answer.

Mobile 36px (forced for comparison)

Be the answer.

H2 · .h2Poppins 600
36px / 1.2
Same size on mobile. The centred human-review heading drops to 22px at ≤479px.

Desktop and mobile 36px

Get discovered. Get found. Get automated.

H3 · .way-titlePoppins 600
20px. Also .plan-title.
Same size on mobile.

Desktop and mobile 20px

AI Content Production

Body · .body-textInter 400
17px / 1.6, max 680px
Lead: .hero-subhead 18px / 1.7
Card copy: .way-body 15px / 1.6

Desktop and mobile 17px

Buyers now get answers without clicking a single link. AI tools read the web, pick the sources they trust, and recommend them by name.

Small and captionInter 400
13px / 1.4 (.form-microcopy)
14px (.trust-line)

Desktop and mobile 13px

No obligation. We’ll follow up with your results.

Eyebrow · .eyebrowInter 600
13px, uppercase, 0.08em tracking
Colour --blue

Desktop and mobile 13px

AI VISIBILITY AGENCY

Sizes are read from the live stylesheet and the Deep harbor theme embed. Only the H1 and the centred human-review heading change at mobile breakpoints; I found no other mobile type overrides.

5 · BUTTONS AND LINKS

Buttons and links

Hover, focus and loading are shown as fixed static copies of the live states, so they can be seen without interacting. The default column is the real, interactive element.

Type

Default (live)

Hover

Focus

Primary
.btn-primary

Default (live)Get my free audit

HoverGet my free audit

FocusGet my free audit

LoadingPlease wait...

Secondary
.btn-secondary

Default (live)See how it works →

HoverSee how it works →

FocusSee how it works →

LoadingNot defined on the live page

Text link
.r5-pillar-cta

Default (live)See plans with AI Advertising →

HoverNo distinct hover defined

FocusSee plans with AI Advertising →

LoadingNot defined on the live page

Primary hover moves --navy to --harbor. Primary focus is a 2px --text outline with 2px offset and a white halo (--tint on dark bands). The loading state is the form submit’s “Please wait...”: --harbor fill with a moving highlight. The live submit stops that animation under reduced motion; this static demo does not. Only the primary submit has a loading state.

6 · FORM

Audit form, white card on harbor

The band below is the real closing section markup and styling, with the form replaced by a static, non-submitting copy: no form element, no Webflow form, no fields that can be filled in or submitted. It shows a field, a select, the submit button and the error state.

Find out what AI says about you.

Get a free AI Visibility Audit: where you appear across major AI platforms, who's being recommended instead, and the three fixes that will move the needle first.

What your audit report covers

Where your business appearsHow AI answers mention your business for the questions your customers ask.
Who is recommended insteadThe businesses those answers recommend in your place.
Three prioritized opportunitiesWhere to start, in order of priority.

Outline of the report sections. It shows what the audit covers, not a sample result.

Name

Example text

Work email (error state)

Example text

Enter a valid email address.

I’m a

Business

Submit · default

Get my free audit

Submit · loading

Please wait...

No obligation. We’ll follow up with your results.

7 · COMPONENTS

Components

Copied from the live homepage markup. Copy and illustrations are the homepage’s own sample content, with its “Illustrative” labels kept.

Service card with illustration (.way-card)

Illustrative · generic AI assistant

Who should I call for a quote?

Here are a few options to consider.

SponsoredYour business name

Your offer, in your words

Your call to action

GET DISCOVERED

AI Advertising

Show up inside ChatGPT conversations with ads built for how people ask, backed by Google and Meta campaigns.

See plans with AI Advertising →

Plan cards (.plan-card, standard and .plan-featured Growth)

Launch

Build your search foundation with consistent publishing, SEO, and social.

Growth

Get found in search and in conversational answers.

Testimonial card (.testimonial-card, on --navy)

★★★★★

"Very impressed. Much much better than our last blog writing providers."

Kelsey M.

FAQ row (.faq-item), closed and open

What is AI visibility?

How often your business is mentioned, cited, or recommended when people use AI tools like ChatGPT, Perplexity, Gemini, and Google’s AI results.

Can you guarantee results?

No one honestly can. We guarantee the work, the quality, and transparent monthly reporting.

Rows toggle with a small script on the homepage; this guide shows the two states statically.

Proof-band counter (.proof-stat, on --navy)

2,700+

customers served

2007

in business since

“Illustrative” labels

Illustrative data — not customer results.r5-hg-tag

Sample answer

.r5-illustrative-tag

Illustrative · generic AI assistant.dh-viz-cap (in illustration title bars)

Any sample figure, chart, quote placeholder or mock-up must carry an “Illustrative” label like these.

8 · SPACING AND SHAPE

Spacing, container, radius and shadow

Section padding: 72px top and bottom on desktop, 56px at ≤767px. Side padding 24px. The “shift” and closing (audit) sections use 96px, 72px at ≤767px.
Container: max-width 1200px, centred. Body copy is capped at 680px; the FAQ list at 760px.
Gaps: 24px between plan cards, testimonial cards and service cards. Card padding 32px (28px on testimonials).

72px section padding

Container content (max 1200px)

72px section padding

Card radius

10pxService, plan and testimonial cards, tags.

12pxForm panel, illustration frames, audit preview.

14pxHuman-review document card.

6pxForm fields.

999pxButtons.

Shadows

Form panel0 18px 40px rgba(6,26,46,.35)

Document card0 14px 34px rgba(10,42,74,.12)

Submit button0 6px 16px rgba(10,42,74,.35)

Focus halo0 0 0 2px #fff, with a 2px --text outline

Service, plan and testimonial cards have no shadow; they rely on a --line border or the band colour.