# The Nearshore Company — Design System

## Product Overview

The Nearshore Company (TNC) is a nearshore manufacturing operator in Mexico, founded in 1992. This package turns the source project **“Brand book TNC + design system”** into a reusable product design system for web, presentations, social and B2B industrial product surfaces.

The core capability the system supports is communicating operational value creation: EBITDA leakage diagnostics, BEFORE / AFTER comparisons, scale proof, manufacturing cases and CTAs toward assessments. It is designed for labor-intensive manufacturers, industrial Private Equity and portfolio operations teams, and it provides tokens, components, preview cards and an applied UI kit that help future projects ship on-brand artifacts without re-deriving the visual language.

## Source Context

- Source project: `75eb440c-15ee-4e78-8194-264946ef1a37` (“Brand book TNC + design system”).
- Primary evidence: `tnc-brand-book.html`, `tnc-source/tnc-brand2-open-design/brand.json`, `BRAND.md`, `context/07-direccion-visual.md`, `context/01-brief-cliente.md`, `context/06-correo-cuenta.md`.
- Preserved assets: logos in `assets/logos/`, official palette in `assets/brand/`, ebook pages in `assets/imagery/`.
- Provenance notes: `context/provenance.md`.

## Package Contents

- `DESIGN.md` — source-backed rules for context, color, typography, spacing, layout, components, motion, voice and anti-patterns.
- `SKILL.md` — invocable skill with reuse guidance for future agents.
- `colors_and_type.css` — implementable color, typography, spacing, radius, shadow and pattern foundations.
- `assets/` — preserved, source-backed original files (logos, palette, imagery).
- `build/` — byte-for-byte copies of representative runtime and brand assets: `brand-colors.png`, `logo-principal-positivo.png`, `logo-principal-negativo.png`, `preview-brandbook.png`.
- `source_examples/` — preserved component snapshots: `tnc-brand-book.html`, `list-pills.html`, `before-after.html`, `page-furniture.html`.
- `preview/` — focused review cards plus `preview/README.md` as the manifest.
- `ui_kits/app/` — modular applied interface kit with its own README.

## Preview Manifest

1. `preview/index.html` — review index linking every card.
2. `preview/brand-assets.html` — preserved logos, official palette and imagery.
3. `preview/colors-primary.html` — official and derived color roles.
4. `preview/typography-specimens.html` — scale and the two-tone pattern.
5. `preview/spacing-tokens.html` — the 8 px grid applied.
6. `preview/radius-shadows.html` — asymmetric radii and elevation.
7. `preview/components-buttons.html` — pills, headers, CTA, stats and form.
8. `preview/applied-surfaces.html` — editorial and product surfaces.

## Review Workflow

1. Start with `preview/brand-assets.html` and `preview/colors-primary.html` to inspect the preserved brand evidence.
2. Read `DESIGN.md` for rules and open decisions.
3. Link `colors_and_type.css` in any new artifact before local CSS.
4. Copy patterns from `source_examples/` instead of rewriting them.
5. Open `ui_kits/app/index.html` as the applied product reference and compose new views from its modules.
6. Before shipping, run the package audit and fix every error and warning.

## Critical Rules

- Navy `#0e1e3a` carries structure, headlines and dark pages.
- Red `#d22f2b` is emphasis, problem pills and folio; never a large surface.
- Bright blue `#1c7cd3` is action, link and primary CTA.
- Two-tone headlines, bold and uppercase.
- Lists as arrow pills; no conventional bullets.
- Images with asymmetric radii (`12px 72px 12px 72px`).
- Performance as a brand rule: light self-hosted fonts, optimized images and CSS/SVG textures.

## Open Decisions

The exact typeface, the charcoal vs navy wordmark, stock photography and the derived `surface`/`border` roles remain documented as open questions in `DESIGN.md`. Until resolved, Poppins serves as the approximation and the PNG logo artwork is used unaltered.