Clubium

Spotmind Brands · Guía de estilos

Clubium

El club entero, en un solo lugar.

Explorar · v0 estado: active

MARCA

Marca

Misión, visión, valores, voz, tono, personalidad y arquetipos.

Misión

Sacar la gestión deportiva de las planillas y los grupos de WhatsApp: atletas, apoderados,

entrenadores, planes y pagos en un solo panel, con las mensualidades cobrándose solas (PAC/PAT).

Visión

Sin contenido definido. pendiente

Valores

  • Cercano, no corporativo — habla claro, al grano, como un colega que te ordena el club.
  • Las cifras mandan — mensualidades, atletas y planes son el protagonista visual.
  • Un solo acento — el lima aparece poco y bien: dirige la atención a la acción.
  • Confiable — hablamos de dinero; nada de promesas ambiguas ni letra chica.

Propuesta de valor

  1. Cobro automático (PAC y PAT) — mensualidades, cobros extraordinarios y recordatorios con

Forpay y Transbank; las cuotas se cobran solas.

  1. Un solo panel, 4 roles — atletas, apoderados, entrenadores y administración, cada uno con su

vista.

  1. Fin de las planillas — niveles, destrezas, competencias, comprobantes y noticias en un lugar.
  2. Escala sin fricción — de una escuela a un multiclub con facturación consolidada.

Voz

  • ✅ "El club entero, en un solo lugar." · beneficio concreto del club, lenguaje de cancha, cifras

visibles, frases cortas.

  • ❌ Jerga corporativa, grises fríos, saturar de color, letra chica.

Tono

  • Cercano y directo — como un colega, no un manual.
  • Confiable — hablamos de plata (cobros, cuotas) con transparencia.

Personalidad

  • Ordenado, práctico y de cancha. El sistema se corre para que los números se lean.

Arquetipos

Sin contenido definido. pendiente

Segmento

Clubes y escuelas deportivas (de hasta 50 atletas hasta multiclub con varias sedes) que hoy

administran a mano cobros, inscripciones y comunicación.

Justificación de color

Superficie crema cálida en vez de blanco clínico, tinta casi negra para el texto y **un único color

saturado** (lima) reservado para la acción. Los verdes bosque dan confianza y estructura; los

neutrales son cálidos (arena), nunca grises fríos.

  • forest.900 #0e3020 (--primary) — ancla de marca, superficies inversas, botón primario.
  • lime.500 #c8e928 (--accent) — único saturado: CTA, resaltados y píldoras. Con moderación.
  • sand.100 #f6f5e9 (--background) · sand.0 #fffefa (--card) — superficies crema.
  • sand.950 #171611 (--foreground) · sand.600 #5b5c51 (--muted-foreground) — texto.

El $value canónico de cada token está en HEX; el OKLCH original de globals.css queda en el

$description de cada primitivo (ver la sección Tokens).

Tipografía

Provisional. El sistema confirmado solo cerró color; la familia se define con el nuevo

logotipo. Mono para cifras y eyebrows, coherente con "las cifras mandando".

Componentes

ui/ es la única fuente de estilo; las vistas los usan y no los decoran. Auditoría 11-oct.

Existen (17): action-menu, button, checkbox, confirm-dialog, data-table, date-input, datepicker,

field, filter-chips, modal, page-header, pagination, select, states, summary-card, switch, toast.

Faltan (paso 10.1): badge, avatar, breadcrumb.

Deuda técnica medida 11-oct:

  • 22 píldoras de estado a mano en 10 archivos → migrar a badge.
  • <input> a mano en 21 archivos; ui/field solo en 11.
  • ≈68 rótulos en Title Case ("Guardar Cambios" ×7) → sentence case.
  • 57 cajas bg-card rounded-lg border → usar card.
  • 70 botones primarios en "Cobro de cuotas" → usar button.
  • 0 loading.tsx; "Cargando" a mano ×33 → componente states.

Do / Don't

  • ✅ Variables semánticas; los componentes de ui/ como única fuente de estilo.
  • ✅ Crema para superficies, tinta para texto, verde bosque para estructura, lima solo para la acción.
  • ❌ Hex literales en UI, grises fríos, lima en grandes superficies, píldoras/inputs/cajas a mano.

Estado y versión

  • Fase: Explorar
  • Marca: v0 · identidad Dirección B (Cercano) · tokens de color confirmados desde globals.css.
  • Herencia: independiente (extends: null).
  • Pendiente: nuevo logotipo (en análisis) y confirmación de tipografía/radio.

COLOR

Color

Muestras por rol. Cada una se copia como SVG (tarjeta completa), como variable CSS o como hex.

Semánticos

border

border.default #d0cec1 --sm-semantic-color-border-default
border.focus #0e3020 --sm-semantic-color-border-focus
border.input #e4e3d5 --sm-semantic-color-border-input

brand

brand.accent #c8e928 --sm-semantic-color-brand-accent
brand.primary #0e3020 --sm-semantic-color-brand-primary
brand.secondary #3b382d --sm-semantic-color-brand-secondary

effect

effect.scrim #101f1380 --sm-semantic-color-effect-scrim

status

status.destructive #c21725 --sm-semantic-color-status-destructive
status.destructive-foreground #fcfcf7 --sm-semantic-color-status-destructive-foreground
status.info #1762b6 --sm-semantic-color-status-info
status.info-foreground #fcfcf7 --sm-semantic-color-status-info-foreground
status.success #0b703f --sm-semantic-color-status-success
status.success-foreground #fcfcf7 --sm-semantic-color-status-success-foreground
status.warning #dd8736 --sm-semantic-color-status-warning
status.warning-foreground #171611 --sm-semantic-color-status-warning-foreground
status.warning-strong #945820 --sm-semantic-color-status-warning-strong

surface

surface.background #f6f5e9 --sm-semantic-color-surface-background
surface.card #fffefa --sm-semantic-color-surface-card
surface.inverse #0e3020 --sm-semantic-color-surface-inverse
surface.muted #ecebdc --sm-semantic-color-surface-muted
surface.popover #fffefa --sm-semantic-color-surface-popover

text

text.on-accent #171611 --sm-semantic-color-text-on-accent
text.on-brand #fcfcf7 --sm-semantic-color-text-on-brand
text.primary #171611 --sm-semantic-color-text-primary
text.secondary #5b5c51 --sm-semantic-color-text-secondary

Escalas · primitivos

amber --sm-primitive-color-amber-*

blue --sm-primitive-color-blue-*

forest --sm-primitive-color-forest-*

lime --sm-primitive-color-lime-*

red --sm-primitive-color-red-*

sand --sm-primitive-color-sand-*

TOKENS

Tokens

Relación completa: token JSON ↔ variable CSS ↔ valor ↔ spec de uso.

Token (JSON)Variable CSSValorTipoSpec · uso
component.badge.background --sm-component-badge-background #c8e928 color Píldora de acento (ej. 'EL MÁS ELEGIDO').
component.badge.radius --sm-component-badge-radius 999px dimension Capa 3 — tokens de componentes. Referencian semánticos.
component.badge.text --sm-component-badge-text #171611 color Capa 3 — tokens de componentes. Referencian semánticos.
component.button.accent.background --sm-component-button-accent-background #c8e928 color CTA destacado: lima + texto tinta. El botón más prominente (ej. 'Solicitar demo').
component.button.accent.text --sm-component-button-accent-text #171611 color Capa 3 — tokens de componentes. Referencian semánticos.
component.button.primary.background --sm-component-button-primary-background #0e3020 color Botón primario: verde bosque + texto crema (variante 'primary' de shadcn).
component.button.primary.text --sm-component-button-primary-text #fcfcf7 color Capa 3 — tokens de componentes. Referencian semánticos.
component.button.radius --sm-component-button-radius 10px dimension Capa 3 — tokens de componentes. Referencian semánticos.
component.card.background --sm-component-card-background #fffefa color Capa 3 — tokens de componentes. Referencian semánticos.
component.card.border --sm-component-card-border #d0cec1 color Capa 3 — tokens de componentes. Referencian semánticos.
component.card.padding --sm-component-card-padding 24px dimension Capa 3 — tokens de componentes. Referencian semánticos.
component.card.radius --sm-component-card-radius 10px dimension Capa 3 — tokens de componentes. Referencian semánticos.
component.input.background --sm-component-input-background #fffefa color Capa 3 — tokens de componentes. Referencian semánticos.
component.input.border --sm-component-input-border #e4e3d5 color Capa 3 — tokens de componentes. Referencian semánticos.
component.input.radius --sm-component-input-radius 10px dimension Capa 3 — tokens de componentes. Referencian semánticos.
component.input.text --sm-component-input-text #171611 color Capa 3 — tokens de componentes. Referencian semánticos.
primitive.color.amber.500 --sm-primitive-color-amber-500 #dd8736 color oklch(0.7 0.14 60) — warning.
primitive.color.amber.700 --sm-primitive-color-amber-700 #945820 color oklch(0.52 0.105 60) — warning-strong.
primitive.color.blue.600 --sm-primitive-color-blue-600 #1762b6 color oklch(0.5 0.15 255) — info.
primitive.color.forest.600 --sm-primitive-color-forest-600 #0b703f color oklch(0.48 0.115 155) — éxito / success.
primitive.color.forest.900 --sm-primitive-color-forest-900 #0e3020 color oklch(0.28 0.05 160) — primary, ancla de marca.
primitive.color.forest.950 --sm-primitive-color-forest-950 #101f13 color oklch(0.22 0.03 150) — base del scrim.
primitive.color.lime.500 --sm-primitive-color-lime-500 #c8e928 color oklch(0.88 0.2 120) — accent.
primitive.color.red.600 --sm-primitive-color-red-600 #c21725 color oklch(0.52 0.2 25) — destructive.
primitive.color.sand.0 --sm-primitive-color-sand-0 #fffefa color oklch(0.997 0.005 103) — card / popover.
primitive.color.sand.100 --sm-primitive-color-sand-100 #f6f5e9 color oklch(0.967 0.016 103) — background de la app.
primitive.color.sand.200 --sm-primitive-color-sand-200 #ecebdc color oklch(0.937 0.02 103) — muted.
primitive.color.sand.300 --sm-primitive-color-sand-300 #e4e3d5 color oklch(0.912 0.018 103) — input.
primitive.color.sand.400 --sm-primitive-color-sand-400 #d0cec1 color oklch(0.85 0.018 103) — border.
primitive.color.sand.50 --sm-primitive-color-sand-50 #fcfcf7 color oklch(0.99 0.006 103) — texto sobre fondos oscuros / *-foreground claro.
primitive.color.sand.600 --sm-primitive-color-sand-600 #5b5c51 color oklch(0.47 0.016 108) — muted-foreground / texto secundario.
primitive.color.sand.800 --sm-primitive-color-sand-800 #3b382d color oklch(0.34 0.018 90) — secondary.
primitive.color.sand.950 --sm-primitive-color-sand-950 #171611 color oklch(0.2 0.01 105) — foreground / tinta, texto principal.
primitive.font.family.body --sm-primitive-font-family-body Inter, system-ui, sans-serif fontFamily PROVISIONAL — ver display.
primitive.font.family.display --sm-primitive-font-family-display Inter, system-ui, sans-serif fontFamily PROVISIONAL — el sistema confirmado solo cubrió color. Pendiente de definir con el nuevo logotipo.
primitive.font.family.mono --sm-primitive-font-family-mono JetBrains Mono, ui-monospace, monospace fontFamily Mono para cifras y etiquetas (eyebrows). 'Las cifras mandando'.
primitive.font.weight.bold --sm-primitive-font-weight-bold 700 fontWeight Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.font.weight.extrabold --sm-primitive-font-weight-extrabold 800 fontWeight Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.font.weight.medium --sm-primitive-font-weight-medium 500 fontWeight Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.font.weight.regular --sm-primitive-font-weight-regular 400 fontWeight Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.font.weight.semibold --sm-primitive-font-weight-semibold 600 fontWeight Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.radius.full --sm-primitive-radius-full 999px dimension Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.radius.lg --sm-primitive-radius-lg 14px dimension Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.radius.md --sm-primitive-radius-md 10px dimension PROVISIONAL — equivalente a rounded-lg de las tarjetas (shadcn --radius). Ajustar al confirmar.
primitive.radius.none --sm-primitive-radius-none 0px dimension Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.radius.sm --sm-primitive-radius-sm 6px dimension Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.radius.xl --sm-primitive-radius-xl 20px dimension Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.space.0 --sm-primitive-space-0 0px dimension Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.space.1 --sm-primitive-space-1 4px dimension Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.space.10 --sm-primitive-space-10 40px dimension Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.space.12 --sm-primitive-space-12 48px dimension Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.space.2 --sm-primitive-space-2 8px dimension Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.space.3 --sm-primitive-space-3 12px dimension Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.space.4 --sm-primitive-space-4 16px dimension Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.space.5 --sm-primitive-space-5 20px dimension Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.space.6 --sm-primitive-space-6 24px dimension Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
primitive.space.8 --sm-primitive-space-8 32px dimension Capa 1 — Core. Valores crudos tomados de globals.css. Nunca directo en UI.
semantic.color.border.default --sm-semantic-color-border-default #d0cec1 color --border
semantic.color.border.focus --sm-semantic-color-border-focus #0e3020 color anillo de foco (usa el ancla de marca)
semantic.color.border.input --sm-semantic-color-border-input #e4e3d5 color --input
semantic.color.brand.accent --sm-semantic-color-brand-accent #c8e928 color --accent · único saturado, para CTA/resaltados
semantic.color.brand.primary --sm-semantic-color-brand-primary #0e3020 color --primary
semantic.color.brand.secondary --sm-semantic-color-brand-secondary #3b382d color --secondary
semantic.color.effect.scrim --sm-semantic-color-effect-scrim #101f1380 color --scrim · oklch(0.22 0.03 150 / 0.5), velo al 50% sobre modales/overlays
semantic.color.status.destructive --sm-semantic-color-status-destructive #c21725 color --destructive
semantic.color.status.destructive-foreground --sm-semantic-color-status-destructive-foreground #fcfcf7 color --destructive-foreground
semantic.color.status.info --sm-semantic-color-status-info #1762b6 color --info
semantic.color.status.info-foreground --sm-semantic-color-status-info-foreground #fcfcf7 color --info-foreground
semantic.color.status.success --sm-semantic-color-status-success #0b703f color --success
semantic.color.status.success-foreground --sm-semantic-color-status-success-foreground #fcfcf7 color --success-foreground
semantic.color.status.warning --sm-semantic-color-status-warning #dd8736 color --warning
semantic.color.status.warning-foreground --sm-semantic-color-status-warning-foreground #171611 color --warning-foreground
semantic.color.status.warning-strong --sm-semantic-color-status-warning-strong #945820 color --warning-strong
semantic.color.surface.background --sm-semantic-color-surface-background #f6f5e9 color --background
semantic.color.surface.card --sm-semantic-color-surface-card #fffefa color --card
semantic.color.surface.inverse --sm-semantic-color-surface-inverse #0e3020 color superficies oscuras (hero, botón primario)
semantic.color.surface.muted --sm-semantic-color-surface-muted #ecebdc color --muted
semantic.color.surface.popover --sm-semantic-color-surface-popover #fffefa color --popover
semantic.color.text.on-accent --sm-semantic-color-text-on-accent #171611 color --accent-foreground · texto sobre lima
semantic.color.text.on-brand --sm-semantic-color-text-on-brand #fcfcf7 color --primary-foreground · texto sobre primary/inverse
semantic.color.text.primary --sm-semantic-color-text-primary #171611 color --foreground
semantic.color.text.secondary --sm-semantic-color-text-secondary #5b5c51 color --muted-foreground
semantic.font.body --sm-semantic-font-body Inter, system-ui, sans-serif fontFamily Capa 2 — intención de uso. Nombres espejo de globals.css (shadcn) para trazabilidad 1:1. Usar SIEMPRE estos en vez de primitivos.
semantic.font.display --sm-semantic-font-display Inter, system-ui, sans-serif fontFamily Capa 2 — intención de uso. Nombres espejo de globals.css (shadcn) para trazabilidad 1:1. Usar SIEMPRE estos en vez de primitivos.
semantic.font.mono --sm-semantic-font-mono JetBrains Mono, ui-monospace, monospace fontFamily Capa 2 — intención de uso. Nombres espejo de globals.css (shadcn) para trazabilidad 1:1. Usar SIEMPRE estos en vez de primitivos.
semantic.radius.default --sm-semantic-radius-default 10px dimension Radio base de la marca: tarjetas, campos y botones (rounded-lg).

TIPOGRAFÍA

Tipografía

Aa Gg 0123 · El club entero
primitive.font.family.bodyInter, system-ui, sans-serif
Aa Gg 0123 · El club entero
primitive.font.family.displayInter, system-ui, sans-serif
Aa Gg 0123 · El club entero
primitive.font.family.monoJetBrains Mono, ui-monospace, monospace
Aa Gg 0123 · El club entero
semantic.font.bodyInter, system-ui, sans-serif
Aa Gg 0123 · El club entero
semantic.font.displayInter, system-ui, sans-serif
Aa Gg 0123 · El club entero
semantic.font.monoJetBrains Mono, ui-monospace, monospace

COMPONENTES

Componentes

Tokens de componente (capa 3). La referencia de uso vive en la sección Marca.

Componente · tokenValorSpec · uso
badge.background#c8e928Píldora de acento (ej. 'EL MÁS ELEGIDO').
badge.radius999pxCapa 3 — tokens de componentes. Referencian semánticos.
badge.text#171611Capa 3 — tokens de componentes. Referencian semánticos.
button.accent.background#c8e928CTA destacado: lima + texto tinta. El botón más prominente (ej. 'Solicitar demo').
button.accent.text#171611Capa 3 — tokens de componentes. Referencian semánticos.
button.primary.background#0e3020Botón primario: verde bosque + texto crema (variante 'primary' de shadcn).
button.primary.text#fcfcf7Capa 3 — tokens de componentes. Referencian semánticos.
button.radius10pxCapa 3 — tokens de componentes. Referencian semánticos.
card.background#fffefaCapa 3 — tokens de componentes. Referencian semánticos.
card.border#d0cec1Capa 3 — tokens de componentes. Referencian semánticos.
card.padding24pxCapa 3 — tokens de componentes. Referencian semánticos.
card.radius10pxCapa 3 — tokens de componentes. Referencian semánticos.
input.background#fffefaCapa 3 — tokens de componentes. Referencian semánticos.
input.border#e4e3d5Capa 3 — tokens de componentes. Referencian semánticos.
input.radius10pxCapa 3 — tokens de componentes. Referencian semánticos.
input.text#171611Capa 3 — tokens de componentes. Referencian semánticos.

LOGOTIPOS

Logotipos

Estructura de variantes de logo. Lo que falta queda marcado como pendiente.

Sin tagline

Sin variantes sin tagline. pendiente

Con tagline

Sin variantes con tagline. pendiente

Convención: clubium-<tipo>[-tagline]-<tema>.svg · tipos: landscape, stacked, wordmark, logomark, squaremark, roundmark, monogram · temas: Color, Light, Dark, Light gray, Dark gray.

DOCUMENTOS

Documentos

Brochure, tema de presentación y PDFs de venta/marketing.

Aún no hay documentos (brochure, tema de presentación, PDFs de venta/marketing). pendiente

DESCARGAS

Kit de marca

CHANGELOG

Changelog

Changelog de marca

Versión de marca en semver (v0 → v3). Cada cambio de tokens con impacto visual sube versión.

[v0] — inicial

  • Marca creada desde _template como sub-brand independiente (extends: null), visualmente

autónoma de Spotmind.

  • Tokens de color tomados tal cual del sistema visual confirmado (Dirección B · Cercano) en

clubium-client/src/app/globals.css (develop, 21-oct):

- Primitivos nuevos: forest (verde bosque: primary 900=#0e3020, success 600=#0b703f,

scrim 950=#101f13); lime (único saturado, accent 500=#c8e928); sand (neutrales cálidos

crema→tinta, 0..950); amber (warning), red (destructive), blue (info).

- $value canónico en HEX; OKLCH original de globals.css registrado en cada $description.

- Semántica con nombres espejo de shadcn (--primary, --background, --muted-foreground, …)

para trazabilidad 1:1.

  • Componentes (capa 3): button.primary (verde), button.accent (lima/CTA), card, input,

badge; semantic.radius.default = rounded-lg (10px, provisional).

  • Tipografía y radio marcados provisionales: el sistema confirmado solo cerró color.
  • Pendiente: nuevo logotipo (en análisis) y confirmación de tipografía.