TheFittClub Vault

Diseno

6 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, convenciones de layout y la rúbrica de evaluación de pantallas. La intención emocional (santuario, inteligencia aterrizada) está definida en thefittclub-brand.md §8.

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

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 §8).
  3. i18n: no hardcodear copy; criterio en .cursorrules (namespaces por página).

Rúbrica de evaluación de diseño — gate obligatorio

Cómo usar: Aplica los 7 criterios en orden. Si una pantalla falla cualquiera de los primeros 4, para ahí — los fallos tempranos no se arreglan con ajustes tardíos. Cuándo aplicar: Cualquier ticket que toque UI (componentes, rutas con vistas, tokens). Gate explícito en el harness de implementación y en QA.

Cada criterio tiene:

  • Pregunta de evaluación — la haces en 3–5 segundos, sin leer el contenido.
  • Pass — qué tiene que ocurrir para aprobarla.
  • Fail — señales de rechazo inmediato.
  • Matiz — si la respuesta es “más o menos”, qué pregunta adicional resuelve la duda.

Regla general: si dudas en cualquier criterio, es fail. La duda es la respuesta.

Criterio 1 — Jerarquía tipográfica en 3 segundos

Pregunta: Al mirar la pantalla 3 segundos sin leer, ¿sé inmediatamente qué es lo más importante?

Pass: Hay un elemento dominante claro. El ojo va ahí primero, siempre. Fail: Compiten dos o más elementos de peso similar. No sé dónde mirar. Matiz: Si el elemento dominante no es el que debería serlo según la función de la pantalla, la jerarquía está invertida — también es fail.

Criterio 2 — Presencia del CTA

Pregunta: ¿El botón principal tiene presencia sin gritar? ¿Compite con algo?

Pass: El CTA se encuentra sin buscarlo. Su peso es el adecuado para la acción que pide. Fail: El CTA desaparece entre el contenido. O bien es tan grande/brillante que aplasta la jerarquía. Matiz: Un CTA secundario visible es aceptable si está claramente subordinado al principal. Si los dos pesan igual, es fail.

Criterio 3 — Temperatura cromática

Pregunta: ¿La paleta coincide con santuario? ¿Hay algún tono frío que se cuele sin justificación?

Pass: La superficie es warm-neutral. Los colores de marca aparecen con propósito, no como relleno. Fail: Azules fríos genéricos, grises neutros sin temperatura, fondos blancos puros #FFFFFF como base de página. Matiz: Un tono frío puede estar justificado si sirve a un propósito funcional (ej: estado de error, información técnica). Si está ahí “porque queda bien”, es fail.

Criterio 4 — Densidad / respiración

Pregunta: ¿La pantalla respira o me ahoga?

Pass: Hay blanco rítmico — el espacio vacío está distribuido intencionalmente, no relleno. Fail: Cada píxel tiene contenido. No hay pausa visual. O el extremo contrario: tanto espacio que la pantalla parece vacía o no terminada. Matiz: Santuario no es minimalismo estéril — es espacio con propósito. Si el vacío se siente incómodo, añadir un elemento pequeño que ancle; si se siente cargado, eliminar algo.

Criterio 5 — Lectura emocional a 3 segundos

Pregunta: ¿Qué siente la usuaria al abrir esta pantalla?

Pass: Una respuesta clara y específica: calma, confianza, claridad, pertenencia. Fail: “No sé” o “parece una app normal”. Si no produce una respuesta emocional, la pantalla es genérica — falla. Matiz: La respuesta no tiene que ser positiva en todas las pantallas (ej: una pantalla de error puede sentirse como “esto está bajo control”). Pero tiene que ser algo.

Criterio 6 — Anti-vocabulario médico

Pregunta: ¿Hay alguna palabra del vocabulario prohibido?

Palabras prohibidas (lista completa): paciente, diagnóstico, tratamiento, terapia, cura, prescripción, protocolo clínico, rehabilitación médica, intervención, patología, síntoma, pronóstico, enfermedad, lesión (en contexto de diagnóstico), médicamente.

Pass: Cero palabras prohibidas. Fail: Una sola ocurrencia. Sin matices — fail directo. Acción: Reescribir con vocabulario wellness: entrenamiento, progresión, método, fase, activación, bienestar, recuperación física.

Criterio 7 — Anti-señales SaaS genéricas

Pregunta: ¿Podría esta pantalla ser de cualquier app de bienestar / fitness / SaaS?

Señales de rechazo automático:

  • Gradientes diagonales violeta-rosa-naranja.
  • Iconos Lucide / Heroicons en el hero o en posición prominente.
  • Cards con esquinas perfectamente redondeadas + sombra drop genérica.
  • Tipografía Inter o similar sin personalidad editorial.
  • Imagen de stock de mujer sonriendo con ropa de deporte.
  • Animaciones de entrada tipo “bounce” o “slide from left”.
  • “Powered by AI” badge, sparkle emoji como indicador de IA.

Pass: Podría ser solo de TheFittClub. Tiene al menos un elemento que solo este producto haría. Fail: Parece una plantilla de Vercel o una demo de Tailwind UI. Matiz: Un elemento genérico en un componente utilitario (ej: un input de formulario) es aceptable. Un elemento genérico en el hero o en el CTA principal es fail.

Calibración (ejemplos reales)

Añadir ejemplos de pass/fail a medida que aparecen. Empieza vacío.

  • Ejemplo pass (Criterio 5):
  • Ejemplo fail (Criterio 7):
  • Criterio que más se incumple en la práctica:
  • Criterio que quiero añadir:

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

Última actualización: 2026-05-15.

Graph View

Backlinks