Referencia de diseño

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 monospace (definida en global.css). Tamaño mínimo: text-base.

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>

Patrones de sección

Estructura estándar de secciones usada en mvp4 y vs-lovable.

Fondo alternado

<section class="py-20 px-6 bg-secondary/30">   <!-- sección impar -->
<section class="py-20 px-6">                   <!-- sección par -->

Cabecera de sección

<p class="font-medium text-muted-foreground mb-3 tracking-wide uppercase">
  Etiqueta
</p>
<h2 class="text-3xl md:text-4xl font-bold tracking-tight text-foreground">
  Título de sección
</h2>
<p class="mt-4 text-lg text-muted-foreground leading-relaxed">
  Descripción de apoyo.
</p>

CTA final (fondo primary)

<section class="py-20 px-6 bg-primary text-primary-foreground">
  <div class="max-w-3xl mx-auto text-center">
    <h2>...</h2>
    <Button href="mailto:..." variant="primary">Enviar email</Button>
  </div>
</section>

Páginas del sistema

Index

Blog con listado de artículos.

/proyectos

Proyectos

Proyectos agrupados por categoría.

/mvp4

mvp4

Landing principal de servicios MVP.

/vs-lovable

vs Lovable

Comparativa de servicios vs herramienta.