Toda la documentación Proyecto
Descargar todos (ZIP)

VOLTA · 08-design-system.md · 10 de 22

En esta página 1. Fundamentos 0%

08 — Design system — VOLTA

1. Fundamentos

CapaValor
Nombre DSVOLTA UI (L1 vertical slice)
PrincipioEnergía de cancha + claridad operativa del inbox
PlataformasWeb responsive 360–1280+
ImplementaciónTailwind tokens + componentes de página (no lib publicada)

2. Color tokens

Marca (fuente de verdad del caso)

TokenHexUso
color.bg.chalk#F7F7F2Background app/marketing
color.surface#FFFFFFCards, header
color.ink#0B0B0BTexto fuerte, CTAs dark
color.ink.muted#5C5C58Secundario
color.lime#C6F23AAcento, highlights, CTA lime
color.lime.soft#EAF8B8Badges soft, fondos suaves
color.lime.strong#A8D420Hover lime
color.border#E2E2DCBordes
color.dangeraprox red-700Errores de form / red

Mapeo Tailwind app

ClaseValor implementado
bg-bg#F7F7F2
bg-surface#FFFFFF
text-ink / ink-muted#0B0B0B / #5C5C58
primary / primary-soft / primary-strong#0B0B0B / #EFEFEA / #000000
lime / lime-soft / lime-strong#C6F23A / #EAF8B8 / #A8D420
border-border#E2E2DC

3. Tipografía

TokenFamiliaFallback
font.displaySynesystem-ui, sans-serif
font.sansWork Sanssystem-ui, sans-serif
EstiloSpec
Display xlSyne 36–60/800, leading ~1.05
TitleSyne 28–32/700–800
BodyWork Sans 16/400–500, leading relaxed
LabelWork Sans 11–12/700 uppercase o tracking wide
ButtonWork Sans 14/700

4. Espaciado y radio

TokenValor
page padding x16–24px
section y40–56px
card padding16–24px
gap grid12–16px
radius.card16–20px (rounded-2xl)
radius.pill9999px (rounded-full)
header height~72px

5. Componentes

5.1 Botones

VarianteEstiloUso
Primary darkbg ink, text lime, pillNav “Apuntarme”
Primary limebg lime, text ink, pillHero CTA principal
Secondaryborder border, bg surface, pill“Ver clases”
Ghost/texttext muted, hover inkEnlaces nav, salir

Estados: default · hover (strong) · disabled (opacidad) · focus visible ring.

5.2 Badges de estado

StatusLabelEstilo sugerido
NEWNuevalime soft / ink
CONTACTEDContactadaprimary soft / muted
CONFIRMEDConfirmadalime o soft positivo
CANCELLEDCanceladamuted / borde dashed opcional

Regla a11y: no codificar solo con color; siempre texto del label.

5.3 Badges de ClassType

TipoLabelNotas
HIITHIITtracking bold
YOGAYoga
BASKETBasket
KIDSKids
OPENCancha abierta

5.4 Cards de solicitud (inbox)

Estructura:

  1. Meta: code · classType (xs bold, muted o lime)
  2. Nombre completo (lg semibold)
  3. Día preferido · franja
  4. Email / teléfono
  5. Badge status (trailing)

5.5 Stats summary

MétricaFuente
Totalstats.total
Abiertasstats.open (NEW+CONTACTED)
Por estadostats.byStatus.*

Layout: grid 2–4 cards compactas sobre la lista.

5.6 Form fields

ElementoSpec
LabelWork Sans 12–14/600
Inputborder border, rounded-xl, bg surface, focus ring ink/lime
Select ClassTypemismos tokens
Errortext danger, bajo el campo
Submitfull-width en móvil, pill

5.7 Header

ZonaContenido
PúblicaLogo · nav · CTA Apuntarme
CoachLogo · badge COACH · nombre · Salir

6. Layout patterns

PatternUso
Marketing splitHome: copy + hero image 2 col
Dark bandSección clases sobre ink
App shell simpleInbox full-width max-w-6xl
Detail stackMeta → contacto → preferencias → acciones

7. Iconografía

L1: preferir tipografía y badges; iconos mínimos si se usan (stroke 1.5–2, ink). No librería obligatoria.

8. Motion

InteracciónSpec
Hover CTAcolor strong, 150ms
Page transitionsrouter default (sin lib motion)
Feedback submitdisabled + label “Enviando…” opcional

9. Do / Don’t

DoDon’t
Lime como acentoFondos enteros lime sin contraste
Syne solo displaySyne en párrafos largos
Datos seed reales en mockupsLorem ipsum
Empty/error con copyPantallas en blanco