# The Nearshore Company — Design System

> Category: B2B industrial design system
> Surfaces: web, presentations, social and product
> Source: Open Design project “Brand book TNC + design system” (`75eb440c-15ee-4e78-8194-264946ef1a37`)

## Source-backed rule index

- **Typography** — Poppins as the approximation of the observed geometric sans; 11–68 px scale; bold uppercase headlines with the two-tone rule.
- **Motion** — 140 ms hover, 220 ms dialogs, `cubic-bezier(.2,.8,.2,1)` easing, visible focus and `prefers-reduced-motion` respected.
- **Voice** — commercial English, operator-to-operator, concrete, measurable, serious, oriented to EBITDA, lead time, DIO and working capital.
- **Anti-pattern** — red as a large surface, standard bullets, plain image rectangles, invented metrics, generic startup aesthetics and hex values outside the tokens.

## 1. Context and evidence

The Nearshore Company (TNC), founded in 1992, operates nearshore manufacturing in Mexico for foreign manufacturers. Its offer runs from basic shelter to advanced manufacturing, 3PL, warehousing, freight forwarding, import/export, compliance, HR, payroll and operational support.

Documented scale is part of the content system: **33+ years**, **17 facilities** in 4 cities, **1.6M sq ft**, **2,000+ employees** and **13 years of average client tenure**.

The system is not invented from scratch. It is formalized from four pieces of evidence:

- `context/01-brief-cliente.md` — formal client brief.
- `context/06-correo-cuenta.md` — the assignment: create the first brand book before the website.
- `brand.json` and `BRAND.md` — structured kit and narrative guide.
- `context/07-direccion-visual.md`, `tnc-brand-book.html` and the 9 ebook pages — visual direction observed in approved production.

The core idea is **“operator, not administrator”**: TNC is not just another shelter, it is an operating value-creation partner. The visual vocabulary must carry data, production, logistics and financial metrics without falling into generic startup aesthetics.

## 2. Visual foundations

The atmosphere is corporate, trustworthy, modern, global, expert, operational, serious and results-oriented. The system alternates two modes:

- **Light mode:** near-white `#f5f8fb` for content, cases, comparisons and data.
- **Dark mode:** navy `#0e1e3a` for covers, emphasis sections and closers; it may drift toward indigo on final pages.

Three gestures define the identity:

1. **Two-tone headlines** in bold uppercase: one part red, the other navy or white.
2. **Arrow pills** as the list unit, alternating navy, red and light card.
3. **Images with asymmetric radii**: 60–80 px on one or two opposite corners.

Allowed textures are perspective halftone, contour lines and global-network wireframe, always subtle and generated in CSS/SVG.

## 3. Color

### Verified official roles

| Role | Token | Hex | Usage |
|---|---|---:|---|
| Background | `--bg` | `#f5f8fb` | light page canvas |
| Foreground | `--fg` | `#0e1e3a` | main text, headlines, structure, dark mode |
| Muted | `--muted` | `#5a6c7d` | secondary text and captions |
| Accent | `--accent` | `#d22f2b` | emphasis, problem pills, folio, editorial accent |
| Accent secondary | `--accent-2` | `#1c7cd3` | links, actions, primary CTA |

### Derived roles

| Role | Token | Hex | Usage |
|---|---|---:|---|
| Surface | `--surface` | `#ffffff` | cards, panels, light pills |
| Border | `--border` | `#dde5ee` | hairlines and dividers |
| Navy 2 | `--navy-2` | `#16294d` | dark-mode support |
| Navy 3 | `--navy-3` | `#1e3460` | navy gradients |
| On dark muted | `--on-dark-muted` | `#a9bcd6` | secondary text over navy |

### Contrast and usage rules

- Navy on white and white on navy are the base combinations.
- Red is used for only one strong signal per view: keyword, problem pill, folio or editorial CTA accent.
- The primary CTA is bright blue; hover `#1668b4`; focus with a translucent blue ring.
- Navy/red pills use white text; light pills use navy text and a blue arrow.
- Do not introduce greens, oranges, purples or rainbow gradients: they break the palette and the industrial seriousness.

## 4. Typography

The exact ebook family is unconfirmed. The evidence shows a geometric sans; the system adopts **Poppins** as the operational approximation, with Montserrat and system-ui as fallbacks.

```css
--font-display:'Poppins','Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
--font-body:'Poppins','Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
```

### Scale

| Style | Size | Weight | Rule |
|---|---:|---:|---|
| Display | `clamp(38px,5.6vw,68px)` | 800 | uppercase, −0.02em, two-tone |
| H1 | 44px | 800 | at most one red emphasis unit |
| H2 | 32px | 800 | may use two-tone |
| H3 | 24px | 700 | subsections |
| Lead | 18px | 400/500 | introduction, line-height 1.55 |
| Body | 16px | 400 | line-height 1.6 |
| Small | 13px | 500/600 | captions and metadata |
| Caption | 11px | 700 | kickers, tracking .16em |

### Typographic rules

- The distinctive pattern is `RED + NAVY` or `RED + WHITE`, never three colors.
- Body copy may run in two columns in documents, with generous leading.
- Internal subtitles and links use bold bright blue; external links may be underlined red.
- Proof figures use display or H3 with short captions; do not decorate numbers with icons.

## 5. Spacing, radius and elevation

The base grid is **8 px**. The main rhythms are 8, 16, 24, 32, 48, 72 and 96 px.

| Token | Value | Usage |
|---|---:|---|
| `--sp-1` | 8px | minimum separation, icons/arrows |
| `--sp-2` | 16px | internal gaps of cards and pills |
| `--sp-3` | 24px | card padding, block separation |
| `--sp-4` | 32px | grid gaps |
| `--sp-6` | 48px | internal section separation |
| `--sp-9` | 72px | large editorial rhythm |
| `--sp-12` | 96px | closers and heroes |

Radii:

- `--radius-sm: 8px` — headers, small chips.
- `--radius: 12px` — cards and pills.
- `--radius-pill: 999px` — fully rounded CTA.
- `--radius-img: 72px` — large asymmetric image corner.

Shadows:

- `--shadow-1` for resting cards.
- `--shadow-2` for overlays, dialogs and floating surfaces.

## 6. Layout and composition

- Editorial content: max container of 1180 px, 24–48 px side padding.
- Documents: alternate dark and light pages to mark rhythm.
- Component grids: 2 columns for comparisons, 3–4 for stats and cards.
- On mobile, a single column; never compress tables or pills.
- Images fill wide frames with `object-fit: cover` and asymmetric radii; the large diagonal may alternate between pages.
- In dark mode, photos integrate with a navy veil at 35–75%; in light mode they go without a veil.
- Page furniture for documents: small title top-left, logo top-right, large folio bottom-right (red on light, white on dark).

## 7. Components

### 7.1 Two-tone headline

A single conceptual phrase in red and the rest navy/white. Always bold and uppercase at display or H2. Do not apply to paragraphs.

### 7.2 List pill

The list unit: rounded bar, `→` arrow, white text over navy or red. On light backgrounds, a white card with `#dde5ee` border and blue arrow.

States:

- Navy: information or improved state.
- Red: problem, risk or leakage.
- Light: financial impact or result.

### 7.3 Column header bar

Solid bar with centered white text, bold, uppercase. Allowed fills: navy gradient, solid blue, red gradient. Used for BEFORE / AFTER and narrative table headers.

### 7.4 BEFORE / AFTER

Central narrative pattern: two pill columns, red for the problematic state and navy/blue for the improved one. It closes with a **FINANCIAL IMPACT** block of light cards.

### 7.5 CTA

Primary: bright blue pill `#1c7cd3`, fully rounded, bold title over regular subtitle. Secondary: navy or white outline depending on background. Only one primary per view.

States:

- Default: `--accent-2`.
- Hover: `#1668b4`, subtle elevation.
- Focus: `rgba(28,124,211,.38)` ring.
- Disabled: muted with reduced opacity, no shadow.

### 7.6 Stat block

Large figure + short caption. On light: white card; on dark: translucent or navy card. Documented proof points include 1–5 day transit, −30% warehousing, +200% production and 18→610 employees.

### 7.7 Content cards

White cards with hairline border, 12 px radius and shadow 1. Use small uppercase titles in blue for “do” and red for “don’t”.

### 7.8 Forms and dialogs

Inputs with white background, `#dde5ee` border, 8 px radius, blue focus. Labels in small bold. Validation: red message next to the field, not generic banners. Dialogs with translucent navy overlay, white card, 12 px radius and shadow 2.

### 7.9 Page furniture

Document/deck: small title top-left, logo top-right, large folio bottom-right. Keep a safe margin around the logo equal to the symbol height.

## 8. Imagery and texture

Documentary photography of real manufacturing and logistics: plants, production lines, warehouses, supervision and teams working with tablets. Cool tonality to live with navy.

Treatment:

- Frame: `border-radius: 12px 72px 12px 72px`.
- Dark mode: desaturate/cool and apply a 35–75% navy veil.
- Covers: navy duotone and a very subtle wireframe.
- Textures: perspective halftone, contour waves and network wireframe, always CSS/SVG.

Avoid:

- generic consulting photos;
- handshakes, shiny globes and floating dashboards as primary photography;
- warm treatments;
- plain rectangles or full circles.

## 9. Motion and interaction

- Durations: 140 ms for hover, 220 ms for panels/dialogs.
- Easing: `cubic-bezier(.2,.8,.2,1)`.
- CTA hover: blue shift and `translateY(-1px)`.
- Focus always visible with a blue ring.
- Scroll-spy and reveal only if they do not block content or add heavy JS.
- Respect `prefers-reduced-motion`: disable transitions and animations.

## 10. Voice and content

Primary commercial language: **English**. Operator-to-operator tone, not vendor-to-buyer: concrete, measurable, serious, unadorned.

Pillars:

1. From shelter provider to real operating partner.
2. Cost transparency and EBITDA leakage.
3. Proven scale and tenure.
4. Four engagement levels up to operational control.
5. Mexico under USMCA: 1–5 days vs 30–40 from Asia, IP and tariff mitigation.

Preferred vocabulary: operating partner, operational execution, EBITDA, lead time, DIO, working capital, supply chain resilience, USMCA, labor availability, manufacturing supervision, 3PL.

Avoid: “shelter” as a complete description, generic “improve EBITDA” claims, disruptor/startup language and vague nearshoring buzzwords.

## 11. Performance as a brand rule

The source audit reports 6.3 MB, 133 requests and 21.1 s load time. Therefore:

- target budget: ≤1.5 MB per page;
- target requests: ≤40;
- target LCP: <2.5 s;
- self-hosted fonts, subset or variable; at most two families and four weights;
- AVIF/WebP images sized to the slot, lazy-loaded below the fold;
- textures in CSS/SVG, never bitmap;
- no decorative JS frameworks for simple effects.

## 12. Anti-patterns

- Red as a large background or “brand wash”.
- More than one strong accent per screen.
- Multi-color headlines with three or more segments.
- Standard bullets instead of pills.
- Plain image rectangles.
- Icons next to every heading or emoji as iconography.
- Invented metrics or unsourced “proof”.
- Purple gradients, warm beige or generic SaaS aesthetics.
- Hot-linked assets; always copy into the project and reference by relative path.
- CSS that hardcodes hex values outside the tokens.

## 13. Open questions

1. **Exact typeface:** extract the embedded font from the PDF or request it from the client. Poppins remains the approximation.
2. **Wordmark:** the logo uses charcoal, not navy. Keep the PNG artwork intact; do not introduce new text in charcoal.
3. **Photography:** decide whether handshake/globe/glowing charts are retired in favor of real facilities.
4. **Derived roles:** confirm `surface` and `border` as official.
5. **Tagline:** none exists. Proposals: “Operator, not administrator.” (recommended), “Operations is the new value lever.”, “Built to operate.”

## 14. Provenance

Preserved assets live in `assets/`, with representative byte-for-byte copies in `build/`. Substantive implementation examples live in `source_examples/`. Review previews live in `preview/`. The composed application lives in `ui_kits/app/`.