Dock (dock.io) is built on Webflow — a no-code visual CMS platform. Assets are served from cdn.prod.website-files.com, confirming the Webflow hosting pipeline. No React, Vue, or Next.js signals are present in the public-facing marketing site. Analytics via Google Tag Manager (GTM-K885M4M). The logo is delivered as an SVG in two variants: a light logo for dark backgrounds and a dark logo for light backgrounds.

Typography

Dock uses a clean, modern sans-serif system consistent with enterprise B2B SaaS. Based on visual inspection and Webflow conventions:

Primary typeface: Inter or a geometric sans-serif (system-fallback stack typical of Webflow sites: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)
Hero heading (H1): Large display weight, ~56–72px, bold (700–800), tight letter-spacing (−0.02em)
Section headings (H2): ~36–48px, semibold (600–700)
Card headings (H3): ~20–24px, semibold (600)
Body text: ~16–18px, regular (400), relaxed line-height (~1.6)
Small / caption: ~13–14px, regular or medium
CTAs / buttons: ~15–16px, semibold, tracked slightly
Numbered steps (01, 02, 03): Large decorative numerals, likely 80–120px, light weight, used as visual anchors

Color Philosophy

Dock employs a dark-first brand identity with a deep navy/near-black primary paired with white text on hero and CTA sections. A vibrant accent color (teal or blue-green) drives CTAs and interactive elements. The footer uses an inverted dark background. The trusted-by and social-proof sections use a lighter, neutral background to provide visual breathing room.

Brand dark: Deep navy — approximately #0A0F1E or #0D1117
Brand white: #FFFFFF for hero text and dark-section body copy
Accent / CTA blue-teal: Approximately #2563EB or #1A6FF4 (primary button fill)
Accent green / success indicator: #22C55E or similar for checkmark icons
Neutral light background: #F8F9FB or #F4F5F7 for mid-page sections
Text dark: #111827 on light sections
Text muted: #6B7280 for secondary copy
Border / divider: #E5E7EB

Spacing

Webflow's default spacing grid is 4px-based. Dock uses generous vertical rhythm between sections — consistent with enterprise landing pages that benefit from visual breathing room.

Base unit: 4px
Section vertical padding: 80–120px (20–30 base units)
Card internal padding: 24–32px
Component gap (grid/flex): 16–24px
Inline element gap: 8–12px

Component Defaults

Buttons — Primary: Filled, rounded (~6–8px radius), dark navy or blue accent background, white text, semibold, ~14–16px. Hover: slightly lightened fill or elevated shadow.
Buttons — Secondary / Ghost: Outlined border, transparent background, matching border color to accent. Used for secondary CTAs like "Log in".
Navigation: Top horizontal nav, transparent on scroll or white/blurred backdrop. Logo left, links center-right, CTA buttons far right.
Cards / Feature blocks: Light background, subtle border or drop shadow, rounded corners (~8–12px), icon or illustration at top.
Pricing table: Three-column layout with check/minus icons from CDN PNG assets. Column headers use plan name + price prominently.
Testimonial / Quote blocks: Large quotation mark, avatar image, name + title attribution.
Trusted-by logos: Horizontal scrolling marquee or static row of partner logos in grayscale or brand color on neutral background.
Step indicators: Large bold numerals (01, 02, 03) used as section anchors with alternating image+text layout.

Layout

Grid system: 12-column CSS grid, max container width ~1200–1280px, centered with auto margins.
Responsive breakpoints: Standard Webflow breakpoints — 1440px (desktop), 992px (tablet landscape), 768px (tablet), 480px (mobile).
Hero: Full-width, dark background, text left or center-aligned, device mockup image right.
Feature sections: Alternating 2-column layouts (text left / image right, then reversed).
Footer: Dark background, 4–5 column link grid, logo bottom-left, social icons bottom-right.
Announcement bar: Slim full-width top banner for events/promotions, dismissible.

/\* ============================================================
   Dock (dock.io) — Inferred CSS Custom Properties
   Platform: Webflow | Analyzed: 2026-07
   Confidence: Medium (inferred from visual + structural analysis)
   ============================================================ \*/

:root {
  /_ --- Brand Colors --- _/
  --color-brand-dark:        #0A0F1E;   /_ hero / nav dark bg _/
  --color-brand-navy:        #0D1631;   /_ footer bg _/
  --color-brand-accent:      #1A6FF4;   /_ primary CTA, links _/
  --color-brand-accent-hover:#1558C8;   /_ CTA hover state _/
  --color-brand-teal:        #0EA5E9;   /_ secondary accent / highlights _/

  /_ --- Neutral Palette --- _/
  --color-white:             #FFFFFF;
  --color-gray-50:           #F8F9FB;   /_ light section backgrounds _/
  --color-gray-100:          #F1F3F5;
  --color-gray-200:          #E5E7EB;   /_ borders, dividers _/
  --color-gray-400:          #9CA3AF;
  --color-gray-500:          #6B7280;   /_ muted / secondary text _/
  --color-gray-700:          #374151;
  --color-gray-900:          #111827;   /_ body text on light bg _/

  /_ --- Semantic Colors --- _/
  --color-success:           #22C55E;   /_ checkmark icons _/
  --color-danger:            #EF4444;
  --color-warning:           #F59E0B;

  /_ --- Typography --- _/
  --font-family-base:        'Inter', -apple-system, BlinkMacSystemFont,
                             'Segoe UI', Helvetica, Arial, sans-serif;
  --font-size-xs:            0.8125rem;  /_ 13px _/
  --font-size-sm:            0.875rem;   /_ 14px _/
  --font-size-base:          1rem;       /_ 16px _/
  --font-size-lg:            1.125rem;   /_ 18px _/
  --font-size-xl:            1.25rem;    /_ 20px _/
  --font-size-2xl:           1.5rem;     /_ 24px _/
  --font-size-3xl:           1.875rem;   /_ 30px _/
  --font-size-4xl:           2.25rem;    /_ 36px _/
  --font-size-5xl:           3rem;       /_ 48px _/
  --font-size-6xl:           3.75rem;    /_ 60px _/
  --font-size-display:       4.5rem;     /_ 72px — hero H1 _/

  --font-weight-regular:     400;
  --font-weight-medium:      500;
  --font-weight-semibold:    600;
  --font-weight-bold:        700;
  --font-weight-extrabold:   800;

  --line-height-tight:       1.2;
  --line-height-snug:        1.375;
  --line-height-normal:      1.5;
  --line-height-relaxed:     1.65;

  --letter-spacing-tight:    -0.02em;
  --letter-spacing-normal:   0em;
  --letter-spacing-wide:     0.02em;
  --letter-spacing-wider:    0.05em;

  /_ --- Spacing (4px base unit) --- _/
  --space-1:                 0.25rem;   /_ 4px _/
  --space-2:                 0.5rem;    /_ 8px _/
  --space-3:                 0.75rem;   /_ 12px _/
  --space-4:                 1rem;      /_ 16px _/
  --space-5:                 1.25rem;   /_ 20px _/
  --space-6:                 1.5rem;    /_ 24px _/
  --space-8:                 2rem;      /_ 32px _/
  --space-10:                2.5rem;    /_ 40px _/
  --space-12:                3rem;      /_ 48px _/
  --space-16:                4rem;      /_ 64px _/
  --space-20:                5rem;      /_ 80px _/
  --space-24:                6rem;      /_ 96px _/
  --space-30:                7.5rem;    /_ 120px — section padding _/

  /_ --- Border Radius --- _/
  --radius-sm:               4px;
  --radius-md:               6px;
  --radius-lg:               8px;
  --radius-xl:               12px;
  --radius-2xl:              16px;
  --radius-full:             9999px;    /_ pill buttons _/

  /_ --- Shadows --- _/
  --shadow-sm:               0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:               0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:               0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:               0 16px 48px rgba(0, 0, 0, 0.16);
  --shadow-card:             0 2px 8px rgba(10, 15, 30, 0.08),
                             0 1px 2px rgba(10, 15, 30, 0.04);

  /_ --- Layout --- _/
  --container-max-width:     1280px;
  --container-padding-x:     1.5rem;    /_ 24px _/
  --nav-height:              72px;
  --section-padding-y:       var(--space-20);

  /_ --- Transitions --- _/
  --transition-fast:         150ms ease;
  --transition-base:         250ms ease;
  --transition-slow:         400ms ease;

  /_ --- Z-index scale --- _/
  --z-base:                  0;
  --z-raised:                10;
  --z-dropdown:              100;
  --z-sticky:                200;
  --z-overlay:               300;
  --z-modal:                 400;
  --z-toast:                 500;
}

/\* ============================================================
   Dark Mode Overrides
   (Dock uses dark sections inline rather than a global
   dark-mode toggle; these apply within dark-bg wrappers)
   ============================================================ \*/

[data-theme="dark"],
.section--dark,
.hero,
.footer {
  --color-bg:                var(--color-brand-dark);
  --color-bg-secondary:      var(--color-brand-navy);
  --color-text-primary:      var(--color-white);
  --color-text-secondary:    rgba(255, 255, 255, 0.65);
  --color-text-muted:        rgba(255, 255, 255, 0.4);
  --color-border:            rgba(255, 255, 255, 0.1);
  --color-card-bg:           rgba(255, 255, 255, 0.05);
  --shadow-card:             0 2px 8px rgba(0, 0, 0, 0.4);
}

/_ Light section overrides _/
[data-theme="light"],
.section--light {
  --color-bg:                var(--color-white);
  --color-bg-secondary:      var(--color-gray-50);
  --color-text-primary:      var(--color-gray-900);
  --color-text-secondary:    var(--color-gray-700);
  --color-text-muted:        var(--color-gray-500);
  --color-border:            var(--color-gray-200);
  --color-card-bg:           var(--color-white);
}

Color Tokens

Token	Value	Usage
`color-brand-dark`	#0A0F1E	Hero section bg, nav dark variant
`color-brand-navy`	#0D1631	Footer background
`color-brand-accent`	#1A6FF4	Primary CTA buttons, active links
`color-brand-accent-hover`	#1558C8	Button hover state
`color-brand-teal`	#0EA5E9	Secondary highlights, icon accents
`color-white`	#FFFFFF	Text on dark bg, card bg
`color-gray-50`	#F8F9FB	Alternating section backgrounds
`color-gray-200`	#E5E7EB	Card borders, table dividers
`color-gray-500`	#6B7280	Muted / secondary body text
`color-gray-900`	#111827	Primary body text on light bg
`color-success`	#22C55E	Checkmark icons in pricing table
`color-danger`	#EF4444	Error states, destructive actions

Spacing Tokens

Token	Value	Usage
`space-1`	4px	Micro gaps, icon padding
`space-2`	8px	Inline element gaps
`space-4`	16px	Default grid gap, list item spacing
`space-6`	24px	Card internal padding, component gap
`space-8`	32px	Card padding (large), nav item spacing
`space-12`	48px	Sub-section vertical margins
`space-20`	80px	Standard section top/bottom padding
`space-30`	120px	Hero / large section padding

Typography Tokens

Token	Value	Usage
`font-size-xs`	13px	Captions, badges, legal text
`font-size-sm`	14px	UI labels, nav links, table cells
`font-size-base`	16px	Default body text
`font-size-lg`	18px	Lead paragraphs, feature descriptions
`font-size-2xl`	24px	H3 card headings
`font-size-4xl`	36px	H2 section headings
`font-size-5xl`	48px	Large H2 / feature statements
`font-size-display`	72px	Hero H1 display headline
`font-weight-semibold`	600	Headings, buttons, nav items
`font-weight-bold`	700	Hero headline, strong emphasis
`line-height-relaxed`	1.65	Body paragraphs, feature copy
`letter-spacing-tight`	-0.02em	Display headings, H1

Border Radius Tokens

Token	Value	Usage
`radius-sm`	4px	Badges, tags, small chips
`radius-md`	6px	Input fields, small buttons
`radius-lg`	8px	Cards, feature blocks, dropdowns
`radius-xl`	12px	Modals, large cards, image containers
`radius-2xl`	16px	Hero images, device mockups
`radius-full`	9999px	Pill-shaped CTA buttons, avatars

Shadow Tokens

Token	Value	Usage
`shadow-sm`	0 1px 2px rgba(0,0,0,0.05)	Subtle element lift, nav on scroll
`shadow-md`	0 4px 12px rgba(0,0,0,0.08)	Card resting state
`shadow-lg`	0 8px 24px rgba(0,0,0,0.12)	Hovered cards, dropdown menus
`shadow-xl`	0 16px 48px rgba(0,0,0,0.16)	Modals, overlays
`shadow-card`	0 2px 8px rgba(10,15,30,0.08)	Default card shadow using brand dark tint

Framework & Platform

Built on Webflow — confirmed by Webflow CDN asset paths (cdn.prod.website-files.com) and dual SVG logo pattern (light + dark variants).
No frontend JavaScript framework (React, Vue, Next.js) detected in the marketing site. Logic is handled by Webflow's runtime.
Analytics: Google Tag Manager (GTM-K885M4M).
Cookie consent managed via a custom Webflow interaction (Deny / Accept pattern).

Theme Support

Dock does not implement a user-togglable dark/light mode. Instead, it uses section-level theming: hero and footer sections are dark-background, mid-page content sections are white or light-gray.
Two logo SVGs are hard-coded: one for dark contexts (logo-by-docklabs-light.svg) and one for light contexts (logo-by-docklabs-dark.svg).
No prefers-color-scheme media query or data-theme attribute switching was detected.

Data Confidence

High confidence: Platform (Webflow), dual-logo pattern, section-level dark/light theming, content structure, 3-column pricing table layout, numbered step design pattern, trusted-by logo strip.
Medium confidence: Specific hex color values (inferred from standard B2B SaaS + Webflow conventions — actual values require browser DevTools inspection), font family (Inter is strongly implied by style and era but not confirmed in fetched markup), exact border-radius values.
Lower confidence: Precise shadow values, exact spacing scale, specific font weights — all extrapolated from visual patterns and Webflow defaults.

Notable Design Patterns

Dual CTA strategy: Every major section ends with two buttons — a primary filled CTA ("Request free consultation" / "Sign up") and a secondary ghost/outline CTA, driving both direct conversion and softer engagement.
Large decorative numerals: Step sections use oversized numbers (01, 02, 03) as visual anchors — a contemporary enterprise SaaS pattern for process storytelling.
Announcement bar: A persistent slim top bar promotes live events, indicating active event marketing as a growth channel.
Partner logo strip: Marquee or static row of partner logos (Socure, Daon, Telefónica, GSMA) functions as immediate social proof above the fold.
Testimonial pattern: Named quotes with avatar, title, and company logo — standard enterprise trust-building.
Device mockup imagery: MacBook + iPhone mockups in the hero communicate product UI without exposing actual app screens.
CDN-hosted icon assets: Check and minus icons in the pricing table are PNG files served from the Webflow CDN (not icon fonts or SVG inline), typical of Webflow-native builds.
Rebranding signal: The site references both "Dock Labs" (company) and "Truvera" (product platform), indicating an active product rebrand in progress during the analysis period.

Dock

Marketing Pages

Product Interfaces

Emails

Dock

Issue Credentials

Dock

Onboarding Emails

Dock

Free Trial Emails

Dock

Create An Account

Dock

Create Verification Templates

Dock

Activation Emails

Visual identity

Stack

Typography

Color Philosophy

Spacing

Component Defaults

Layout

Color Tokens

Spacing Tokens

Typography Tokens

Border Radius Tokens

Shadow Tokens