# Polestarglobal Design System

> High-contrast maritime intelligence anchored by deep teal foundations and sunset orange precision.

**Source:** https://polestarglobal.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Polestarglobal utilizes a high-contrast, professional palette that balances deep maritime teal (#0a3438) with a high-visibility primary orange (#f88e63). The system is built on a clean white foundation (#ffffff) with structured, wide-tracking typography. Display headings use the geometric **Unbounded** family, while functional and body text rely on **Inter Tight**. The interface favors generous corner radii (25px to 40px) for cards and buttons, creating a modern, accessible feel against a strictly flat elevation model with no captured drop shadows.

## Signature DNA
1. **Sunset Primary Contrast** (The use of #f88e63 as the primary action color against #ffffff or #0a3438, providing immediate visual hierarchy on both light and dark bands.)
2. **Geometric Display Pairing** (The juxtaposition of Unbounded for display headers and Inter Tight for body copy, maintaining a technical yet readable maritime aesthetic.)
3. **Soft-Panel Geometry** (A consistent use of large border radii, specifically 35px for cards and 25px for primary buttons, softening the high-contrast color palette.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| Not captured in source | — | — | — | — |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | #ffffff | Page background, button text, card surface | 98 | 1 | Computed Style |
| `{colors.black}` | #000000 | Borders, labels, primary text | 27 | 1 | Computed Style |
| `{colors.charcoal}` | #3a3a3b | Default body text, secondary button text | 128 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary}` | #f88e63 | Primary CTA background, hyperlinks, borders | 56 | 1 | `--cmplz_hyperlink_color` |
| `{colors.brand-green}` | #0a3438 | Dark section backgrounds, primary headings | 8 | 1 | `--brand_green` |
| `{colors.accent-blue}` | #164295 | Form field borders (decorative_only) | 8 | 0.6 | Computed Style |
| `{colors.gray-light}` | #afafaf | Deemphasized text (decorative_only) | 4 | 0.6 | Computed Style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{colors.error}` | #d63637 | Form validation errors (`--wpforms-label-error-color`) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Unbounded | 500, 600, 700 | Display, Headings, Buttons | Unbounded (Google Fonts) | OFL |
| Inter Tight | 400, 700 | Body, UI Labels, Subheadings | Inter Tight (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-lg}` | 50px | 56px | normal | 500 | Hero Display | `h2.large.t-brand-highlight` |
| `{type.display-md}` | 46px | 50px | normal | 500 | Section Headings | `h2.t-brand-highlight` |
| `{type.heading-lg}` | 28px | 38px | normal | 700 | Sub-section Headings | `h3` |
| `{type.heading-md}` | 24px | 30px | normal | 500 | Small Headings | `h2.smaller.t-brand-highlight` |
| `{type.heading-sm}` | 20px | 30px | normal | 400 | Lead Paragraphs | `p` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default Body | `article#post-18` |
| `{type.body-sm}` | 14px | 17px | normal | 600 | Inline Links/Arrows | `a.arrow.t-brand-green` |
| `{type.button}` | 16px | 24px | normal | 500 | CTA Labels | `a.btn.btn-small` |

### Principles
1. **Unbounded for Impact**: All primary brand highlights and display headers use Unbounded to signal authority.
2. **Inter Tight for Utility**: All functional text, including form labels and long-form body, uses Inter Tight for legibility.
3. **No Bold Body**: Body text consistently stays at weight 400; emphasis is achieved through color (#f88e63) rather than weight.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 35 |
| `{space.md}` | 16px | 26 |
| `{space.lg}` | 20px | 48 |
| `{space.xl}` | 32px | 5 |
| `{space.xxl}` | 40px | 19 |
| `{space.section}` | 60px | 24 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Form inputs, sharp containers | 241 occurrences |
| `{radius.md}` | 12px | Controls | 10 occurrences |
| `{radius.lg}` | 25px | Primary Buttons | `Rounded Button` component |
| `{radius.xl}` | 35px | Content Cards | `Card` component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | All surfaces and cards | 0 shadow tokens captured |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary site-wide CTA
**Pages observed:** Homepage, About
**Spec:** Background `{colors.primary}` (#f88e63) | Text `{colors.white}` (#ffffff) | Radius 25px | Padding 15px 32px | Type `{type.button}`
**States observed:** Default: captured | Hover: not captured

#### Text Input
**Role:** Lead generation and contact forms
**Pages observed:** About
**Spec:** Background `{colors.white}` (#ffffff) | Text #000000 (0.7 opacity) | Border 1px `{colors.accent-blue}` (#164295) | Radius 0px | Padding 0px 14px
**States observed:** Default: captured | Focus: not captured

### Tier 2: Patterns
#### Card
**Role:** Feature highlights and case studies
**Pages observed:** Homepage, About
**Spec:** Background `{colors.white}` (#ffffff) | Text `{colors.charcoal}` (#3a3a3b) | Radius 35px | Padding 30px 40px
**States observed:** Default: captured

#### Surface Band
**Role:** Section partitioning
**Pages observed:** Homepage, About
**Spec:** Background `{colors.brand-green}` (#0a3438) | Border 2px `{colors.white}` (#ffffff) | Radius 0px
**States observed:** Default: captured

### Tier 3: Surface-specific
Not captured in source.

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1440px (Desktop) |
| Section Padding | 60px |
| Card Grid Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked card layouts, center-aligned hero text |
| Desktop | 1440px | Multi-column grids (3-up for case studies) |

## Imagery & decoration
Polestarglobal uses high-resolution maritime photography (cargo ships, port operations) as hero backgrounds. Decorative elements include the "Pole Star" wordmark and simple orange arrow icons (`→`) for text links. It avoids illustrative icons, favoring photographic realism.

## Do's
- Use `{colors.primary}` (#f88e63) for all primary conversion actions.
- Set display headings in Unbounded with a minimum size of 24px.
- Maintain a 35px border radius on all white content cards.
- Use `{colors.brand-green}` (#0a3438) for full-width section backgrounds to create visual breaks.
- Pair orange text links with a trailing arrow icon.

## Don'ts
- **Wrong:** Using #0d6efd (Bootstrap Blue) for primary buttons. **Right:** Use `{colors.primary}` (#f88e63). **Reason:** #0d6efd is a default framework token, not a brand token.
- **Wrong:** Applying drop shadows to cards. **Right:** Keep cards flat with `{radius.xl}`. **Reason:** The system is strictly monochrome/flat elevation.
- **Wrong:** Using Unbounded for long-form body text. **Right:** Use Inter Tight. **Reason:** Unbounded is reserved for display and headings.
- Do not use sharp corners (0px) for buttons; always use `{radius.lg}` (25px).
- Do not use #f88e63 for large background areas; it is reserved for accents and buttons.

## Similar brands
- Maersk (Maritime authority, clean typography)
- Wärtsilä (Industrial tech, high-contrast accents)
- Lloyd's Register (Professional services, structured layout)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #f88e63;
  --color-brand-green: #0a3438;
  --color-charcoal: #3a3a3b;
  --font-display: 'Unbounded', sans-serif;
  --font-body: 'Inter Tight', sans-serif;
  --radius-button: 25px;
  --radius-card: 35px;
}
```

## Agent prompt examples
- "Create a primary CTA button using #f88e63 background, white text, 25px border radius, and Unbounded 500 font."
- "Design a feature card with a white background, 35px border radius, and 30px internal padding, using Inter Tight for the description."
- "Generate a section header using Unbounded 500 at 46px with the color #0a3438."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed styles.
- Mobile-specific font size adjustments (fluid type) were not fully mapped.
- Secondary navigation patterns (dropdowns) were not analyzed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://polestarglobal.com | 1440px | 2026-06-06 |
| About | https://polestarglobal.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://polestarglobal.com | 390px | 2026-06-06 |