Design System Preview

Playground visual de todos los tokens y componentes del Design System de SocioCompras Motor 2. Cada elemento aquí corresponde a una sección en DESIGN.md.

1. Colors

Brand + neutral + semantic tokens.

Brand

brand
#AED440
brand-dark
#7BC22E
brand-light
#D1E886
accent
#FFD034
accent-dark
#E5B61F

Dark neutrals

dark
#13140F
dark-light
#1E1F18
surface
#1b1c17

Light grays

gray-50
#F9FAFB
gray-100
#F3F4F6
gray-300
#D1D5DB
gray-500
#6B7280
gray-700
#374151
gray-900
#111827

Semantic

success
#10B981
warning
#F59E0B
error
#EF4444
info
#1a91ff

Anillos (Marketplace-specific)

🟢
anillo-1
Activa
🟡
anillo-2
Activando
🟣
anillo-3
VIP

2. Typography

Calistoga (display) + Inter (body)

Type scale

xs · 12pxThe quick brown fox · El veloz zorro
sm · 14pxThe quick brown fox · El veloz zorro
base · 16pxThe quick brown fox · El veloz zorro
lg · 18pxThe quick brown fox · El veloz zorro
xl · 20pxThe quick brown fox
2xl · 24pxThe quick brown fox
3xl · 30pxDistribuidor FyV
4xl · 36pxDistribuidor FyV
5xl · 48pxSocioCompras
6xl · 60pxSocioCompras

3. Spacing scale (4px-grid)

Padding / margin tokens consistentes.

space-14px
space-28px
space-312px
space-416px
space-624px
space-832px
space-1248px
space-1664px
space-2080px
space-2496px

4. Border radius

sm 8px md 12px lg 16px xl 24px full

5. Shadows

shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-brand (signature)

6. Buttons

Variants × Sizes × States

Primary (light bg)

Accent (Fundador / urgencia)

Secondary (sobre dark bg)

Ghost / Tertiary

WhatsApp

7. Cards

Hover sobre cualquier card para ver el efecto "card-hover signature".

Default + Floating + Accent + Brand

💰

Card default

bg-gray-50 con border sutil. La opción más usada para secciones sobre bg-white.

🥬

Card floating

bg-white con shadow sutil. Ideal sobre secciones gray-50 para crear ilusión de "flotación".

⭐

Card accent (Fundador)

Highlighted con borde dorado. Para destacar el programa Fundador o ofertas especiales.

✓

Card brand (recomendado)

Highlighted con borde lima. Para marcar la opción recomendada en una comparativa.

Card dark (sobre hero)

🤝

¿Cómo funciona?

Para usar sobre backgrounds dark como hero gradient o footer.

🚚

Despacho local

Entrega al día siguiente en ventana 10:00–16:00 según tu disponibilidad.

8. Badges / Pills

Variants

🟢 Activa ⭐ Fundador 5 cupos · esta semana Disponible SocioCompras

Pattern Anillo (largo)

🟢 Activa · Anillo 1 · Despacho local operativo

9. Forms

Ingresá un número de teléfono válido

10. Hero pattern (gradient-hero)

El signature visual del sitio: dark gradient + radial brand glow.

🟢 Activa · Anillo 1 · Despacho local operativo

Distribuidora de Frutas
y Verduras en Recoleta

Los restaurantes de Recoleta compran frutas, verduras e insumos al por mayor directo del agricultor. Sin intermediarios, entrega al día siguiente entre 10:00 y 16:00.

11. Patterns

11.1 Comparison (antes / después)

Antes
$2.400/kg

Proveedor individual

Con SocioCompras
$1.580/kg

Compra grupal

11.2 Stat callout

22%

menos en costo de tomate

Restaurante El Huerto · Ñuñoa

11.3 Empty state

🛒

Tu carrito está vacío

Agregá productos de tu comuna para empezar.

12. Iconography (emoji-first)

SocioCompras usa emoji como iconografía primaria. Universalmente reconocibles, cero bytes extra, calidez visual.

🤝
comunidad
🥬
producto
🚚
despacho
🍽️
restaurante
💰
ahorro
🛒
carrito
🏠
nodo local
⭐
premium