claudable-design

name	claudable-design
description	Directrices de diseño visual para crear interfaces distintivas y profesionales. Usar cuando necesites mejorar la estética de componentes o páginas.
invoke	auto

Principios de Diseño Distintivo

1. Tipografía con Personalidad

EVITAR: Inter, Arial, Roboto, Helvetica, system fonts PREFERIR: Fuentes con carácter que refuercen la marca

Tipo	Opciones recomendadas
Display/Headlines	Clash Display, Cabinet Grotesk, Satoshi, Space Grotesk, Outfit
Body refinado	DM Sans, Plus Jakarta Sans, Manrope, Nunito Sans
Serif elegante	Playfair Display, Fraunces, Libre Baskerville
Monospace moderno	JetBrains Mono, Fira Code, IBM Plex Mono

/* Ejemplo de configuración */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

2. Colores con Impacto

No uses paletas tímidas. Define:

• Un color dominante que identifique la marca
• Un acento contrastante para CTAs y highlights
• Neutrales con personalidad (no grises puros)

/* Ejemplo: Paleta con personalidad */
:root {
  --primary: 262 83% 58%;      /* Violeta vibrante */
  --accent: 43 96% 56%;        /* Amarillo dorado */
  --background: 240 10% 3.9%;  /* Negro con tinte azul */
  --foreground: 0 0% 98%;      /* Blanco cálido */
  --muted: 240 5% 15%;         /* Gris con personalidad */
}

3. Composición Espacial Audaz

• Asimetría intencional - No todo centrado
• Escala dramática - Headlines XXL, contrastes de tamaño
• Espacio negativo - Deja respirar el diseño
• Romper la grilla - Elementos que sobresalen

// Ejemplo de composición audaz
<section className="relative min-h-screen">
  <h1 className="text-[clamp(3rem,10vw,8rem)] font-bold leading-none">
    Diseño que<br />
    <span className="text-accent">impacta</span>
  </h1>
  <p className="absolute bottom-12 right-12 max-w-xs text-muted-foreground">
    Pequeño texto contrastando con el headline masivo
  </p>
</section>

4. Animaciones de Impacto

En carga inicial:

• Reveals escalonados (stagger)
• Fade + slide desde direcciones diferentes
• Clip-path reveals

En interacción:

• Hover states con movimiento
• Transiciones suaves (300-500ms)
• Micro-interacciones en botones

// Ejemplo con Motion
import { motion } from "motion/react"

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.6, ease: "easeOut" }}
>
  Contenido animado
</motion.div>

5. Fondos Atmosféricos

No uses fondos planos. Añade:

• Gradients sutiles - Mesh gradients, radiales
• Noise/grain - Textura sutil
• Blobs/shapes - Formas abstractas de fondo
• Grid lines - Líneas estructurales decorativas

/* Gradient mesh con noise */
.hero-bg {
  background:
    radial-gradient(ellipse at 20% 50%, hsl(var(--primary) / 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, hsl(var(--accent) / 0.1) 0%, transparent 50%),
    hsl(var(--background));
}

/* Añadir noise con pseudo-elemento */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/noise.svg');
  opacity: 0.03;
  pointer-events: none;
}

6. Detalles que Elevan

• Bordes sutiles - border border-border/50
• Sombras con color - No negro puro
• Glassmorphism selectivo - Solo donde tenga sentido
• Iconografía consistente - Lucide icons

// Card con detalles premium
<div className="relative rounded-2xl border border-border/50 bg-card/50 backdrop-blur-sm p-8 shadow-xl shadow-primary/5">
  {/* Highlight sutil en el borde superior */}
  <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent" />

  {/* Contenido */}
</div>

Anti-Patterns a Evitar

1. Diseño genérico - Si parece un template, es malo
2. Colores apagados - No tengas miedo del color
3. Todo centrado - Usa alineaciones variadas
4. Espaciado uniforme - Varía para crear ritmo
5. Tipografía monótona - Mezcla pesos y tamaños
6. Fondos planos - Siempre añade algo de textura
7. Animaciones idénticas - Varía timing y dirección