Douro Holdings · Style Guide B · Southern Industrial

Preserving legacy. Building the next chapter.

Ink navy, steel gray, and brass. Heavy structural display type over a technical body face, with a monospace data face for EBITDA figures and acquisition criteria.

Color Typography Spacing Radius Elevation Buttons Forms Links Aspect Ratios

01 · Color Palette

Southern Industrial — eight core slots.

Eight semantic slots, sized to the global color slots available in the WordPress build. Every pairing shows its measured WCAG contrast ratio.

White text

--color-primary

#0F1E2D · rgb(15, 30, 45)

Ink navy. Headers, dark sections

16.88:1 · AAA

White text

--color-primary-hover

#0B1622 · rgb(11, 22, 34)

Pressed / hover

18.23:1 · AAA

White text

--color-secondary

#48586A · rgb(72, 88, 106)

Steel gray. Secondary text, borders

7.29:1 · AAA

Ink navy text

--color-accent

#C08A2A · rgb(192, 138, 42)

Brass. CTA fill, rules, iconography

5.56:1 · AA

Never pair brass with white text (3.04:1 — fails).

Ink navy text

--color-accent-hover

#A6741E · rgb(166, 116, 30)

CTA hover

4.13:1 · AA Large

Body text

--color-surface

#F3F1EC · rgb(243, 241, 236)

Bone. Page background

14.96:1 · AAA

Body text

--color-surface-raised

#FFFFFF · rgb(255, 255, 255)

Cards

16.88:1 · AAA

On surface

--color-text-primary

#0F1E2D · rgb(15, 30, 45)

Body copy

14.96:1 · AAA

Usage rules

MANDATORY: brass #C08A2A filled buttons always carry ink navy #0F1E2D text (5.56:1 — AA pass). White on brass is 3.04:1 and fails; it is blocked in the button component.
For brass as text on light surfaces below 24px, use the darkened brass #8A6014 instead.
Steel gray #48586A on bone #F3F1EC measures above 4.5:1 and is approved for secondary body copy.

02 · Typography

Archivo + IBM Plex Sans.

One shared type ramp across all three directions — only the families change, so the comparison stays apples to apples. Body copy is capped at a 65–75 character measure.

Display / Headings

Archivo

Weights 700 & 800 · letter-spacing -0.02em on display sizes. Heavy, confident, structural.

Body

IBM Plex Sans

Weights 400 & 500. Technical warmth, excellent at long measure.

Numerals / Data

IBM Plex Mono

Weight 500 for EBITDA figures, deal criteria, and stats — precise and engineered.

Overline

GEORGIA & THE SOUTHEAST

0.75rem · letter-spacing 0.12em · weight 600

H1 / Display

Preserving legacy. Building the next chapter.

clamp(2.75rem, 5vw, 4rem) · LH 1.05

Hero headline — one per page

One business. One owner. A long-term commitment.

clamp(2rem, 3.5vw, 2.75rem) · LH 1.15

Section titles

Manufacturing, distribution, and industrial services.

1.5rem · LH 1.25

Card titles · criteria headings

What we look for in an owner.

1.25rem · LH 1.3

Sub-headings within cards

Body Large

The Douro Valley is one of the oldest continuously cultivated wine regions in the world. Families have cared for the same vineyards for hundreds of years, passing them through five, ten, even twenty generations. Nothing about the Douro is built for the short term.

1.125rem · LH 1.65 · 65–75ch

Lead paragraphs

Body

1rem · LH 1.65 · 65–75ch

Default running text

Small

All conversations are held in strict confidence.

0.875rem · LH 1.55

Captions under figures · disclosures

Data figures

$1.5M – $3M EBITDA · $7M – $20M EV

Weight 500 for EBITDA figures, deal criteria, and stats — precise and engineered.

03 · Spacing

An 8-point spatial grid.

8 / 16 / 24 / 32 / 48 / 64 / 80 / 120. Every padding, margin, and gap in the system resolves to one of these steps.

8px

Hairline gaps · icon offsets

16px

Default component padding

24px

Card padding · grid gaps

32px

Sub-block separation

48px

Section interior spacing

64px

Major block separation

80px

Section vertical rhythm

120px

Chapter breaks · hero padding

04 · Border Radius

Buttons at 0px.

Hard, machined, no softness.

--sg-radius-sm · 0px

Inputs · badges · small chips

--sg-radius-md · 0px

Buttons · swatch tiles

--sg-radius-lg · 0px

Cards · panels · media frames

05 · Elevation

Two levels, no more.

A deliberately shallow elevation scale. Depth signals interactivity; it is never decorative.

none

Flat surfaces · dense tables

--sg-shadow-1

Level 1 — resting cards

--sg-shadow-2

Level 2 — hovered / floating panels

06 · Buttons

Touch-targets sized for confidence.

All actions meet a 44px minimum (Fitts's Law). Focus uses a 2px ring with 2px offset for keyboard parity.

Primary

Secondary

Text · Ghost

Try keyboard focus (Tab) — the focus ring confirms state without competing with the primary call to action.

07 · Forms

Short forms. Direct contact preferred.

This audience prefers a phone call. Where a form is used, it stays brief and every state is explicit.

Full name

Default

Company

Focus · 2px ring, 2px offset

⚠ Please include a full email address — errors are never signalled by colour alone.

Referred by (locked)

Disabled

Anything you'd like me to know

08 · Links

Underlined, always.

Inline links are underlined so they never depend on colour alone, and every state is documented.

Default See acquisition criteria

Hover See acquisition criteria

Focus-visible See acquisition criteria

Visited See acquisition criteria

Disabled See acquisition criteria

09 · Image Aspect Ratios

Predictable media frames.

Standard ratios for the eventual build. Frames are unfilled — this is a token reference, not a mockup.

16 : 9

Valley film · hero video embeds

4 : 3

Facility and operations content blocks

1 : 1

Portrait tile · profile

3 : 4

Editorial portrait

21 : 9

Cinematic banner