TheFittClub Vault

thefittclub-design

2 min read

Sistema de documentos del proyecto:

TheFittClub — Sistema de diseño visual (implementación)

Este documento acota cómo se ve la app en código: tokens, tipografía y convenciones de layout. La intención emocional (lujo, calma, precisión) sigue definida en thefittclub-brand.md.

Stack

  • Tailwind CSS v4 — sin tailwind.config.ts; tokens en @theme dentro de la hoja global.
  • Fuente de verdad CSS: app/styles/app.css (@import "tailwindcss" + bloque @theme).

Tokens de color y superficie (TFC v3)

Definidos en @theme en app/styles/app.css (nombres usables como utilidades Tailwind, p. ej. bg-primary, text-textBody):

  • Superficies: primary, surfaceMuted, surfaceSoft, surfaceMid, darkBg, darkCard
  • Texto: textMain, textBody, textSecondary, textMuted
  • Acento / marca: signature, signatureDeep, clubGold
  • Utilidad: success, danger, whatsapp, borderLight, borderDashed, banner

Los valores hex concretos viven solo en app/styles/app.css para evitar deriva entre doc y código.

Tipografía

En @theme:

  • Sans: DM Sans (--font-sans)
  • Serif: Cormorant Garamond (--font-serif)

Uso: combinación premium — serif para titulares / momentos editoriales donde encaje la marca; sans para UI y cuerpo.

Layout y producto

  • Variables CSS globales para navegación y dashboard: --app-navbar-height, --dashboard-sticky-stack-height, --dashboard-scroll-margin (ver comentarios en app/styles/app.css).
  • Utilidad .dashboard-section-anchor para scroll con márgenes correctos bajo cabeceras sticky.

Reglas para contribuciones UI

  1. No inventar colores fuera del @theme salvo transición documentada en este archivo y reflejada en app/styles/app.css.
  2. Mobile-first; la experiencia debe sentirse “app” coherente con la promesa de marca (ver brand).
  3. i18n: no hardcodear copy; criterio en .cursorrules (namespaces por página).

Los tokens pueden evolucionar; ante duda, inspeccionar app/styles/app.css como fuente numérica.

Graph View

Backlinks