BLUE INK SEAL · DESIGN SYSTEM V1

Considered details.
A consistent impression.

The visual language for the website, client experience and staff tools.

Refined Blue Ink Seal mobile notary logo

Keep the navy fleur-de-lis seal upright, with clear space of at least one quarter of its diameter. Pair it with the serif wordmark. The seal is a brand emblem, not a credential or official notarization stamp.

02 · A palette of blue and light

Signature navy

#07396F

Deep navy

#032B5C

Royal blue

#0F52B5

Pale blue

#EEF6FC

White is the primary canvas. Navy anchors headings and actions; royal blue provides emphasis. Pale blue groups supporting content. Body text: #1B1F27. Secondary text: #596272.

03 · Editorial warmth. Everyday clarity.

Notary Services That Come to You.

Cormorant Garamond 500–600 for headlines and the wordmark. Inter 400–700 for body copy, labels, navigation and form controls. Fonts are self-hosted; a serif and system sans-serif fallback keep the page readable while they load.

04 · Actions with a clear purpose

Use one primary action per section. Labels describe the next step. An unconfigured action must explain its status and never imply a confirmed appointment.

A useful status message explains what is available and what happens next.

05 · Quiet, purposeful imagery

Navy stamp and pen brand photograph
Document folio brand photograph

Original generated still-life photography illustrates the brand. It does not depict customer documents, staff or credentials. Use thin rounded line icons, never emoji as interface icons.

06 · Movement with restraint

Sections enter once with an 18px rise over 600ms. Cards lift 5px on hover; buttons lift 2px. Transitions take 180–220ms. The hero gently settles over 1.2 seconds. No loops, flashes or movement required to understand content.

Reduced-motion preferences disable all entrance and interaction motion. Content is visible when JavaScript is unavailable. Focus rings and keyboard behavior remain unchanged.

07 · Room to breathe

A 1160px content width, 4/8px spacing rhythm, 6px cards, 12px feature bands and 44px minimum action targets. Four-column service and process grids become two columns on mobile; large split layouts stack. All form errors and status messages remain adjacent to their controls.