El sistema completo.

El bar. Los productos contra los que este sistema se mide, con la contribución específica de cada uno.

Todos los colores se definen en OKLCH para uniformidad perceptual entre temas. El acento es un solo color — terracota — usado con disciplina: máximo tres elementos por viewport.

Modo claro

Modo oscuro

Los swatches de abajo aplican .theme-dark localmente, así puedes verlos en su valor oscuro sin cambiar el tema de la página.

El sistema de superficies es la identidad visual primaria. La profundidad viene del contraste entre --bg y --bg-raised, no de sombras.

Sombras (solo modo producto, superficies flotantes)

Dos tipografías. Geist Sans para todo: UI, marketing, contenido. Geist Mono para numéricos, código y contenido técnico. La jerarquía se construye con peso, tamaño y tracking.

Tipo display

Escala de tipos

Pesos

Mono

Unidad base de 4 píxeles. Los componentes referencian tokens nombrados, nunca valores crudos. Las superficies de producto premium son más densas que las editoriales — el whitespace es para momentos.

Cinco valores. No hay --radius-none — todo en este sistema tiene al menos un radio sutil. Ángulos rectos leen utilitario.

Snap-tight. Linear es la referencia. Cada interacción se completa antes de que termines de pensarla.

Los detalles que separan «bien diseñado» de «se siente premium». Focus rings, selección, scrollbars, skeletons.

Lucide a 1.5px de stroke. 20px standalone es el default; 16px y 24px para inline y prominent. Color heredado, nunca como única señal de interacción.

Marcados como Implementado cuando viven en el código que renderiza esta página, o como Boceto cuando solo está documentado su contrato visual.

Foundation

Producto · superficie de reserva

Producto · superficie de doctora

Producto · onboarding

Marketing & meta

Composiciones consistentes entre superficies.

┌──────────────────────────────────────┐
│ Vera   Sobre  Sistema  ☼   Reservar  │   ← transparente arriba
└──────────────────────────────────────┘
        ↓ scroll > 40px
┌──────────────────────────────────────┐
│ Vera   Sobre  Sistema  ☼   Reservar  │   ← bg/0.8 + blur
└──────────────────────────────────────┘

Móvil:                        Desktop:
┌────────────┐                ┌──────────────────┐
│            │                │     ┌──────┐     │
│            │                │     │ modal│     │
│            │                │     └──────┘     │
│ ━━━━━━━━━━ │  ← handle      │                  │
│ ▼ Sheet ▼  │                │                  │
└────────────┘                └──────────────────┘

compact:        --row-height-base: 40px · --field-height-base: 36px
comfortable:    --row-height-base: 48px · --field-height-base: 44px

Baseline no negociable. Verificado independientemente para ambos temas.

• Focus rings visibles en todos los elementos interactivos
• Contraste mínimo AA contra la superficie correspondiente; AAA para --ink sobre --bg
• Tap targets mínimo 44×44px en touch
• HTML semántico — <button>, <nav>, <main>
• Skip-to-content link en todas las plantillas de página
• Las etiquetas de formulario nunca se reemplazan por placeholders solos
• aria-label en todos los botones icon-only
• aria-live="polite" en regiones de toast
• Focus trap en sheets, dialogs, drawers — retorna foco al trigger al desmontar
• ESC cierra todos los overlays
• prefers-reduced-motion respetado en todo el sistema
• El color nunca es la única señal — siempre acompañado de texto o icono
• Ambos temas cumplen mínimos de contraste de manera independiente

La lista corta de elecciones que romperían el sistema. Cada vez que el producto crece, la primera pregunta es: ¿estamos a punto de hacer una de estas?

1. 01No introducir tipografías adicionales — dos es el techo.
2. 02No agregar gradientes — los productos premium los ganan, no los toman.
3. 03No usar iconos sin etiqueta en flujos de producto.
4. 04No usar serif en cualquier lugar del producto.
5. 05No usar itálica en display — lee editorial.
6. 06No introducir azul, verde o morado como colores primarios.
7. 07No usar emoji en copy de producto.
8. 08No replicar componentes de davhera.com — construir fresco dentro del scope.
9. 09No usar negro puro o blanco puro (excepto --bg-raised en modo claro).
10. 10No shipear solo modo claro — ambos son de primera clase.
11. 11No usar sombras en cards en modo claro — el contraste de superficie es suficiente.
12. 12No usar ease-in-out del navegador — usa los easings nombrados.
13. 13No escribir copy de marketing en estilo ensayo.
14. 14No agregar overlays de grano, drop caps, pull quotes — toda decoración editorial.