Sistema de Diseño · v2.0

Sketchnote Studio
Doodle Design System

Guía de implementación lista para ingenieros y diseñadores. Estética hand-drawn para transmitir creatividad y cercanía.

v2.0 · 2026 · MIT License

🎨Tokens de Color

Paleta principal — usar siempre tokens semánticos, nunca valores directos
Primary #49B6E5
Secondary #263D5B
Success #16A34A
Warning #D97706
Danger #DC2626
Surface #FFFFFF
Text #111827
Background #FAFAF7

✍️Tipografía

Escala: 14 / 16 / 18 / 24 / 32 / 40px · Fuentes: Caveat (hand), JetBrains Mono (código)
Sketchnote Studio
H140pxweight 700Caveat
Diseña con intención
H232pxweight 600
Tus notas visuales
H324pxweight 600
Texto de apoyo para descripciones y onboarding de usuario.
Body LG18px
Cuerpo principal para contenido de la interfaz.
Body16px
Texto pequeño para metadatos, hints y notas secundarias.
Small14px
const token = '--color-primary'; // #49B6E5
Mono14pxJetBrains Mono

🖱️Botones

Variantes · Todos con focus-visible dashed, hover translate, active inset
Reglas de uso
  • btn-primary — una sola acción principal por vista. Nunca dos primarios juntos.
  • btn-secondary — acciones secundarias complementarias al primario.
  • btn-ghost — acciones terciarias, navegación, "ver más".
  • btn-danger — siempre requiere confirmación antes de ejecutar acción destructiva.
  • Box-shadow must: 2px 3px 0 #111827 (sketch offset). Sin border-radius superior a 16px.

📝Inputs de Texto

Estados: default · hover · focus · error · disabled
Máximo 60 caracteres. Visible en tu dashboard.
⚠ Introduce un email válido (ej. juan@empresa.com)
Disponible en plan Pro.

🃏Cards

Cards de producto/recurso — hover: translate(-2px,-2px) + shadow increment
📊
Mapa de Ideas
Organiza conceptos con nodos y conexiones sketch-style.
23 colaboradores Activo
📋
Sketchboard Pro
Lienzo libre con herramientas de dibujo y anotación.
8 miembros Beta
🎯
OKR Tracker
Seguimiento de objetivos con visualizaciones doodle.
4 proyectos Nuevo

🏷️Badges & Etiquetas

Siempre border redondeado pill. Border 2px del mismo color semántico.
Nuevo Publicado Pendiente ⚠ Error Archivado ✨ Pro ✓ Verificado 🔄 Sincronizando

🔔Alertas & Notificaciones

Info/Success: border sólido. Warning/Caution: border dashed (refuerza la imperfección doodle)
✓
¡Proyecto guardado! Tu mapa de ideas "Estrategia Q3" se ha sincronizado correctamente con todos los colaboradores.
💡
Tip de diseño Usa la herramienta de curvatura para dar un efecto hand-drawn más orgánico a tus líneas.
⚠️
Límite de colaboradores Has alcanzado 8 de 10 colaboradores de tu plan Free. Considera actualizar a Pro.
⛔
Sin conexión No pudimos sincronizar los cambios. Verifica tu conexión y vuelve a intentarlo.

📐Escala de Espaciado

Base 4px — escala: 4 / 8 / 12 / 16 / 24 / 32. No usar valores fuera de la escala.
--space-1 · 4px
--space-2 · 8px
--space-3 · 12px
--space-4 · 16px
--space-6 · 24px
--space-8 · 32px

🚫Anti-Patrones

✗ Prohibido

Usar sombras blur (box-shadow: 0 4px 12px rgba()) — rompe la estética sketch flat-shadow.

✓ Correcto

Sombra offset sólida: box-shadow: 2px 3px 0px #111827. Sin blur, sin opacidad.

✗ Prohibido

border-radius > 16px en cards o botones (excepto badges pill). Evita formas "balloon".

✓ Correcto

Usar --radius-md (8px) o --radius-lg (16px). Pill solo para badges y tags.

✗ Prohibido

Texto gris claro sobre fondo blanco (ratio < 4.5:1). Viola WCAG 2.2 AA.

✓ Correcto

Mínimo #6B7280 sobre blanco para texto secondary. Verificar con herramienta de contraste.

✗ Prohibido

Dos botones btn-primary en la misma vista. Genera confusión en la jerarquía visual.

✓ Correcto

Un solo primario por sección + secundario/ghost para acciones complementarias.

✅QA Checklist

Ejecutar en cada code review de componente nuevo o modificado
  • ✓ Todos los colores usan tokens CSS var(--color-*), sin valores hex directos
  • ✓ Contraste texto/fondo ≥ 4.5:1 (WCAG 2.2 AA) verificado con axe o Lighthouse
  • ✓ Estados :focus-visible visibles (outline dashed 3px --color-primary)
  • ✓ Navegación completa por teclado funciona sin ratón
  • Box-shadow usa solo offset sólido (sin blur) sobre tokens definidos
  • Espaciado usa exclusivamente valores de la escala (4/8/12/16/24/32px)
  • Tipografía usa Caveat (hand) o JetBrains Mono (código), no fuentes del sistema
  • Responsive funciona desde 320px sin scroll horizontal
  • ✓ Botones destructivos tienen confirmación previa
  • ✓ Cards tienen tabindex="0" y focus-within outline visible
  • Campos de formulario con aria-describedby en mensajes de error
  • Animaciones reducidas con @media (prefers-reduced-motion: reduce)