Design System · Custom · Industrial HVAC

Airexsus es una empresa Design System

Sistema de diseño reutilizable para Airexsus — empresa de HVAC del mercado estadounidense que vende sistemas de refrigeración comerciales e industriales, desde diseño e instalación hasta mantenimiento. Esta vista resume el paquete; cada tarjeta abre la pieza individual.

Reglas y guías

DESIGN.md/DESIGN.mdReglas canónicas: atmósfera, color, tipografía, espaciado, layout, componentes, motion, voz, anti-patterns. README.md/README.mdGuía del paquete, Product Overview, Preview Manifest y workflow de reuso. SKILL.md/SKILL.mdSkill entry con frontmatter YAML; cómo usarlo desde otro proyecto. colors_and_type.css/colors_and_type.cssTodos los tokens (color · type · space · radius · shadow · motion).

Previews

Colores · Marcapreview/colors-primary.htmlSwatches del núcleo de marca + estados semánticos con etiqueta de uso. Tema claropreview/colors-theme-light.htmlBackground, surface, fg, border y muestra compuesta para marketing. Tema oscuropreview/colors-theme-dark.htmlInversión de neutros para turnos nocturnos de dashboard. Tipografíapreview/typography-specimens.htmlDisplay, headings, body, caption, eyebrow y mono renderizados. Espaciadopreview/spacing-tokens.htmlEscala base 4 desde `--space-0` hasta `--space-32`. Radiospreview/spacing-radius.htmlEscala xs / s / m / l / xl / pill con tarjetas de muestra. Sombraspreview/spacing-shadows.htmlElevación hairline / 1 / 2 / 3 / focus. Botonespreview/components-buttons.htmlPrimary, secondary, ghost, danger, sizes, icon-only, focus visible. Inputspreview/components-inputs.htmlInputs, selects, textareas, error, disabled, check / radio / switch. Brand assetspreview/brand-assets.htmlLogos, mark, monochrome e iconos de dominio cargados en vivo.

UI kit aplicado

Operaciones HVACui_kits/app/index.htmlSidebar + EquipmentList + DashboardArea + EquipmentCard + ActionBar componiendo una superficie real. Kit · READMEui_kits/app/README.mdMapeo de roles, workflow de reuso, notas de diseño.

Source examples

Procedenciasource_examples/README.mdEstado del intake (sin fuentes upstream capturadas) y workflow para futuras intakes. EquipmentCard · patternsource_examples/equipment-card.reference.htmlReferencia HTML/CSS portable del patrón EquipmentCard, sin React.

Intake context: context/source-context.md y context/figma/design-system-_-ui-kit---airexs-us.md. Procedencia de assets: assets/PROVENANCE.md.