SimCodec // Design System
Back to Home →

Design Integration Guide

Internal document. Defines how to copy and implement SimCodec's aesthetics and architecture into satellite apps or subdomains (e.g. meet.workspace.epic.ec).

1. Global CSS & Themes

All graphic configuration resides in the `src/styles/global.css` file of the SimCodec repository. It uses pure Tailwind CSS v4 with CSS variables. To replicate it faithfully, copy that file into your project. Here are the main tokens: 

/* 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. Typography

You must import the following Google Fonts in your <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. Consuming Images & Logos

Thanks to the CORS rule in Cloudflare, you can link static graphic assets directly from simcod.ec to any .epic.ec subdomain. Just make sure to add the `crossorigin="anonymous"` attribute.

  • 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. Buttons & Key Components

For brutalist buttons, use the `.btn` class alongside the `.btn-primary` or `.btn-ghost` modifiers. These styles are defined in global.css.

5. Recommended HTML Structure

If you are copying the interface in React, Vue, or static HTML, we recommend examining the `src/layouts/Base.astro` file in this repository to see how we handle the `<head>` and theme switching (Dark/Light).