---
name: airexsus-design-system
description: Apply the Airexsus es una empresa design system — Spanish-language, US-market industrial HVAC brand for commercial and industrial refrigeration. Use when generating UI for cooling-equipment dashboards, service-order workflows, preventive-maintenance schedules, HVAC marketing pages, technical spec sheets, or operator night-shift surfaces. Provides design tokens (color, type, space, radius, shadow, motion), domain icons, brand marks, and a runnable applied UI kit with Sidebar / EquipmentList / EquipmentCard / DashboardArea / ActionBar role components.
user-invocable: true
---

# Airexsus es una empresa Design System — Skill

## What's inside

- `README.md` — package guide, source references, Preview Manifest, reuse workflow.
- `DESIGN.md` — canonical visual + brand rules (atmosphere, color, typography, spacing, layout, components, motion, voice, anti-patterns).
- `colors_and_type.css` — all design tokens as CSS custom properties: brand core, neutrals (light + `[data-theme="dark"]`), status, typography stack, scale, spacing scale (base 4 px), radii, shadows, motion, layout dims.
- `preview/` — ten focused HTML review cards (colors, themes, type, spacing, radius, shadows, buttons, inputs, brand assets) all linking the real tokens.
- `assets/` — `logo.svg`, `logo-mark.svg`, `logo-mono.svg`, plus `icon-cooling.svg`, `icon-equipment.svg`, `icon-service.svg` domain icons; `PROVENANCE.md` documents origin.
- `source_examples/` — provenance note + `equipment-card.reference.html`, a portable HTML/CSS pattern reference for the canonical equipment-detail card.
- `ui_kits/app/` — runnable applied interface kit: `index.html` mounts a React + Babel standalone runtime that composes `Sidebar`, `EquipmentList`, `EquipmentCard`, `DashboardArea`, and `ActionBar` into one operations surface. `components/_kit.css` provides applied styles consuming the token CSS.
- `context/` — preserved intake context (`source-context.md`, Figma parse summary).

The package does **not** ship `build/` or `fonts/` directories. No
captured runtime icons or font files were available at intake; these
are reserved for future intakes per the contract in
`context/source-context.md` (Claude-style build asset contract).

## Source context

- Company: Airexsus, US-market HVAC company selling commercial and industrial refrigeration systems — design, installation, and maintenance.
- Primary audience: operators, dispatchers, and technicians working in Spanish; clients reading in English.
- GitHub repos linked at intake: none.
- Local code folders linked at intake: none.
- Browser-copied snapshots at intake: none.
- Figma file `Design System _ UI Kit - Airexs US.fig` was parsed locally but the readable window (512 KB) returned no extractable color, font, or component tokens — see `context/figma/design-system-_-ui-kit---airexs-us.md`.

Because no source code or production brand assets were captured, the
design system was constructed intentionally from the documented product
context (industrial HVAC domain, bilingual operator audience, fleet
monitoring + service dispatch surfaces) rather than mirrored from
upstream evidence. `assets/PROVENANCE.md` records exactly which files
were designed for this package vs. preserved from a source.

## When to use this skill

Invoke this skill when a project needs to produce on-brand artifacts
for Airexsus or any closely related HVAC operations brand. Typical
triggers:

- Generating commercial / marketing pages for refrigeration services, request-a-quote flows, capability and case-study pages.
- Generating operator dashboards: equipment fleet view, status by SKU, thermal-load charts, service-order queues, preventive-maintenance calendars.
- Generating service-order or work-order detail screens, technician assignment, dispatch UIs.
- Generating bilingual (es-ES primary, en-US secondary) HVAC product surfaces.
- Generating spec sheets, equipment cards, technical PDFs with SKU + BTU/h + SEER + refrigerant.
- Building decks for sales / engineering proposals that need to feel "industrial precision, controlled cooling", not "consumer tech".

Do **not** use this skill for: chat/messaging products, consumer
lifestyle brands, editorial magazine layouts, or any context where the
HVAC industrial mood would feel out of place — pick a different design
system there.

## How to use

Before generating any artifact:

1. Read `README.md` — gives the high-level structure, source references, and the Preview Manifest.
2. Read `DESIGN.md` end-to-end. The §9 anti-patterns list is non-negotiable; re-read it before emitting.
3. Bind tokens by linking `colors_and_type.css` and using its custom properties via `:root`. Do not invent hex values outside the documented palette.
4. Browse `preview/*.html` to confirm rendered look of each token / component:
   - `preview/colors-primary.html`, `preview/colors-theme-light.html`, `preview/colors-theme-dark.html` for color decisions.
   - `preview/typography-specimens.html` for type scale and mono usage.
   - `preview/spacing-tokens.html`, `preview/spacing-radius.html`, `preview/spacing-shadows.html` for rhythm and elevation.
   - `preview/components-buttons.html`, `preview/components-inputs.html` for control patterns.
   - `preview/brand-assets.html` for live previews of `assets/` marks.
5. Inspect `assets/` for brand marks and `assets/PROVENANCE.md` for origin rules.
6. Inspect `source_examples/equipment-card.reference.html` for a pure HTML/CSS take of the canonical card pattern; useful when you can't run React.
7. Inspect `ui_kits/app/` when you need a real product surface, not isolated tokens. `ui_kits/app/index.html` is a runnable React + Babel entry; component files publish themselves on `window` so they can be composed without a build step.
8. Re-read `DESIGN.md` §8 before writing copy. Spanish is primary; sentence case in controls; imperial units primary with SI in parentheses; honest `—` placeholders.
9. Keep filenames and manifest text in sync. When you add or rename a preview, update the manifest in `README.md`, `DESIGN.md`, and this file together — they cannot drift.

## Design system highlights

- **One accent.** `--brand-primary` cyan (`#00A4D6`) is the only acento. Used at most twice per screen.
- **No translate hover.** Buttons never `translateY` on hover — that signals mechanical vibration, the wrong brand cue.
- **Dark mode only on dashboard.** Marketing stays light. Operators get dark mode for night shifts.
- **Tabular numerics by default.** SKU, BTU/h, °F, temperatures, capacities — all mono and tabular-aligned.
- **No purple/violet gradients, no warm-beige AI canvases, no SVG humanoids.** See `DESIGN.md` §9 for the full anti-pattern list.
- **Imperial first, SI in parentheses.** US market default; SI when the client requests it.
- **Honest placeholders.** When a metric is missing, render `—`, not a fabricated number.