Tecnología sin complicaciones. Sistema de diseño oficial de HOMIUM — consultora de ecosistemas digitales para empresas en LATAM.
El HOMIUM Design System es un repositorio de marca que centraliza todo lo necesario para construir interfaces web coherentes con la identidad visual de HOMIUM: tokens de color y tipografía, fuentes, logos, guías de voz y tono, componentes React del sitio de marketing, y previews visuales del sistema.
Está diseñado para ser usado como un skill de Claude Code (/homium-design) que convierte al modelo en un diseñador experto de la marca, capaz de generar prototipos HTML o código de producción perfectamente alineados con HOMIUM.
| Necesidad | Solución |
|---|---|
| Prototipar pantallas rápido | Invocar /homium-design y pedir el artefacto HTML |
| Iniciar un proyecto frontend de producción | Copiar colors_and_type.css + fonts/ al proyecto |
| Consultar las reglas de marca | Ver DOCS.md y los archivos en preview/ |
| Reusar componentes del sitio de marketing | Tomar piezas de ui_kits/marketing-site/ |
| Onboardear a un nuevo dev o diseñador | Compartir este repo |
homium-design-system/
├── README.md ← este archivo (guía de uso)
├── DOCS.md ← spec técnica completa de la marca
├── SKILL.md ← contrato de invocación para Claude Code
├── colors_and_type.css ← tokens CSS: colores + escala tipográfica
├── fonts/
│ ├── fonts.css ← @font-face de Rubik (pesos 300–900)
│ └── Rubik-*.ttf ← archivos de fuente locales
├── assets/
│ ├── logo/ ← wordmark y bolt mark (SVG, blanco y morado)
│ └── screens/ ← capturas de referencia del sitio (PNG)
├── preview/ ← tarjetas HTML del Design System
└── ui_kits/
└── marketing-site/ ← recreación React/JSX del sitio de marketing
├── index.html ← Homepage
├── projects.html ← Nuestro Trabajo
├── detail.html ← Detalle de proyecto
└── *.jsx ← Layout, Hero, Brackets, Buttons, Cards…
/homium-design
Al invocar el skill, Claude lee toda la especificación de marca y actúa como diseñador experto. Se le puede pedir:
- "Crea un hero section para la home"
- "Genera un componente de tarjeta de proyecto en React"
- "Arma una landing page de una sola columna"
- "Revisa si este diseño es fiel a la marca"
<!-- 1. Copiar fonts/ y colors_and_type.css al proyecto -->
<!-- 2. Enlazar en el <head> -->
<link rel="stylesheet" href="./colors_and_type.css">
<!-- 3. Usar tokens y clases semánticas -->
<body>
<h1 class="display-lg">
Tecnología <em class="accent-italic">sin complicaciones.</em>
</h1>
<span class="bracket">no proveedores</span>
<button style="background: var(--homium-cyan); color: var(--homium-purple);">
Hablemos
</button>
</body>El tema oscuro (morado) es el default. Para superficies claras:
<body class="theme-light"> … </body>| Token | Color | Uso |
|---|---|---|
--homium-purple |
#290640 |
60% — fondo principal |
--homium-cyan |
#00ffff |
20% — CTAs, links, acento display |
--homium-green |
#5aeaa2 |
20% — chips, tags, acento secundario |
| Archivo | Cuándo usarlo |
|---|---|
assets/logo/homium-wordmark-white.svg |
Header/footer sobre fondo oscuro |
assets/logo/homium-wordmark-purple.svg |
Sobre fondos claros o blancos |
assets/logo/homium-bolt-white.svg |
Favicon, marca en pie de página |
assets/logo/homium-bolt-purple.svg |
Favicon en tema claro |
Abrir directamente en el navegador para explorar el sistema visualmente:
preview/colors-primary.html
preview/type-scale.html
preview/spacing-scale.html
preview/components-buttons.html
preview/components-service-cards.html
preview/brand-bolt-marks.html
Ver DOCS.md para la especificación detallada de: colores, tipografía, layout, iconografía, animación, voz y tono, y todas las reglas de marca.