The Brands ClubGALA
  • Inicio
  • Bandeja

GGestión

  • Brief
  • Plan

AAtelier

  • Atelier
  • Tag

LLogística

  • Tour
  • Floor
  • Fix
  • Cierre
  • Importar FOCO

AActivación

  • Runway

Catálogo

  • Locales
  • Mundos
  • Marcas
  • Partners
  • Scorecard proveedores
  • Fábricas
  • Locales
  • Estilos
  • Items
  • Materiales
  • Categorías
  • Jerarquía
  • Calendario

Sistema

  • Feedback del equipo
  • Docs
  • Design preview

The Brands Club

Cada temporada, una gala.

The Brands ClubGALA
SAP desconectadoSAP desconectado (dry-run): nada sale de esta base local. Ninguna acción toca SAP.Sync bloqueadoFase de testeo: ninguna sociedad puede sincronizar OCs a SAP. Se habilita por SAP_SYNC_ALLOWED_TENANTS.
The Brands ClubGALA
  • Inicio
  • Bandeja

GGestión

  • Brief
  • Plan

AAtelier

  • Atelier
  • Tag

LLogística

  • Tour
  • Floor
  • Fix
  • Cierre
  • Importar FOCO

AActivación

  • Runway

Catálogo

  • Locales
  • Mundos
  • Marcas
  • Partners
  • Scorecard proveedores
  • Fábricas
  • Locales
  • Estilos
  • Items
  • Materiales
  • Categorías
  • Jerarquía
  • Calendario

Sistema

  • Feedback del equipo
  • Docs
  • Design preview

The Brands Club

Cada temporada, una gala.

The Brands ClubGALA
  1. Inicio
  2. Design preview
SAP desconectadoSAP desconectado (dry-run): nada sale de esta base local. Ninguna acción toca SAP.Sync bloqueadoFase de testeo: ninguna sociedad puede sincronizar OCs a SAP. Se habilita por SAP_SYNC_ALLOWED_TENANTS.

GALA · Design preview

El atelier visual de GALA

Acá vive el sistema de diseño que viste prendas en TBC: componentes, colores, tipografía, microinteracciones. No es producción — es donde se prueba cada pieza antes de la pasarela.

Componentes
8piezas reusables
Patrones
12research de producto
Páginas
11build limpio
Bloque
GALAbranding live

Hero · 4 tones

Sociedad activa · Chile 🇨🇱

Tono emerald

Default para dashboard y flujos primarios.

Total
142
En SAP
98

MODO SOLO-LECTURA

Tono amber

Para operaciones reversibles, repair flows, dry-runs.

Catálogo · Hong Kong 🇭🇰

Tono sky

Para catálogos, referencias, datos inmutables.

Configuración

Tono slate

Para administración, ajustes, secciones técnicas.

CP

ItemThumbnail · gradient determinístico por SKU

Hash del itemCode → hue HSL único. Emoji por categoría detectada del nombre.

👕

Polera básica algodón premium

HK-POLERA-001

👖

Jean slim fit denim azul

HK-JEAN-012

👟

Sneaker urbana cuero white

HK-SNEAK-205

👜

Mochila día 25L poliéster

HK-MOCH-007

🧢

Gorra trucker mesh logo bordado

HK-CAP-019

🧸

Figura Funko Pop coleccionable

HK-TOY-330

📦

Set sábanas king 600 hilos

HK-HOGAR-044

📦

Vitamina C suplemento 500mg

HK-FARM-088

BPAvatar · iniciales + rol + país

Limpia sufijos legales (S.A./Ltda/Inc), color sky=cliente, amber=proveedor.

FR
🇨🇱

Falabella Retail S.A.

C_CL_001 · customer

PC
🇨🇱

Paris Comercial

C_CL_002 · customer

SA
🇨🇱

Shenzhen Apparel Co.

S_CN_011 · supplier

WC
🇨🇱

Walmart Chile

C_CL_004 · customer

GT
🇨🇱

Guangzhou Toys Ltd

S_CN_022 · supplier

Tamaños:
LL
LL
LL

ActivityFeed · who/what/when

Actividad reciente

  1. OC OC-2026-0142 sincronizada a SAP

    hace 5 min·N° en SAP 8901

  2. OC OC-2026-0141 creada

    hace 23 min·import

  3. OC OC-2026-0139 rebotó al sincronizar

    hace 2 h·TN002 — FALTA INDICAR CANAL

  4. OC OC-2026-0138 guardada como borrador

    hace 5 h·domestic

EmptyState · 5 ilustraciones

Sin órdenes

Descripción contextual del estado vacío.

Sin productos

Descripción contextual del estado vacío.

Sin catálogo

Descripción contextual del estado vacío.

Sin items a reparar

Descripción contextual del estado vacío.

CP

Sin partners

Descripción contextual del estado vacío.

Skeleton loaders

SkeletonStatsHero

SkeletonTable

SkeletonGrid

Skeleton primitive

Microinteracciones

Card emerald

Hover: lift -2px + shadow ring tono. Transition cubic-bezier 200ms.

Card amber

Hover: lift -2px + shadow ring tono. Transition cubic-bezier 200ms.

Card sky

Hover: lift -2px + shadow ring tono. Transition cubic-bezier 200ms.

Selection + scrollbar

Selecciona este texto para ver el highlight emerald. La scrollbar es más fina y casi transparente — se resalta solo cuando es necesaria.

Línea de demo 1 — para que se vea la scrollbar fina.

Línea de demo 2 — para que se vea la scrollbar fina.

Línea de demo 3 — para que se vea la scrollbar fina.

Línea de demo 4 — para que se vea la scrollbar fina.

Línea de demo 5 — para que se vea la scrollbar fina.

Línea de demo 6 — para que se vea la scrollbar fina.

Línea de demo 7 — para que se vea la scrollbar fina.

Línea de demo 8 — para que se vea la scrollbar fina.

Línea de demo 9 — para que se vea la scrollbar fina.

Línea de demo 10 — para que se vea la scrollbar fina.

Línea de demo 11 — para que se vea la scrollbar fina.

Línea de demo 12 — para que se vea la scrollbar fina.

Línea de demo 13 — para que se vea la scrollbar fina.

Línea de demo 14 — para que se vea la scrollbar fina.

Línea de demo 15 — para que se vea la scrollbar fina.

Línea de demo 16 — para que se vea la scrollbar fina.

Línea de demo 17 — para que se vea la scrollbar fina.

Línea de demo 18 — para que se vea la scrollbar fina.

Línea de demo 19 — para que se vea la scrollbar fina.

Línea de demo 20 — para que se vea la scrollbar fina.

Línea de demo 21 — para que se vea la scrollbar fina.

Línea de demo 22 — para que se vea la scrollbar fina.

Línea de demo 23 — para que se vea la scrollbar fina.

Línea de demo 24 — para que se vea la scrollbar fina.

Línea de demo 25 — para que se vea la scrollbar fina.

Línea de demo 26 — para que se vea la scrollbar fina.

Línea de demo 27 — para que se vea la scrollbar fina.

Línea de demo 28 — para que se vea la scrollbar fina.

Línea de demo 29 — para que se vea la scrollbar fina.

Línea de demo 30 — para que se vea la scrollbar fina.