Onshore

---
version: alpha
name: Onshore
description: "# You build America’s future. We make sure you get the credit for it."
colors:
  primary: "#2b54c8"
  secondary: "#040404"
  neutral: "#f7f5ef"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Space Grotesk
    fontSize: 34px
    fontWeight: 500
    lineHeight: 1.14
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Space Grotesk
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.09
    letterSpacing: -0.02em
  headline-sm:
    fontFamily: Space Grotesk
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.26
    letterSpacing: -0.009em
  headline-xs:
    fontFamily: Space Mono
    fontSize: 23px
    fontWeight: 500
    lineHeight: 1.22
    letterSpacing: 0.077em
  body-md:
    fontFamily: Inter
    fontSize: 19.8px
    fontWeight: 400
    lineHeight: 1.55
rounded:
  sm: 18px
  full: 9999px
spacing:
  xs: 6px
  sm: 14px
  md: 22px
  lg: 30px
  xl: 108px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    rounded: "{rounded.full}"
    padding: 10px 20px
    height: 53px
  button-secondary:
    textColor: "#11161d"
    rounded: "{rounded.full}"
    padding: 10px 20px
    height: 53px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#1b222c"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 30px
---

# Onshore: Blue wave divider on warm parchment

## Overview

Onshore is a serious, confident B2B brand focused on trust and clarity. The interface is calm and spacious, using a warm neutral background and a single saturated blue for actions. Copy leads; UI chrome stays minimal. When no token covers a case, default to high-contrast text, restrained color, and generous vertical spacing to keep the story readable and credible.

## Colors

- **primary (#2b54c8):** Saturated action blue for primary buttons, links, and interactive accents.
- **secondary (#040404):** Near-black for headlines and core text on light surfaces.
- **neutral (#f7f5ef):** Warm parchment background across most sections.
- **surface (#f7f5ef):** Default surface, same as neutral, for cards on light backgrounds.
- **on-surface (#2b54c8):** Blue used when elements sit on the neutral surface (e.g., links, inline highlights).

## Typography

- Space Grotesk (Google Fonts, free): Primary display family for headlines. Use headline-lg (34px/1.14, 500) for key hero and section titles; headline-md (30px) and headline-sm (26px) step down for subheads and card titles.
- Space Mono (Google Fonts, free): Used for technical/label moments via headline-xs (23px, 500, letter-spaced). Apply for step numerals, micro-section labels, and small highlights where a utilitarian tone helps.
- Inter (Google Fonts, free): Body copy via body-md (19.8px/1.55, 400). Use for paragraphs, list items, FAQs, and small UI labels. All three families are freely loadable; if system fallbacks are required, default to generic sans-serif or monospace classes as appropriate.

## Layout

- Spacing scale: xs 6px, sm 14px, md 22px, lg 30px, xl 108px. Use xs–lg for intra-component gaps and padding; reserve xl for section top/bottom rhythm and hero bands.
- Grid: a fluid, responsive grid. On wide screens, align content blocks to a central column set; use md (22px) gutters and lg (30px) outer padding on neutral sections. Stack to a single column on small screens with sm (14px) gaps.
- Vertical rhythm: pair headline levels with md or lg spacing before/after to keep copy breathable on the warm background.

## Elevation & Depth

No shadows are used (all measured sizes are none). Hierarchy is established with tone (dark card on light page), strong foreground color (#2b54c8) for actions, and generous whitespace. Dividing bands and the wave edge create separation between sections without drop shadows.

## Shapes

The system uses soft geometry: cards are rounded at 18px, and interactive elements (primary/secondary buttons) are fully pill-shaped at 9999px. Text links are square (0px) to read as inline copy rather than controls. Use 18px for any new surfaced container; reserve pills for tappable CTAs and chips.

## Components

- Buttons
  - Primary: #2b54c8 background, white text, 53px height, 10px×20px padding, fully rounded (9999px). The default call-to-action.
  - Secondary: text color #11161d, 53px height, same pill shape; pair with a subtle border on implementation if needed for contrast on light backgrounds.
  - Link: inline action in #2b54c8 with 0px radius; use within paragraphs or help text.
- Card: #1b222c background, neutral text (#f7f5ef), 18px corners, 30px padding. Use for proof, stats, or dense content on the cream background.

### Hero with wave divider
Centered headline stack using headline-lg and body-md on #f7f5ef. Two pill buttons (primary + secondary) sit below. The section ends with a full-bleed primary-blue band that can include an SVG wave edge.

### Integration strip (dark band)
A full-bleed band in #1b222c with subdued partner marks and a small label. Use xl (108px) vertical padding and md (22px) gaps; text in #f7f5ef.

### "How it works" stepper
Three steps (01–03). Numerals in headline-xs (Space Mono); step titles in headline-sm; details in body-md. Use md (22px) gaps between steps; buttons use the link style for "See how it works →".

### Metrics grid
A 2–4 column grid of KPIs (e.g., 500+, $600M+). Large numbers in headline-md or -lg with labels in body-md. Use lg (30px) internal padding.

### Audit-ready manifest card
Implements the card component to simulate an audit packet: title, checklist, and key values. Place on the neutral page to emphasize elevation via tone; pair with a primary link for security details.

### Testimonials
Star rating, quote, and attribution. Quote in headline-sm, body in body-md. Keep plenty of lg (30px) spacing and align stars in #2b54c8 for continuity.

### FAQ accordion
Questions in headline-sm; answers in body-md. Use 1px borders in #1b222c between items and md (22px) vertical padding per row. Expand/collapse affordance can reuse the link color for clarity.

## Do's and Don'ts

- Do reserve #2b54c8 for actions, links, and key accents; it's the only saturated hue in the system.
- Do keep most surfaces on #f7f5ef and rely on whitespace and tone shifts, not shadows, for hierarchy.
- Do use 18px corners for surfaced blocks and 9999px pills for CTAs to maintain visual language.
- Do space sections with xl (108px) top/bottom padding and use md–lg gaps inside components.
- Don't introduce drop shadows or extra color accents; contrast comes from tone and type.
- Don't mix additional fonts or radii; keep to Space Grotesk, Space Mono, Inter, and the 18px/pill scheme.

## Agent Prompt Guide

Quick color reference:
- Text: #040404
- Background: #f7f5ef
- Border: #1b222c
- Accent/CTA: #2b54c8

1) Build a centered hero on #f7f5ef with two pill CTAs.
- H1: Space Grotesk 34px/1.14, weight 500, color #040404.
- Body: Inter 19.8px/1.55, color #040404.
- Primary button: 53px tall, 10px×20px, radius 9999px, bg #2b54c8, text #ffffff.
- Secondary button: 53px tall, 10px×20px, radius 9999px, text #11161d on #f7f5ef.
- Bottom edge: add a full-bleed divider band in #2b54c8 to host an SVG wave.

2) Create a dark integration strip.
- Section bg: #1b222c; top/bottom padding 108px.
- Label: Space Mono 23px, letter-spaced, color #f7f5ef.
- Logo row: center-aligned with 22px gaps; logos/titles in #f7f5ef.

3) Lay out a three-step "How it works" section.
- Grid: three columns on desktop with 22px gaps, stack on mobile.
- Step number: Space Mono 23px, color #2b54c8.
- Step title: Space Grotesk 26px/1.26, 500, color #040404.
- Copy: Inter 19.8px/1.55, color #040404.

4) Add an audit-ready manifest card.
- Container: bg #1b222c, text #f7f5ef, padding 30px, radius 18px.
- Title: Space Grotesk 30px, 500.
- Checklist/items: Inter 19.8px; action link in #2b54c8 using the button-link style.

## Similar Brands

- Stripe — similar restrained palette with a strong blue accent; Stripe leans denser and more technical in component variety.
- Pilot (pilot.com) — finance credibility with generous whitespace; Pilot uses more illustrations, while Onshore relies on proof components.
- Mercury — warm neutrals and bold blue accents; Mercury's typography runs wider and more editorial.
- Ramp — confident monochrome with selective green accents; Ramp is starker and more contrasty, while Onshore is softer and warmer.

:root {
  /* Colors */
  --color-primary: #2b54c8;
  --color-secondary: #040404;
  --color-neutral: #f7f5ef;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 34px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.14;
  --text-headline-lg-tracking: -0.02em;
  --text-headline-md-size: 30px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.09;
  --text-headline-md-tracking: -0.02em;
  --text-headline-sm-size: 26px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.26;
  --text-headline-sm-tracking: -0.009em;
  --text-headline-xs-size: 23px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.22;
  --text-headline-xs-tracking: 0.077em;
  --text-body-md-size: 19.8px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.55;
  --font-space-grotesk: "Space Grotesk";
  --font-space-mono: "Space Mono";
  --font-inter: "Inter";

  /* Rounded */
  --radius-sm: 18px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 22px;
  --spacing-lg: 30px;
  --spacing-xl: 108px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: #ffffff;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 10px 20px;
  --button-primary-height: 53px;
  --button-secondary-text-color: #11161d;
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 10px 20px;
  --button-secondary-height: 53px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #1b222c;
  --card-text-color: var(--color-neutral);
  --card-rounded: var(--radius-sm);
  --card-padding: 30px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "# You build America’s future. We make sure you get the credit for it.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.169,
          0.329,
          0.784
        ],
        "hex": "#2b54c8"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.016,
          0.016,
          0.016
        ],
        "hex": "#040404"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.969,
          0.961,
          0.937
        ],
        "hex": "#f7f5ef"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.969,
          0.961,
          0.937
        ],
        "hex": "#f7f5ef"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.169,
          0.329,
          0.784
        ],
        "hex": "#2b54c8"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 22,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 30,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 108,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "full": {
      "$value": {
        "value": 9999,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Space Grotesk",
        "fontSize": {
          "value": 34,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.02,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Space Grotesk",
        "fontSize": {
          "value": 30,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.02,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Space Grotesk",
        "fontSize": {
          "value": 26,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.009,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Space Mono",
        "fontSize": {
          "value": 23,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": 0.077,
          "unit": "em"
        }
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 19.8,
          "unit": "px"
        },
        "fontWeight": 400
      }
    }
  }
}