Strategy & Planning
Design System Audit
Analysis of the existing gsm808.com visual identity, design language, and brand assets. This document captures everything extractable from the current site and flags gaps that require manual browser-based review to resolve.
01Overview
Extraction Methodology
We conducted an automated audit of gsm808.com using HTTP-based crawling tools. The results below reflect everything recoverable from the site's public response at the time of analysis.
Extraction Status: Limited
The gsm808.com site is a fully JavaScript-rendered single-page application (SPA). HTTP crawlers cannot execute JavaScript, which means all body content - copy, colors, fonts, images, component structure - loads only after the JS runtime runs. Only the HTML shell and page title were accessible programmatically.
To complete this design system audit, a manual browser walkthrough or a browser-automation tool (Puppeteer, Playwright, or a Figma/Webflow plugin like Knapsack) is required to capture the rendered state.
To complete this design system audit, a manual browser walkthrough or a browser-automation tool (Puppeteer, Playwright, or a Figma/Webflow plugin like Knapsack) is required to capture the rendered state.
| Data Point | Value | Source | Status |
|---|---|---|---|
| Company Name | Green Star Marine | Page <title> tag | Confirmed |
| Category | Marine Product Development | Page <title> tag | Confirmed |
| Primary URL | https://gsm808.com/ | Direct access | Confirmed |
| HTTPS | Yes | HTTP response | Confirmed |
| Rendering Method | Client-side SPA | HTTP response analysis | Confirmed |
| Color Palette | Not extractable | N/A - JS-rendered | Needs Manual Review |
| Font Stack | Not extractable | N/A - JS-rendered | Needs Manual Review |
| Logo / Wordmark | Not extractable | N/A - JS-rendered | Needs Manual Review |
| Navigation Structure | Not extractable | N/A - JS-rendered | Needs Manual Review |
| Imagery Style | Not extractable | N/A - JS-rendered | Needs Manual Review |
02Color Palette
Colors
No color values were extractable from the current site. The inferred palette below is derived from the brand name and marine industry conventions - not from the live site. All inferred swatches must be verified in-browser before use.
Extracted from Site
No colors extracted. The site's CSS is injected at runtime by JavaScript. HTTP crawlers receive an empty HTML shell with no style definitions. Open the site in Chrome DevTools, inspect any element, and check the Computed panel for color values.
Inferred Brand Direction
Note: Inferred Only
The palette below is a hypothesis based on the company name "Green Star Marine" and standard marine industry color conventions. These are not confirmed values from the live site. Use this as a starting point for brand direction discussion, not as production tokens.
Inferred
Marine Navy
#0A1628
Inferred
Ocean Blue
#1B4F8A
Inferred
Sea Green
#1A7A4E
Inferred
Star Gold
#C9A84C
Inferred
Warm White
#F5F2EC
| Role | Proposed Token | Hex | Rationale |
|---|---|---|---|
| Primary background | --color-bg-primary | #0A1628 | Deep navy anchors the marine identity |
| Secondary / brand | --color-brand-blue | #1B4F8A | Mid-tone ocean blue for interactive elements |
| Accent / brand | --color-brand-green | #1A7A4E | Reflects "Green" in the brand name |
| Highlight / CTA | --color-accent-gold | #C9A84C | Star motif; warm contrast against navy |
| Light surface | --color-surface-light | #F5F2EC | Warm white for section backgrounds and cards |
03Typography
Type Stack
Font data was not accessible from the current site. The specimens below show candidate typefaces for the marine product development context. All selections require sign-off from the client and confirmation against the existing brand.
Manual Extraction Required
To extract the current font stack: open gsm808.com in Chrome, inspect any heading element, open the Computed tab in DevTools, and locate the font-family property. Record the first resolved family name. Repeat for body text and any monospace or accent type.
Candidate Type Stack
Display / Heading - Candidate A
Marine Product Development
Display / Heading - Candidate B
Marine Product Development
Body Text
Green Star Marine delivers end-to-end marine product development, from initial concept and engineering through prototyping, testing, and production-ready documentation.
Monospace / Technical Data
Cert: USCG-46 CFR / ISO 9001:2015 / CE Mark
Hull Material: 5086-H116 Marine-Grade Aluminum
Draft: 0.61m | LOA: 8.4m | Beam: 2.7m
Hull Material: 5086-H116 Marine-Grade Aluminum
Draft: 0.61m | LOA: 8.4m | Beam: 2.7m
| Role | Size | Weight | Line Height | Status |
|---|---|---|---|---|
| Display heading (H1) | 2.8-4rem | 700-800 | 1.05-1.1 | Unconfirmed |
| Section heading (H2) | 1.8-2.2rem | 700 | 1.2 | Unconfirmed |
| Sub-heading (H3) | 1.2-1.4rem | 600-700 | 1.3 | Unconfirmed |
| Body | 1rem (16px) | 400 | 1.65 | Unconfirmed |
| Small / caption | 0.8-0.85rem | 400-500 | 1.5 | Unconfirmed |
| Label / uppercase | 0.65-0.72rem | 600-700 | 1 | Unconfirmed |
| Monospace | 0.85-0.9rem | 400-500 | 1.6 | Unconfirmed |
04Imagery
Photography & Visuals
Imagery could not be captured from the JS-rendered site. The framework below defines the questions to answer during a manual review session. Complete this section by browsing gsm808.com and documenting each field.
No images extracted. Screenshot-based extraction requires browser-level rendering. Use the framework below during a manual walkthrough session.
Photography Style
What is the visual tone? (e.g. editorial, technical, lifestyle, studio, action, aerial)
To be documented during manual review
Subject Matter
What appears in the photos? (e.g. vessels, equipment, team, ocean environments, manufacturing)
To be documented during manual review
Aspect Ratios
What are the dominant image formats? (e.g. 16:9 hero, 4:3 cards, 1:1 thumbnails, portrait)
To be documented during manual review
Color Tone
Are images warm/cool? High contrast or muted? Do they use color grading or overlays?
To be documented during manual review
Illustration / Icon Style
Are there icons, diagrams, or illustrations? Line-based, filled, flat, or 3D?
To be documented during manual review
Overall Brand Impression
What 3 adjectives best describe the visual feel? (e.g. technical, rugged, premium, clean, approachable)
To be documented during manual review
05Components
Component Inventory
The list below covers components that are standard across marine B2B websites. Each row reflects an inferred presence based on industry conventions - none have been visually confirmed from the live site.
| Component | Expected Use | Observed? | Notes |
|---|---|---|---|
| Global Navigation | Site-wide header with logo and links | Needs Verification | Check for sticky behavior, mobile hamburger, dropdown structure |
| Hero / Banner | Full-width intro with headline and CTA | Needs Verification | Note background treatment - image, video, or gradient |
| Product / Feature Grid | Card-based layout for products or capabilities | Needs Verification | Capture card structure: icon, title, description, CTA pattern |
| About / Team Section | Company story and/or team member profiles | Needs Verification | Note whether team photos are used and their style |
| Contact / CTA Section | Footer CTA, contact form, or inquiry prompt | Needs Verification | Record form fields, button labels, and copy |
| Footer | Navigation links, legal, social, address | Needs Verification | Note columns, secondary nav, and any certification logos |
| Testimonials / Logos | Social proof - client logos or quotes | Needs Verification | High value for B2B credibility; note if present |
| Stats / Metrics Bar | Key numbers (years in business, projects completed, etc.) | Needs Verification | Common in industrial B2B - capture values if visible |
| Primary Button | Main CTA button style across the site | Needs Verification | Record background color, text, border-radius, hover state |
| Secondary / Ghost Button | Outline or low-emphasis button variant | Needs Verification | Note border color and text color against background |
06Recommendations
Design System Recommendations
The following recommendations apply regardless of what the manual audit reveals. They reflect best practices for a marine B2B company rebuilding its web presence.
01
Complete a Manual Design Audit Before Building
Before creating any new design assets, conduct a 60-90 minute screen-recorded walkthrough of the current site in a browser. Capture every page, scroll all sections, and document every component. This prevents rebuilding something the client may want to keep - or missing something the client considers core to the brand.
02
Establish a Formal Color Token System
Define a complete palette with semantic roles: primary, secondary, accent, surface, border, text (primary/secondary/tertiary), error, success, and warning. Marine B2B brands benefit from a dark primary (navy or deep teal) contrasted with a bright accent (gold, cyan, or lime). Document every hex value and its intended use case.
03
Standardize the Type Scale Across All Surfaces
Marine product development involves technical documentation, spec sheets, and client-facing marketing in the same brand family. Define a type scale that works for both contexts: a strong display face for marketing, a legible body face for documentation, and a monospace option for specs, part numbers, and measurements.
04
Build a Component Library from the Ground Up
The current site's component inventory is unknown. For the new build, create a documented component library in Figma covering: navigation, hero patterns, card types, form elements, buttons, tables, and data display components. Every component should have both light and dark mode variants and defined interaction states.
05
Develop Marine-Specific Photography Guidelines
Marine B2B photography is highly varied - from clean studio product shots to dramatic open-water action. Define clear guidelines for the types of images used, preferred aspect ratios, color treatment, and subject matter. Avoid generic stock photography; real project photography (vessels, team, manufacturing) builds credibility significantly faster in B2B marine.
06
Define the Brand Voice Before Writing Any Copy
Marine product development companies often default to overly technical language that alienates non-specialist buyers. Define 3-4 brand voice attributes (e.g. "authoritative but accessible", "precise without jargon", "confident and direct") and write sample headlines and body copy demonstrating each. Use this as a filter for all new content created for the site rebuild.