Design System

Sistema de diseño de la Compañía de Innovación de Santiago SpA — tokens, tipografía, íconos y componentes compartidos para toda la plataforma CIS.

Una empresa del Círculo de Santiago SpA

RUT 78.384.591-1 · Marín 319, Depto 204, Santiago

Régimen Pro PYME General (14D)

Identidad visual

Wordmark tipográfico minimalista. Tres letras en Inter 800 con tracking negativo (-2) para máxima densidad. Sin graphics decorativos: el brand es la tipografía misma.

logo.svg · sobre fondo claro

logo.svg · sobre fondo oscuro

Reglas de uso: mantener el tracking negativo, no distorsionar, no agregar outlines ni drop shadows, no inclinar. Siempre alto contraste con el fondo.

Paleta de color

Primary · Ink (monochrome)

Escala neutral de grafito a blanco. zinc-900 (#18181b) es el primary.

ink-50

#fafafa

ink-200

#e4e4e7

ink-400

#a1a1aa

ink-500

#52525b

ink-700 ★

#18181b

ink-900

#000000

Accent · Blue

Azul limpio para links, focus states y CTAs secundarios. Nada saturado ni cyan.

blue-50

#eff6ff

blue-100

#dbeafe

blue-300

#93c5fd

blue-500 ★

#3b82f6

Estado · semánticos

warning

#fbbf24

error

#dc2626

pending

#f59e0b

Escala neutra

gray-50

#f8fafc

gray-200

#e2e8f0

gray-500

#64748b

gray-700

#334155

gray-900

#0f172a

Tipografía

Sans: Inter (fallback SF Pro Text, system-ui). Mono: JetBrains Mono (también usada en el terminal vps-cis).

text-5xlCompañía de Innovación

text-4xlCompañía de Innovación

text-3xlCompañía de Innovación

text-2xlCompañía de Innovación

text-xlCompañía de Innovación de Santiago SpA

text-baseCompañía de Innovación de Santiago SpA — RUT 78.384.591-1

text-smTexto base para UI secundaria, tags, metadata

text-xsTexto de legal, timestamps, overline

monovault get sii-cis CLAVE_TRIBUTARIA

Componentes `@cis/ui`

Live preview de los componentes React compartidos. Código fuente en /srv/projects/cds/cis/cis-ui/src/components/.

<Button /> · variants

<Card /> · variants

Default card

Outlined variant. Border + padding.

Elevated card

Sombra en vez de border.

<Header /> · mock

cis-admin

Intranet operacional

<Footer /> · mock

una empresa del Círculo de Santiago SpA

Uso en aplicaciones CIS

Todas las apps del ecosistema CIS (cis-admin, cis-inbox, cis-claudia, cis-status, cis-sii-monitor) consumen estos tokens + componentes. Patrón:

// app/layout.tsx
import "@core/core-style/brands/cis/tokens.css";
import { Header, Navbar, Footer, Button, Card } from "@cis/ui";

export default function RootLayout({ children }) {
  return (
    <html lang="es">
      <body className="cis-brand">
        <Header appName="cis-admin" appSubtitle="Intranet operacional" />
        {children}
        <Footer />
      </body>
    </html>
  );
}

Importar tokens en cualquier CSS

@import "@core/core-style/brands/cis/tokens.css";

.mi-componente {
  background: var(--cis-bg-surface);
  color: var(--cis-text);
  border: 1px solid var(--cis-border);
  border-radius: var(--cis-radius-md);
  padding: var(--cis-space-4);
  font-family: var(--cis-font-sans);
}