Veridian Marketing / Design reference

Brand Guide

The colors, typography and design details behind the Veridian Marketing website. Use this reference to keep future pages and materials consistent.

Colors Typography Layout and spacing

01 / Typography

Three fonts, distinct jobs.

The heading, body and technical-label fonts work together. Keep each role consistent while preserving the size choices of its page family.

Bricolage Grotesque

Clear ideas. Working systems.

Headings and display type. Standard heading weight: 600. Large headings use tight spacing and balanced wrapping.

Loaded weights: 500–700; optical-size range: 12–96.

Figtree

A clear message, built around what people need to understand and do.

Body text, navigation, buttons and form controls. Body weight: 400; navigation: 500; buttons: 600.

Loaded weights: 400–700.

IBM Plex Mono

Systems / Signals / Details

Eyebrows, small labels, tags, metadata and technical illustrations. Use it for short signals, rather than long paragraphs.

Loaded weights: 400 and 500.

Shared type scale

Headings

H1: 40–68px, line height 1.02, tracking −0.022em. H2: 32–48px, line height 1.08, tracking −0.018em.

H3: 20.8–24.8px, line height 1.22, tracking −0.01em. H4: 16.8px, line height 1.3.

These are shared defaults. Home, compact documents, articles and some page families retain intentional overrides. The homepage headline reaches 72px.

Body and controls

Body: 16px / 1.65 line height. Introduction: 19.52px / 1.6. Secondary microcopy: 15.36px / 1.6.

Buttons: 16px, weight 600, line height 1.2. Navigation links: 15.52px, weight 500. Footer headings: Figtree, 15.68px, weight 600.

Labels and fallbacks

Eyebrow: 13.44px, tracking 0.02em. Tag: 11.52px, tracking 0.11em, uppercase. Table headers and Insights status/date labels use 12px.

Display and body fallbacks: Avenir Next, Segoe UI, system-ui, sans-serif. Mono fallbacks: ui-monospace, SF Mono, Menlo, Consolas, monospace.

02 / Color palette

Purple carries the identity.

Deep plum provides depth. Violet identifies actions. Lavender supports dark surfaces, while pale purple gives light sections room to breathe.

Plum 950

#180A28

--plum-950

Deepest purple. Footer, dark sections and the scrolled header base.

Plum 900

#1F0E36

--plum-900

Deep plum. Hero gradient and dark layered surfaces.

Plum 800

#2B1649

--plum-800

Midnight plum. Dark gradient transitions and depth.

Plum 700

#3A2066

--plum-700

Lifted plum. Brighter dark-purple transitions.

Violet, lavender and light purple

Violet

#6C3FD9

--violet

Primary action color. Buttons, links, numbered accents and light-context focus.

Violet deep

#5430B5

--violet-deep

Darker violet. Primary-link and button hover states.

Lavender

#B49CE0

--lavender

Light purple. Links and supporting text on dark surfaces.

Lavender 2

#9F8FC4

--lavender-2

Muted lavender. Dark-context notes and ledger arrows.

Lilac

#EFE9FA

--lilac

Soft purple. Tinted sections and light-button hover surfaces.

Pale

#F7F4FC

--pale

Lightest purple. Quiet section backgrounds and contrast between content families.

Text, white, amber and borders

Ink

#252130

--ink

Main text on white and pale backgrounds.

Ink 2

#5A536E

--ink-2

Supporting body text, introductions and descriptions.

Ink 3

#6E6581

--ink-3

Small secondary text on light backgrounds. Current corrected value.

Paper / white

#FFFFFF

--paper

Main light surface. White also has separate semantic roles listed below.

Amber

#F3B545

--amber

Small highlights, eyebrow markers, illustration signals and focus on dark surfaces.

Line

#E6E0F1

--line

Subtle borders and separators on light surfaces.

Line 2

#D6CDE8

--line-2

Stronger borders for outlined controls and chips.

White, with separate roles

The five white tokens share #FFFFFF today, but describe different jobs: paper for the page, text-on-dark for lettering, surface-card for cards, surface-control for inputs, and illustration-paper for document artwork. Keeping those roles separate lets one surface change without recoloring unrelated parts of the site.

03 / Color in context

Light on dark. Dark on light.

Choose the foreground for the surface it sits on. A palette value is not a promise that every possible pairing has sufficient contrast.

Deep plum

White is the main heading and action-text color on dark sections. Lavender #B49CE0 supports links and secondary information.

Smaller dark-context notes

Lavender 2 #9F8FC4 is used for the corrected dark-context microcopy and ledger arrows. Ink 3 belongs on light surfaces.

Amber signals

Amber #F3B545 marks small accents and dark-context keyboard focus. Keep it purposeful; it is not the main body-text color.

04 / Layout and spacing

A wide canvas, with readable content.

Shared spacing keeps similar components aligned. Compact heroes, reading columns and different card families keep their intentional differences.

Content width

Maximum outer wrapper: 1520px, including 40px desktop gutters on both sides. Maximum inner content: 1440px.

Use the wide wrapper for marketing layouts; do not stretch long reading columns to fill it.

Section rhythm

Standard vertical section padding: 112px above and below. At 980px and below: 84px.

Desktop gutters: 40px. At 640px and below: 22px.

Reading widths

Introductions: up to 62ch. Policy prose: 72ch. Article prose: 68ch.

Section-heading groups: up to 760px. Hero copy: up to 820px.

Grids and gaps

Shared card grids commonly use 20px gaps. Hero grid: 56px. Split layout: 72px.

Hero and split layouts stack at 980px, using 40px gaps. Different component families retain their own responsive rules.

Surfaces and controls

Corners and depth

Large corner radius: 18px. Small radius: 12px. Pills: 999px.

Shared card shadow: 0 24px 60px −30px, using plum at 35% opacity.

Cards and forms

Form cards: 40px inner padding, changing to 28px vertically and 22px horizontally at 640px and below.

Borders typically use Line #E6E0F1; outlined controls and chips use Line 2 #D6CDE8.

Buttons

14px vertical and 26px horizontal padding, with an 8px content gap and pill corners.

Primary: violet with white. Light: white with plum. Ghost: transparent with a border, chosen for its light or dark context.

Hero spacing

Home: top padding is the 80px header allowance plus 72px; bottom is 96px. At 980px and below: header allowance plus 42px at the top, 72px below. Inner-page heroes use the header allowance plus 63px above and 92px below; compact document heroes use 64px below. Responsive hero rules retain their existing family treatment. The header allowance keeps content clear of the fixed navigation.

05 / Interface details

Consistent actions and visible focus.

These links demonstrate the existing button families and jump within this guide. They do not submit a request.

Primary action

View the palette →

Violet identifies the main action. Hover shifts to Violet deep.

Secondary action

View typography

An outlined action supports the primary choice without giving every link equal emphasis.

Text link

Read layout details →

Use a clear destination and descriptive words. Keyboard focus must remain visible.

Keyboard and motion

Standard focus: a 3px violet outline with a 3px offset. Dark surfaces use amber. Button and card transitions use 180ms ease; cards lift 2px on hover and buttons move 1px when pressed. Existing reduced-motion behavior disables animation and transitions and restores automatic scrolling.

06 / Imagery and effects

Depth, with restraint.

The homepage photograph, overlays and motion create atmosphere. They are a specific composition, not a filter to apply indiscriminately to every page.

Homepage composition

Keep the approved original photograph, crop, plum overlays and contrast treatment together. Home base: #241038. The separate gradient section uses #4A2A8F as its midpoint.

Animated purple sweep

Effect-specific colors: #12071F, #2A105E, #45179B and #6224D9. The sweep runs for 22 seconds, alternating direction. These colors belong to that effect, rather than replacing the core palette.

Supporting effects

Illustrations and tinted imagery share the purple family. Code-scroll: 26 seconds. Platform ticker: 70 seconds and pauses on hover. Pulse: 1.8 seconds. Pipeline dash: 2.6 seconds. Honor reduced-motion preferences.

07 / Keeping the system consistent

One reference. Editable components.

Use Veridian Marketing for the full company name where identification matters. Veridian remains the shorter name once that context is clear.

Reuse the right family

Match spacing and treatment within a component family. Preserve intentional differences between compact heroes, plan cards, case files, illustrations and reading columns.

Do not turn every card or section into the same design merely to make it uniform.

Keep one source for each rule

Shared colors and dimensions live in Oxygen Variables. Recurring design rules live in unlocked native Oxygen classes.

Reuse the existing class and variable rather than adding an inline override or loading the reference stylesheet again.

Maintain this reference

This is a snapshot of the current website system, checked September 30, 2026. Color samples reference the live variables; written hex values and specifications should be refreshed when those settings change.

Keep ordinary text and design controls editable. Form hover border #C2B7DC and placeholder #A39CB8 are interface-specific details, rather than additional core brand colors.