01 · Brand
Logo & Brand Mark
The Docupath wordmark is an all-lowercase custom geometric sans set in solid black, closed with a full-stop and accented by a green triangular overlay inside the letter "a". Maintain clear space equal to the x-height of the wordmark on all sides, and never recolour, rotate, or alter the green accent.
Minimum — 120 px
Default — 180 px
Hero — 260 px+
Primary · on light surface
Reversed · on dark surface
02 · Colour
Colour Palette
Navy anchors the brand; green drives action. Neutrals and semantic colours support hierarchy, feedback, and depth.
Brand
Primary
Navy
#0B556E · 200 84% 24%
Action
Green
#32A27D · 156 53% 42%
Support
Medium Green
#ADDEC1 · 143 47% 78%
Tint
Light Green
#DEF2E6 · 140 46% 91%
Accent & Neutral
Accent
Light Blue
#72D1F1
Body
Dark
#1D1D1D
Mid Grey
Mid Grey
#5D5D5D
Surface
Light Grey
#EFEFEF
Neutral CTA
Neutral CTA
#EDEDED
Status · Rejected
Rejected Red
#FF3434
Mid Grey #5D5D5D — invoice/table text, progress bars. Neutral CTA #EDEDED — default card CTA background (distinct from surface #EFEFEF by 2 hex digits). Rejected Red #FF3434 — used for the "Rejected" status label in the solutions panel.
Semantic
Warning
Warning BG / FG
#FEF3C7 / #92400E
Danger
Danger BG / FG
#FEF2F2 / #DC2626
Info
Info BG / FG
#EFF6FF / #1D4ED8
Success
Success BG / FG
#DEF2E6 / #32A27D
Link
Link (= Primary Green)
#32A27D
Colour usage
- • Navy — primary headings, navigation, body accents, hero backgrounds.
- • Green — primary CTAs, success states, key data emphasis.
- • Medium/Light Green — hover tints, badges, supporting surfaces.
- • Light Blue — secondary accent for data callouts only.
- • Light Grey — alternating section backgrounds.
- • Semantic — reserve for system feedback, not decoration.
03 · Typography
Typography
Poppins carries the interface. Palatino Linotype is used sparingly for display headlines and pull-quotes — it signals warmth and credibility against Poppins' modern geometry.
Aa Gg 0–9
Poppins
Interface, body, buttons, labels
Light300
Regular400
Medium500
Semibold600
Bold700
Aa Gg
Palatino Linotype
Display headlines, editorial quotes
Regular400
Bold700
ItalicQuotes
Document Processing made Intelligent.
Your document orchestration hub
Intelligent document processing, powered by AI — automate and streamline your workflows.
Finance · card title
Docupath helps you capture, validate and process documents before they enter your systems.
Default body — used for card content, CTAs and supporting prose. Sized at 16 px.
Small body — footer links, metadata, helper text, captions.
Sam Hassan, CTO at Link4
Inline text with a supporting link to a resource running through it.
Section tag / Eyebrow
"The era of OCR is over. We partnered with Docupath because their AI-native platform does not just extract data — it understands it."
Semantic heading rules
- • One H1 per page — SEO and accessibility best practice. Palatino is reserved for this single hero heading.
- • H2 for sections — every major section on the page is an H2 in Poppins SemiBold, #1D1D1D.
- • H3 for components — card titles, subsection headings, and feature headers.
- • Don't skip levels — never jump H1 → H3. Screen readers rely on the order.
- • Tight display tracking — H1 and H2 use −0.05em letter-spacing.
- • Links — underlined, #32A27D, visible focus ring on keyboard.
04 · Layout
Spacing & Grid
An 8 px base unit with generous section rhythm. Pages use a 1440 px canvas, 72–96 px gutters, and 112 px vertical spacing between major sections.
4--space-1
8--space-2
12--space-3
16--space-4
24--space-6
32--space-8
48--space-12
64--space-16
80--space-20
96--space-24
112--space-28 · section
128--space-32
Layout rules
- • Canvas — 1920 px design width, 1180 px content max on this doc.
- • Section corners — rounded 100 px top on instructions, skills, solutions outer, and footer bands.
- • Card padding — 28–36 px interior on all cards.
- • Section heights — vary with content: hero ≈ 1080 px · instructions/skills ≈ 1050 px · solutions ≈ 998 px · testimonials ≈ 866 px · footer ≈ 711 px.
- • Breakpoints — 480 · 768 · 1024 · 1280 · 1920.
- • Note — An explicit spacing-token set is not defined in the brand guidelines; the 4–128 px scale above is a convention for implementation.
05 · Elevation
Radius & Shadow
Rounded corners are friendly but measured; shadows are tinted navy to keep the palette cohesive.
SM6 px
MD10 px
LG16 px
XL20 px
PILL50 px
SECTION100 px
PILL 50 px — CTAs, nav input, chips. SECTION 100 px — rounded top corners on instructions, skills, solutions outer and footer bands.
Card · default0 4 24
rgba(11,85,110,.08)
supplementary
rgba(11,85,110,.08)
supplementary
Card · active0 30 44
rgba(50,162,125,.15)
system
rgba(50,162,125,.15)
system
CTA0 10 20
rgba(50,162,125,.5)
system
rgba(50,162,125,.5)
system
Invoice panel0 24 44
white
system
white
system
07 · Forms
Form Controls
Inputs keep navy labels and green focus rings. Help text sits below in muted grey; required indicators use the green dot, not asterisks.
Default form
We'll only use this to schedule your demo.
Send me monthly product updates
I have reviewed the privacy terms
States
Please enter a valid business email.
Email verified.
08 · Components
Navigation, Cards & Testimonials
The nav bar is a rounded white container with a 1 px navy outline — the design's signature "pill bar." Solution cards carry a tinted-green icon tile, a dark title, muted body and an inline CTA.
Navigation bar · as implemented
- Platform
- Solutions
- Customers
- Pricing
Container · 1414 × 81 · white fill · 1 px #0B556E border · 20 px radius. Wordmark · 142 × 27 (use the primary docupath. mark, never the green-square stand-in). Links · Poppins Medium 17 px · #1D1D1D · capitalize · 36 px gap. CTA · primary pill 167 × 48 with "Book a Demo" in Poppins SemiBold 16 px #DEF2E6.
Navigation bar · for Mobile
Document orchestration hub
Docupath helps you capture, validate and process documents before they enter your systems.
Closed · resting state
Closed state · 56 px white pill · 1 px #0B556E border · 16 px radius · 22 px Docupath wordmark left · two-stroke hamburger right (22 & 16 px widths, second stroke short for personality). Open state · hamburger animates to close glyph (2 strokes rotate to an X) · full-height white drawer with matching 1 px navy border and 20 px radius · nav items in Poppins Medium 20 px #1D1D1D, one per row with a subtle #0B556E divider and a soft navy chevron. CTA sits at the bottom of the drawer: primary green pill with the Book-a-Demo shadow recipe. Inspired by Wispr Flow's minimalist hamburger pattern, adapted to the Docupath brand language — floating pill, navy border, green CTA, Poppins Medium link scale.
Solution cards · default resting state · hover any card to preview the active state
Finance
Take invoice processing automation to a new level with the help of AI.
customer service
Automate sales order processing with the help of advanced reasoning and contextual understanding.
legal
Streamline contract lifecycle management with a document platform that understands.
State reference · default vs hover
Default
Finance
Take invoice processing automation to a new level with the help of AI.
Hover / Active
Finance
Take invoice processing automation to a new level with the help of AI.
Default · 2 px #EFEFEF border · white fill · title & CTA in #1D1D1D · body at 50 % opacity · CTA bg #EFEFEF · border #1D1D1D.
Hover / Active · 1 px #32A27D border · radial #DEF2E6→white gradient · shadow 0 30 44 rgba(50,162,125,0.15) · title and CTA tinted green · body steps up to full #1D1D1D opacity.
Note · the Finance card shows the pinned hover state as a design reference; in the live site, all three cards begin in the default state and transition on hover.
Hover / Active · 1 px #32A27D border · radial #DEF2E6→white gradient · shadow 0 30 44 rgba(50,162,125,0.15) · title and CTA tinted green · body steps up to full #1D1D1D opacity.
Note · the Finance card shows the pinned hover state as a design reference; in the live site, all three cards begin in the default state and transition on hover.
Solution cards · Alt 1 — fluid gradient hover · hover any card to preview
Finance
Take invoice processing automation to a new level with the help of AI.
customer service
Automate sales order processing with the help of advanced reasoning and contextual understanding.
legal
Streamline contract lifecycle management with a document platform that understands.
Two blurred colour orbs — primary #32A27D and accent #72D1F1 — drift on independent 7 s / 9 s loops inside the card, producing a fluid gradient wash that never repeats exactly. The orbs stay behind the content (z-index −1) and are masked by
overflow: hidden on the 20 px radius. CTA picks up a light frosted-glass treatment on hover to read clearly against the moving background.
Solution cards · Alt 2 — cursor-tracked tilt hover · hover any card to preview
Finance
Take invoice processing automation to a new level with the help of AI.
customer service
Automate sales order processing with the help of advanced reasoning and contextual understanding.
legal
Streamline contract lifecycle management with a document platform that understands.
Each card pivots in 3D based on cursor position. Move the pointer across the card and it tilts up to ±10° on X / Y axes — title, body and CTA lift forward with a
translateZ(20px) parallax so they read above the surface. A soft green sheen (#ADDEC1 at 35 % opacity) follows the cursor via CSS custom properties (--mx / --my). Returns smoothly to rest on mouseleave. Respects prefers-reduced-motion.
What our clients have to say
Client Logo A
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam quis nostrud exercitation."
Full Name, Job Title at Company Name
Client Logo B
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia."
Full Name, Job Title at Company Name
Client Logo C
"Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam nisi ut aliquid ex ea commodi consequatur quis autem vel eum iure reprehenderit."
Full Name, Job Title at Company Name
Section surface · #EFEFEF full-bleed band · no card containers · three columns separated by 1 px divider lines · partner logo → Palatino Italic 16 px quote → Poppins SemiBold 14 px attribution.
Footer · for Desktop
Full-bleed band · 1920 × 711 · fill #0B556E · top-left & top-right radius 100 px. Column headings · Poppins SemiBold 20 px · #72D1F1 · tracking −1 px · capitalize. Sub-links & blurb · white · Poppins Medium 30 px (blurb) / Regular 14 px (links) / Regular 16 px (copyright). Reversed wordmark & compliance badges sit on the baseline row. The outlined "D" is a decorative watermark on the right edge.
Footer · for Mobile
Mobile adaptation · 390 px preview frame · same radial gradient and #72D1F1 cyan headings as desktop · stacked 2-column nav with section dividers · Poppins Medium 15 px blurb · Regular 12 px links · compliance badges reduced to 26 px height · decorative "D" watermark anchored bottom-right. Preserves the desktop design language while collapsing to a single vertical flow.
09 · Small Elements
Badges, Pills & Chips
Short status markers and filter pills. Badges use semantic tokens; skill chips use neutral outlines that tint green on hover.
Badges
Processed
98.7% accurate
Flagged
High risk
Routed
Draft
New
Skill chips
Invoice extraction
Contract review
Policy routing
Expense parsing
10 · Iconography
Icon System
Line icons set at 2 – 2.4 px stroke, rounded caps and joins. Sized at 16, 20, or 24 px. Recoloured inherit-currentColor so they take on the surrounding text colour.
document
check
alert
search
arrow
verified
chat
layout
user
settings
bell
secure
11 · Voice & Usage
Voice and Do's & Don'ts
Docupath talks like a calm expert — confident, specific, never hyped. Visuals follow the same rule: make one thing obvious, let everything else support it.
Do
- Lead with a verb and a measurable outcome ("Cut AP review time by 73%").
- Pair navy with generous white space; let green be the single accent.
- Use Palatino only for the single H1 per page and editorial quotes.
- Ship exactly one H1 per page; all other sections start at H2.
- Keep buttons to one primary action per view.
- Surface numbers in large navy type with a green supporting label.
Don't
- Don't stack multiple accent colours in one component.
- Don't set long paragraphs in Palatino — it is a display face only.
- Don't use drop shadows beyond the four defined elevations.
- Don't rotate or outline the logo mark; use the provided lock-up.
- Don't use more than one H1 per page, even for visual emphasis.
- Don't skip heading levels (e.g., H1 → H3); follow a clean outline.
- Don't write marketing superlatives ("amazing", "unbeatable") in UI copy.
12 · Reference
Design Tokens
Drop-in CSS custom properties that define the design system. Import once and reference throughout product and marketing surfaces.
:root {
/* Brand */
--navy: #0B556E;
--green: #32A27D;
--mgrn: #ADDEC1;
--lgrn: #DEF2E6;
--lblu: #72D1F1;
/* Neutrals */
--dark: #1D1D1D;
--mgrey: #5D5D5D;
--neutral-cta: #EDEDED;
--lgry: #EFEFEF;
--line: #E5E7EB;
--paper: #F9FAFB;
/* Status */
--red: #FF3434;
--link: #32A27D;
/* Type */
--font-sans: 'Poppins', system-ui, sans-serif;
--font-display: 'Palatino Linotype', Palatino, Georgia, serif;
/* Type scale */
--fs-h1: 64px; --lh-h1: 66px; --ls-h1: -0.05em; /* Palatino Bold */
--fs-h2: 36px; --ls-h2: -0.05em; /* Poppins SemiBold */
--fs-h3: 24px; --ls-h3: -0.05em; /* Poppins SemiBold · capitalize */
--fs-brand: 30px; --ls-brand: -0.05em; /* Poppins Medium · footer lede */
--fs-body-lg: 20px; /* Poppins Regular · capitalize · 50% dark */
--fs-nav: 17px; /* Poppins Medium · capitalize */
--fs-body: 16px; /* Poppins Regular · card body */
--fs-body-sm: 14px; /* Poppins Regular · footer */
--fs-attr: 14px; /* Poppins SemiBold · attribution */
--fs-link: 15px; /* Poppins Medium */
--fs-quote: 16px; /* Palatino Italic */
/* Radius */
--r-sm: 6px; --r-md: 10px; --r-lg: 16px;
--r-xl: 20px; --r-pill: 50px; --r-section: 100px;
/* Shadows */
--shadow-card-active: 0 30px 44px rgba(50,162,125,0.15);
--shadow-cta: 0 10px 20px rgba(50,162,125,0.5);
}
13 · Governance
Deviations from Brand Guideline v1
This style guide documents decisions that diverge from the "Website Brand Style" PPT (v1). The list below flags each deviation so the brand team can either ratify or reject it in the next brand-doc revision.
For the brand team
- Ratify or reject each of the eight deviations above.
- Replace #32AC64 with #32A27D in the next brand-doc revision.
- Consider adding the two-size body scale (15 / 20 px) to the written spec.
- Add the CTA pill and nav-pill components to the brand library.
Until ratified
- Don't revert implementations to the PPT values mid-build — it will create drift from these specifications.
- Don't introduce a second link colour — inline links follow the primary green until told otherwise.
- Don't reinstate the 11 pt Subtitle token without a section that actually needs it.
- Don't change heading sizes downstream without updating this document first.