Spotmind Brands · Guía de estilos
El club entero, en un solo lugar.
MARCA
Misión, visión, valores, voz, tono, personalidad y arquetipos.
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).
Sin contenido definido. pendiente
Forpay y Transbank; las cuotas se cobran solas.
vista.
visibles, frases cortas.
Sin contenido definido. pendiente
Clubes y escuelas deportivas (de hasta 50 atletas hasta multiclub con varias sedes) que hoy
administran a mano cobros, inscripciones y comunicación.
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.
#0e3020 (--primary) — ancla de marca, superficies inversas, botón primario.#c8e928 (--accent) — único saturado: CTA, resaltados y píldoras. Con moderación.#f6f5e9 (--background) · sand.0 #fffefa (--card) — superficies crema.#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).
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".
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:
badge.<input> a mano en 21 archivos; ui/field solo en 11.bg-card rounded-lg border → usar card.button.loading.tsx; "Cargando" a mano ×33 → componente states.ui/ como única fuente de estilo.globals.css.extends: null).COLOR
Muestras por rol. Cada una se copia como SVG (tarjeta completa), como variable CSS o como hex.
border
brand
effect
status
surface
text
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
Relación completa: token JSON ↔ variable CSS ↔ valor ↔ spec de uso.
| Token (JSON) | Variable CSS | Valor | Tipo | Spec · 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
COMPONENTES
Tokens de componente (capa 3). La referencia de uso vive en la sección Marca.
| Componente · token | Valor | Spec · uso |
|---|---|---|
badge.background | #c8e928 | Píldora de acento (ej. 'EL MÁS ELEGIDO'). |
badge.radius | 999px | Capa 3 — tokens de componentes. Referencian semánticos. |
badge.text | #171611 | Capa 3 — tokens de componentes. Referencian semánticos. |
button.accent.background | #c8e928 | CTA destacado: lima + texto tinta. El botón más prominente (ej. 'Solicitar demo'). |
button.accent.text | #171611 | Capa 3 — tokens de componentes. Referencian semánticos. |
button.primary.background | #0e3020 | Botón primario: verde bosque + texto crema (variante 'primary' de shadcn). |
button.primary.text | #fcfcf7 | Capa 3 — tokens de componentes. Referencian semánticos. |
button.radius | 10px | Capa 3 — tokens de componentes. Referencian semánticos. |
card.background | #fffefa | Capa 3 — tokens de componentes. Referencian semánticos. |
card.border | #d0cec1 | Capa 3 — tokens de componentes. Referencian semánticos. |
card.padding | 24px | Capa 3 — tokens de componentes. Referencian semánticos. |
card.radius | 10px | Capa 3 — tokens de componentes. Referencian semánticos. |
input.background | #fffefa | Capa 3 — tokens de componentes. Referencian semánticos. |
input.border | #e4e3d5 | Capa 3 — tokens de componentes. Referencian semánticos. |
input.radius | 10px | Capa 3 — tokens de componentes. Referencian semánticos. |
input.text | #171611 | Capa 3 — tokens de componentes. Referencian semánticos. |
LOGOTIPOS
Estructura de variantes de logo. Lo que falta queda marcado como pendiente.
Sin variantes sin tagline. pendiente
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
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
CHANGELOG
Versión de marca en semver (v0 → v3). Cada cambio de tokens con impacto visual sube versión.
_template como sub-brand independiente (extends: null), visualmenteautónoma de Spotmind.
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.
button.primary (verde), button.accent (lima/CTA), card, input, badge; semantic.radius.default = rounded-lg (10px, provisional).