# Shipfusion Design System

> High-contrast logistics infrastructure defined by electric cobalt accents, heavy-weight technical sans-serifs, and a rigid white-canvas grid.

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

## TL;DR
Shipfusion utilizes a "Logistics High-Vis" aesthetic, pairing a stark white background (#ffffff) with a high-energy primary blue (#4864ff). The system is built on a foundation of monochrome clarity, using pure black (#000000) for high-authority text and deep-contrast UI elements. Typography is split between the technical, wide-stanced GT Flexa for structural headings and Inter for functional UI and body copy. Geometry is predominantly pill-shaped for interactive elements (999px radius) or softly rounded for content containers (10px–12px radius), creating a balance between industrial precision and modern SaaS accessibility.

## Signature DNA
1. **Cobalt Structural Accents** (#4864ff used for primary CTAs, active states, and section dividers to signal "action" and "flow" against the white canvas).
2. **GT Flexa Bold Headers** (The use of GT Flexa at weight 700 with its characteristic wide proportions provides a distinct "shipping crate" industrial authority to all section titles).
3. **Pill-to-Panel Radius Contrast** (Interactive buttons use a full 999px pill radius, while content cards use a disciplined 10px or 12px radius, separating "tools" from "information").

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background and card surface | 121 | 0.8 | Computed Style |
| `{color.ink}` | `#000000` | Primary text, high-contrast button labels, and dark surfaces | 199 | 0.8 | Computed Style |
| `{color.border.light}` | `#e8e9f3` | Subtle input borders and secondary button backgrounds | 11 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#4864ff` | Primary CTA background, active icons, and brand highlights | 110 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| GT Flexa | 700 | Display and Section Headings | Archivo Black | Licensed |
| Inter | 500, 600 | UI Labels, Buttons, Sub-headers | Inter (Google Fonts) | SIL OFL |
| Arial | 400 | Fallback body and slider controls | sans-serif | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.h2}` | 32px | 37.76px | normal | 700 | Main section heads | `h2` |
| `{type.h3}` | 28px | 35px | normal | 700 | Subsection heads | `h3` |
| `{type.h4}` | 24px | 33.6px | normal | 700 | Feature titles | `h4.quickfeat__title` |
| `{type.h5}` | 20px | 26.6px | normal | 700 | Card titles | `h3.feature-card__title` |
| `{type.body.lg}` | 19px | 24.96px | normal | 500 | Quotes and intro text | `div.review__quote` |
| `{type.button}` | 16px | 20.8px | normal | 500 | Primary CTA labels | `a.btn.btn--fill` |
| `{type.body.sm}` | 14px | 18.3px | normal | 500 | Compact card descriptions | `p.compact-card__desc` |
| `{type.badge}` | 12px | 14.9px | normal | 600 | Status indicators | `span.badge.badge--ghost` |

### Principles
1. **Heading Width:** GT Flexa is always used at weight 700 for structural hierarchy; it is never used for body prose.
2. **Functional Inter:** All interactive components (buttons, inputs, nav) use Inter at weight 500 or 600 to ensure legibility.
3. **Zero-Height Dividers:** Visual rhythm is often managed by `div.section-intro__divider-line` elements with 0px height and a 16px font-size context.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 3 |
| `{space.sm}` | 12px | 31 |
| `{space.md}` | 20px | 76 |
| `{space.lg}` | 40px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Section containers | 205 occurrences |
| `{radius.input}` | 8px | Form fields | `Text Input` component |
| `{radius.card}` | 12px | Feature and content cards | `Card` component |
| `{radius.pill}` | 999px | Primary and secondary buttons | `Pill Button` component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.05) 0px 16px 32px 0px` | Floating content cards | Observed on Pricing page cards |
| `{shadow.input}` | `rgba(0, 0, 0, 0.05) 0px 8px 16px 0px` | Form field depth | Observed on Text Inputs |

## Components

### Tier 1: Foundational

#### Pill Button
**Role:** Primary site actions (Contact Sales, Get Pricing)
**Pages observed:** https://shipfusion.com, https://shipfusion.com/pricing
**Spec:** Background: `#4864ff` | Text: `#ffffff` | Radius: `999px` | Typography: `{type.button}`
**States observed:** Default | Hover | Active: captured

#### Text Input
**Role:** Lead capture and quote requests
**Pages observed:** https://shipfusion.com/pricing
**Spec:** Background: `#ffffff` | Border: `1px solid #e8e9f3` | Radius: `8px` | Padding: `14.56px`
**States observed:** Default | Focus: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific service capabilities
**Pages observed:** https://shipfusion.com
**Spec:** Background: `#ffffff` | Radius: `12px` | Padding: `20px` | Shadow: `{shadow.card}`
**States observed:** Default: captured

#### Status Badge
**Role:** Categorization and labels
**Pages observed:** https://shipfusion.com/pricing
**Spec:** Background: `#ffffff` | Border: `1px solid #000000` | Radius: `999px` | Typography: `{type.badge}`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Pricing Card
**Role:** Tiered service selection
**Pages observed:** https://shipfusion.com/pricing
**Spec:** Background: `#ffffff` | Radius: `10px` | Padding: `12.32px 35.52px` | Shadow: `{shadow.card}`
**States observed:** Default: captured

#### Section Divider
**Role:** Visual break between content blocks
**Pages observed:** https://shipfusion.com
**Spec:** Background: `#4864ff` | Height: `2px` | Width: `60px` (approx)
**States observed:** Static: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Padding | 80px - 100px vertical |
| Grid Gap | 20px (`{space.md}`) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked card layouts, centered headings |
| Desktop | 1440px | Multi-column grids (3-up or 4-up cards) |

## Do's
- Use `#4864ff` for all primary user intents.
- Apply GT Flexa Bold for all `h2` and `h3` level headings.
- Maintain a minimum of 20px (`{space.md}`) between card elements.
- Use the 999px pill radius for all buttons to differentiate from 12px cards.
- Ensure all text on `#4864ff` backgrounds is `#ffffff` for contrast compliance.

## Don'ts
- **Wrong:** Using `#4864ff` for body text. **Right:** Use `#000000`. **Reason:** Accessibility and readability on white backgrounds.
- **Wrong:** Applying 999px radius to content cards. **Right:** Use 10px or 12px. **Reason:** Visual hierarchy between "tools" and "containers."
- **Wrong:** Mixing GT Flexa into body paragraphs. **Right:** Use Inter. **Reason:** GT Flexa's width is optimized for short display bursts, not long-form reading.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --sf-color-primary: #4864ff;
  --sf-color-ink: #000000;
  --sf-color-canvas: #ffffff;
  --sf-color-border-soft: #e8e9f3;
  
  --sf-font-display: "GT Flexa", sans-serif;
  --sf-font-ui: "Inter", sans-serif;
  
  --sf-radius-card: 12px;
  --sf-radius-pill: 999px;
  
  --sf-shadow-card: 0px 16px 32px 0px rgba(0, 0, 0, 0.05);
}
```

## Known gaps
- Hover state hex values for the primary blue were not explicitly captured in the token set.
- Mobile-specific font size scaling for GT Flexa was not fully mapped across all heading levels.
- Secondary button "ghost" state border-width consistency (1px vs 2px) requires further validation.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://shipfusion.com | 1440x900 | 2026-06-06 |
| Pricing | https://shipfusion.com/pricing | 1440x900 | 2026-06-06 |
| About | https://shipfusion.com/about | 1440x900 | 2026-06-06 |