Design System Audit

dock.us
Visual Language

Complete design system extracted from www.dock.us — every token, component, interaction pattern, and accessibility note, all from real values.

9Color tokens
8Type styles
3Breakpoints
RoobertPrimary font
01 — Foundations

Color Palette

All color values extracted from the live stylesheet. Contrast ratios per WCAG 2.1.

white

#ffffff

Dominant — background, text

1.00:1 on page bg #ffffff · fails AA

ink-deepest

#121722

Dominant — text

17.93:1 on page bg #ffffff · AAA ✓

black

#000000

Accent — text

21.00:1 on page bg #ffffff · AAA ✓

canvas-soft

#e9f4fe

Accent — background

18.84:1 on black · AAA ✓

ink

#565551

Accent — text

7.46:1 on page bg #ffffff · AAA ✓

primary

#0068f9

Accent — text, background

4.83:1 on page bg #ffffff · AA ✓

text-secondary

#a5a5a5

Accent — text

2.46:1 on page bg #ffffff · fails AA

ink-deepest-2

#1d1d1d

Accent — text

16.86:1 on page bg #ffffff · AAA ✓

canvas-soft-2

#d5ecff

Accent — background

17.27:1 on black · AAA ✓
02 — Foundations

Typography

Single font family: Roobert — used across all roles. Font files loaded by the site: WistiaPlayerInter (400) · Roobert (400, 500, 600, 700) · Ppeditorialold Regular (400) · Inconsolata (400, 700).

RoleSpecsSampleUsed on
Body
Roobert
16px / 400
lh 1.25
CollaborationSales Deal RoomsCustomer OnboardingClient Portals
BODY element · 63 uses · real site copy
Body
Roobert
16px / 400
lh 1.50
CollaborationSales Deal RoomsCustomer OnboardingClient Portals
DIV element · 31 uses · real site copy
Micro
Roobert
12px / 500
lh 1.33
LABEL · TAG
DIV element · 8 uses
Body
Roobert
16px / 500
lh 1.50
Request Demo
DIV element · 6 uses · real site copy
Link
Roobert
16px / 400
lh 1.25
CollaborationSales Deal RoomsCustomer OnboardingClient Portals
A element · 2 uses · real site copy
Body
Roobert
18px / 500
lh 1.56
Start for Free
DIV element · 2 uses · real site copy
Body
Roobert
16px / 400
CollaborationSales Deal RoomsCustomer OnboardingClient Portals
HTML element · 1 uses · real site copy
Subheading
Roobert
84px / 500
lh 1.06
Enablement that sellers and buyers love
H1 element · 1 uses · real site copy
03 — Components

Navigation

Nav demo using extracted colors, font, real link labels and the site's real logo.

nav · demo using extracted tokens & real links
dock.us logo dock.us
Sales Deal RoomsCustomer OnboardingClient PortalsContent ManagementSlides
© 2026 Dock Labs, Inc. All rights reserved.
Extracted nav tokens
Background#1a1a1a
Text color#ffffff
Font familyRoobert
Links (extracted)Sales Deal Rooms · Customer Onboarding · Client Portals · Content Management · Slides
Copyright (extracted)© 2026 Dock Labs, Inc. All rights reserved.

Layout values (height, padding, link states) are demo styling — not extracted from the site.

04 — Components

Button Variants

Color and radius tokens extracted from the scrape; variants are representative demos. Border-radius: 40px · fill type: solid · padding density: normal.

btn-primary · token demo

bg #0068f9 · color #ffffff · radius: 40px

btn-secondary · outlined demo

Demo variant — outlined treatment of the extracted primary color #0068f9.

btn-ghost · text-only demo

Demo variant — text-only treatment of the extracted primary color.

btn-disabled · demo state

Generic disabled-state demo — not extracted from the site.

05 — Components

Cards & Surfaces

Depth communicated through shadows and background contrast.

section surface

bg #ffffff · text #000000

page canvas

bg #ffffff · text #121722

card surface

bg #e9f4fe · text #121722

07 — Components

Form Elements

Representative form patterns styled with extracted color and radius tokens. Input border-radius: not detected in scrape.

Contact form — site-styled demo

dock.us
Get in Touch

support@dock.us (extracted from site)

Input states
input · default

radius: not detected · demo border/background styling

input · focus state demo

Demo focus treatment using extracted primary color #0068f9.

select · dropdown
08 — Foundations

Spacing Scale

Spacing values observed in the live layout. Values extracted from stylesheet padding, margin, and gap declarations.

4px
xs
8px
sm
12px
md
70px
section
140px
section-2
09 — Foundations

Border Radius

Corner radius tokens observed across components. All values extracted from live stylesheet.

8px
sm
8px
20px
lg
20px
40px
xl
40px
48px
full
48px
60px
full
60px
10 — Foundations

Elevation & Depth

Box-shadow tokens extracted from CSS variables. Shadow values represent real usage.

Observed element shadow

rgba(0, 0, 0, 0.04) 0px 20px 20px -8px

11 — Interactions

Motion

Transition and animation values extracted from the scraped stylesheets, with real occurrence counts.

hover demo · using extracted tokens

Demo transitions use the fastest extracted duration (0.2s ease).

idle vs hover · frozen demo states

Demo hover treatment — fill with extracted primary color. Real hover styles are not scraped.

Motion tokens (extracted)
TokenValueOccurrences
duration-fast0.2s25× in stylesheet
duration-base0.3s12× in stylesheet
duration-slow0.4s3× in stylesheet
duration-slower0.6s4× in stylesheet
duration-slowest2s10× in stylesheet
easing-1ease8× in stylesheet
easing-2ease-in-out8× in stylesheet
easing-3ease-in3× in stylesheet
12 — Responsive

Responsive Behavior

Breakpoint boundaries detected in the scraped stylesheet media queries, with real rule counts.

BreakpointBoundaryUsage
Mobile480px5 @media rules
Tablet768px7 @media rules
Desktop992px8 @media rules
480px
768px
992px

Extracted from https://www.dock.us/ stylesheets.

13 — Assets

Iconography & Brand Assets

Assets and links extracted from the scraped pages.

Brand mark — extracted asset
dock.us logo

https://cdn.prod.website-files.com/5e8918fccce5fb7307ac1c9e/68bdbbb9587d4e422cd15f79_lattice.svg

Brand asset — Sales Deal Rooms
Sales Deal Rooms

https://cdn.prod.website-files.com/5e8918fccce5fb7307ac1c9e/68cae2076e07dfaa652a541e_Sales%20Deal%20Rooms.svg

Brand asset — Customer Onboarding
Customer Onboarding

https://cdn.prod.website-files.com/5e8918fccce5fb7307ac1c9e/68cae20740ea6fecccf4b8da_Customer%20Onboarding.svg

Icon system

No icon library (Phosphor, Feather, Heroicons, Font Awesome…) detected in the scraped pages.