08 — Design system — SURCO
1. Fundamentos
| Capa | Valor |
|---|---|
| Nombre DS | SURCO UI (L2 vertical slice) |
| Principio | Claridad operativa + calidez de finca |
| Plataformas | Web responsive 360–1280+ |
| Implementación | Tailwind tokens + componentes de página (no lib publicada) |
2. Color tokens
Marca (fuente de verdad del caso)
| Token | Hex | Uso |
|---|---|---|
color.bg.bone | #F4F0E6 | Background app/marketing |
color.surface | #FFFFFF | Cards, header app |
color.leaf | #3D5C3A | Primary |
color.leaf.strong | #2A4A32 | Hover primary |
color.leaf.deep | #1B3A2A | Footer, ink brand |
color.straw | #C4A35A | Eyebrow, acentos |
color.border | #D9D2C4 | Bordes |
color.ink | #1B3A2A / near-black UI | Texto |
color.ink.muted | #6B655C | Secundario |
color.danger | #B91C1C (aprox red-700) | Errores |
color.primary.soft | tinte leaf claro | Badges, chips |
Mapeo Tailwind app
| Clase | Valor implementado |
|---|---|
bg-bg | #F3F0E8 |
bg-surface | #FFFFFF |
text-ink / ink-muted | #1A1814 / #6B655C |
primary / primary-soft / primary-strong | #3A5A40 / #E2E8E1 / #2A4230 |
straw | #C4A574 |
border-border | #E0D9CC |
3. Tipografía
| Token | Familia | Fallback |
|---|---|---|
font.display | Literata | Georgia, serif |
font.sans | Manrope | system-ui, sans-serif |
| Estilo | Spec |
|---|---|
| Display xl | Literata 36–48/600, leading tight |
| Title | Literata 28–32/600 |
| Body | Manrope 16/400–500, leading relaxed |
| Label | Manrope 11–12/700 uppercase o tracking wide |
| Button | Manrope 14/600 |
4. Espaciado y radio
| Token | Valor |
|---|---|
| page padding x | 16–24px |
| section y | 40–56px |
| card padding | 16–24px |
| gap grid | 12–16px |
| radius.card | 16–20px (rounded-2xl) |
| radius.pill | 9999px (rounded-full) |
| header height | 64–72px |
5. Componentes
5.1 Botones
| Variante | Estilo | Uso |
|---|---|---|
| Primary | bg primary, text white, pill | CTA principal, submit, + Tarea |
| Secondary | border border, bg surface, pill | “Soy técnico”, secundarios |
| Ghost/text | text muted, hover ink | Entrar, Salir |
Estados: default · hover (strong) · disabled (opacidad) · focus visible ring.
5.2 Badges de estado
| Status | Label | Estilo sugerido |
|---|---|---|
| PENDING | Pendiente | soft primary / muted |
| ACTIVE | Activa | soft + acento straw en meta |
| DONE | Hecha | soft primary |
| CANCELLED | Cancelada | muted / borde dashed opcional |
Regla a11y: no codificar solo con color; siempre texto del label.
5.3 Cards de tarea
Estructura:
- Meta:
code · parcel.name(straw, xs bold) - Título (lg semibold)
- Cultivo · hectáreas
- Vence + nombre contraparte
- Badge status (trailing)
Interacción: bloque entero es enlace a detalle; hover border primary/40.
5.4 Stats tiles
Grid 2×2 mobile / 4 col desktop: TOTAL, ABIERTAS, ACTIVAS, HECHAS.
Número en Literata 2xl; label 11px bold muted.
5.5 Forms
| Elemento | Spec |
|---|---|
| Label | sm semibold |
| Input | border, radius xl/2xl, padding cómodo touch |
| Error | text red-700 bajo campo o banner |
| Submit | primary full o auto |
Campos new task: title, parcelName, crop, dueAt, notes, technicianEmail.
5.6 Header app
Logo display · badge rol · nombre · (+ Tarea) · Salir.
5.7 Empty state
Borde dashed, texto centrado, CTA “Crear la primera →” si FARMER.
5.8 Error inline
Párrafo o banner; mensaje accionable (“No se pudieron cargar las tareas.”).
6. Iconografía
v1 sin set de iconos denso. Preferir:
- Texto y tipografía
- Badges
- Emojis no usados en UI profesional
Si se añaden iconos: stroke 1.5–2, color ink/primary, 20–24px.
7. Elevación
| Nivel | Uso |
|---|---|
| 0 | Fondo bone |
| 1 | Card con border |
| 2 | Hero image shadow-lg |
8. Breakpoints (orientativos Tailwind)
| Nombre | Ancho | Comportamiento |
|---|---|---|
| default | <640 | stack, stats 2 col |
| sm | ≥640 | padding mayor |
| md | ≥768 | home 2 col; stats 4 col |
Touch targets: ≥44px en CTAs móviles (doc 10).
9. Do / Don’t
| Do | Don’t |
|---|---|
| Usar straw solo en meta/eyebrows | Usar straw como fondo masivo de página |
| Mantener pills en CTAs | Botones square material genéricos |
| Literata en títulos de sección | Literata en body largo de form |
| Estados con label textual | Solo verde/rojo sin texto |
| Microcopy de finca | Jerga “sprint”, “ticket backlog” |
10. Criterios de aceptación DS
- Tokens documentados y reflejados en Tailwind.
- Primary contrast aceptable sobre blanco (leaf oscuro).
- Empty y error reutilizan patrones de card/borde.
- Paper B-0 y UI Angular no divergen en familia tipográfica ni clima de color.
