.webp)
Dock
Decentralized Identity and Verifiable Credentials solutions
Stack
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
#0A0F1Eor#0D1117 - Brand white:
#FFFFFFfor hero text and dark-section body copy - Accent / CTA blue-teal: Approximately
#2563EBor#1A6FF4(primary button fill) - Accent green / success indicator:
#22C55Eor similar for checkmark icons - Neutral light background:
#F8F9FBor#F4F5F7for mid-page sections - Text dark:
#111827on light sections - Text muted:
#6B7280for 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-schememedia query ordata-themeattribute 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.
Pay by invoice
Multi-annual billing
Compliance process
No automatic renewal
Biggest SaaS library.
Browse website pages, product interfaces and emails from a growing library of hundreds of SaaS.
.webp)
.webp)
Desktop & mobile versions.
Switch from desktop to mobile versions to see how the best designers make websites responsive.
Access the Figma files.
You like a design? Download the Figma file of any website page you see on SaaSFrame.
Advanced filtering.
Use filters to find the design or copywriting inspiration that you need in seconds.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Let it flow.
Discover the user journey of the best SaaS with interfaces organized in flows.
Save design inspirations.
Bookmark screens and flows so you can find them any time you need it.
⌘
B
BOOKMARK DESIGN
Start your design
research
research
How do you process payment?
SaaSFrame subscriptions are sold on Lemon Squeezy, a secured online selling platform for creators.
What about future updates and versions?
SaaSFrame gets updated all the time! Every new update and version will immediately be made available to all SaaSFrame users.
Can you send me an invoice?
You can generate an invoice on your Lemon Squeezy portal once you purchased SaaSFrame. You will find the link in the order confirmation email.
How can I cancel my membership subscription?
You can cancel your membership subscription at any moment on your profile page.
Can I get a refund?
If you're not satisfied, you can ask for a refund within 7 days. Just send me an email at antoine[at]unmake[dot]io
I have another question.
You can send me an email at antoine[at]unmake[dot]io, I'll be happy to help with any questions.