# Airexsus es una empresa Design System

Reusable Open Design design-system package for **Airexsus**, an HVAC company
selling commercial and industrial refrigeration systems in the United States
market — from engineering and design through installation and ongoing
preventive maintenance. This package codifies the visual rules, tokens,
brand assets, and applied UI patterns needed to produce on-brand artifacts
(marketing pages, operator dashboards, sales decks, equipment cards) from
future Open Design projects.

> Category: Custom · Industrial HVAC
> Primary surface: web (marketing + operator dashboards)
> Primary locale: es-ES · secondary: en-US

---

## Product Overview

Source: `context/source-context.md`, `context/figma/design-system-_-ui-kit---airexs-us.md`,
`DESIGN.md`.

Airexsus operates two primary product surfaces:

1. **Commercial / marketing site** — presents engineering capability,
   installation case studies, and request-a-quote flows. Tone is precise,
   technical, and bilingual (es-ES primary, en-US secondary).
2. **Operator dashboard** — fleet view of monitored cooling equipment
   (split, rooftop, evaporadores industriales, cámaras de congelación,
   chillers), service-order dispatch, preventive-maintenance scheduling,
   and reporting. Supports light and dark themes (night-shift operation).

Core capabilities evidenced by the brief and modeled by this package:
HVAC equipment fleet monitoring with status (operational / maintenance /
fault / offline), thermal-load tracking, service-order creation and
dispatch, preventive-maintenance calendars, technician assignment,
client/site management, bilingual operator UI.

The brand mood is **frescura controlada, precisión técnica y confianza
industrial** — cool but not sterile, dense but not heavy.

---

## Source repository / source folder references

| Source                | State        | File                                                  |
|-----------------------|--------------|--------------------------------------------------------|
| GitHub repositories   | none linked  | `context/source-context.md`                            |
| Local code folders    | none linked  | `context/source-context.md`                            |
| Browser code snapshots| none copied  | `context/source-context.md`                            |
| Figma file            | parsed (512 KB window) → no readable tokens | `context/figma/design-system-_-ui-kit---airexs-us.md` |
| Brand asset uploads   | none uploaded | `assets/PROVENANCE.md`                                 |
| Font uploads          | none uploaded | n/a (Inter stack, system fallback)                     |

Because no source code, runtime icons, or installer assets were captured,
this package does **not** ship a `build/` runtime-asset directory or a
`fonts/` preserved-font directory. Both can be added later, byte-for-byte
from a future intake, without breaking the existing structure.

---

## Package contents

```
ds-airexsus-es-una-empresa-design-system/
├── DESIGN.md                     ← canonical visual + brand rules
├── README.md                     ← this file
├── SKILL.md                      ← agent-usable skill entry (YAML frontmatter)
├── colors_and_type.css           ← all design tokens (color, type, space, radius, shadow, motion)
├── assets/
│   ├── logo.svg                  ← wordmark color
│   ├── logo-mark.svg             ← square mark (app icon friendly)
│   ├── logo-mono.svg             ← monochrome variant
│   ├── icon-cooling.svg          ← domain icon (refrigeración)
│   ├── icon-equipment.svg        ← domain icon (equipo HVAC)
│   ├── icon-service.svg          ← domain icon (orden de servicio)
│   └── PROVENANCE.md             ← honest provenance notes for every asset
├── preview/                      ← reviewable HTML cards (see Preview Manifest below)
├── source_examples/
│   ├── README.md                 ← provenance + future intake workflow
│   └── equipment-card.reference.html ← portable HTML/CSS reference of the EquipmentCard pattern
├── ui_kits/
│   └── app/
│       ├── index.html            ← runnable React + Babel entry, mounts <App />
│       ├── README.md             ← role mapping + usage workflow
│       └── components/
│           ├── _kit.css          ← applied styles consuming colors_and_type.css
│           ├── App.jsx           ← shell composing the 5 role components
│           ├── Sidebar.jsx
│           ├── EquipmentList.jsx
│           ├── EquipmentCard.jsx
│           ├── DashboardArea.jsx
│           └── ActionBar.jsx
└── context/
    ├── source-context.md
    └── figma/design-system-_-ui-kit---airexs-us.md
```

---

## Preview Manifest

Each card is a small focused HTML review surface. Open any card directly in
the Open Design preview pane (right-side `Design System` tab) to inspect
that part of the system in isolation. Every card links
`../colors_and_type.css` and demonstrates real, named tokens / components —
not generic placeholder shapes.

| Path | What to inspect | Source-backed evidence |
|------|------------------|------------------------|
| `preview/colors-primary.html`        | Brand core swatches + semantic status swatches with usage labels | Tokens `--brand-primary`, `--brand-deep`, `--brand-ink`, `--brand-frost`, `--success`, `--warning`, `--danger`, `--info` from `colors_and_type.css`; rules from `DESIGN.md` §2.1 / §2.3 |
| `preview/colors-theme-light.html`    | Light-theme background, surface, fg, border tokens + composition sample (equipment card preview) | Tokens `--bg`, `--surface`, `--fg`, `--border`, `--brand-frost`; rules from `DESIGN.md` §2.2 |
| `preview/colors-theme-dark.html`     | Dark-theme inverted neutrals + composition sample (operator night shift) | Tokens under `[data-theme="dark"]` in `colors_and_type.css`; rules from `DESIGN.md` §2.4 ("dashboard-only dark mode") |
| `preview/typography-specimens.html`  | Display XL / Display L / H1–H4 / body / caption / eyebrow / mono with rendered samples in real Inter | Tokens `--font-display`, `--font-body`, `--font-mono`, `--text-*`; rules from `DESIGN.md` §3 |
| `preview/spacing-tokens.html`        | Visual 4-px scale from `--space-0` through `--space-32` | Tokens `--space-*`; rules from `DESIGN.md` §4.1 |
| `preview/spacing-radius.html`        | Radius scale `xs / s / m / l / xl / pill` with sample cards | Tokens `--radius-*`; rules from `DESIGN.md` §4.2 |
| `preview/spacing-shadows.html`       | Elevation `hairline / 1 / 2 / 3 / focus` | Tokens `--shadow-*`; rules from `DESIGN.md` §4.3 |
| `preview/components-buttons.html`    | Primary / secondary / ghost / danger / sizes / icon-only / with-icon / disabled / focus states | Component spec in `DESIGN.md` §6.1; same hover/focus logic used in `ui_kits/app/components/_kit.css` |
| `preview/components-inputs.html`     | Inputs, selects, textareas, error state, disabled, checkbox / radio / switch | Component spec in `DESIGN.md` §6.2 |
| `preview/brand-assets.html`          | Live `<img>` loads of `assets/logo.svg`, `assets/logo-mark.svg`, `assets/logo-mono.svg`, `assets/icon-cooling.svg`, `assets/icon-equipment.svg`, `assets/icon-service.svg` + provenance note | Real files preserved in `assets/`; provenance in `assets/PROVENANCE.md` |

Keep this manifest synchronized with `preview/`. When a card is added,
renamed, or removed, update this table, the structure block in
`DESIGN.md`, and `SKILL.md` together — they must stay in lock-step.

---

## Reuse workflow

To use this package as the design system for a new Open Design project:

1. **Read the canonical rules.** Open `DESIGN.md` first — it is the source
   of truth for color, typography, spacing, components, motion, voice, and
   anti-patterns. Re-read §9 before generating to avoid the most common
   regressions (purple gradients, emoji icons, translate hover, etc.).
2. **Drop in the tokens.** Copy `colors_and_type.css` into the target
   project and link it from the page entry. Bind tokens via `:root`; do
   not invent hex values outside the palette.
3. **Browse the previews.** Open `preview/*.html` to see exactly how each
   token / component behaves. Each card is small enough to inspect in one
   viewport.
4. **Lift from the UI kit.** When building a product UI, copy components
   from `ui_kits/app/components/` directly — `Sidebar.jsx`,
   `EquipmentList.jsx`, `EquipmentCard.jsx`, `DashboardArea.jsx`,
   `ActionBar.jsx` are written as standalone React files exposing
   `window.<Name>` so they can be loaded with Babel standalone and
   composed without a build step (`ui_kits/app/index.html` is the
   reference entry).
5. **Use the reference pattern.** For pure HTML/CSS contexts (decks,
   marketing pages, prototype mockups), copy
   `source_examples/equipment-card.reference.html` instead of the JSX
   component — it's the same visual pattern, framework-free.
6. **Preserve real source when added.** If a future intake provides real
   GitHub repos, code folders, fonts, or brand assets, follow the
   intake workflow described in `context/source-context.md` (bounded
   `github-design-context` / `local-design-context` commands) and update
   `assets/PROVENANCE.md`, `source_examples/`, and this manifest
   together.

---

## Voice

This design system is written for a Spanish-language operator audience
with secondary English support (US market). Final UI strings should
follow `DESIGN.md` §8: sentence case in controls, `Usted` register in
marketing, imperial units primary with SI in parentheses, honest
placeholders (`—`) when a value is missing.