Overview Design Direction Color Tokens Typography Animations Components Logo & Icon
Strategy & Design

Design System

Live design system for the GSM website mockup at gsm.clientportals.vip/website/. All values are confirmed from the implemented codebase — this document reflects what is actually built, not a proposal.

Updated September 2026 gsm808.com mockup Swift Innovation Confirmed
01Overview

Design Direction: Industrial Ocean

Deep navy ground. Teal accent reads technology-forward without veering nautical-cliche. Gold for high-emphasis CTAs and certification callouts. Every decision calibrated for a B2B buyer evaluating a development partner, not buying off a shelf.

AttributeValueStatus
Pages built6 website pages + 3 legal pages (9 total)Live
Color palette10-token dark system — ink, depth, surface, edge, border, teal, gold, fog, mist, whiteConfirmed
Primary fontBarlow 400/600/700 (body, nav, UI)Confirmed
Display fontDM Serif Display (homepage H1 only)Confirmed
Label / mono fontBarlow Condensed 400/600/700 (eyebrows, tabs, stats)Confirmed
Button variantsbtn-teal (filled), btn-gold (filled), btn-ghost (white outline), nav-cta (teal outline)Confirmed
Animationslogo-spin 8s propeller, marker-pulse 2.8s eyebrow dotsConfirmed
Mobile navHamburger overlay, hidden ≤768px breakpointConfirmed
Video heroesClient-supplied MP4s — portfolio, services, productsConfirmed
02Design Direction

Positioning Pillars

Three pillars drive every copy and design decision on the GSM mockup.

01: Technical Authority
Certification numbers, tolerance figures, and material grades are primary content. Every page assumes a buyer who can read a spec sheet.
02: Agile Partner
Clean and fast visual language, not lumbering OEM. Cards and timelines over dense brochure text. Specific deliverables, not generalized capabilities.
03: Zero Fluff
"World-class" is banned. Preferred: "0.02mm tolerance", "46 CFR compliant", "tested to IEC 60945 Cat 4". Copy earns trust by being specific.
03Color Tokens

CSS Custom Properties

All 10 tokens are defined on :root in each page's inline <style> block. No shared CSS file — each page is self-contained.

Core Palette
--ink
#020C18 — page background
--depth
#051524 — footer, dark sections
--surface
#081E32 — tab bars, card backgrounds
--edge
#102C44 — elevated surfaces
--border
#1A3D5A — primary borders
--border-lt
#224C6E — lighter borders, inactive labels
--teal
#00C8A0 — primary accent, links, active
--gold
#C9A84C — CTAs, cert callouts, stats
--fog
#7AAEC8 — secondary text on dark
--mist
#C8E2F0 — body text on dark
--white
#EAF4FF — headings, high-emphasis text
Light Section Colors (not CSS tokens)

Content sections (portfolio grid, services body, products grid, contact form) use a light ground — hardcoded, not tokens.

PurposeValue
Light section background#EEF5F9
Light section border#BDD4E4
Light card background#FFFFFF
Light primary text#020C18
Light secondary text#2D526A
Light teal (on light)#00725A
Dim variants
Each primary accent has a dim counterpart for subtle backgrounds: --teal-dim:#00251E, --teal-mid:#005C4B, --gold-dim:#2A1E06.
04Typography

Type Stack

Three font families loaded via Google Fonts. All are confirmed from the website implementation.

Specimens
Homepage Display — DM Serif Display
Land or Sea.
Engineered to Perform.
DM Serif Display 400 · clamp(3.2rem,7vw,6rem) · letter-spacing -0.02em · homepage H1 only
Inner Page Heading — Barlow 700
Marine-Grade Products Built to Spec
Barlow 700 · clamp(2rem,4vw,3.2rem) · letter-spacing -0.025em · all inner page H1s
Eyebrow / Label — Barlow Condensed 700
Marine Engineering · Pewaukee, WI
Barlow Condensed 700 · 0.68–0.72rem · letter-spacing 1.6px · text-transform uppercase
Body — Barlow 400
Green Star Marine delivers end-to-end marine product development — from initial concept and engineering through prototyping, certification, and production-ready documentation for commercial marine applications.
Barlow 400 · 18px base · line-height 1.6–1.8 · color --fog or --mist on dark
Stat / Large Number — Barlow Condensed 700
150+
Barlow Condensed 700 · 3.8rem · used in spec-numbers section and portfolio hero stats
Type Scale Reference
RoleFamilyWeightSizeNotes
Homepage H1DM Serif Display400clamp(3.2rem,7vw,6rem)Italic em → teal; homepage only
Inner page H1Barlow700clamp(2rem,4vw,3.2rem)letter-spacing -0.025em
Section H2Barlow7001.4–1.5remletter-spacing -0.01em
Card/CTA H3Barlow7001.1–1.4remNormal tracking
BodyBarlow40018px base (0.85–1rem)line-height 1.6–1.8
Eyebrow / labelBarlow Condensed7000.65–0.72remUPPERCASE, letter-spacing 1.6px
Stat figureBarlow Condensed7003.5–3.8remletter-spacing -0.02em
Nav linkBarlow6000.82remNormal tracking
Small / captionBarlow / Barlow Condensed400–7000.6–0.78remContext-dependent
05Animations

Keyframe Animations

Two global animations used across all pages. Both are defined inline in each page's style block.

NameKeyframesTimingApplied To
logo-spin to{transform:rotate(360deg)} 8s linear infinite .nav-logo img, .footer-brand img — the propeller SVG in nav and footer
marker-pulse 0%/100%: opacity 1, teal glow
50%: opacity 0.45, no glow		 2.8s ease-in-out infinite .hero-line, .page-eyebrow-line, .cta-eyebrow::before — the 6px teal dot on eyebrow labels
ticker-scroll from:translateX(0) to:translateX(-50%) 90s linear infinite .ticker-track.go — homepage ocean ticker only; pauses on hover
pulse-dot 0%/100%: opacity 1, scale 1
50%: opacity 0.4, scale 0.7		 2.4s ease-in-out infinite .ticker-pre::before — live indicator dot in homepage ticker
Live: marker-pulse on eyebrow dot
Marine Engineering
Start a Project
Work With Us
06Components

Component Library

All components implemented in the current website mockup. Each is defined as inline CSS in the relevant page file.

Buttons
Button variants
btn-teal btn-gold btn-ghost nav-cta
ClassBackgroundBorderTextUse
.btn-teal#00C8A0#00C8A0#020C18Homepage hero primary CTA
.btn-gold#C9A84C#C9A84C#020C18Inner page CTA sections
.btn-ghosttransparent#EAF4FF#EAF4FFSecondary hero action
.nav-ctatransparent#00C8A0#00C8A0Nav "Request Quote" — all pages
Navigation
ElementClassBehavior
Site nav.site-navFixed z-index:200, backdrop-blur, dark bg at 92% opacity
Logo.nav-logo imgSpinning propeller SVG (logo-spin 8s). Teal fill. 30px height.
Nav links.nav-linkHidden at ≤768px. Active page gets .active → teal color.
Burger button.nav-burger3-line icon, visible only ≤768px. Toggles .nav-mobile.open.
Mobile overlay.nav-mobileFixed full-screen dark overlay with links. Closes on backdrop click, Escape, or link tap.
Page Heroes
VariantPageBackgroundNotes
Full video heroindexMP4 video, brightness(0.35), gradient overlay90vh min-height. Caustics SVG overlay at 11% opacity. Ocean ticker bar at bottom.
Video page headerportfolio, products, servicesMP4 video, brightness(0.28)420px height. Hero text left-aligned, full width.
Dark gradient headerabout, contact, legal pageslinear-gradient(160deg, --depth, --ink)Same page-header CSS class, no video element.
Section Eyebrows
ClassMarkerUse
.hero-eyebrow6px teal square via .hero-line (pulsing)Homepage hero section label
.page-eyebrow6px teal square via .page-eyebrow-line (pulsing)Inner page hero section label
.cta-overline6px teal square via ::before pseudo (pulsing)Homepage "What We Build" eyebrow
.cta-eyebrow6px teal square via ::before pseudo (pulsing)Inner page CTA section label ("Work With Us", "Start a Project")
Product Category Tabs
Tab bar (products page)
Marine Propulsion
Deck Equipment
Navigation & Safety
Environmental

JS toggles .active on both the tab and the matching .prod-category div (display:none/block). First panel shown by default on load.

CTA Section Pattern

All inner page CTAs use a dark panel (background:#1A3D5A) inside the light section. Pattern: eyebrow → H3 → body copy → btn-gold.

Spec / Stats Bar

Homepage-only light section (background:#EEF5F9) with 3 instrument-panel stat items. Large Barlow Condensed 700 numbers. ".spec-unit" in teal, ".spec-sub" body text in steel blue.