/ docs

Versions

v4/all.min.css v4/tokens.css v4/tokens.json v5/illanes.min.css v5/tokens.css v5/tokens.json v5/theme.js

Usage

Component classes (any project)

<link rel="stylesheet" href="https://style.illanes00.cl/v5/illanes.min.css">
<script src="https://style.illanes00.cl/v5/theme.js" defer></script>

Tailwind utilities (Next.js)

// tailwind.config.ts
import illanesPreset from '@illanes00/design-system/preset'

export default {
  presets: [illanesPreset],
  // ...
}

Color Tokens

Base

--bg

#f6f7f8

--paper

#ffffff

--ink

#0f1113

--muted

#4b5563

Borders

--line

#d5dbe3

--line-strong

#a9b3c2

Grays

--c-grey

#616e7c

--c-grey-dark

#3a424d

--c-charcoal

#111314

--c-silver

#cfd6de

Semantic

--c-green

#0b7e59

--c-blue

#3763e0

--c-amber

#d97706

--c-red

#c0352b

Typography

Heading 1 — IBM Plex Sans 800

Heading 2 — IBM Plex Sans 800

Heading 3 — IBM Plex Sans 700

Heading 4 — IBM Plex Sans 700

Heading 5 — IBM Plex Sans 600

Heading 6 — IBM Plex Sans 600

Body text at --fs-base (16px) with line-height 1.62. This is bold text, this is italic text, and this is a link.

Small text at --fs-sm (13px) for secondary content.

Scale

Token	Size	Sample
`--fs-xs`	0.75rem (12px)	Extra small text
`--fs-sm`	0.8125rem (13px)	Small text
`--fs-base`	1rem (16px)	Base text
`--fs-lg`	1.125rem (18px)	Large text
`--fs-xl`	1.25rem (20px)	Extra large text
`--fs-2xl`	1.5rem (24px)	2XL text
`--fs-3xl`	1.875rem (30px)	3XL text

Code

Inline code with JetBrains Mono.

// Code block
const greeting = 'hello, illanes00';
console.log(greeting);

Spacing

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-6

24px

--space-8

32px

--space-12

48px

--space-16

64px

Buttons

Cards

Card Title

Card body content with a link. Cards use --paper background and --line borders.

Card footer

Compact Card

With reduced padding via .card-compact.

Tables

Service	VPS	Port	Status
illanes00-admin	vps-dev	`8101`	OK
illanes00-monitor	vps-control	`5100`	OK
illanes00-api	vps-deploy	`5000`	DEGRADED
illanes00-backup	vps-deploy	`5001`	DOWN

Forms

Service Name

Lowercase, hyphens only.

VPS

Notes

Enable monitoring

Alerts

Success: Service deployed successfully.

Info: New version available for illanes00-monitor.

Warning: SSL certificate expires in 7 days.

Error: Connection to vps-deploy failed.

Badges & Pills

Pills (Status)

OK INFO WARNING ERROR DEFAULT

Dots (Indicators)

Running Deploying Degraded Down

VPS Badges

vps-dev vps-control vps-deploy default

Data Badges

+2.4% -1.8% SIGNAL $1,234,567.89

Tabs (CSS)

Tabs (Web Component)

Selecciona un tab. Evento illanes:tab:change se despacha al cambiar.

Stat Cards

Servicios activos

+2 desde ayer

Uptime

99.7%

Últimos 30 días

Errores

+3 última hora

Despliegues

142

Este mes

Tooltips

CSS-only, accesibles con :focus-within. ? Tooltip de ayuda con texto informativo

Tooltip con comando: ? Verificar con systemctl status caddy

Loading States

Spinners

Cargando...

Skeleton

Empty State

🗃

No hay servicios

Aún no se han configurado servicios en este VPS.

Alert Banners

Shell Components

Web Components compartidos, registrados automáticamente por shell.min.js.

Este es un modal genérico del design system. Soporta tamaños sm, md, y lg.

Se cierra con Escape, click en overlay, o el botón de cerrar.

Este es un drawer que se desliza desde el costado.

Soporta side="left" o side="right" (default).

Ejemplo de formulario