Guía de Integración de Diseño
Este documento es de uso interno. Define cómo copiar e implementar la estética y arquitectura de SimCodec en aplicaciones satélite o subdominios (ej. meet.workspace.epic.ec).
1. CSS Global y Temas
Toda la configuración gráfica reside en el archivo `src/styles/global.css` del repositorio de SimCodec. Utiliza Tailwind CSS v4 puro junto con variables de CSS. Para replicarlo fielmente, debes copiar el contenido de ese archivo a tu proyecto. Aquí tienes los tokens principales:
/* Extraído de src/styles/global.css */
@theme {
--color-esmerald: #00d48c;
--color-indigo: #053c5e;
--color-orange: #ff8025;
--font-display: 'Space Grotesk', system-ui, sans-serif;
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
:root {
--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme='dark'] {
--bg: #050b14;
--surface: #0a1622;
--text: #e9e9e9;
--accent: #00d48c;
}
[data-theme='light'] {
--bg: #eef2f7;
--surface: #ffffff;
--text: #06121c;
--accent: #038875;
}2. Tipografía
Debes importar las siguientes fuentes de Google Fonts en tu <head>:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />3. Consumo de Imágenes y Logos
Gracias a la regla CORS en Cloudflare, puedes enlazar los recursos gráficos estáticos directamente desde simcod.ec hacia cualquier subdominio .epic.ec. Solo asegúrate de agregar el atributo `crossorigin="anonymous"`.
- Logo Principal (Blanco):
https://simcod.ec/logo-white.png - Icono/Favicon:
https://simcod.ec/favicon-color.png
<img src="https://simcod.ec/favicon-color.png" crossorigin="anonymous" alt="SimCodec Icon" />4. Botones y Componentes Clave
Para los botones brutalistas, usa la clase `.btn` junto a los modificadores `.btn-primary` o `.btn-ghost`. Estos estilos están definidos en el global.css.
5. Estructura HTML Recomendada
Si estás copiando la interfaz en React, Vue o HTML estático, te recomendamos examinar el archivo `src/layouts/Base.astro` de este repositorio para ver cómo manejamos el `<head>` y el cambio de tema (Oscuro/Claro).