Sistema de diseño

Olive3 Design System

Dos superficies. Un ADN. Warm y editorial en el storefront. Preciso y oscuro en el Ops Hub.

Memorable
Software serio para fundadores mexicanos serios.
Layer A — Storefront
Editorial · Cálido · Newsreader + cream
Layer B — Ops Hub
Preciso · Midnight · IA de primera clase
Paleta

Color system

La familia plum recorre ambas superficies. La misma marca, dos registros emocionales.

Layer A — Storefront

Kalamata Plum
#6A2C45
Primary brand color
Olive Green
#5C7A33
Secondary · Success
Lime Pop
#9BA648
Accent · Focus rings
Mauve Tint
#9E6076
Supporting fills · Tags
Warm Cream
#F3EEE3
App background · Surface
Near-Black Plum
#2D1B22
Body text · Ink
Text Muted
#7A5A66
Secondary labels
Text Dim
#B09AA6
Placeholders · Captions

Layer B — Ops Hub Midnight

Midnight Base
#130C10
App background
Surface 1
#1E1118
Cards · Panels
Surface 2 (ink)
#2D1B22
Elevated panels · Sidebar
Surface 3
#3A2430
Hover states · Modals
Lime Accent
#9BA648
Interactive · Focus · CTA
AI Signal (mauve)
#9E6076
AI bubble border · Badge
Ops Success
#5C7A33
Confirmed · On track
Ops Danger
#C44A4A
Urgent · Error
Tipografía

Typography system

Voz serif sobre una UI grotesk. Display = Newsreader · UI = Space Grotesk · Datos = IBM Plex Mono

Newsreader — Display & Hero
Hecho en
México.
Queso Manchego Madurado 8 meses
Desde la Quesería del Valle, Tlaxcala.
Cuándo usar Hero headlines en storefront, títulos de página, números grandes en dashboards, sección brand story, nombres de producto en PDP
Space Grotesk — UI & Body
Agregar al carrito · Proceder al pago · Ver pedido · Confirmar · Empacado · Enviado · Entregado — La G, R y a de Space Grotesk tienen carácter propio. No lo suprimas.
14px / Tabla de órdenes · Filtros · Labels · Nav items · Tooltips
12px Label · ESTADO · MARCA · SKU · FILTRO
Cuándo usar Todo el copy de interfaz: botones, labels, cuerpo, nav, tablas, formularios — ambas superficies.
IBM Plex Mono — Datos Fiscales & Códigos
UUID:  89ab-c2d3-4ef5-6789-0abc
RFC:   TOFM900101ABC  |  CP: 06700
SKU:  QM-MAD-250G-L042  |  Lote: L-260615-003
Total: $1,250 MXN  |  IVA 16%: $172.41 MXN
Guía: MX123456789 · Enviado: 15 de junio de 2026
Cuándo usar CFDIs · UUIDs · SKUs · lotes · números de guía · RFCs · CPs · precios en celdas de tablas · hex values en herramienta de diseño
Componentes

Component library

Los mismos tokens, dos registros. Botones del storefront: pill radius, plum-primary. Ops hub: rectangle con lime accent.

Botones — Storefront (Layer A)
Botones — Ops Hub (Layer B)
Status badges
Confirmado Pendiente Urgente En tránsito Borrador
Confirmado Requires review Stock conflict En tránsito
Status pipeline — Ciclo de órdenes
Pendiente
›
Confirmado
›
Procesando
›
Empacado
›
Enviado
›
Entregado
Alerts & NOM-051 seals
✓Pedido confirmado. El lote L-260615-003 está asignado y la producción comienza hoy a las 6am.
⚠Requiere revisión. El pago de este pedido está en estado requires_review. La CFDI no se generará hasta que el manager lo apruebe.
✕Stock insuficiente. Solo quedan 3 unidades de QM-MAD-250G. El pedido necesita 5. Notifica a producción.
NOM-051 warning seals
EXCESO CALORÍAS
EXCESO AZÚCARES
EXCESO GRASAS SAT.
EXCESO SODIO
← Solo mostrar los que aplican. Nunca octágonos vacíos o grises.
Layer A — Storefront

Storefront mockup

Homepage hero + producto + PDP. Newsreader a 80px+ sobre fotografía full-bleed. Cream como tejido conectivo.

Olive
Quesería del Valle — Tlaxcala, México

Madurado
con tiempo.

Quesos artesanales elaborados con leche de vacas Holstein del Valle de Tlaxcala. Sin conservadores. Sin apuros.

Explorar productos →
fotografía de producto
Quesería del Valle
Manchego Madurado
250g · 8 meses de maduración
EXCESO SODIO
$189 MXN
$162/entrega con suscripción
fotografía de producto
Quesería del Valle
Queso de Cabra Fresco
200g · Elaborado sin cuajo animal
$145 MXN
$124/entrega con suscripción
fotografía de producto
Quesería del Valle
Oaxaca Hebra Natural
300g · Leche pasteurizada
EXCESO GRASAS SAT.
$169 MXN
$144/entrega con suscripción
fotografía de producto
Quesería del Valle
Box de Temporada
Selección de 4 quesos · 1kg total
$590 MXN
$503/entrega con suscripción
Galería: 1 imagen principal + 4 thumbnails
Quesería del Valle
Manchego Madurado
8 meses
$189 MXN
$162 MXN / entrega con suscripción mensual
Leche (Lácteos) Sin Gluten
EXCESO SODIO
Vida útil: 45 días Refrigerar 2–6°C
Layer B — Ops Hub

Operations Hub mockup

Manager Dashboard con columna de IA de primera clase. Superficies Midnight plum-black, accent lime, señal IA mauve.

Quesería del Valle ▾
3 aprobaciones pendientes
FT
Principal
⬡ Dashboard
✦ IA Operator
◈ Órdenes 7
Workstations
⌗ Producción
⊡ Empaque
◎ Logística
⊞ Finanzas
◷ Servicio al Cliente
Gestión
⊟ Productos
◈ Inventario
◐ Clientes CRM
◉ 🏷 Marca
Dashboard del Manager
Miércoles 2 de julio de 2026 · 09:14am
Ventas hoy
$14,280
↑ +18% vs. ayer
Órdenes activas
23
7 pendientes · 2 urgentes
Suscriptores activos
147
↑ +3 esta semana
Aprobaciones pendientes 3
Reembolso
Orden #4521 — Ana López
Queso Manchego Madurado × 2 · Pedido incorrecto
$378 MXN
CFDI — Stripe requires_review
Orden #4498 — Ricardo Mendoza
En revisión de fraude · CFDI bloqueada hasta aprobar
$890 MXN
Órdenes recientes
#CanalClienteItemsTotalEstadoPago
#4523 DTC Carla Vega 3 $567 MXN Confirmado Tarjeta
#4522 Suscripción Miguel Torres 4 $648 MXN Procesando Tarjeta
#4521 POS Ana López 2 $378 MXN Stock conflict Efectivo
#4519 Mayoreo Restaurante El Jaral 12 $3,240 MXN Empacado SPEI
IA Operator
En línea
Buenos días. Hoy tienes 3 aprobaciones pendientes y 2 órdenes urgentes. La orden #4521 tiene un conflicto de inventario en el POS — te recomiendo revisarla primero.
09:01am
¿Cuánto stock queda de Manchego Madurado?
09:08am
Quedan 18 unidades de 250g en el almacén principal (Lote L-260615-003). El pedido de El Jaral necesita 12, así que te quedarán 6 para órdenes adicionales de hoy.
¿Iniciar producción adicional?
Lote de 30 unidades · Lista para las 3pm · Requiere 4.5kg harina + ingredientes del proveedor
09:09am
Tokens

CSS token reference

Fuentes de verdad para ambas capas. No valores en código — siempre variables CSS.

Spacing scale (4px base)

TokenValueUsage
--space-14pxGaps mínimos
--space-28pxIcon spacing
--space-416pxDefault padding
--space-624pxCard padding
--space-832pxSection gaps
--space-1248pxTable rows
--space-1664pxSection padding
--space-2496pxHero padding

Border radius

TokenStorefrontOps Hub
--radius-sm8px4px
--radius-md12px6px
--radius-lg20px8px
--radius-xl26px10px
--radius-full9999px9999px (pills)

Motion

ContextDurationEasing
Micro (press)150msease-out
Hover reveals200msease-out
Panel slide-in250–300msease-out
Toast4s auto-dismissslide up