---
name: transmodal-design-system
description: Apply the Transmodal Design System — Grupo Transmodal's brand-locked tokens, DM Sans typography, navy/brand-blue/lime palette, operator-grade components, and Spanish voice — when building Transmodal landing pages, sales proposals, slide decks, operations dashboards, or customer portals. Reach for this skill anytime a project's brand context is Transmodal, Grupo Transmodal, or "logística / transporte multimodal" for the Transmodal client.
user-invocable: true
---

# Transmodal Design System

A reusable Open Design package that encodes the visual and verbal rules for every Grupo Transmodal product surface. Use this skill before generating any Transmodal-branded artifact — it tells you which files to read, which tokens to bind, which components to reuse, and which patterns to avoid.

## What's inside

- `DESIGN.md` — canonical rules: visual mood, color (brand scale + semantic neutrals + state), typography (DM Sans scale + mono numerics), spacing (8-pt), layout, components (buttons, inputs, cards, pills, customs stepper, map module, KPI tile, shipment row), motion, voice, anti-patterns.
- `colors_and_type.css` — tokens for `:root` and `[data-theme="dark"]`, `@font-face` bindings for six DM Sans cuts, plus primitive component classes (`.btn`, `.input`, `.card`, `.pill`, `.tx-*`).
- `assets/` — brand wordmarks (blue + white), institutional team photo, the DM Sans source bundle.
- `build/` — runtime icons (`icon.png`, `logo.png`, `logo-dark.png`, `tray_icon.png`) preserved byte-for-byte from the source uploads.
- `fonts/` — six DM Sans TTF files (Regular, Italic, Medium, MediumItalic, Bold, BoldItalic) + OFL license.
- `preview/` — focused review cards: `colors-primary.html`, `colors-theme-light.html`, `colors-theme-dark.html`, `typography-specimens.html`, `spacing-tokens.html`, `spacing-radius.html`, `spacing-shadows.html`, `components-buttons.html`, `components-inputs.html`, `brand-assets.html`.
- `source_examples/` — standalone reference components (`Sidebar.jsx`, `ShipmentsList.jsx`, `ShipmentDetail.jsx`, `QuickActionBar.jsx`).
- `ui_kits/app/` — applied ops dashboard surface (Sidebar + ShipmentsList + ShipmentDetail + ShipmentEvent + QuickActionBar) mounted through React + Babel Standalone from `index.html`.
- `context/` — preserved setup evidence (`source-context.md`, `figma/transmodal---design-system.md`).

## Source context

Brand basis: the official Grupo Transmodal wordmark (blue and white variants in `assets/`), the institutional team photo with the tagline *"Protege lo tuyo"* and the lime accent (`assets/transmodal-team-photo.png`), and the DM Sans typeface bundle the brand uses across collateral. The Figma file was parsed locally but yielded no readable token text (`context/figma/transmodal---design-system.md`), so the rules in this package are derived from the brand assets, the institutional photo, the operator-context brief, and the logistics-product information architecture documented in DESIGN.md.

## When to use this skill

Use it when:

- The active project's brand or design system is **Transmodal** or **Grupo Transmodal**.
- The user mentions logística multimodal, transporte multimodal, embarques, despachos, customs / pedimentos, BL, or a Mexican freight corridor (Lázaro Cárdenas, Manzanillo, Veracruz, Texas–Monterrey lane) **for the Transmodal client**.
- You are asked to build a landing page, sales proposal, slide deck, operations dashboard, customer portal, or social/marketing collateral for Transmodal.
- A new project picks "Transmodal Design System" as its active design system.

Do not use this skill for: other logistics operators (build a separate system), generic freight mockups not branded as Transmodal, or any project where the user has explicitly switched away from the Transmodal brand.

## How to use

1. **Read first**, in this order: `README.md` (orientation + Preview Manifest), `DESIGN.md` (canonical rules), `colors_and_type.css` (tokens + DM Sans bindings).
2. **Inspect the previews** under `preview/` to confirm the visual posture you'll inherit; they render the production tokens directly.
3. **Bind tokens** by linking `colors_and_type.css` as the first stylesheet in your new project. It registers `:root`, `[data-theme="dark"]`, and `@font-face` for DM Sans.
4. **Pick a theme.** Default light for sales/landing/customer-facing; `data-theme="dark"` for operations consoles and dispatcher surfaces.
5. **Reuse components** from `ui_kits/app/components/` or `source_examples/` (`Sidebar`, `ShipmentsList`, `ShipmentDetail`, `ShipmentEvent`, `QuickActionBar`). Extend them with new variants rather than rewriting `.btn`, `.input`, `.card`, or `.pill`.
6. **Use real brand assets** from `assets/` (wordmarks, photo) and `build/` (runtime icons). Never redraw, recolor, or substitute the marks.
7. **Match the voice** documented in DESIGN.md §8: Spanish (es-MX), operator-to-operator, past-tense status verbs, canonical carrier names.
8. **Audit** before declaring a Transmodal artifact done: run `"$OD_NODE_BIN" "$OD_BIN" tools connectors design-system-package-audit --path . --fail-on-warnings` and fix every reported issue.

## Design system highlights

- **Palette.** Navy (`#0E2444`) as the operational canvas. Brand blue (`#2580BC`) for structure, wordmarks, and primary actions on light. One accent — lime (`#B6FF3D`) — reserved for CTAs and on-time signals, the same color that carries the tagline *"Protege lo tuyo"*.
- **Type.** DM Sans across the board, bound from local files. Tabular numerics for any operational figure. Mono (`JetBrains Mono` / `IBM Plex Mono` fallback) for container IDs, BL numbers, and route codes.
- **Density.** Dashboards run tight (40px rows, `--type-body-sm`); marketing runs loose (96px between hero and content). Eight-point spacing scale, four corner radii, three shadows.
- **Components.** Operator-grade primitives plus domain-specific modules: shipment row, container chip, customs status strip, map module, KPI tile, quote calculator.
- **Voice.** Spanish operator vocabulary by default. Carrier names in canonical form. No marketing fluff, no invented uptime stats, no exclamation marks in product copy.
- **Anti-patterns.** No warm-beige Claude canvas, no gradient hero washes, no Inter/Roboto display face, no emoji icon rows, no preview chrome inside product surfaces, no recolored or rotated wordmark.