Canonical visual language for the Santos employee app, Club Santos customer portal, and all Grupo Santos digital touchpoints. Built from the Farmacia Santos brand guidelines 2026.
v1.0 · June 2026Employee AppClub Santos PortalHonduras
Colors foundation
Brand Primaries
Verde Santos anchors every screen at 60% visual weight. Naranja Santos activates key moments — canjes, loyalty upgrades, secondary CTAs — at 15%.
Verde Santos
#0E4D43
Primary · 60% weight
Verde Oscuro
#08362F
Primary Dark · headers
Verde Suave
#4A7C72
Secondary / Info
Verde Light
#C9DFDB
Tinted surface
Verde Surface
#EBF4F2
Subtle tinted bg
Naranja Santos
#E8743A
Accent · 15% weight
Naranja Dark
#C45E2A
Accent pressed
Naranja Light
#FAE3D4
Accent surface
Terracota
#B8392F
Colonial accent
Terracota Light
#F5D5D2
Terracota surface
Surfaces — Crema Palette
Warm colonial-inspired backgrounds. Never use pure white or cool grays — always pull from the crema palette.
Crema
#F5EAD7
App background
Crema Cálida
#F7EDDB
Hero / banner bg
Surface Warm
#FAF5EC
Card variant
Surface
#FFFFFF
Card / modal bg
Border
#E5D9CA
Default dividers
Border Strong
#C8B99E
Emphasis dividers
Semantic
Danger
#DC2626
Stockouts, crítico
Danger Light
#FEE2E2
Warning
#D97706
Near-expiry, moderado
Warning Light
#FEF3C7
Success
#059669
Canjes, synced
Success Light
#D1FAE5
Club Santos Tiers
Five loyalty tiers. Each has a background, text, and border color triplet — used in badges, progress bars, and profile headers. Note: product brief uses Jade for the top tier; Colors.ts has Platino — both are defined below.
Bronce
#FEF3C7 · #92400E · #F59E0B
Plata
#F1F5F9 · #475569 · #94A3B8
Oro
#FFFBEB · #78350F · #E8743A
Jade
#ECFDF5 · #065F46 · #10B981
Platino
#EDE9FE · #5B21B6 · #8B5CF6
Typography foundation
Single typeface system: DM Sans — humanist, warm, highly legible at pharmacy-counter distances. DM Mono for SKUs, hex codes, and numeric data.
Display36 / 800 letter: −0.5px
Farmacia Santos
H128 / 800
Club Santos Loyalty
H222 / 800
Resumen del Turno
H318 / 700
María García Reyes
Body14 / 400 line: 1.6
Farmacia Santos blends the warmth of a neighborhood pharmacy with the efficiency of a high-tech health center — offering prescription refills, personal care items, and clinical monitoring.
Always appear in 2-column grids on mobile. Three anatomy parts: label, value, trend.
Ventas hoy
L. 47,850
↑ +12.1% vs ayer
Ticket promedio
L. 395
↑ +3.7% vs ayer
Captura cliente
68%
de ventas del día
Meta: ≥ 40%
Stockouts críticos
2
SKUs vitales
↓ Por debajo del mínimo
Notification Cards component
Left border color encodes priority. Unread cards carry a stronger shadow.
!
Stock crítico — Ibuprofeno 400mg Crítico
Farmacia El Jordán: 2 cajas restantes. Por debajo del mínimo (5 cajas).
Ayer, 10:15 PM
AI
Pedido propuesto — Fcia. Santos Moderado
4 SKUs · L. 5,610 total · Confianza 87% Acetaminofén, Loratadina, Suero oral, Ibuprofeno
Hoy, 5:08 AM
Rx
Canje disponible — María García Info
Alcanzó 2 compras de Diagliptin 5mg x30 (Lafage 2+1). Tiene derecho a 1 caja gratis.
Ayer, 3:14 PM
Alert Banners component
Inline banners inside scroll content — always tappable to drill into detail.
!
2 SKUs en stock crítico
Ibuprofeno 400mg, Metformina 850mg
›
AI
2 pedidos esperan aprobación
Generados esta mañana · Confianza 87%
›
≡
Europharma: 3 envíos pendientes de sync
Último sync: Ayer 11:45 PM
›
✓
Corte de caja cuadrado
Hoy, 8:00 PM · Responsable: Luis Santos
Customer Card component
MG
María García Reyes
+504 9876-5432
Fcia. Santos — Copán Ruinas
Oro◷ Refill próx.
L. 23,450
Gasto anual
2,345
Puntos
47
Compras
Tier Progress
Gasto anual acumuladoL. 23,450
Faltan L. 16,550 para Jade
Form Inputs component
App Shell Pattern pattern
Verde Santos header bleeds to the top safe area. Scroll content sits on Crema with a 20px top-radius cutout. This is the universal chrome for every tab screen.
Sos
Farmacia
Buenas tardes, Luis
Farmacia Santos · Copán Ruinas
LS
VENTAS DE HOY
Ventas hoy
L. 47,850
↑ +12.1%
Ticket prom.
L. 395
↑ +3.7%
Wordmark anatomy
Sos
Farmacia
The circled o in Naranja Santos anchors the wordmark. Used in app headers, splash screens, and any context where the full logotype appears on Verde Santos.
Section Labels pattern
All-caps, 11px, 700 weight, 1px letter-spacing, var(--text-3) color. Used to introduce every KPI group, action group, or compliance block.
VENTAS DE HOY
PROGRAMA LOYALTY
CUMPLIMIENTO ARSA
ACCIONES RÁPIDAS
Quick Actions Grid pattern
4-up horizontal row. Border color is the action's color at 25% opacity. Never use filled backgrounds — keep white surface with accent border.
◉Aprobar pedidos
★Buscar cliente
▢Ver inventario
RxCanjes
Claude AI Badge pattern
Every AI-generated action (order proposals, restocking suggestions) carries the Claude badge. The pulsing green dot signals the agent is live. Used in the dashboard status strip and on AI-sourced notification cards.
Claude AI
Agente de pedidos activo · Próxima ejecución: mañana 5:00 AM
Claude AI
Inline badge — use on notification cards and order proposal headers
Offline Banner
Sin conexión — Los datos se sincronizarán cuando vuelvas a estar en línea