Design System

RetroBytes Studio — Vintage Retro UI Kit v1.0
v1.0.0
01 — Paleta de Color
primary
#008080 — Teal
surface
#C0C0C0 — Silver
bg
#1a1a2e — Dark Navy
text
#000000 — Black
success
#16A34A — Green
warning
#D97706 — Amber
danger
#DC2626 — Red
text-inv
#FFFFFF — White
Token CSS Valor Preview Uso WCAG
--color-primary #008080 Acciones, bordes activos, focus ✅ AA sobre bg
--color-secondary #C0C0C0 Superficies, botones secundarios ✅ AA 7:1 vs #000
--color-success #16A34A Estados positivos, confirmación ✅ AA sobre dark
--color-warning #D97706 Focus rings, alertas, atención ⚠️ usar con texto negro
--color-danger #DC2626 Errores, acciones destructivas ✅ AA sobre dark
02 — Tipografía
H1 / 32px / 700
Silkscreen
RetroBytes
H2 / 24px / 700
Silkscreen
Catálogo de Juegos
H3 / 20px / 700
Silkscreen
Pixel Platformer
body-md / 16px / 400
Silkscreen
Juegos indie de culto con estética 8-bit para nostálgicos
body-sm / 14px / 400
Silkscreen
Plataformas: PC, Switch, PS5 — Idioma: ES/EN
label / 12px / 700
JetBrains Mono
GENERO / PRECIO / PLATAFORMA
03 — Escala de Espaciado
--sp-1
4px
--sp-2
8px
--sp-3
12px
--sp-4
16px
--sp-6
24px
--sp-8
32px
04 — Componentes
▶ RETROBYTES
Catálogo Novedades Estudio Blog
BOTONES — Estados y variantes
◆ ★ ◆
Plataformas PC
Pixel Odyssey III
RetroBytes Studio · 2024 · Aventura
€12,99
▲ ▼ ▲
Nuevo Switch
NeonRacer 8bit
RetroBytes Studio · 2025 · Racing
€8,99
✦ ✧ ✦
Oferta -30%
CryptDungeon Pro
RetroBytes Studio · 2023 · RPG
€6,99
INPUTS — Estados
Escribe el nombre del juego
Campo completado
▲ Código de descuento no válido
Requiere cuenta PRO
BADGES — Géneros y estados
Plataformas RPG Nuevo Oferta Pixel Art Arcade Co-op PC Switch PS5
✔
Compra exitosaPixel Odyssey III añadido a tu biblioteca. Descarga disponible ahora.
▲
AtenciónEste juego requiere controlador para la experiencia completa.
✕
Error de pagoLa tarjeta fue rechazada. Comprueba los datos e inténtalo de nuevo.
ℹ
Beta disponibleNeonRacer 8bit está en Early Access. Los bugs son parte de la experiencia retro.
PROGRESS + STATUS
Descarga Pixel Odyssey III73%
Logros desbloqueados12/20
Nivel completado100%
Servidores online Mantenimiento 02:00 EU-WEST: offline SA: idle
05 — Anti-patrones Prohibidos
✕ Prohibido
Texto gris sobre gris oscuro
▲ Contraste insuficiente — ratio <3:1, falla WCAG AA
Texto teal sobre fondo teal
▲ Sin contraste — nunca mezclar mismo tono en fg/bg
✓ Correcto
Texto silver (#C0C0C0) sobre dark navy
✓ Ratio 7.8:1 — pasa WCAG AAA
Texto negro (#000) sobre silver
✓ Ratio 9.5:1 — máxima legibilidad
✕ Spacing irregular
▲ 13px, 5px, 19px — valores arbitrarios fuera de escala
✓ Spacing en escala
✓ gap: 8px (--sp-2) — siempre tokens del sistema
06 — QA Checklist
Accesibilidad
  • Contraste de color ≥ 4.5:1 en texto normal (WCAG 2.2 AA)
  • Contraste ≥ 3:1 en texto grande (+18px bold)
  • Focus ring visible (3px outline #D97706) en todos los interactivos
  • Navegación completa por teclado (Tab, Enter, Escape, Flechas)
  • Roles ARIA correctos en todos los componentes interactivos
  • No confiar solo en el color para transmitir estado
  • Labels visibles en todos los campos de formulario
Consistencia de diseño
  • Todos los colores usan tokens CSS (no valores hardcoded)
  • Tipografía solo de la escala definida (12/14/16/20/24/32)
  • Espaciado solo de la escala (4/8/12/16/24/32)
  • Sombras retro (4px 4px 0 #000) en todos los componentes elevados
  • Estados hover/active/focus definidos en todos los interactivos
  • Estado disabled con opacity: 0.45 y pointer-events: none
  • Cards con border: 2px solid #000 y box-shadow retro
Sistema de Diseño Vintage · RetroBytes Studio · Generado por CULTIVA IA · 2026  ·  Basado en skill: sistema-diseno-vintage · WCAG 2.2 AA