Guía de sistema de diseño con estilo skeuomorfista: texturas reales, efectos 3D y metáforas físicas para una experiencia digital intuitiva y familiar.
v1.0.0 · WCAG 2.2 AA · Web Components · CSS Custom Properties
Tokens de Color
La paleta combina los tokens del sistema base (primario, secundario, estados) con una extensión de tonos café inspirada en el proceso de tueste: desde espresso oscuro hasta crema clara.
Tokens del sistema
primary#FA3C00
secondary#F08321
success#16A34A
warning#D97706
danger#DC2626
text#111827
surface#FFFFFF
Extensión café — Cultiva Café
espresso#1C0A00
dark-roast#3D1A00
med-roast#6B2E00
crema#C8813A
latte#E8C99A
cream#F2E0C8
paper#FBF5EC
Tipografía
Tres familias tipográficas con roles diferenciados: display para jerarquía y brand; body para legibilidad en flujo; mono para datos, etiquetas técnicas y código.
display-h1Germania One · 32px
Café de Especialidad
display-h2Germania One · 24px
Blend Etiopía Yirgacheffe
body-lgRoboto 400 · 20px
Notas de cata: frutos rojos, jazmín, acidez brillante
body-mdRoboto 400 · 16px
Tostado ligero a media temperatura, origen lavado en altura de 1.900 m s.n.m.
body-smRoboto 400 · 14px
Proceso: Lavado · Altitud: 1.900–2.200 m · Variedad: Heirloom
label-capsJetBrains Mono · 12px
ORIGEN: ETIOPÍA · PROCESO: LAVADO
mono-dataJetBrains Mono · 12px
--color-primary: #FA3C00; --space-md: 8px;
Escala de Espaciado
Ritmo base de 4px. Todos los márgenes, paddings y gaps deben ser múltiplos de esta escala: 4 / 8 / 12 / 16 / 24 / 32.
4px · --space-1
8px · --space-2
12px · --space-3
16px · --space-4
24px · --space-6
32px · --space-8
Componentes
Cada componente aplica texturas físicas mediante gradientes multicapa, sombras internas/externas y bordes iluminados que imitan materiales reales.
Button — Raised Skeuomorphic
Anatomía: fondo con gradiente de 3 paradas · borde 1px oscuro · highlight superior inset 0 1px 0 rgba(255,255,255,0.25) · sombra exterior de profundidad · text-shadow para relieve. Tokens usados:--color-primary, --radius-md, --space-3 space-6, --font-body weight-600. Estados: default → hover (translateY -1px, sombra ampliada) → active (pressed, sombra invertida) → disabled (flat, cursor: not-allowed). Accesibilidad::focus-visible must show outline: 3px solid #FA3C00 con offset 2px. Contraste texto/fondo ≥ 4.5:1 en todos los variants.
Product Card — Bag texture
☕Etiopía
Yirgacheffe Natural
Single Origin · Specialty
Frutos rojosJazmínBergamota
14,50€ / 250g
Imagen de cabecera con textura de saco kraft (repeating-linear-gradient). Notas de cata como chips con relieve sutil. Botón "+" skeuomorfista con sombra de profundidad.
Size Toggle · Loyalty Badge · Qty Drum
Tamaño — Physical Selector
S180ml
M240ml
L360ml
Sello de Fidelización
7cafés
Mi tarjeta
10gratis
Meta
Cantidad — Drum Roller
3
Size Toggle: alojado en ranura con sombra interna. Opción activa: fondo elevado con sombra exterior + highlight. Loyalty Badge: borde dentado simulado con border-style: dashed. Progreso por opacidad. Qty Drum: carcasa oscura de madera. Display LED en negativo con glow ámbar.
Estados de Interacción
Todos los componentes interactivos deben implementar estos estados. Cada estado se ancla a un token o valor CSS concreto, nunca a descripciones ambiguas.
Estado
Trigger
Cambio visual obligatorio
Token / Valor CSS
Accesibilidad
default
Reposo
Gradiente raised + sombra exterior 6px
--shadow-raised
Contraste ≥ 4.5:1
hover
:hover
translateY(-1px) + sombra ampliada
translateY(-1px)
No solo cambio de color
focus-visible
:focus-visible
Outline naranja 3px + offset 2px
outline: 3px solid #FA3C00
Visible en todos los temas
active
:active
Sombra pressed (inset), translateY(1px)
--shadow-pressed
Feedback táctil suficiente
disabled
[disabled]
Flat (sin sombra), opacidad 0.45
opacity: 0.45
aria-disabled="true"
loading
JS class .is-loading
Spinner ámbar + texto oculto visualmente
--color-warning
aria-busy="true"
error
Validación fallida
Borde pulsante danger + icono ⚠
--color-danger
role="alert" en mensaje
Accesibilidad WCAG 2.2 AA
El estilo skeuomorfista prioriza el atractivo visual; cuando haya conflicto entre estética y accesibilidad, la accesibilidad gana siempre.
Criterios de aceptación testables
✓Contraste texto normal ≥ 4.5:1 (verificar con color-contrast checker)
✓Contraste texto grande (24px/18px bold) ≥ 3:1
✓Focus visible en TODOS los elementos interactivos sin excepción
✓Target size mínimo de botones: 44×44 px (WCAG 2.5.5)
✓Texturas y gradientes no transmiten información semántica sola
✓Estados (error, éxito) tienen indicador de color + icono + texto
✓Sombras no se usan como único indicador de jerarquía
✓Animaciones respetan prefers-reduced-motion
✗Texto sobre texturas de madera: verificar contraste manualmente
✓Formularios: labels visibles, no solo placeholders
✓ARIA roles en componentes custom (toggle, drum, badge)
✓Navegación completa con teclado (Tab, Enter, Space, Arrows)
Anti-patrones y Migraciones
Implementaciones prohibidas y su alternativa correcta. Aplican tanto a nuevos componentes como a migraciones desde UI plana anterior.
✗ No hacer
Texto gris claro (#ccc) sobre fondo blanco (contraste insuficiente)
Gradientes de más de 4 paradas sin propósito material real
Sombras idénticas en TODOS los componentes (elimina jerarquía)
Texturas de imagen rasterizada cargadas por CDN externo
Spacing fuera de la escala (ej. padding: 11px, margin: 7px)
Botones más pequeños de 36×36 px en mobile
Hover state solo con cambio de color sin cambio de elevación
Labels ambiguos: "Click aquí", "Botón", "Enviar" sin contexto
✓ Hacer
Texto ≥ #555 sobre superficies claras; usar token --color-text
Gradientes de 2–3 paradas que imiten iluminación real (top-lit)