A comprehensive brand identity manual reverse-engineered from the production frontend. Covering visual language, design tokens, component system, motion principles, and cross-media application guidelines.
Marine Wood Craft presents a visual identity that fuses the precision of maritime engineering with the warmth of artisan woodworking. The design language operates at a rare intersection: technically rigorous yet deeply tactile — a brand that feels as at home in a boatyard as on a luxury yacht.
The palette, typography, and compositional logic together construct a world of controlled ruggedness — a brand that never mistakes refinement for softness. This is confidence earned through craft, not aesthetics borrowed for effect.
Visually, the identity suggests a small but serious specialist operation: experienced, licensed, Pacific-hardened. The target audience are vessel owners, marina managers, and boat enthusiasts who trust craftsmanship over marketing — and can immediately read quality in how a brand presents itself.
The logo system is composed of three elements in precise relationship: an SVG icon mark encoding the brand's core symbolism (hull form, wood grain, wave arc, corner bolts), a wordmark in Bebas Neue, and a geolocation sub-tag in IBM Plex Mono. Together they form a horizontal lockup of exceptional coherence.
The icon mark draws a house-like structure (roof pitch = boat bow) above a grid-ruled rectangle (wood planks), anchored by a gold wave arc (ocean). Red corner squares act as "bolts" — a direct reference to marine construction fasteners. This is not decorative iconography — every element is semantically loaded.
The palette is composed of exactly seven named tokens — a master discipline rarely achieved in production design. Each color carries a dual identity: a material reference (coal, canvas, blood lacquer, deep ocean, goldenrod, teak heartwood, sanded teak) and a functional role. The palette achieves remarkable richness through opacity stacking rather than additional hues.
| Token | HEX | RGB | HSL | Semantic Role | Emotional Character |
|---|---|---|---|---|---|
| --black | #0D0D0D | 13, 13, 13 | 0°, 0%, 5% | Backgrounds · Header · Footer · Process sections · Dark-panel halves | Depth, authority, coalfield weight |
| --white | #F5F2ED | 245, 242, 237 | 36°, 26%, 95% | Page background · Body text on dark · Services section BG | Warm canvas — not clinical white. Aged nautical paper. |
| --red | #C0392B | 192, 57, 43 | 5°, 63%, 46% | CTA buttons · Header border · Hero rule · Accent bars · Logo "Craft" · Section left strip | Action, urgency, marine lacquer, danger signal |
| --blue | #1A3A5C | 26, 58, 92 | 211°, 56%, 23% | Hero triangle · Highlight service card · Contact left panel · About corner accent | Deep Pacific ocean, nautical charts, institutional depth |
| --yellow | #D4A017 | 212, 160, 23 | 43°, 80%, 46% | Sub-labels · Stat numbers · Step numbers · Nav sub · Wave arc · Gold strip · Hover color · Footer mark | Aged brass hardware, goldenrod, navigational instrument dials |
| --wood | #8B5E3C | 139, 94, 60 | 25°, 40%, 39% | Grain overlays · Icon line strokes · Grain utility class | Teak heartwood, caulked planking, warm materiality |
| --wood-light | #C49A6C | 196, 154, 108 | 31°, 43%, 60% | Hero mark grain lines · Grain overlays · Gold gradient end | Sanded teak, oiled mahogany, sun-bleached deck |
| --wood-pale | #E8D5B7 | 232, 213, 183 | 35°, 48%, 81% | About-left panel · Contact-right panel · Warm section backgrounds | Aged parchment, dried marine varnish, warm neutrality |
Recommendation: The 0.25 opacity footer copy is decorative — acceptable for non-essential metadata. All primary navigation and body text meets or exceeds AA. Consider raising dim body text from 0.55 to 0.65 opacity for stronger AA compliance on body paragraphs in dark sections.
The type system employs exactly three typefaces in fixed role assignments — a discipline that creates extraordinary coherence. Each typeface occupies its lane without overlap: Bebas Neue commands, DM Sans speaks, IBM Plex Mono annotates. The result reads like a maritime instrument panel: precision at every register.
The layout philosophy is built on binary panel logic — sections split exactly 50/50 between contrasting material environments (dark/light, ocean/wood, black/cream). This creates a page rhythm that oscillates: every section is a dialogue between two opposing worlds. There is no neutral zone — surfaces are always semantically loaded.
| Section | Grid | Background Duality | Accent Logic | Visual Role |
|---|---|---|---|---|
| Header | Flex space-between | --black + red border | Red bottom border, wood grain overlay | Fixed anchor, authority |
| Hero | 2-col + absolute layers | --black + --blue triangle | Red vertical bar (left), gold horizontal strip (bottom), blueprint grid (right) | First impression, spatial drama |
| Pattern Bar | 1-col 10px strip | Repeating --black/red/blue/yellow | All four brand colors in rhythm | Section separator, brand signature |
| About | 2-col 50/50 | --wood-pale + --black | Yellow corner triangle (wood), blue corner triangle (dark), red rule | Brand story, materiality contrast |
| Services | 5-col grid | --white + --blue (highlight) | Red left strip (6px), yellow expand bar on hover, hover inversion | Product catalog, scannable |
| Process | 4-col strip | --black full-bleed | Red top line on first step only, dim vertical dividers | Sequential narrative, trust building |
| Contact | 2-col 50/50 | --blue + --wood-pale | Blueprint grid (left), grain (right), wave lines, red corner triangle (right) | Conversion, dual-environment harmony |
| Footer | Flex space-between | --black + red border | Mirrors header — closes the visual bracket | Brand close, credentials |
The animation language is restrained but deliberate. Motion is never decorative — every animated element serves either to reveal hierarchy (hero load sequence) or to signal interactivity (hover states). The dominant metaphor is the slow unfurling of a sail — elements rise and resolve with unhurried confidence.
The UX strategy is built on a single premise: if you trust the design, you'll trust the craft. The interface earns the phone call — it doesn't beg for it. Every interaction decision serves the goal of conveying premium specialist credibility, not generating clicks through anxiety or urgency.
| Breakpoint | Grid Change | Typography | Component Behavior |
|---|---|---|---|
| Desktop ≥ 900px |
Hero 2-col · About 2-col · Services 5-col · Process 4-col · Contact 2-col | H1: clamp(56px, 6vw, 88px) · Section padding 80–96px | Nav: all links visible · Hero-right mark: visible · Full column splits |
| Mobile ≤ 900px |
Hero 1-col · About 1-col · Services 2-col (last card full) · Process 2-col · Contact 1-col | H1 clamp still applies · Reduced padding 32px horizontal · Sections 56–64px vertical | Nav links hidden (non-CTA) · Hero triangle: full-width at 30% opacity (background texture only) · Hero-right mark: display:none · Footer: column layout |
| Strategy | Desktop-first architecture with a single 900px breakpoint. The binary split collapses gracefully to stacked panels. Services grid goes from 5 to 2 columns (maintaining card density). The 5th service card spans full width on mobile. The breakpoint is broad — a single rule covers all mobile/tablet scenarios, prioritizing simplicity over granular control. | ||
| Consideration | Rule |
|---|---|
| CMYK Safety | All 7 palette colors have clean CMYK equivalents. No spot-color dependency, but wood grain gradient should be tested before large-format print runs. |
| Paper Texture | Uncoated / silk stocks emphasize the warmth of --wood-pale and enhance grain texture. Gloss stocks flatten the identity and should be avoided except for large-format vinyl. |
| Embossing / Foil | Deboss the icon mark on thick cards. Gold foil for wave arc and yellow sub-tag. Spot UV for wordmark on matte stocks. Red hot foil for "Craft" accent. |
| Bleed / Safe Area | 3mm bleed standard. 5mm safe area inside trim. Pattern bar extends to bleed on all edges where applicable. Logo never closer than 10mm to trim edge. |
| Large Format | All identity elements are vector-native (SVG-source). Scale without limit. At 1m+ widths, increase grain line weight proportionally (2→4px). Blueprint grid on blue panels enhances at large format — maintain 48mm spacing at scale. |
Marine Wood Craft's visual identity is one of the most coherent marine-trade brand systems built for digital. It achieves something rare: a premium aesthetic constructed from zero borrowed design language. Every element is purpose-built and materially justified — the grain references teak, the triangle references the hull bow, the blueprint grid references naval architecture, the steam animation references the service literally performed. Nothing is decorative in the superficial sense.
The typography trinity (Bebas + DM Sans + IBM Plex Mono) is exceptionally well-chosen. These three typefaces cover the entire personality range needed — authority, warmth, precision — without ever competing. The strict role assignments prevent any typographic ambiguity.
The seven-token color palette is an achievement of restraint. Most brands define 15–20+ colors and lose coherence. Seven tokens, with opacity stacking as the expansion mechanism, produces a rich visual environment that never feels confused.