❯ system design

System Design

Componentes, tokens y patrones que se usan en todo el sitio. Fuente de verdad para mantener coherencia visual.

Colores

Variables CSS definidas en global.css bajo @theme.

background

foreground

primary

primary-foreground

secondary

secondary-foreground

card

border

muted

muted-foreground

Tipografía

La familia base del sitio es "JetBrainsMono Nerd Font", "JetBrains Mono", monospace (definida en global.css). Tamaño mínimo: text-base. Radio de borde: 0, como en Omarchy.

text-6xl font-bold Título hero

text-5xl font-bold Título sección

text-4xl font-bold Encabezado H1

text-3xl font-bold Encabezado H2

text-2xl font-semibold Encabezado H3

text-xl Subtítulo / intro

text-lg Cuerpo grande / descripción principal

text-base Cuerpo estándar — texto de tarjetas, etiquetas, navigation

Botones — `Button.astro`

Componente src/components/ui/Button.astro. Acepta href para enlace o se renderiza como <button>. Variantes: primary, secondary, outline.

Botón primario Botón secundario Botón outline

<Button href="#contacto" variant="primary">Empezar conversación</Button>
<Button href="#proceso" variant="secondary">Ver proceso</Button>
<Button href="#" variant="outline">Saber más</Button>

Tarjetas — `Card.astro`

Componente src/components/ui/Card.astro. Props: title, description, eyebrow, href. Acepta slot para contenido extra.

Ejemplo

Tarjeta simple

Descripción corta del contenido de esta tarjeta.

Con enlace

Tarjeta con href

El título se convierte en enlace cuando se pasa href.

Con slot

Tag 1Tag 2Tag 3

<Card
  eyebrow="Categoría"
  title="Título del proyecto"
  description="Descripción breve del proyecto."
  href="https://ejemplo.com"
/>

<Card eyebrow="Con contenido extra">
  <slot>contenido personalizado</slot>
</Card>