Blue Trout & Co.View homepage ↗

Blue Trout & Co. / Design system v0.2 / Proposed

Clear. Connected.
Quietly capable.

A practical visual language for a service business partner: calm surfaces, direct hierarchy, and concrete explanations.

FoundationsTypographyComponentsLayout & behavior

Two references. One direction.

Reference 01

Avoca

Observed: blue accents, pale technical grids, split hero composition, and visual explanations of customer workflows.

Adaptation: a restrained blue palette, faint grid only behind the workflow, and tangible service demonstrations.

View reference ↗

Reference 02

Fixed Labs

Observed: spacious centered hero, neutral surfaces, rounded actions, bordered service cards, and clear process sections.

Adaptation: measured typography, compact navigation, simple cards, and a straightforward problem → service → process → conversation sequence.

View reference ↗

These are original Blue Trout design decisions informed by the references, not extracted brand specifications. No reference assets, testimonials, or business claims are reused.

01 / Color

A neutral foundation. A useful blue.

Canvas#ffffff

Section wash#f3f6fb

Ink#172633

Action blue#365fa2

Quiet text#526477

Hairline#dce3eb

Use white for the primary canvas, wash for section breaks, ink for headings, and blue for actions and active states. Reserve green for clearly labeled informational status. Avoid decorative gradients and broad saturated fields.

02 / Typography

Clarity before character.

DISPLAY · 68 / 76 DESKTOP · 42 / 47 MOBILE · 650 WEIGHT
Make the next
step easier.
SECTION · 44 / 49 · 650 WEIGHT

Working together.

CARD · 23 / 26 · 650 WEIGHT

Get found.

Type rules

Native system sans-serif: platform UI font, Segoe UI, then Arial. No font download required.

  • Body: 16px / 1.65, hero supporting copy: 18px / 1.7.
  • Headings: −0.045em tracking; card titles: −0.025em.
  • Eyebrows: 11px monospace, uppercase, +0.13em tracking.
  • Keep prose to roughly 60–70 characters per line.
  • Use sentence case; no italic display treatment or tilted text.

03 / Components

Small, consistent building blocks.

Actions

Find your starting point ↗Explore services

48px minimum height. Rounded shape. One primary action per decision point. Blue hover and a visible focus ring.

Disabled controls must explain why they cannot be used.

Turn interest into action.

A concise outcome, followed by the services that support it.

Booking & reminders

Make the path to an appointment clearer, with connected availability, confirmations and timely reminders.

Lead capture & follow-up

Organize inquiries and give your team a clear next step.

04 / Composition & interaction

Space to understand. Details to explore.

Layout tokens

  • Maximum content width: 1160px.
  • Gutters: 32px desktop, 18px mobile.
  • Section spacing: 92px desktop, 60px mobile.
  • Spacing scale: 4, 8, 12, 16, 24, 32, 48, 64, 92.
  • Cards: 16px radius, 1px border, 28px padding.
  • Workflow nodes: 12px radius; subtle shadow only where it clarifies a layer.
  • Below 850px: services stack. Below 600px: split sections and process stack; workflow uses two columns.

Behavior & content

  • Native disclosure rows for service details and FAQs. Navigation uses click/tap dropdowns, one open at a time, with Escape and outside-click dismissal; service links open their detail rows.
  • Journey selector uses buttons with aria-pressed and a polite live region.
  • Hover transitions: 180ms. Honor reduced-motion preferences.
  • Maintain visible keyboard focus and semantic heading order.
  • Diagrams depict illustrative workflows, never fabricated performance.
  • Present all eight services as independent choices with optional connections. No service is a prerequisite. Explain each benefit, fit with existing tools, and complementary services.
  • Photography only when real or licensed and relevant. No borrowed logos, client proof, or stock AI artwork.

Implementation tokens

--bg: #ffffff;       --wash: #f3f6fb;
--ink: #172633;      --muted: #526477;
--blue: #365fa2;     --hover: #244980;
--pale: #e7eef9;     --line: #dce3eb;
--radius: 16px;      --max: 1160px;
--shadow: 0 16px 48px #192b4710;

Shared stylesheet: design-system.css. Both previews are self-contained for offline review. Final brand approval, full accessibility testing, and the real booking connection remain launch tasks.

Review the applied homepage ↗