MASTER DESIGN / DIGITAL EXTENSION 1.0

The Bluegrain theme.
One shared language.

The master identity, translated into a working digital system. Reusable tokens, components, imagery, and interactions—made to keep every page recognizably Bluegrain.

Download the digital theme {{icon:download}}Back to the master identity {{icon:arrow}}
01 / FOUNDATIONS

Blue at heart.
Warm by nature.

Core colors match the approved identity. Supporting surfaces, spacing, and motion make the system work on screen. Select a swatch to copy its value.

SPACE

A rhythm of four.

4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 px. Generous page margins. Fine rules. Deliberate alignment.

FORM

Clear edges. Quiet depth.

Square buttons and cards. One-pixel rules. Shadows reserved for material objects. No decorative gradients.

MOTION

Purpose before movement.

220 ms interface transitions. Gentle reveal on scroll. Reduced-motion preferences respected throughout.

02 / TYPOGRAPHY

Precision meets personality.

MANROPE / PRIMARYAa

Clear thinking.

Regular 400 · Medium 500 · Semibold 600
Headings, body, navigation, labels.

INSTRUMENT SERIF / EXPRESSIONAa

Lasting connections.

Regular 400 · Italic 400
Expressive phrases and editorial emphasis.

DISPLAY / 54–104 PXMore forward.
HEADING / 38–66 PX

Common ground.

BODY / 16 PX · 1.7

Technology should help people do useful work with more clarity. Keep body copy readable, specific, and grounded in the reader’s task.

LABEL / 11 PX · +0.14 EMTHOUGHTFUL TECHNOLOGY. REAL PROGRESS.
03 / SHARED COMPONENTS

Made to work together.

These are working components from the site. Keyboard focus, interactive states, and mobile layouts are part of the system.

ACTIONS & LABELS
Text link {{icon:arrow}}
AI & consultationWorkflow automationTeam learning
{{icon:flow}}

Work that flows.

A service card pairs a clear title with a useful description and one meaningful destination.

Explore automation {{icon:arrow-up-right}}
PROGRESSIVE DISCLOSURE
What makes a useful component?
A clear purpose, consistent visual rules, meaningful behavior, and enough flexibility to work across screen sizes.
How should the serif be used?
Use it to add warmth to a short phrase. Keep longer reading passages in Manrope and let space carry the hierarchy.
FORM FIELDS / VALIDATION EXAMPLE

Component demonstration. Nothing is stored or sent.

04 / ICONOGRAPHY

A precise visual vocabulary.

Original 24 × 24 SVG icons. Consistent 1.5 px strokes, round caps and joins. Download individually or use the shared sprite.

{{icons}}
05 / ART DIRECTION

Technical ideas.
A human sense of place.

Original AI-generated editorial imagery: cobalt structures, warm mineral surfaces, natural light, and considered connections. Abstract brand art, not photographs of company facilities.

Original Bluegrain connected-system sculpture
CONNECTED SYSTEMS / SCULPTURAL HERO
Original Bluegrain architectural connection study
COMMON GROUND / ARCHITECTURAL STUDY
Asset inventory & generation prompts {{icon:arrow-up-right}}
06 / USE THE THEME

A clear system.
A simple foundation.

Plain HTML, CSS, and JavaScript. Local fonts and assets. Framework-independent components and editable page fragments.

Load the shared styles.

<link rel="stylesheet" href="theme/tokens.css">
<link rel="stylesheet" href="theme/components.css">
<link rel="stylesheet" href="theme/site.css">

Change foundations in tokens.css. Reuse components from components.css. Page composition lives in site.css.

Keep it consistent.

Use outlined logo masters. Link the local fonts. Compose with the shared spacing scale. Respect text contrast, keyboard focus, and reduced motion. Give each page one clear next step.

Get the complete theme {{icon:download}}