VED Design System

Virginia Equipment Development.

The single source of truth for VED's visual language. Editorial, confident, architectural — closer to a Knoll brand book than a typical contractor site. This guide documents the tokens, components, and section recipes that keep every page reading as part of the same brand.

Explore Tokens View Homepage
brand voice

Brand Voice

Disciplined, heritage-rich, regionally proud. Short, declarative sentences. Numbers as proof. No exclamation marks. No marketing fluff.

Positioning

Virginia's Trusted Site Development Partner. We don't subcontract. We execute.

Personality

Disciplined, heritage-rich (Est. 1975), regionally proud, technically precise, never boastful.

Register

Editorial magazine layout meets industrial engineering documentation. Lots of negative space.

colors

Color Palette

A tight, restricted palette. Contrast and rhythm come from alternating light/dark sections — not from color variety. Never introduce new hues.

Background
--ved-bg#f5f5f5
Foreground
--ved-fg#212021
Brand Red
--ved-red#dd0e12
Muted Grey
--ved-grey#4e4b4e
White
--ved-white#fcfcfc
Cinematic Black
—#0d0c0d
typography

Type System

Two families only. Manrope for body, navigation, captions and buttons. Playfair Display for all headings and large display numbers.

Playfair Display

Heading Light

Heading Semibold

Weight 300heading-light
Weight 600heading-semibold
Manrope

Body large — confident and direct.

Body default — used for paragraph copy, captions, and supporting text. Reads like 4th-generation craftsmanship; never marketing fluff.

Eyebrow / Meta

buttons

Button System

Six unified variants. Primary red is used sparingly across all surfaces. Secondary and tertiary variants come in light- and dark-surface pairs.

PrimaryBook A Consultation .btn-primary
SecondaryBook A Consultation .btn-secondary
TertiaryView More .btn-tertiary
Secondary DarkBook A Consultation .btn-secondary-dark
Tertiary DarkView More .btn-tertiary-dark
Tertiary Dark UnderlineView More .btn-tertiary-dark-underline
micro elements

Editorial Tells

Small, consistent details that make every page feel like part of the same publication.

Eyebrow Label
By The Numbers

8px red bar + 11px uppercase eyebrow with 0.3em tracking. Used above every section heading.

Stat Display
49+

Years

Icon Circle
Hairline Divider

1px line at rgba(33,32,33,0.12). Use sparingly between rows or sections.

Counter · 00 / 06
01/ 06

Paired counter (01 in red · / 06 in 25% foreground) with a 6-segment progress rail. Used in carousels (expertise, projects, testimonials) and numbered card headers. Numbers are always zero-padded to two digits.

Surface Tints · On-Light vs On-Dark
On Light (#f5f5f5)
  • Default text#212021
  • Secondary#4e4b4e
  • Tertiaryrgba(33,32,33,0.70)
  • Disabled / counterrgba(33,32,33,0.65)
  • Card surface#fcfcfc + 8% border
  • Hairlinergba(33,32,33,0.08–0.12)
On Dark (#212021)
  • Default text#ffffff
  • Secondaryrgba(255,255,255,0.85)
  • Tertiaryrgba(255,255,255,0.75)
  • Disabled / counterrgba(255,255,255,0.65)
  • Card surfacergba(255,255,255,0.05) + 10% border
  • Hairlinergba(255,255,255,0.06–0.12)

Same four-step hierarchy applied on both surfaces — only the base color flips. Never use a dark-surface tint on a light background or vice versa.

Ghost Watermark

Oversized Playfair semibold set at rgba(255,255,255,0.04) (on dark) or rgba(33,32,33,0.04) (on light). Positioned outside the optical margin of the section so it bleeds behind headlines without competing with them.

  • · Font-size 180–320px, line-height 1, never italic.
  • · pointer-events-none · select-none · aria-hidden.
  • · Max one watermark per section. Never over a photo.
spacing

Spacing & Layout

Edge-to-edge horizontal padding via .section-padding (64px desktop, 16px mobile). Sections breathe with 80–112px vertical padding.

section-padding

64px desktop · 16px ≤ 768px

px-16 md:px-4
Section vertical

py-20 (light) → py-28 (hero / cta)

80px – 112px
Radius

4px standard · 6px cards · full circle for icons

4 / 6 / 999
imagery

Imagery & Motion

Cinematic photography paired with dark scrim overlays. Motion is restrained: 0.5s–0.75s with cubic-bezier(0.22,1,0.36,1). Stagger children at 0.12s.

Scrim Recipe
Bottom-up scrim

Always render bright type over a dark scrim — never directly on photography.

Easing
  • cubic-bezier(0.22, 1, 0.36, 1) — primary
  • cubic-bezier(0.25, 0.46, 0.45, 0.94) — secondary
  • duration: 0.45 – 0.75s
  • staggerChildren: 0.12
checklist

Do / Don't

Do
  • · Alternate light (#f5f5f5) and dark (#212021) sections.
  • · Use the red 8px bar + uppercase eyebrow above every section.
  • · Pair Playfair light + semibold in the same headline.
  • · Render bright type over dark scrim — never raw photography.
  • · Keep buttons to the six prescribed variants.
Don't
  • · Introduce new colors or a third typeface.
  • · Use heavy drop shadows or aggressive hover transforms.
  • · Wrap headings in red — red is reserved for accents.
  • · Use exclamation marks or marketing fluff in copy.
  • · Re-style buttons inline; always use the .btn-* utilities.