Clerkcode02/sos-design-system

Sistema de Diseño SOS

Dirección de arte

Premium, tranquilo, cívico, centrado en el ser humano. Imagina una revista editorial combinada con una sala de operaciones de emergencia: seguro, no alarmista.

Hacer: titulares editoriales de gran tamaño, gran espacio negativo, cuadrícula alineada a la izquierda con asimetría deliberada, secciones ocasionales a sangre, iluminación cinematográfica sutil (máximo un degradado radial suave por sección), vidrio contenido solo en superposiciones, el rojo de emergencia usado como un acento preciso.

No hacer: brillo neón, fondos rojos saturados, gráficos emoji, tarjetas genéricas de panel de control por todas partes, tarjetas flotantes con sombras paralelas pesadas, objetos que giran continuamente, múltiples degradados que compiten, fondos de partículas.

Regla general: si el rojo cubre más de ~5% del viewport, es demasiado.

Tokens de color

Definir una vez en src/app/globals.css bajo @theme de Tailwind v4. Los componentes usan solo utilidades de token (bg-ink, text-paper, text-accent), nunca el valor hexadecimal directamente.

Token	Valor	Uso
--color-ink	#101318	Fondo oscuro primario
--color-ink-raised	#1B2027	Superficies oscuras, bordes de teléfonos, tarjetas sobre fondo oscuro
--color-ink-line	#2A313B	Líneas finas/divisores sobre fondo oscuro
--color-paper	#F5F6F7	Fondo de sección claro
--color-paper-line	#E1E4E8	Líneas finas sobre fondo claro
--color-accent	#D93642	Acento: CTA, marcas clave, puntos de estado
--color-accent-strong	#B8232F	Texto de acento sobre fondos claros (AA sobre #F5F6F7)
--color-accent-soft	#F6E8EA	Fondos teñidos, insignias sobre fondo claro
--color-text-dark	#171A20	Texto del cuerpo sobre fondo claro
--color-text-light	#F7F8FA	Texto del cuerpo sobre fondo oscuro
--color-muted-dark	#9AA2AD	Texto atenuado sobre fondo oscuro (≥ 4.5:1 sobre #101318)
--color-muted-light	#5E6672	Texto atenuado sobre fondo claro (≥ 4.5:1 sobre #F5F6F7)

Notas de contraste:

• #858D98 (color atenuado proporcionado) pasa en fondo oscuro solo para texto grande; use --color-muted-dark para el cuerpo.
• Texto blanco sobre botones #D93642 es ~4.6:1 — aceptable para etiquetas de botón ≥ 16px seminegrita. Verifique después de cualquier cambio.
• El texto rojo sobre fondos claros debe usar --color-accent-strong.
• Nunca comunique estado solo con color — acompáñelo con una etiqueta o icono.

Colores de estado (solo sección de seguimiento): Pendiente = ámbar #C98A1B + icono de reloj, En curso = rojo de acento + punto sin pulso, Despejado = verde #2F8F5B + icono de verificación. Siempre etiquetados.

Tipografía

• Fuente: una sans variable mediante next/font/google (preferido: Inter Tight para display + Inter para cuerpo, o solo Geist). display: "swap", subconjunto latin, máximo 2 familias.
• Títulos: peso 600–700, tracking apretado (-0.03em a -0.045em), altura de línea 0.95–1.05.
• Cuerpo: peso 400, altura de línea 1.6, ancho máximo ~65ch.
• Cejas: 12–13px, mayúsculas, tracking-[0.18em], peso 500, color atenuado, a menudo con una regla roja corta antes.

Escala fluida (poner en @theme como --text-*):

--text-display: clamp(3rem, 1.2rem + 7.5vw, 9rem);    /* hero h1 */
--text-h2:      clamp(2.25rem, 1.2rem + 4.2vw, 5.5rem);
--text-h3:      clamp(1.375rem, 1rem + 1.4vw, 2.25rem);
--text-lead:    clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
--text-body:    1rem;  /* 1.0625rem en ≥ md */
--text-small:   0.875rem;
--text-eyebrow: 0.8125rem;

A 320px el título principal debe caber sin desbordamiento — pruebe específicamente "Every Second Matters."

Diseño y espaciado

• Contenedor: max-w-[1440px], relleno lateral clamp(1.25rem, 4vw, 4rem).
• Cuadrícula de 12 columnas en ≥ lg; tramos asimétricos (ej., 7/5, 5/7, offset-1).
• Ritmo vertical de sección: clamp(5rem, 10vw, 10rem) arriba/abajo.
• Escala de espaciado: base 4px (predeterminado de Tailwind). Prefiera pasos de 6, 8, 12, 16, 24, 32.
• Radio: 6px controles pequeños, 14px tarjetas, marco de teléfono ~2.6rem exterior.

Superficies y ritmo de secciones

Alternar oscuro y claro para crear capítulos: Hero (oscuro) → Acerca de (claro) → Cómo funciona (oscuro) → Categorías (claro) → Showcase (oscuro, a sangre) → Registro (claro) → Seguimiento (oscuro) → Coordinación (claro) → FAQ (claro) → CTA final (oscuro, cinematográfico) → Pie de página (oscuro).

Iluminación: como máximo un radial-gradient por sección oscura, opacidad baja (≤ 0.18), tinte rojo o gris frío. Estático — nunca animado.

Vidrio: bg-white/5 + backdrop-blur-md + borde de 1px ink-line, solo en navegación y superposiciones pequeñas. Sin paneles grandes desenfocados (rendimiento).

Componentes

• Botón primario: fondo de acento, texto claro, altura mínima de 48px, relleno horizontal de 20–28px, icono de flecha sutil que se desplaza 2px al pasar el ratón.
• Botón secundario: transparente, borde de 1px (ink-line en oscuro / paper-line en claro), mismo tamaño.
• Sin botón de tienda/descarga — esta página no tiene CTA de instalación, vea CLAUDE.md "Alcance: showcase, no embudo de instalación".
• Ceja: regla roja de 24px + etiqueta en mayúsculas.
• DraftBadge: pastilla pequeña con borde ámbar "Borrador — pendiente de confirmación"; solo en secciones con contenido borrador.
• Azulejo de categoría: icono (24px lucide, trazo 1.5) + título + descripción de una línea; borde fino, sin sombra pesada; al pasar el ratón = cambio de color de borde + elevación de 2px.
• Marco de teléfono: vea el skill app-screenshot-showcase.

Iconografía

Solo lucide-react, trazo 1.5, tamaños 20/24/32. Un icono por concepto; los iconos apoyan el texto, nunca lo reemplazan.

Lista de verificación antes de terminar el trabajo visual

• Solo se usan tokens; sin valores hexadecimales directos en componentes
• Uso de rojo restringido; el estado no solo se indica con color
• La jerarquía de títulos se lee de un vistazo; un elemento dominante por viewport
• Ritmo oscuro/claro intacto
• Contraste verificado para cualquier nueva combinación de colores
• Se ve intencional a 320px, no solo reducido