Brand Book & Design System

Variants

Primary · positive — light backgrounds

Negative — navy / dark backgrounds

Clear space

Keep a clear space of x on all sides, where x = the cap height of the “N” in NEARSHORE. Nothing enters this zone — no text, graphics, or page edges.

Minimum size

• Digital — full lockup: never below 140 px wide.
• Print — full lockup: never below 35 mm wide.
• Symbol only (favicon, avatar, watermark): never below 24 px.
• The registered mark must remain legible at every size — if it is not, scale up.

Pending asset  Only PNG rasters exist. The vector source (.ai/.svg) must be requested from the client or recovered from the live site before any print or large-format work. → Open question §10

Incorrect use — never do this

Do not stretch, condense or distort the lockup in any direction.

Do not recolor the symbol or wordmark outside the approved variants.

Do not add drop shadows, outlines, glows or any effect.

Do not rotate or tilt the lockup.

Do not place the logo on clashing or cluttered backgrounds without a navy veil.

Do not reproduce the full lockup below its minimum size.

Note  The wordmark in current artwork is a dark charcoal grey, not the brand navy #0e1e3a. This book flags the inconsistency rather than silently redrawing it — resolution is a client decision. → Open question §10

Official palette

Derived roles — proposed, not yet official

The client declared five colors; the system needs surface and border roles to build interfaces. These two are proposed for adoption. → Open question §10

Contrast & accessibility

Proportion rule

• 80–90% neutrals — light grey, white and navy do the structural work of every page.
• 5–10% bright blue — links, arrows, secondary actions, the CTA pill.
• < 5% red — one concept word per headline, one CTA per view, red pills in comparisons. Never a large red surface.
• Dark pages may add the navy→indigo gradient on covers and closings; light pages stay near-flat.

Scale

Signature rule — two-tone headings

The most identifying typographic move in the current system. One half of the headline is red, the rest is navy (light pages) or white (dark pages), always bold uppercase. Split at a meaningful phrase boundary; red carries the concept word — EBITDA, OPERATIONAL, LEVERS.

• Split at a phrase boundary that reads naturally — never mid-word, never one letter in.
• Red goes on the words that carry the argument; everything else stays quiet.
• One two-tone headline per view. Supporting headings stay single-tone.
• On navy, the red half is display-size only (contrast 3.3:1 — AA Large).

Inline conventions

Personality

Vocabulary

Messaging pillars

Rewrite example

Signature frame — asymmetric corner radii

The single most distinctive graphic move in the system. Images are framed with a large radius (~60–80 px) on one or two opposite corners, normal radius on the rest:

border-radius: 12px 72px 12px 72px;

• One or two opposite corners take the large radius — never all four.
• Never plain rectangles, never full circles for photographs.
• Rotate which diagonal carries the radius from page to page to keep rhythm.

Photographic treatment on dark pages

On navy pages, photographs sit under a blue veil that fuses them with the background; covers push to near-duotone navy. The image supports the argument — it never competes with the headline.

• Overlay: navy at 35–75% in a soft gradient over the photo.
• Desaturate and cool the source image before veiling.
• On light pages, photos run un-veiled inside the asymmetric frame.

Tension  The client brief rejects generic startup/tech aesthetics, yet the ebook uses recognizable stock moves (executive handshake, network globe). Keep or retire them — client decision. → Open question §10

Supporting textures

Subjects & avoid list

/* The Nearshore Company — design tokens v1.0 */
:root{
  /* color — official palette */
  --bg:       #f5f8fb;  /* oklch(97.8% .005 247.9) — page background */
  --fg:       #0e1e3a;  /* oklch(23.8% .058 260.8) — navy: headlines, structure */
  --accent:   #d22f2b;  /* oklch(56.6% .200 27.4)  — red: emphasis & CTAs only */
  --accent-2: #1c7cd3;  /* oklch(57.9% .158 251.4) — bright blue: links, actions */
  --muted:    #5a6c7d;  /* oklch(52.3% .035 247)   — secondary text */

  /* color — derived roles (pending client confirmation) */
  --surface:  #ffffff;  /* cards, panels */
  --border:   #dde5ee;  /* hairline borders */

  /* dark-mode support colors */
  --navy-2:        #16294d;
  --navy-3:        #1e3460;
  --on-dark-muted: #a9bcd6;

  /* typography */
  --font-display: 'Poppins','Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:    'Poppins','Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-display: clamp(38px,5.6vw,68px);  /* 800, uppercase, −0.02em */
  --fs-h1: 44px;  --fs-h2: 32px;  --fs-h3: 24px;
  --fs-lead: 18px;  --fs-body: 16px;  --fs-small: 13px;  --fs-cap: 11px;

  /* shape */
  --radius:      12px;  /* cards, pills */
  --radius-sm:   8px;
  --radius-pill: 999px; /* CTA — fully rounded */
  --radius-img:  72px;  /* asymmetric image frame */

  /* space — 8px baseline */
  --sp-1: 8px;  --sp-2: 16px;  --sp-3: 24px;
  --sp-4: 32px; --sp-6: 48px;  --sp-9: 72px;

  /* elevation */
  --shadow-1: 0 1px 2px rgb(14 30 58 / .06), 0 4px 16px rgb(14 30 58 / .06);
  --shadow-2: 0 8px 32px rgb(14 30 58 / .16);
}

• Consume tokens, never raw hex: a component that hardcodes #d22f2b fails review.
• Red stays behind --accent and is used by emphasis text, red pills and the folio — nothing else.
• The asymmetric image frame is border-radius: var(--radius-sm) var(--radius-img) var(--radius-sm) var(--radius-img).

• Self-hosted fonts only — variable or subset builds; at most two families, four weights.
• Images in AVIF/WebP, sized to their slot, lazy-loaded below the fold; the asymmetric frame is pure CSS.
• Textures are CSS/SVG, never bitmap assets; no heavy decorative JavaScript.