Security Notice

This document has been auto-published from the internal knowledge base. All passwords, API keys, tokens, and IP addresses have been redacted for security.

Design Systems — Project-Specific Visual Languages

Purpose: Each major project has its own distinct design identity. This file documents the design system for each, so Claude can match the exact aesthetic when working on that project.

How to use:

At the start of a session, tell Claude which project you're working on
Claude reads the relevant design system below
All generated code/screens automatically match that project's style
No drift, no mixing aesthetics between projects

Quick Reference — Project → Design System

Project	Design System	Primary Color	Theme	Use Cases
CHAROS (HandyManny, Expediente, Consultin)	CHAROS Design System	Red #D42A1C	Light, customer-facing	Tracking portals, document mgmt
VIA	VIA Design System	GREEN #0D3B2E	Light + dark green sidebar	Government logistics platform
WSI Official Brand	WSI Official Brand Design System	Red-Orange #E53B30	Light, professional	Customer-facing, marketing, official comms
WSI MC	WSI MC Design System	Blue #0457A1	Light with dark sidebar	Internal operations dashboard
Mission Control	Mission Control Design System	Blue #3b82f6	Light (converted 2026-02-27)	Project monitoring, infra status
Sales MC	Sales MC Design System	Blue #0457A1	Light (already light, cleaned 2026-02-27)	Sales scorecard, analytics

Template — New Project Design System

Use this template when starting a new project to define its visual identity upfront.

markdown

## [Project Name] Design System

### Brand Identity
- **Primary color:** #XXXXXX (name, use case)
- **Secondary color:** #XXXXXX (accent, highlights)
- **Semantic colors:**
  - Success: #XXXXXX
  - Warning: #XXXXXX
  - Error: #XXXXXX
  - Info: #XXXXXX
- **Neutral palette:** (gray scale for text, borders, backgrounds)
  - 50: #XXXXXX
  - 100: #XXXXXX
  - 200: #XXXXXX
  - 300: #XXXXXX
  - 400: #XXXXXX
  - 500: #XXXXXX
  - 600: #XXXXXX
  - 700: #XXXXXX
  - 800: #XXXXXX
  - 900: #XXXXXX

### Typography
- **Font family:** "Font Name", sans-serif
- **Sizes:**
  - xs: 12px
  - sm: 14px
  - base: 16px
  - lg: 18px
  - xl: 20px
  - 2xl: 24px
  - 3xl: 30px
  - 4xl: 36px
- **Weights:** 400 (normal), 500 (medium), 600 (semibold), 700 (bold)
- **Line heights:** tight (1.25), normal (1.5), relaxed (1.75)

### Spacing Scale (Tailwind)
- Base unit: 4px (0.25rem)
- Scale: 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64

### Component Styles

#### Buttons
- **Primary:** bg color, text color, hover state, border radius, padding
- **Secondary:** (outline or ghost style)
- **Sizes:** sm, md, lg

#### Cards
- **Background:** color
- **Border:** width, color, radius
- **Shadow:** elevation
- **Padding:** spacing

#### Inputs
- **Border:** width, color, focus color
- **Background:** color
- **Height:** sizes
- **Border radius:** rounding

#### Badges/Pills
- **Style:** filled or outlined
- **Colors:** per status (success, warning, error)
- **Size:** padding, font size

#### Tables
- **Header:** background, text color, font weight
- **Row:** background, hover state
- **Border:** color, width

### Layout Patterns
- **Page structure:** navbar height, sidebar width, content padding
- **Grid:** columns, gap
- **Containers:** max-width, padding

### KPI Cards (Dashboard Pattern)
- **Card style:** background, shadow, padding, border
- **Big number:** font size, weight, color
- **Label:** font size, color, position
- **Icon:** size, color, position
- **Trend indicator:** up/down arrows, colors

### Charts (Chart.js Config)
- **Colors:** series colors (array of hex codes)
- **Fonts:** family, size
- **Grid lines:** color, width
- **Tooltips:** background, text color

### Icons
- **Library:** (e.g., lucide-react, heroicons, emoji)
- **Size:** default, small, large
- **Color:** match text or custom

### Animations
- **Library:** (framer-motion, CSS transitions, none)
- **Transitions:** duration, easing
- **Hover effects:** scale, shadow, color change

### Dark/Light Mode
- **Default:** dark or light
- **Toggle:** available or fixed
- **Dark palette:** (if applicable, define dark mode colors)

### Special Rules
- Any project-specific preferences, constraints, or "never do this" rules

CHAROS Design System

Projects: HandyManny, Expediente, Consultin Gruas, FFTracking, Landing Page

Brand Identity

Primary color: #D42A1C (CHAROS red — logos, CTAs, active states)
Secondary color: #1e40af (dark blue — links, secondary buttons)
Semantic colors:
- Success: #22c55e (green)
- Warning: #f59e0b (amber)
- Error: #ef4444 (red)
- Info: #3b82f6 (blue)
Neutral palette: Tailwind default grays
- Text: #1f2937 (gray-800)
- Secondary text: #6b7280 (gray-500)
- Borders: #d1d5db (gray-300)
- Backgrounds: #ffffff (white), #f9fafb (gray-50)

Typography

Font family: system-ui, -apple-system, "Segoe UI", sans-serif
Sizes: Tailwind default scale (text-xs to text-4xl)
Weights: 400 (normal), 500 (medium), 600 (semibold), 700 (bold)
Brand exception: HandyManny uses --brand CSS variable for multi-tenant (red for CHAROS, blue for U1ST)

Spacing Scale

Tailwind v4 default (4px base unit)
Page padding: p-6 (24px) on desktop, p-4 (16px) on mobile
Card padding: p-6
Section gaps: gap-6 between cards

Component Styles

Buttons

Primary: bg-[var(--brand)] text-white rounded-lg px-4 py-2 hover:opacity-90 transition-opacity
Secondary: border border-gray-300 text-gray-700 bg-white rounded-lg px-4 py-2 hover:bg-gray-50
Sizes: sm (px-3 py-1.5 text-sm), md (default), lg (px-6 py-3 text-lg)

Cards

Background: bg-white
Border: border border-gray-200 rounded-lg
Shadow: shadow-sm (subtle)
Padding: p-6

Inputs

Border: border border-gray-300 rounded-lg focus:border-[var(--brand)] focus:ring-2 focus:ring-[var(--brand)]/20
Background: bg-white
Height: h-10 (40px default)

Badges/Pills

Style: Filled with rounded corners
Colors:
- Success: bg-green-100 text-green-700 border border-green-200
- Warning: bg-amber-100 text-amber-700 border border-amber-200
- Error: bg-red-100 text-red-700 border border-red-200
- Default: bg-gray-100 text-gray-700 border border-gray-200
Size: px-2.5 py-0.5 text-xs font-medium rounded-full

Tables

Header: bg-gray-50 text-gray-700 font-semibold text-sm border-b-2 border-gray-200
Row: bg-white hover:bg-gray-50 border-b border-gray-100
Cell padding: px-4 py-3

Layout Patterns

Navbar: Fixed top, white background, h-16, shadow-sm, logo left, nav center, user menu right
Page container: max-w-7xl mx-auto p-6
Two-column layout: grid grid-cols-1 lg:grid-cols-3 gap-6 (2/3 + 1/3 split)

KPI Cards (Dashboard Pattern)

Card: bg-white border border-gray-200 rounded-lg p-6 shadow-sm
Big number: text-3xl font-bold text-gray-900
Label: text-sm text-gray-500 mb-2
Icon: Top-right corner, text-gray-400, 24px size
Trend: text-xs with arrow emoji, green/red color

Charts (Chart.js Config)

Colors: ['#D42A1C', '#3b82f6', '#f59e0b', '#22c55e', '#8b5cf6', '#ec4899'] (red primary, then rainbow)
Fonts: family: 'system-ui', size: 12
Grid lines: color: '#e5e7eb', borderDash: [2,2]
Tooltips: backgroundColor: '#1f2937', titleColor: '#fff', bodyColor: '#fff'

Icons

Library: Emoji (👤 🚢 📦 🏢) for simple icons, no external deps
Size: text-xl (20px) inline, text-2xl (24px) for large
Color: Match text color or use gray-400 for decorative

Animations

Library: CSS transitions only (no framer-motion to keep bundle small)
Transitions: transition-all duration-200 ease-in-out
Hover effects: hover:scale-105 hover:shadow-md for cards

Dark/Light Mode

Default: Light only
Toggle: Not implemented (all screens are light theme)

Maps (Leaflet)

Tile layer: OpenStreetMap or CartoDB Positron (light)
Marker colors: Match brand red (#D42A1C)
Popup style: White background, brand-colored header

Special Rules

Multi-tenant: Use var(--brand) CSS variable for primary color (allows red/blue swap)
Spanish labels: HandyManny/Expediente use Spanish UI (Embarques, Clientes, etc.)
Mobile-first: Always responsive, test at 375px width minimum
No excessive whitespace: Compact layouts, information-dense
Real data focus: Show actual numbers, not Lorem ipsum placeholders

VIA Design System

Project: VIA Logistics Platform (31+ screens)

Brand Strategy & Positioning

Brand Mission

"Transform cargo transport chaos into synchronized safety."

VIA is the State of Colima's mandatory truck monitoring system for the Port of Manzanillo corridor. We coordinate 5.5 million trucks annually through real-time GPS tracking, mini-convoy organization, and terminal integration — reducing accidents, congestion, and environmental impact while ensuring regulatory compliance.

Brand Promise

To Drivers: Safe routes, clear instructions, fair treatment
To Companies: Operational efficiency, cost reduction, performance insights
To Terminals: Synchronized arrivals, reduced reshuffles, optimized throughput
To Government: Highway safety, NOM enforcement, revenue transparency ($1.1B MXN/year)

Brand Values

Safety First — Every design decision prioritizes accident prevention and road safety
Transparency — Real-time data visibility for all stakeholders, no black boxes
Fairness — Performance-based scoring, clear escalation rules, appeals process
Efficiency — Eliminate waste (wait times, reshuffles, fuel, emissions)
Trustworthy Authority — Government-backed, professionally managed, data-driven

Brand Personality

Authoritative but not authoritarian — Firm rules, helpful guidance
Professional, not bureaucratic — Clear communication, no jargon overload
Tech-forward, not intimidating — Modern interface, accessible to all tech literacy levels
Collaborative, not punitive — Focus on improvement, escalation as last resort

Brand Voice & Tone

General Tone: Professional, direct, bilingual (Spanish primary)

By Context:

Instructions/Alerts: Clear, action-oriented, no ambiguity ("Depart at 9:30 to arrive at 10:10")
Violations: Factual, neutral, escalating severity ("1st alert: Speed exceeded 90 km/h")
Success States: Encouraging, simple ("Convoy complete — safe travels")
Errors/Blocks: Apologetic but firm, provide next steps ("Appointment required. Register at cuauhtemoc.via.mx")
Regulatory: Formal, cite sources ("Per NOM-012-SCT-2-2017, weight exceeds limit")

Language Rules:

Spanish primary UI with English tooltips/help text
Avoid slang, idioms, regional expressions (nationwide clarity)
Use "usted" form (formal) in official communications
Technical terms in Spanish: convoy, patio, turno (shift), reestiba (reshuffle), turno (terminal shift)
Display format: "E-20260226-ABC123-001" (convoy ID — monospace font)

Brand Identity (Visual) — ✅ OFFICIAL BRAND GUIDELINES v1.0

Source: VIA Brand Guidelines v1.0 (Feb 2026) Status: All 33 pages deployed with official GREEN palette (2026-02-27) CRITICAL: VIA is GREEN-based, NOT blue!

Primary Color Palette (GREEN FAMILY) ✅

VIA Dark Green: #0D3B2E — PRIMARY Sidebar, primary CTA buttons, dark surfaces
VIA Primary Green: #1B6B4F — Logo, headings, brand elements
VIA Medium Green: #2A9D6E — Links, icons, visualizations
VIA Teal: #3ECFA5 — MAIN ACCENT Active states, highlights, interactive elements
VIA Mint: #7EECD2 — Light accents, badges
VIA Light Mint: #B5F5E0 — Subtle backgrounds, hover states

Accent Colors

Lime: #C8E64A — Presentation CTAs, marketing materials
Yellow-Green: #D4F34D — Decorative accents

Semantic / Status Colors

Success: #34C759 — Completada status, confirmations
Warning: #F5A623 — En Ruta status, attention needed
Error: #E53E3E — Cancelada, SOS alerts, urgent
Info: #3B82F6 — Informational badges
Port Orange: #FF8C00 — En Puerto status
Neutral: #6B7280 — Disabled states, muted text

Neutral Text Palette

Text Primary: #1A1A1A — Main text on white
Text Secondary: #374151 — Secondary text, headers
Text Muted: #6B7280 — Captions, placeholders
Border: #E5E7EB — Card borders, dividers
BG Surface: #FFFFFF — White cards
BG Subtle: #F8F9FA — Light backgrounds

Logo & Brand Mark (Specifications)

Logo Concept: "VIA" wordmark with highway icon element

Primary lockup: VIA wordmark + stylized highway stripe (GREEN gradient)
Icon-only mark: Highway stripe in circle (for app icons, favicons)
Clearspace: Minimum 1x logo height on all sides
Minimum size: 32px height (digital), 0.5" height (print)
Color variations:
- Full color (default): VIA Primary Green #1B6B4F on white/light backgrounds
- Reverse: White on dark green sidebar (#0D3B2E)
- Monochrome: Single-color gray #6B7280 for low-color contexts
Never: Rotate, skew, outline, shadow, or change proportions
Never use blue: Logo must always be GREEN family colors

File formats needed:

logo.svg (vector, scalable)
logo-icon.svg (icon-only, square aspect)
logo@2x.png, logo@3x.png (raster fallbacks)
favicon.ico + apple-touch-icon.png

Photography & Imagery Style

Photo Subjects:

Trucks on highways (convoy formations, orderly flow)
Terminal operations (cranes, containers, organized stacks)
Technology in use (drivers using app, dashboard screens)
Safety inspections (professional, well-lit, equipment close-ups)

Photo Style:

Color palette: Blues and greens dominant (match brand), warm sunlight (not harsh/industrial)
Composition: Clean, organized, symmetrical when possible (conveys order vs chaos)
Mood: Professional optimism — "systems working as intended"
Avoid: Accidents, congestion, damaged cargo, stressed drivers (focus on solutions)

Illustrations:

Maps: Leaflet with CartoDB Voyager tiles (balanced colors), blue route lines, custom truck/patio markers
Icons: Solid fill (not outline) for clarity, consistent 2px stroke weight
Diagrams: Convoy visualizations (horizontal truck train), terminal schematics (bird's-eye yard blocks)

Iconography Rules

Icon Library: Lucide React (outlined style) + custom SVG for specialized elements

Size scale: 16px (inline), 20px (default), 24px (large), 32px (hero)
Stroke width: 2px (consistent across all icons)
Color: Match text color or use semantic colors (green/amber/red for status)
Custom icons needed:
- Truck convoy (horizontal line of 5-10 rectangles)
- Regulator yard (building with inspection bay)
- NOM compliance checkmarks (official seal design)
- Highway split (Y-shaped road icon for route divergence)

Brand Applications

Document Templates (Future — not yet built)

Letterhead: VIA logo top-left, government partnership seal top-right, dark green accent line (#0D3B2E)
Presentation slides: Dark green title bar (#0D3B2E), white content area, minimal text (images/charts prioritized)
Email signatures: Logo + name + role + "Gobierno del Estado de Colima" tagline
Reports: Cover page with convoy photo, green headers, data tables, Chart.js graphs

Physical Touchpoints (Future)

Regulator Yard Signage: Large blue directional signs, QR code for registration, service icons
Safety Inspection Stickers: Blue holographic seal, VIA logo, QR code for verification
Truck Decals (Optional): "VIA Certified" badge for compliant operators (incentive program)

Typography

Font family: 'Inter', system-ui, sans-serif (or rounded sans-serif for presentations)
Sizes: Tailwind default (text-xs through text-4xl)
Weights: 400 (regular), 500 (medium), 600 (semibold), 700 (bold)
Headings: Font-bold, tracking-tight
Spacing (8px base grid): 4px, 8px, 16px, 24px, 32px, 48px

Layout Pattern (Signature) ✅

Sidebar: Dark GREEN (bg-via-dark-green #0D3B2E), fixed left, w-64, white text, TEAL active state (#3ECFA5)
Main content: Light (bg-gray-50), full width minus sidebar
Top bar: White, h-16, shadow-sm, breadcrumbs/page title left, actions right
CRITICAL: Sidebar must NEVER be gray-900 or blue — always VIA Dark Green #0D3B2E

Component Styles

Buttons ✅

Primary: bg-via-dark-green text-white rounded-lg px-4 py-2 hover:opacity-90 font-medium (#0D3B2E)
Secondary: bg-white border border-via-primary-green text-via-primary-green rounded-lg px-4 py-2 hover:bg-via-light-mint
Accent (Presentations): bg-via-lime text-gray-900 rounded-full px-6 py-3 hover:opacity-90 (#C8E64A)
Destructive: bg-via-error text-white rounded-lg px-4 py-2 hover:opacity-90 (#E53E3E)
Sizes: sm, md (default), lg

Cards ✅

Background: bg-white
Border: border border-gray-200 rounded-xl
Active border: border-l-4 border-via-teal (teal left accent)
Shadow: shadow-sm hover:shadow-md transition-shadow
Padding: p-6 (24px — follows 8px grid)

Status Badges (Critical for VIA) ✅

Completada: bg-green-100 text-green-700 border border-green-300
En Ruta: bg-amber-100 text-amber-700 border border-amber-300
En Puerto: bg-orange-100 text-orange-700 border border-orange-300
Cancelada: bg-red-100 text-red-700 border border-red-300
Convoy Formando: bg-amber-100 text-amber-700 border border-amber-300
Convoy Listo: bg-blue-100 text-blue-700 border border-blue-300
Convoy En Ruta: bg-purple-100 text-purple-700 border border-purple-300
Convoy Completado: bg-green-100 text-green-700 border border-green-300
Convoy Detenido: bg-red-100 text-red-700 border border-red-300
Size: px-3 py-1 text-xs font-medium rounded-full uppercase

Tables ✅

Header: bg-gray-100 text-gray-600 font-semibold text-sm uppercase tracking-wider
Row: bg-white hover:bg-via-light-mint border-b border-gray-200 (teal hover, not blue)
Striped: Use even:bg-gray-50 for long tables

KPI Cards (Dashboard Pattern) ✅

Card: bg-white border border-gray-200 rounded-xl p-6 shadow-sm
Big number: text-4xl font-bold text-gray-900
Label: text-sm font-medium text-gray-600 uppercase tracking-wide mb-3
Icon: Circle background (bg-via-teal/10), teal icon (text-via-teal), 48px
Layout: Icon left, number/label right (horizontal flex)

Charts ✅

Colors: ['#0D3B2E', '#3ECFA5', '#1B6B4F', '#2A9D6E', '#C8E64A', '#F5A623'] (GREEN-primary palette)
Fonts: family: 'Inter', size: 12
Grid lines: color: '#e5e7eb'

Maps (Leaflet — Critical Component) ✅

Tile layer: OpenStreetMap or CartoDB Voyager (balanced colors)
Route lines: color: '#0D3B2E', weight: 4, opacity: 0.7 (VIA dark green)
Truck markers: Custom green pin SVG with unit number label
Patio markers: Teal circle markers color: '#3ECFA5', radius: 8
Terminal polygons: Dark green fill fillColor: '#0D3B2E', fillOpacity: 0.1, color: '#1B6B4F', weight: 2
Convoy routes: Teal for active convoys color: '#3ECFA5'

Convoy Visualization (Unique to VIA) ✅

Truck train icon: Horizontal rectangles connected by lines, first truck has cab icon
Colors by status: Formando (amber), Listo (blue), En Ruta (purple), Completado (green)
Max capacity bar: w-full bg-gray-200 rounded-full h-2, fill with status color up to 10/10 trucks
Active convoy: Teal accent border on convoy card

Animations

Library: Minimal CSS transitions
Transitions: transition-all duration-300 ease-in-out
Hover cards: hover:shadow-lg hover:-translate-y-1 transition-all

VIA Official Components — Reusable Library ✅

Source: VIA MVP Progress Overview redesign (2026-02-27) Status: 100% brand compliant, deployed to production Files: ~/Downloads/via-plan-deploy/html/index.html (lines 460-625 CSS, components used in Section 1)

These three reusable components follow VIA's official 8px grid system and GREEN palette. Use them consistently across all VIA screens for perfect brand alignment.

1. Alert Component (`.via-alert`)

Purpose: Callout boxes for blockers, warnings, info messages, success confirmations

Base Class:

css

.via-alert {
  border-radius: 8px;
  padding: 16px 24px;          /* 8px grid: 2× / 3× */
  display: flex;
  gap: 16px;                   /* 8px grid: 2× */
  align-items: flex-start;
  border: 1px solid;
  margin-bottom: 24px;         /* 8px grid: 3× */
}

Variants:

.via-alert-error — Red background (#FEE2E2), border rgba(239,68,68,0.2), red text
.via-alert-warning — Yellow background (#FEF3C7), border rgba(245,166,35,0.2), amber text
.via-alert-info — Blue background (#DBEAFE), border rgba(62,207,165,0.2), teal text
.via-alert-success — Green background (#D1FAE5), border rgba(52,199,89,0.2), green text

Child Classes:

.via-alert-icon — 20px emoji/icon, flex-shrink: 0
.via-alert-content — Flex: 1, contains title + lists
.via-alert-title — 14px semibold, margin-bottom: 8px
.via-alert-list — ul with 16px left padding, 14px font, 1.6 line-height
.via-alert-code — Inline code snippet (red background, monospace font)

HTML Pattern:

html

<div class="via-alert via-alert-error">
  <span class="via-alert-icon">⚠️</span>
  <div class="via-alert-content">
    <div class="via-alert-title" title="English translation">
      Spanish Title
    </div>
    <ul class="via-alert-list">
      <li>First issue with <code class="via-alert-code">codeExample</code></li>
      <li>Second issue</li>
    </ul>
  </div>
</div>

Use Cases:

Critical blockers (red)
Warnings/attention needed (yellow)
Informational callouts (blue)
Success confirmations (green)

2. KPI Card — Official Icon Pattern (`.via-kpi-card`)

Purpose: Dashboard KPI cards with icon circle + value + label (horizontal layout)

Base Card:

css

.via-kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;               /* 8px grid: 2× */
  display: flex;
  align-items: center;
  gap: 16px;                   /* 8px grid: 2× */
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}

.via-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

Icon Circle:

css

.via-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;          /* 8px grid: 1× */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.via-kpi-icon.teal { background: var(--teal-glow); color: var(--teal); }
.via-kpi-icon.green { background: var(--green-bg); color: var(--green); }
.via-kpi-icon.yellow { background: var(--yellow-bg); color: var(--yellow); }
.via-kpi-icon.red { background: var(--red-bg); color: var(--red); }

SVG Icons:

20px × 20px viewBox
2px stroke width
Outlined style (no fill)
stroke="currentColor" (inherits from .via-kpi-icon color)

Value + Label:

css

.via-kpi-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.via-kpi-label {
  font-size: 12px;
  color: var(--slate);
  font-weight: 500;
  margin-top: 4px;             /* 8px grid: 0.5× */
}

.via-kpi-label[title] { cursor: help; }

HTML Pattern:

html

<div class="via-kpi-card">
  <div class="via-kpi-icon teal">
    <svg viewBox="0 0 24 24">
      <rect x="3" y="3" width="7" height="7" rx="1"/>
      <rect x="14" y="3" width="7" height="7" rx="1"/>
      <rect x="14" y="14" width="7" height="7" rx="1"/>
      <rect x="3" y="14" width="7" height="7" rx="1"/>
    </svg>
  </div>
  <div class="via-kpi-info">
    <div class="via-kpi-value">38 / 50</div>
    <div class="via-kpi-label" title="Screens Designed">Pantallas Diseñadas</div>
  </div>
</div>

Icon Examples:

Grid (teal): Design/screens metric

html

<rect x="3" y="3" width="7" height="7" rx="1"/>
<rect x="14" y="3" width="7" height="7" rx="1"/>
<rect x="14" y="14" width="7" height="7" rx="1"/>
<rect x="3" y="14" width="7" height="7" rx="1"/>

Chart (green): Progress/growth metric

html

<path d="M3 3v18h18"/><path d="M7 16l4-4 4 4 6-6"/>

Check (yellow): Completion status
html
```
<polyline points="20 6 9 17 4 12"/>
```
1

Alert (red): Blockers/issues

html

<circle cx="12" cy="12" r="10"/>
<line x1="12" y1="8" x2="12" y2="12"/>
<line x1="12" y1="16" x2="12.01" y2="16"/>

Use Cases:

Dashboard summary metrics
Progress indicators
Feature completion counts
Status overviews

3. Legend Dot Component (`.legend-dot`)

Purpose: Color-coded legend indicators for charts, maps, status lists

Base Class:

css

.legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;           /* 8px grid: 1× */
  vertical-align: middle;
}

Color Variants:

css

.legend-dot-green { background: var(--green); }
.legend-dot-yellow { background: var(--yellow); }
.legend-dot-red { background: var(--red); }
.legend-dot-purple { background: var(--purple); }
.legend-dot-teal { background: var(--teal); }

HTML Pattern:

html

<div class="legend-item">
  <span class="legend-dot legend-dot-green"></span>
  <span title="Complete / Functional">Completo / Funcional (18%)</span>
</div>

Use Cases:

Chart legends (donut, pie, bar charts)
Map legends (route colors, zone indicators)
Status lists (color-coded categories)

Component Usage Guidelines

8px Grid Compliance: All spacing values MUST be multiples of 4px:

✅ Allowed: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px
❌ Never: 10px, 18px, 22px, 30px (violates grid)

Bilingual Pattern:

Primary text: Spanish
title attribute: English translation
Example: <div class="via-kpi-label" title="Screens Designed">Pantallas Diseñadas</div>

Color Consistency:

Alerts: Use semantic colors (red-bg, yellow-bg, blue-bg, green-bg)
KPI icons: Use 10% opacity backgrounds (--teal-glow, --green-bg, --yellow-bg, --red-bg)
Legend dots: Use full semantic colors (--green, --yellow, --red, --purple, --teal)

No Inline Styles:

All styling via CSS classes
Exception: Badge colors already in system (e.g., style="background:var(--orange);color:#fff;")
For new components, create CSS classes instead of inline styles

Reference Implementation:

File: ~/Downloads/via-plan-deploy/html/index.html
Section: Section 1 "MVP Progress Overview" (lines 1872-1938 HTML, 460-625 CSS)
Deployment: Live at https://via.handymanny.cloud

Future Component Additions: When creating new VIA components:

Follow 8px grid strictly
Use official GREEN palette colors
Add bilingual support (Spanish + English tooltips)
Match existing shadow/border/radius patterns
Document here with code examples
Deploy to VIA dashboard for testing

Dark Green Sidebar + Light Content (Signature Layout) ✅

Sidebar bg: bg-via-dark-green (#0D3B2E) — NEVER gray-900 or blue
Sidebar text: text-white opacity-90
Sidebar hover: rgba(62, 207, 165, 0.1) (teal with transparency)
Sidebar active: bg-via-teal text-via-dark-green (#3ECFA5 background, dark green text)
Main content bg: bg-gray-50
Contrast: High contrast between dark GREEN nav and light workspace

Special Rules ✅

CRITICAL — Color Enforcement:

❌ NEVER use blue (#2563eb, #3b82f6, blue-600, blue-500) as primary color
❌ NEVER use gray-900 (#111827) for sidebar
✅ ALWAYS use VIA Dark Green (#0D3B2E) for sidebar and primary CTAs
✅ ALWAYS use VIA Teal (#3ECFA5) for active states and accents
✅ Reference via-brand.css for all VIA color classes

Design System Compliance:

Bilingual: All labels in Spanish (primary) with English tooltips
Government aesthetic: Professional, trustworthy, not playful
Real-time indicators: Pulsing dot animation for live data (animate-pulse with teal dot)
Mobile screens (420px): Full-screen cards, bottom nav, larger touch targets (min 44px)
Convoy numbering: Display format E-20260226-ABC123-001 with monospace font
ETA displays: Always show relative time ("En 2h 15min") AND absolute time ("14:30")
Zone colors: Norte (teal), Sur (green), Centro (amber), Oriente (purple), Occidente (lime)
8px base grid: All spacing must follow 4/8/16/24/32/48 px increments
Brand CSS file: Link via-brand.css in all VIA HTML files

WSI Official Brand Design System

Project: WSI Official Brand (customer-facing, marketing, official communications) Source: www.go-wsi.com (official company website) Tagline: "People driven, tech enhanced"

Brand Identity

Core Brand Philosophy: WSI balances professionalism with approachability through a "people-driven, tech-enhanced" personality. The design projects trustworthy service delivery combined with forward-thinking innovation.

Color Palette:

Primary Brand: #E53B30 (vibrant red-orange) - WSI signature color
- Used for: Headlines, accents, highlights, emphasis, links
- Background usage: CTA sections, hero banners
Secondary Brand: #00599F (deep blue)
- Used for: Primary CTAs, buttons, trust elements
- Hover state: #000000 (black)
Neutrals:
- Black: #000000 (headings, body text on light)
- White: #FFFFFF (backgrounds, text on dark)
- Off-white: #F7F7FB (form inputs, subtle backgrounds)
- Light gray: #EAEAF6 (borders, dividers)

Color Application Rules:

Text hierarchy:
- Primary headings: #000000 or #FFFFFF (depending on background)
- Accent text/links: #E53B30 (red-orange)
- Body text: #000000 on light, #FFFFFF on dark
Backgrounds:
- Main content: #FFFFFF (white)
- Alternating sections: #F7F7FB (off-white)
- CTA sections: #E53B30 (red-orange)
Interactive elements:
- Primary buttons: #00599F (blue) → hover: #000000 (black)
- Links: #E53B30 (red-orange)
- Focus states: Blue #00599F with shadow

Typography

Font Stack:

Display/Headings: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif
- Weights: 500 (medium), 600 (semibold)
- Modern, clean, forward-thinking
Body: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif
- Weight: 400 (regular)
- Readable, professional, stable
Accents: 'Roboto Slab', Georgia, serif
- Weight: 400 (regular)
- Used sparingly for emphasis

Type Scale:

Headings:
- H1 (Hero): 48px, weight 600, line-height 56px, letter-spacing -0.5px
- H2: 36px, weight 600, line-height 44px
- H3: 24px, weight 600, line-height 32px
Body:
- Large: 18px, weight 400, line-height 26px
- Base: 17px, weight 400, line-height 24px
- Small: 14px, weight 400, line-height 20px
Buttons/CTAs: 24px, weight 500-600, Outfit font
Labels: 17px, weight 500

Typography Rules:

Headlines use Outfit (modern, tech-forward)
Body text uses Roboto (readable, professional)
Generous line-height for readability (1.4-1.5)
Contrast: Black text on white, white text on red-orange/black

Component Styles

Buttons

Primary CTA (Blue):

css

background: #00599F;
color: #FFFFFF;
font-family: 'Outfit', sans-serif;
font-size: 24px;
font-weight: 600;
padding: 20px 40px;
border-radius: 10px;
transition: background 0.3s ease;

Hover: background: #000000;

Secondary CTA (Red-Orange):

css

background: #E53B30;
color: #FFFFFF;
/* Same sizing as primary */

Button Sizes:

Large: padding: 20px 40px, font 24px
Medium: padding: 16px 32px, font 18px
Small: padding: 12px 24px, font 17px

Forms

Input Fields:

css

background: #F7F7FB;
border: 1px solid #EAEAF6;
border-radius: 10px;
height: 75px;
padding: 0 35px;
font-size: 18px;
font-family: 'Roboto', sans-serif;

Focus/Hover:

css

box-shadow: inset 0px 0px 15px rgba(0,0,0,0.1);
border-color: #00599F;

Form Layout:

Multi-column grids for desktop
Full-width stacking on mobile
Label above input (weight 500, color #000000)

Cards

Standard Card:

css

background: #FFFFFF;
border-radius: 20px;
box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
padding: 40px;

Icon Box (Service/Feature):

css

background: #FFFFFF;
padding: 30px;
border-radius: 10px;

Icon: 60px size, colored #E53B30 or semantic color
Title: 24px Outfit 600, color #E53B30
Description: 18px Roboto 400, color #000000, line-height 24px

Layout Patterns

Container Widths:

Desktop: max-width: 1330px
Tablet: max-width: 1024px
Mobile: max-width: 767px

Section Spacing:

Vertical: padding: 80px 0 to 100px 0
Horizontal: padding: 0 90px (desktop), 0 40px (tablet), 0 20px (mobile)
Column gaps: 15px standard

Visual Rhythm:

Overlapping sections: Negative margins (-50px, -145px) create layered depth
Color blocking: Alternating white/off-white/red-orange backgrounds
Whitespace: Generous breathing room between sections

Grid System:

Flexbox-based layouts
Multi-column grids (2-4 columns on desktop)
Responsive breakpoints: 1330px, 1024px, 767px, 420px

Special Design Elements

Geometric Accents:

Decorative shapes positioned absolutely
Often rotated (transform: rotate(180deg))
Used for visual interest and depth

Background Patterns:

Favicon/logo patterns as background textures
Full-width section backgrounds (background-size: cover)
Team photos with overlay text

Icon Style:

Clean, modern line icons
Colored to match section theme
60px standard size for feature boxes

Accessibility & Best Practices

Contrast:

Text contrast meets WCAG AA standards
Black #000000 on white #FFFFFF (21:1 ratio)
White #FFFFFF on red-orange #E53B30 (4.7:1 ratio)
White #FFFFFF on blue #00599F (6.5:1 ratio)

Touch Targets:

Minimum 44px height for interactive elements
Button padding ensures adequate clickable area

Responsive Design:

Mobile-first approach
Touch-friendly on mobile
Readable font sizes (min 17px body text)

Special Rules

DO:

Use red-orange #E53B30 for ALL brand accents, highlights, emphasis
Use blue #00599F for ALL primary CTAs (NOT red-orange)
Use Outfit for headlines, Roboto for body
Maintain generous whitespace and breathing room
Apply overlapping section pattern for visual depth
Keep layouts clean and professional
Follow "people-driven, tech-enhanced" messaging

DON'T:

Mix brand colors randomly (red-orange = accent, blue = CTA)
Use dark backgrounds except for specific CTA sections
Crowd layouts with excessive elements
Use serif fonts except Roboto Slab for accents
Ignore the professional tone (this is enterprise B2B)
Create overly complex forms (keep it simple)

Brand Voice

Professional but not corporate-stiff
Approachable but not casual
Tech-forward but not overly technical
Trustworthy with emphasis on people and service
Tagline captures essence: "People driven, tech enhanced"

WSI MC Design System

Project: WSI Management Dashboard (internal operations)

Brand Identity

Theme: Light with dark sidebar (NOT full dark)
Primary color: #0457A1 (WSI brand blue)
Sidebar: Dark (#0B1623)
Main content: Light (#F0F2F5 background, #FFFFFF cards)
Semantic colors:
- Success: #059669 (green)
- Warning: #D97706 (amber)
- Error: #E53B30 (red)
- Brand: #0457A1 (blue)
- Purple: #7C3AED
- Orange: #EA580C

Typography

Display font: 'Outfit', -apple-system, sans-serif (headers, logo)
Body font: 'Plus Jakarta Sans', -apple-system, sans-serif (all text)
Monospace: 'JetBrains Mono', 'Cascadia Code', monospace (technical data)
Sizes: 13px base, headers scale up
Weights: 400, 500, 600, 700, 800

Layout Pattern (Signature: Dark Sidebar + Light Content)

Sidebar: Fixed left, width: 240px, dark background #0B1623, collapsible to 64px
Main content: margin-left: 240px, light background #F0F2F5
Responsive: Sidebar collapses on click, icons-only mode

Component Styles

Background: #0B1623 (very dark blue)
Text: rgba(255,255,255,.55) (semi-transparent white)
Hover: #152238 (slightly lighter)
Active: #1A2D47 with red left border accent (#E53B30)
Logo: Blue circle #0457A1 with "W" initial, white text
Nav items: Icon + label, collapse to icon-only
Active indicator: 3px red left border

Buttons

Primary: background: var(--brand) (#0457A1), white text, rounded
Secondary: background: var(--surface) (white), border, hover lift effect
Danger: Red #E53B30
Hover: Subtle lift + shadow increase

Cards

Background: #FFFFFF (white)
Border: #E2E5EA (light gray)
Shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06) (very subtle)
Border radius: 10px (default), 6px (sm), 14px (lg)
Padding: Varies by card type

Inputs

Border: #E2E5EA, focus: brand blue
Background: White
Placeholder: #9CA3AF
Border radius: 6px

Badges/Status Pills

Success: bg: #D1FAE5, border: #6EE7B7, text: #059669
Warning: bg: #FEF3C7, border: #FCD34D, text: #D97706
Error: bg: #FDE8E7, border: #F5B3AF, text: #E53B30
Brand: bg: #E8F1FA, border: #B8D4EC, text: #0457A1
Size: Small, rounded pill shape

Tables

Header: Light gray background, semibold text
Row: White, hover light gray
Border: #EDF0F3 (very light)
Striped: Optional alternate row shading

KPI Cards

Card: White background, subtle shadow, rounded corners
Big number: Large bold font, colored by status (green/amber/red)
Label: Small gray text above number
Icon: Optional, colored accent
Trend: Small arrow indicator with percentage

Charts

Colors: Multi-color palette (brand blue, green, amber, red, purple, orange)
Background: White or transparent
Grid lines: Light gray #E2E5EA
Fonts: Plus Jakarta Sans

Icons

Library: SVG icons (inline)
Size: 16px, 20px, 24px variants
Color: Match text or semantic color

Animations

Sidebar collapse: Smooth width transition .25s cubic-bezier(.4,0,.2,1)
Hover effects: Subtle lift on cards, brightness on buttons
Loading states: Pulse or spinner

Background Pattern

Body background: Subtle dot grid pattern
- radial-gradient(circle, #d5dbe2 1px, transparent 1px)
- background-size: 20px 20px

Special Rules

Dark sidebar, light content: This is the signature pattern, never reverse it
Custom fonts required: Outfit (display), Plus Jakarta Sans (body), JetBrains Mono (code)
Sidebar collapse: Must support collapsible sidebar with icon-only mode
Active state: Red left border on active nav item
Professional tone: Corporate, serious, data-focused
Brand consistency: Use WSI blue #0457A1 for all primary actions

Mission Control Design System

Project: Mission Control Dashboard (project/infrastructure monitoring)

Brand Identity

Theme: Light, NOT dark (white cards, gray backgrounds)
Multi-color project coding: Each project section has its own accent color
- CHAROS: #D42A1C (red)
- VIA: #0D9488 (teal)
- WSI: #1E3A5F (navy)
- Ocean: #2563EB (blue)
- VPS: #7C3AED (purple)
- AI Services: #6366F1 (indigo)
- n8n: #F59E0B (amber)
Semantic colors:
- Success: #10b981 (green-500 / emerald-500)
- Warning: #f59e0b (amber-500)
- Error: #ef4444 (red-500)
- Info: #3b82f6 (blue-500)
Neutral palette:
- Background: #ffffff (white), #f9fafb (gray-50)
- Card: #ffffff (white)
- Border: #e5e7eb (gray-200), #f3f4f6 (gray-100)
- Text primary: #111827 (gray-900)
- Text secondary: #6b7280 (gray-500), #9ca3af (gray-400)

Typography

Font family: system-ui, -apple-system, sans-serif
Sizes: Tailwind default (text-xs to text-2xl)
Weights: 400 (normal), 500 (medium), 600 (semibold), 700 (bold)
Monospace: font-mono for IDs, IPs, workflow IDs

Layout Pattern

Light theme: Full light interface, white cards on gray-50 background
Top nav: Auth-aware navbar with logo, user menu
Content: p-6 lg:p-8 max-w-7xl mx-auto space-y-8
Section cards: Each project gets a white card with colored top border

Component Styles

Section Card (Signature Pattern)

jsx

<section className="bg-white rounded-xl border border-gray-200 overflow-hidden">
  <div className="h-1 bg-[#ProjectColor]" /> {/* Colored top border */}
  <div className="p-5">
    {/* Content */}
  </div>
</section>

Section Header

Layout: Icon in colored background + title + "Full Dashboard" link
Icon container: rounded-lg p-2 with backgroundColor: color + '14' (14% opacity)
Icon: size={20} colored with project color
Title: text-lg font-bold text-gray-900
Link button: text-xs font-medium px-3 py-1.5 rounded-lg with colored background (14% opacity)

Buttons

Primary: bg-blue-600 text-white rounded-lg px-4 py-2 hover:bg-blue-700 font-medium
Link button: Colored background with opacity, hover opacity change
Icon button: inline-flex items-center gap-2 text-xs font-medium px-3 py-1.5 rounded-lg bg-indigo-50 text-indigo-600 hover:bg-indigo-100

Cards (KPI/Stat Cards)

Background: bg-gray-50 (subtle gray, NOT white)
Border: None (or border border-gray-100 for emphasis)
Rounding: rounded-lg
Padding: p-3
Label: text-xs text-gray-400 mb-0.5
Number: text-xl font-bold text-gray-900 (or colored for status)

Colored KPI Cards (VIA-style)

Background: bg-teal-50 (colored background matching section)
Label: text-xs text-teal-600
Number: text-lg font-bold text-teal-800
Layout: text-center

Status Badges

Uses <StatusBadge /> component
Variants:
- Verified: emerald-500
- Active: blue-500
- Blocked: red-500
- WIP: yellow-500
- Needs-Key: orange-500
- Inactive: gray-400

Workflow Rows (Mini List Items)

Container: border border-gray-100 rounded-lg divide-y divide-gray-50
Row: flex items-center justify-between py-2 px-3 hover:bg-gray-50 rounded-lg transition-colors
Text: text-sm text-gray-700 truncate
External link icon: text-gray-300 hover:text-blue-500

Status Indicators (Dots)

Online: w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse
Offline: w-2 h-2 rounded-full bg-red-500
Unconfigured: w-2 h-2 rounded-full bg-gray-300

Progress Bars (VIA Phases)

Container: h-2 bg-gray-100 rounded-full overflow-hidden
Fill: h-full bg-teal-500 rounded-full transition-all with style={{ width: '60%' }}
Label: text-xs font-medium text-teal-700 (if active), text-gray-400 (if 0%)

Icons

Library: Lucide React
Sizes: 12px (inline), 14px (status icons), 16px (small), 20px (default), 24px (large)
Colors: Match project color or semantic color (green/red/blue)
Usage: Icon + text combos for headers, status indicators, actions

Animations

Library: CSS transitions only
Hover: hover:bg-gray-50 (rows), hover:opacity-80 (buttons), hover:text-blue-500 (links)
Pulse: animate-pulse for live status dots
Spin: animate-spin for RefreshCw icon when loading

AI Services Section (Admin-Only)

Section color: Indigo #6366F1
Current model card: bg-indigo-50 border border-indigo-100 p-3 rounded-lg
Summary stats: 3-column grid with gray-50 (total), emerald-50 (available), red-50 (offline)
Service cards: border border-gray-100 rounded-lg p-3
- Status dot: 2px circle, emerald/red/gray
- Service name: text-sm font-semibold text-gray-800
- Status badge: text-xs px-2 py-0.5 rounded-full (emerald-50/red-50/gray-100)
- Model pills: text-xs px-2 py-0.5 rounded with colored backgrounds (indigo-50, green-50, blue-50, gray-100)
- Quota bar: bg-gray-50 rounded p-2 with h-1.5 bg-gray-200 rounded-full progress bar
Refresh button: Top-right, indigo theme, with spinning RefreshCw icon when loading
Last update: text-xs text-gray-400 text-center with timestamp + duration

VPS Infrastructure Cards

Grid: grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3
Card: bg-gray-50 rounded-lg p-3
Icon + name: Flex row, icon colored by service, name truncated
Status: Green pulsing dot + port number in text-xs text-gray-400
Footer: Monospace IP + hostname in text-xs text-gray-400

Ocean Tracker Grid

Grid: grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-2
Item: flex items-center gap-2 bg-gray-50 rounded-lg px-3 py-2.5
Icon: Status icon (14px) + carrier name (text-sm font-medium text-gray-700)
Legend: Below grid, text-xs text-gray-400 with icon samples

n8n Workflows Accordion

Groups: Space-y-4, each group has header + workflow list
Group header: flex items-center justify-between mb-2
- Title: text-sm font-semibold text-gray-700
- Count: text-xs text-gray-400
Workflow list: Same as Workflow Rows pattern (border, divide-y)

Special Rules

Color-coded sections: Each project has its own accent color, used for top border, icons, buttons
Consistent section structure: All sections follow the same pattern (colored border, header, KPIs, detail rows)
Light theme throughout: No dark cards, use gray-50 for subtle backgrounds
Status-first: Status badges and dots prominently displayed
External links: Small ExternalLink icon next to workflow names
Admin-only sections: Only shown when user.role === 'admin'
Responsive: Works from mobile (p-6) to desktop (lg:p-8, max-w-7xl)
Auto-refresh: AI Services section auto-refreshes every 60 minutes
Role-based access: Sections hidden/shown based on hasAccess(slug) function

Sales MC Design System

Project: Sales MC Scorecard Dashboard (sales analytics)

Brand Identity

Theme: Light (NOT dark)
Primary color: #0457A1 (WSI brand blue — same as WSI MC)
Background: #f8fafc (very light blue-gray)
Card: #ffffff (white)
Semantic colors:
- Success: #22C55E (green — target met)
- Warning: #F59E0B (amber — approaching target)
- Error: #EF4444 (red — below target)
- Destructive: #E53B30 (WSI red)
Grade colors:
- A+: #059669 (emerald)
- A: #16a34a (green)
- B: #0457A1 (blue)
- C: #d97706 (amber)
- D: #ea580c (orange)
- F: #E53B30 (red)
Trend colors:
- Up: #22C55E (green)
- Down: #EF4444 (red)
- Flat: #64748b (gray)

Typography

Font family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif
Sizes: Tailwind v4 default scale
Weights: 400, 500, 600, 700
Number formatting: Always with commas (e.g., 1,234.56), $ prefix for currency
Anti-aliasing: -webkit-font-smoothing: antialiased

Layout Pattern

Light theme: White cards on light blue-gray background
Top nav: White background with tabs (Dashboard, Team, Customers, Trade Lanes, Analytics, etc.)
Sidebar: None (navbar-based navigation)
Content: bg-background (#f8fafc), cards on white
Auth: JWT-based, login page required

Component Styles

Buttons

Primary: bg-primary text-white rounded-md px-4 py-2 hover:bg-primary-hover font-medium
Secondary: bg-secondary text-secondary-foreground border border-border rounded-md px-4 py-2 hover:bg-muted
Destructive: bg-destructive text-white rounded-md px-4 py-2 hover:opacity-90

Cards (Scorecard Cards)

Background: bg-card border border-border rounded-lg p-6 (white)
Shadow: Tailwind shadow-sm
Header: Rep name + photo, role badge, period selector
Body: 5 metric rows (Profit, Volume, New Business, Retention, Activity)
Footer: Overall score (weighted %) + grade (A/B/C/D/F)

Metric Row (Scorecard Pattern)

Layout: Flex row — Label | Progress bar | Actual | Target | Score %
Label: text-sm text-muted-foreground w-32
Progress bar: bg-muted h-2 rounded-full w-48 with colored fill based on %
- 100%+: bg-semantic-green
- 70-99%: bg-semantic-amber
- <70%: bg-semantic-red
Numbers: text-lg font-bold text-foreground (actual), text-sm text-muted-foreground (target)
Score %: text-md font-semibold colored by achievement (green/amber/red)

Badges

Grade badges: Large circular badges for A/B/C/D/F (use grade color palette)
- A+: bg-grade-a-plus text-white w-12 h-12 rounded-full text-xl font-bold
- A: bg-grade-a text-white
- B: bg-grade-b text-white
- C: bg-grade-c text-white
- D: bg-grade-d text-white
- F: bg-grade-f text-white
Status badges: Small pills with semantic colors

Tables (Accounts/Trade Lanes)

Header: bg-muted text-muted-foreground font-semibold text-sm
Row: bg-card hover:bg-muted/50 border-b border-border
Sortable headers: Arrow indicator, cursor-pointer hover:text-primary
Pagination: Bottom center, small text with prev/next buttons

KPI Cards (Summary Metrics)

Card: bg-card border border-border rounded-lg p-5 shadow-sm
Big number: text-3xl font-bold text-foreground
Label: text-sm text-muted-foreground uppercase mb-2
Trend: text-xs with ▲/▼, text-trend-up or text-trend-down
Comparison: "vs last month" or "vs target" in small muted text

Charts (Chart.js — Critical Component)

Colors: ['#0457A1', '#22C55E', '#F59E0B', '#EF4444', '#8b5cf6', '#06b6d4'] (WSI blue-first palette)
Bar charts: Use for revenue/volume over time
Line charts: Use for trends (monthly performance)
Doughnut charts: Use for category breakdown (new vs existing customers)
Fonts: family: 'Inter', size: 12, color: '#64748b'
Grid lines: color: '#e2e8f0', borderDash: [2,2]
Tooltips: Light theme (backgroundColor: '#ffffff', borderColor: '#e2e8f0')

Universal Search (Ctrl+K) — Integrated

Overlay: bg-black/50 backdrop-blur-sm
Search bar: bg-white border border-border rounded-lg text-foreground placeholder-muted-foreground
Results panel: bg-white border border-border rounded-lg shadow-2xl
Category pills: bg-secondary text-secondary-foreground px-3 py-1 rounded-full text-sm hover:bg-primary hover:text-white
Result items: hover:bg-muted p-3 rounded-lg cursor-pointer
Quick view panel: Right side, bg-white border-l border-border w-80

Filters (Rep/Territory/Date Range)

Filter bar: bg-slate-800 border-b border-slate-700 p-4 flex gap-3
Date picker: Custom dark-themed calendar with purple highlights
Dropdown: bg-slate-700 border border-slate-600 text-slate-100 rounded-lg
Active filter badge: Shows selected filters with X to clear, purple background

Data Density

High density: Show more data per screen than light themes
Compact tables: Row height h-12 (not h-16)
Grid layouts: 3-4 columns on desktop, 1-2 on tablet

Animations

Library: CSS transitions + framer-motion for Universal Search
Transitions: transition-all duration-200
Skeleton loaders: bg-muted animate-pulse for loading states
Number animations: CountUp.js or CSS @keyframes for big numbers
Smooth scrolling: Native CSS scroll-behavior: smooth

Maps (Analytics Map — NEW 2026-02-26)

Tile layer: CartoDB Positron (light map for light theme)
Route lines: Distinct colors per trade lane (20-color palette: LANE_PALETTE)
Route colors: ['#0457A1', '#22C55E', '#F59E0B', '#EF4444', '#8b5cf6', '#06b6d4', '#f43f5e', '#14b8a6', '#a855f7', '#6366f1', '#f97316', '#22d3ee', '#84cc16', '#fb923c', '#e879f9', '#38bdf8', '#facc15', '#4ade80', '#f87171', '#c084fc']
Port markers: Circle markers with volume labels, color by rep
Legend: Bottom-right, bg-white/90 backdrop-blur border border-border rounded-lg p-3 text-xs shadow-md
Popup style: bg-white border border-border text-foreground with rep name, origin→destination, volume

Special Rules

Light theme throughout: White cards, light backgrounds, NO dark mode
WSI brand alignment: Use same colors as WSI MC (#0457A1 primary)
Tailwind v4: Uses @theme syntax for design tokens
Data-first: Every screen must show actionable metrics, no fluff
Target-driven: Always show actual vs target, color-code by achievement
Weighted scoring: Overall scorecard score uses weighted average (Profit 30%, Volume 20%, etc.)
Rep scoping: Sales reps only see their own data, managers see all
Date flexibility: Support ETA, ETD, POST date basis (toggle in UI)
Number formatting: Currency with $ and commas, percentages with %, volumes with K/M abbreviations
Export options: Every table/chart has CSV export button (top-right)
No mock data: All data is real from CargoWise + Salesforce sync
Customer Intelligence: AI grading with Claude (Anthropic API)
Universal Search: Ctrl+K search across salespeople, accounts, trade lanes, import intel
No custom scrollbars: Use browser defaults per user preference (cleaned 2026-02-27)
Light glassmorphism: Updated from dark backgrounds to light theme-optimized (2026-02-27)

Style Lock Instructions (Prevent Drift)

When working on any project above, include these instructions to prevent Claude from introducing inconsistent styles:

STYLE LOCK — [Project Name] Design System

You are working on [Project Name]. Follow the [Project Name] Design System exactly:

1. **Colors:** Only use the defined color palette. Do NOT introduce new colors.
2. **Components:** Match existing component styles (buttons, cards, badges, tables). Do NOT create new variants.
3. **Typography:** Use the specified font family, sizes, and weights. Do NOT change fonts.
4. **Spacing:** Use the defined spacing scale. Do NOT add custom padding/margins.
5. **Icons:** Use the specified icon library only. Do NOT mix icon styles.
6. **Animations:** Use the specified animation library (or none). Do NOT add framer-motion if not listed.
7. **Layout:** Follow the layout patterns (sidebar, navbar, grid). Do NOT redesign the structure.
8. **Charts:** Use Chart.js with the defined color palette. Do NOT change chart library or colors.

If a new pattern is needed that doesn't exist in the design system, ASK before implementing.

Tailwind Config Templates

CHAROS (Light Theme)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: '#D42A1C',
          50: '#FEF2F2',
          100: '#FEE2E2',
          200: '#FECACA',
          300: '#FCA5A5',
          400: '#F87171',
          500: '#EF4444',
          600: '#D42A1C',
          700: '#B91C1C',
          800: '#991B1B',
          900: '#7F1D1D',
        }
      },
      fontFamily: {
        sans: ['system-ui', '-apple-system', 'Segoe UI', 'sans-serif'],
      },
    },
  },
}

VIA (GREEN Government Platform) ✅

module.exports = {
  theme: {
    extend: {
      colors: {
        via: {
          'dark-green': '#0D3B2E',    // PRIMARY: Sidebar, CTAs
          'primary-green': '#1B6B4F', // Logo, headings
          'medium-green': '#2A9D6E',  // Links, icons
          'teal': '#3ECFA5',          // ACCENT: Active states
          'mint': '#7EECD2',          // Light accents
          'light-mint': '#B5F5E0',    // Subtle backgrounds
          'lime': '#C8E64A',          // Presentation CTAs
          'yellow-green': '#D4F34D',  // Decorative
          'success': '#34C759',       // Completada
          'warning': '#F5A623',       // En Ruta
          'error': '#E53E3E',         // Cancelada
          'port-orange': '#FF8C00',   // En Puerto
        }
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      spacing: {
        // 8px base grid
        xs: '4px',
        sm: '8px',
        md: '16px',
        lg: '24px',
        xl: '32px',
        '2xl': '48px',
      },
    },
  },
}

Dark Theme (WSI MC, Mission Control, Sales MC)

module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // Each project sets its own primary
        // WSI: primary = cyan
        // Mission Control: primary = blue
        // Sales MC: primary = purple
      },
      backgroundColor: {
        750: '#283548', // Custom slate-750 for hover states
      }
    },
  },
}

Usage Workflow

Start of session: Tell Claude "Working on [Project Name]"
Claude reads: Relevant design system from this file
All code generated: Automatically matches that system's colors, components, layout
If mixing projects: Explicitly state when switching (e.g., "Now working on VIA")
New projects: Use the Template section, define design system first, then build

Maintenance

Update this file when a project's design evolves
Add new projects using the template
Version design systems if major redesigns happen (e.g., VIA v2)
Cross-reference: Link to this file from project-specific specialist files

Last updated: 2026-02-26

Design Systems — Project-Specific Visual Languages ​

Quick Reference — Project → Design System ​

Template — New Project Design System ​

CHAROS Design System ​

Brand Identity ​

Typography ​

Spacing Scale ​

Component Styles ​

Buttons ​

Cards ​

Inputs ​

Badges/Pills ​

Tables ​

Layout Patterns ​

KPI Cards (Dashboard Pattern) ​

Charts (Chart.js Config) ​

Icons ​

Animations ​

Dark/Light Mode ​

Maps (Leaflet) ​

Special Rules ​

VIA Design System ​

Brand Strategy & Positioning ​

Brand Mission ​

Brand Promise ​

Brand Values ​

Brand Personality ​

Brand Voice & Tone ​

Brand Identity (Visual) — ✅ OFFICIAL BRAND GUIDELINES v1.0 ​

Primary Color Palette (GREEN FAMILY) ✅ ​

Accent Colors ​

Semantic / Status Colors ​

Neutral Text Palette ​

Logo & Brand Mark (Specifications) ​

Photography & Imagery Style ​

Iconography Rules ​

Brand Applications ​

Document Templates (Future — not yet built) ​

Physical Touchpoints (Future) ​

Typography ​

Layout Pattern (Signature) ✅ ​

Component Styles ​

Buttons ✅ ​

Cards ✅ ​

Status Badges (Critical for VIA) ✅ ​

Tables ✅ ​

KPI Cards (Dashboard Pattern) ✅ ​

Charts ✅ ​

Maps (Leaflet — Critical Component) ✅ ​

Convoy Visualization (Unique to VIA) ✅ ​

Animations ​

VIA Official Components — Reusable Library ✅ ​

1. Alert Component (.via-alert) ​

2. KPI Card — Official Icon Pattern (.via-kpi-card) ​

3. Legend Dot Component (.legend-dot) ​

Component Usage Guidelines ​

Dark Green Sidebar + Light Content (Signature Layout) ✅ ​

Special Rules ✅ ​

WSI Official Brand Design System ​

Brand Identity ​

Typography ​

Component Styles ​

Buttons ​

Forms ​

Cards ​

Layout Patterns ​

Special Design Elements ​

Accessibility & Best Practices ​

Special Rules ​

Brand Voice ​

WSI MC Design System ​

Brand Identity ​

Typography ​

Layout Pattern (Signature: Dark Sidebar + Light Content) ​

Component Styles ​

Sidebar ​

Buttons ​

Cards ​

Inputs ​

Badges/Status Pills ​

Design Systems — Project-Specific Visual Languages

Quick Reference — Project → Design System

Template — New Project Design System

CHAROS Design System

Brand Identity

Typography

Spacing Scale

Component Styles

Buttons

Cards

Inputs

Badges/Pills

Tables

Layout Patterns

KPI Cards (Dashboard Pattern)

Charts (Chart.js Config)

Icons

Animations

Dark/Light Mode

Maps (Leaflet)

Special Rules

VIA Design System

Brand Strategy & Positioning

Brand Mission

Brand Promise

Brand Values

Brand Personality

Brand Voice & Tone

Brand Identity (Visual) — ✅ OFFICIAL BRAND GUIDELINES v1.0

Primary Color Palette (GREEN FAMILY) ✅

Accent Colors

Semantic / Status Colors

Neutral Text Palette

Logo & Brand Mark (Specifications)

Photography & Imagery Style

Iconography Rules

Brand Applications

Document Templates (Future — not yet built)

Physical Touchpoints (Future)

Typography

Layout Pattern (Signature) ✅

Component Styles

Buttons ✅

Cards ✅

Status Badges (Critical for VIA) ✅

Tables ✅

KPI Cards (Dashboard Pattern) ✅

Charts ✅

Maps (Leaflet — Critical Component) ✅

Convoy Visualization (Unique to VIA) ✅

Animations

VIA Official Components — Reusable Library ✅

1. Alert Component (`.via-alert`)

2. KPI Card — Official Icon Pattern (`.via-kpi-card`)

3. Legend Dot Component (`.legend-dot`)

Component Usage Guidelines

Dark Green Sidebar + Light Content (Signature Layout) ✅

Special Rules ✅

WSI Official Brand Design System

Brand Identity

Typography

Component Styles

Buttons

Forms

Cards

Layout Patterns

Special Design Elements

Accessibility & Best Practices

Special Rules

Brand Voice

WSI MC Design System

Brand Identity

Typography

Layout Pattern (Signature: Dark Sidebar + Light Content)

Component Styles

Sidebar

Buttons

Cards

Inputs

Badges/Status Pills