FF COACHING · BRAND SYSTEM v1.1
Manual operativo de la marca FF Coaching. Recoge los dos sistemas que están hoy en producción: Raw, el de la home, y Atleta, el de las landings de anuncios y las páginas legales. Con sus tokens, sus componentes y sus descargas.
Quién es FF Coaching, a quién habla, y qué territorio ocupa en la cabeza del avatar.
01 · ESENCIA
01.01 · STATEMENT
De inseguro a fuerte y confiado.
01.02 · PROPUESTA
Acompañamiento 1:1 para hombres que quieren dejar de sentirse inseguros con su físico y construir una versión más fuerte, segura y disciplinada de sí mismos. Sin PDFs. Sin desaparecer.
02 · ADJETIVOS
Cada palabra carga una decisión visual y editorial. Si una pieza no encarna alguno de estos cinco, no es FF.
Cero rodeos. Una promesa, un siguiente paso. El público objetivo ya está cansado de gurús que se enrollan.
Habla a un hombre adulto. Sin condescendencia, sin broseo, sin motivación de plantilla.
Acompañamiento 1:1, no app fitness barata. La identidad refleja precio y exclusividad relativa.
El resultado es consecuencia del oficio, no del hype. La marca encarna esa misma postura.
Anti-postureo. Evita stock photos, transformaciones imposibles y promesas sin proof.
03 · POSICIONAMIENTO
AVATAR
03.01Hombre 28-45, entrena o quiere empezar. No se ve como quiere. Ha probado rutinas YouTube, dietas que duran 2 semanas, y un par de coaches que le mandaron un PDF y desaparecieron. Busca acompañamiento real, no más información.
ARQUETIPO
03.02El Héroe en formación. Quiere transformarse pero necesita un mentor que le marque el camino. No motivador, mentor. El que dice qué hacer cuando él no lo sabe y le obliga a aparecer cuando él fallaría solo.
CLUSTER COMPETIDOR
03.03Apps fitness genéricas (MyFitnessPal, MyProtein), coaches Instagram de plantilla, gimnasios franquicia. FF sale del cluster por densidad editorial, oficio premium 1:1 y nivel de seguimiento que ningún software replica.
04 · SISTEMAS
Desde septiembre de 2026 la web tiene dos vestidos. Cada página lleva uno entero, nunca mitad y mitad. Antes de abrir una pantalla nueva, mira en cuál de los dos cae.
PRINCIPAL
04.01Raw
Home (/), opt-ins (/o/*), páginas de gracias y guías
Fondo negro, Bebas Neue en titulares gigantes, Inter en mayúsculas espaciadas para el apoyo, fotos en blanco y negro, contorno como firma y azul como único acento.
SECUNDARIO
04.02Atleta
Landings de anuncios (/l/*), páginas legales, este manual
Fondo claro, Barlow para el texto y Barlow Semi Condensed para titulares, cifras y botones. La itálica azul en em es su firma. Botones rellenos con forma de píldora.
Sistema FF · separador signal · COACHING. Construido por código (componente <FFLogo />). Tres tamaños canónicos y cinco contextos cromáticos. El mismo trazo en cualquier superficie.
01 · VARIANTES
Black on White
Uso por defecto · web claro, papelería, prensa.
White on Black
Sobre fondos oscuros · email, cartel, OG, hero dark.
Black on Off-white
Aplicación dominante de la marca · landing v2.
Black on Surface-2
Card o sección secundaria sobre gris muy claro.
On accent
Solo CTA destacado o badge promocional puntual.
Nav · 28px
Sticky header. Mínimo digital.
Footer · 48px
Cierre de página. Tamaño intermedio canónico.
Hero · 72px
Apertura de superficie. Carteles, landing principal.
02 · CLEARSPACE
La altura de la F define el margen mínimo en los cuatro lados. Ningún otro elemento de marca o texto invade ese perímetro.
X = ALTURA DE LA F · MARGEN MÍNIMO
02.01
03 · TAMAÑOS MÍNIMOS
Nav
28px
Sticky header desktop / mobile
Footer
48px
Bloque de cierre
Hero
72px
Apertura editorial
Favicon
16px
Tab del navegador
04 · NUNCA
Seis aplicaciones que rompen el sistema. Si dudas, revisa variantes oficiales arriba antes de improvisar.
No rotar
El logo no gira ni en composiciones diagonales.
No degradar
Color sólido siempre. Sin gradientes.
No estirar
Proporciones canónicas. Nunca scale-x ni scale-y aislado.
No outline
Sin contornos de texto. La marca es maciza.
No sombras
Cero drop-shadow o glow alrededor de la marca.
No cambiar tipo
El logo se coge de los archivos, que ya llevan la letra convertida en trazo. Nada de reescribirlo con otra fuente, ni cursivas, serifs o monoespaciadas.
05 · DESCARGAS
Hay dos juegos, con la letra ya convertida en trazo en los dos. El nuevo está hecho con Barlow, que es la que la web pinta hoy, así que coincide con lo que se ve en pantalla. El antiguo, con Poppins, es con el que nació la marca y se queda disponible para el material que ya está circulando. Para algo nuevo, coge el nuevo.
Versión nueva · completo
05.01Barlow SemiBold. La misma letra que la web pinta hoy.
Versión antigua · completo
05.02Poppins Bold. La original, la que anda por el material antiguo.
Versión nueva · FF con barra
05.03El logo completo al que le quitas la palabra. Para cuando hay sitio de sobra pero el texto no se leería.
Versión antigua · FF con barra
05.04La misma pieza, con la letra original.
Versión nueva · solo FF
05.05Sin la palabra COACHING y sin la barra, que es lo que separaba las dos. Para perfiles, iconos y sitios pequeños.
Versión antigua · solo FF
05.06La misma pieza corta, también sin barra, con la letra original.
05.01 · SVG-NUEVO
Versión nueva · vectoriales (Barlow, la letra de la web) · 08 ARCHIVOS
Logo horizontal · negro
SVG · 5 KB
Logo horizontal · blanco
SVG · 5 KB
Logo cuadrado · claro
SVG · 5 KB
Logo cuadrado · oscuro
SVG · 5 KB
Symbol · solo FF
SVG · 1 KB
Symbol · blanco
SVG · 1 KB
Symbol · FF con barra
SVG · 1 KB
Symbol · FF con barra, blanco
SVG · 1 KB
05.02 · PNG-NUEVO
Versión nueva · bitmap alta res · 08 ARCHIVOS
Logo horizontal · negro
PNG 1280px · 8 KB
Logo horizontal · blanco/negro
PNG 1280px · 8 KB
Logo cuadrado · claro
PNG 1200px · 13 KB
Logo cuadrado · oscuro
PNG 1200px · 13 KB
Symbol · 512px
PNG 512px · 3 KB
Symbol · blanco 512px
PNG 512px · 3 KB
Symbol · FF con barra 512px
PNG 512px · 3 KB
Symbol · FF con barra, blanco 512px
PNG 512px · 3 KB
05.03 · SVG
Versión antigua · vectoriales (Poppins) · 08 ARCHIVOS
Logo horizontal · negro
SVG · 629 B
Logo horizontal · blanco
SVG · 629 B
Logo cuadrado · claro
SVG · 684 B
Logo cuadrado · oscuro
SVG · 684 B
Symbol · solo FF
SVG · 495 B
Symbol · blanco
SVG · 495 B
Symbol · FF con barra
SVG · 713 B
Symbol · FF con barra, blanco
SVG · 713 B
05.04 · PNG
Versión antigua · bitmap alta res · 08 ARCHIVOS
Logo horizontal · negro
PNG 1280px · 12 KB
Logo horizontal · blanco/negro
PNG 1280px · 12 KB
Logo cuadrado · claro
PNG 1200px · 17 KB
Logo cuadrado · oscuro
PNG 1200px · 17 KB
Symbol · 512px
PNG 512px · 6 KB
Symbol · blanco 512px
PNG 512px · 6 KB
Symbol · FF con barra 512px
PNG 512px · 3 KB
Symbol · FF con barra, blanco 512px
PNG 512px · 3 KB
05.05 · ICON
Favicons & touch icons · 04 ARCHIVOS
05.06 · CODE
Componente React · 01 ARCHIVOS
Dos paletas y un solo azul. La clara, con la regla 60/30/9/1, viste las landings de anuncios y las legales. La negra del sistema Raw viste la home. El acento Signal Blue es el mismo en las dos.
01 · PALETA
#FAFAFA--bgRGB 250 · 250 · 250
Background principal de toda la marca. 60% de superficie.
#FFFFFF--surfaceRGB 255 · 255 · 255
Cards, paneles, dropdowns. Capa elevada sobre bg.
#F4F4F5--surface-2RGB 244 · 244 · 245
Hovers, segunda capa, bandas alternas (section-band).
#E4E4E7--surface-3RGB 228 · 228 · 231
Borders fuertes, scrollbar tracks, dividers gruesos.
#09090B--fgRGB 9 · 9 · 11
Texto primario, headlines, fondo inverso (section dark).
#3B82F6--accentRGB 59 · 130 · 246
ACENTO 1%. CTAs, em itálicas, dots timeline, números 01-NN.
#60A5FA--accent-2RGB 96 · 165 · 250
Hover en links secundarios, glows decorativos.
#2563EB--accent-darkRGB 37 · 99 · 235
Hover / active de Accent en botones primarios.
#71717A--mutedRGB 113 · 113 · 122
Texto secundario, body de soporte. AA sobre bg.
#A1A1AA--muted-2RGB 161 · 161 · 170
Captions mono, labels técnicos. Solo texto grande.
#D4D4D8--muted-3RGB 212 · 212 · 216
Placeholders desactivados, dots inactivos del timeline.
rgba(0,0,0,0.08)--borderRGB 0 · 0 · 0 · 0.08
Borders sutiles, dividers, separadores de cards.
02 · PROPORCIÓN
El acento Signal Blue ocupa solo el 1% de la superficie. Cada aparición pesa. Si aparece en el 10% pierde fuerza y la marca se desangra.
RATIO DE SUPERFICIE · LANDING TÍPICA
02.0103 · CONTRASTE
Combinaciones reales con ratio numérico y veredicto. Las marcadas FAIL están prohibidas en cualquier superficie productiva.
| # | Foreground | Background | Ratio | Resultado | Nota |
|---|---|---|---|---|---|
| 03.01 | Foreground | Background | 19.3 : 1 | AAA | — |
| 03.02 | Foreground | Surface | 18.9 : 1 | AAA | — |
| 03.03 | Muted | Background | 4.5 : 1 | AA | — |
| 03.04 | Muted-2 | Background | 2.5 : 1 | AA · LARGE ONLY | Solo texto grande ≥18pt. Prohibido en body. |
| 03.05 | Accent | Background | 3.8 : 1 | AA · LARGE ONLY | Solo headlines / CTAs grandes. No body. |
| 03.06 | White | Accent | 3.9 : 1 | AA · LARGE ONLY | Para CTAs (semibold ≥14px). Prohibido en text small. |
| 03.07 | Muted-2 | Accent | 1.6 : 1 | FAIL · DO NOT USE | Combinación prohibida en cualquier contexto. |
04 · PALETA RAW
Cuatro colores y nada más. Sobre negro el azul gana contraste, así que aquí sí vale para texto pequeño. El blanco puro se reserva a titulares y enlaces; el texto de apoyo baja al 80% para que el titular siga mandando.
#000000backgroundRGB 0 · 0 · 0
Fondo de toda la home. Es el 60% de la superficie y el que hace que el azul pese.
#0B0B0B.raw-concreteRGB 11 · 11 · 11
Gris casi negro con ruido encima y fundido a negro. Menú, barra fija y bandas de sección.
#3B82F6--raw-accentRGB 59 · 130 · 246
El mismo Signal Blue del sistema claro. Cinta, bordes del menú y bloque del diagnóstico.
#60A5FA--raw-accent-2RGB 96 · 165 · 250
Azul claro para texto sobre negro: palabra destacada del titular, cifras y hover de los enlaces.
| # | Texto | Fondo | Ratio | Resultado | Nota |
|---|---|---|---|---|---|
| 04.05 | Blanco | Negro | 21 : 1 | AAA | — |
| 04.06 | Raw accent-2 | Negro | 8.3 : 1 | AAA | — |
| 04.07 | Raw accent | Negro | 5.7 : 1 | AA | Vale también para texto pequeño, al revés que sobre fondo claro. |
| 04.08 | Blanco | Raw accent | 3.7 : 1 | AA · LARGE ONLY | Solo el enlace grande del diagnóstico. Nunca en texto pequeño. |
Cuatro fuentes repartidas en dos parejas que no se mezclan. Bebas Neue e Inter visten la home; Barlow y Barlow Semi Condensed, las landings de anuncios y las legales. Poppins y JetBrains Mono ya no se cargan.
01 · FAMILIAS
Dentro de cada pareja, la variedad sale del peso y del espaciado, no de meter una fuente más. Una página lleva una pareja entera.
Bebas Neue
400Condensada y en mayúsculas por diseño. Sostiene titulares de 60 a 170 px con el interlineado en 0.92. Es la que da el aire de cartel de gimnasio. No se usa nunca en párrafos.
Inter
400 · 500 · 600Todo lo que no es titular en la home. En su versión de apoyo va en mayúsculas con 0.18em de separación entre letras, y por eso se limita a dos o tres líneas: en párrafos largos cansa.
Barlow
400 · 500 · 600 + itálicaCuerpo de las landings de anuncios, las páginas legales y este manual. Legible de 13 a 18 px. Sustituyó a Poppins en septiembre de 2026.
Barlow Semi Condensed
600 · 700 + itálicaTitulares, botones y números. Su itálica azul en em es la firma del sistema claro. Ocupó el sitio de JetBrains Mono, que ya no se carga en ninguna página.
02 · JERARQUÍA
Los tres primeros son del sistema Raw y se enseñan sobre negro, que es donde viven. Cada token trae tamaño, peso, espaciado y para qué sirve.
raw-display02.01
clamp(60 → 120px) · 0.92
w400
Tu trabajo está resuelto
Titular de la home. Uno por pantalla.
raw-outline02.02
clamp(56 → 170px) · trazo 1.5px
w400
Método
Titular de sección, solo el contorno. Firma del sistema Raw.
raw-lead02.03
13-19 · 0.18em · 1.55
w500
Online y presencial en Bizkaia
Apoyo bajo el titular. Máximo dos o tres líneas.
display02.04
clamp(48 → 128px) · -4px
w200 / 300
De inseguro a fuerte y confiado
Hero brutal. Una vez por pantalla.
h102.05
clamp(40 → 84px) · -3px
w200 / 300
Acompañamiento, no entrenamiento.
Apertura de sección principal.
h202.06
clamp(28 → 56px) · -2px
w200 / 300
Estructura. Seguimiento. Dirección.
Subsección dentro de un bloque.
h302.07
20 · -0.5px
w500
Plan de entrenamiento adaptado
Títulos de cards y listas destacadas.
lead02.08
18 · 1.7
w300
Cero atajos. Cero postureo. Mes a mes hasta tener un físico que represente tu disciplina.
Subheadlines y descripciones de apertura.
body02.09
15 · 1.65
w300
Cuerpo de texto estándar. Una idea por párrafo, frases cortas, ritmo de lectura limpio.
Texto principal de secciones explicativas.
body-sm02.10
13 · 1.6
w300
Texto secundario, notas al pie, descripciones complementarias.
Microcopy, hints, descripciones de cards pequeñas.
eyebrow02.11
11 · 3.5px tracking
w500
EYEBROW · 11PX · 3.5PX
Eyebrows de sección, badges, tags accent.
caption-mono02.12
11 · 1.5px tracking
w400
CAPTION · 11PX · 1.5PX
Captions, counters NN.MM, labels técnicos.
03 · FIRMA
En Atleta la firma es la em itálica azul, en titulares, texto y cifras. En Raw es el titular en contorno con una palabra en azul claro. Cada página usa la suya y no la de la otra.
03.01 · EN VIVO
EN HEADLINE
De inseguro a fuerte.
EN BODY
Acompañamiento real cada semana — peso, fotos, audios, bajones. Los resultados vienen cuando hay alguien detrás que no te suelta.
EN STAT
1:1
03.02 · CSS
em {
font-style: italic;
color: var(--accent);
font-weight: 300;
}Tres líneas. Aplica globalmente a todo <em> en la página. No usar italic en headings ni body normal — solo en em.
03.03 · FIRMA RAW
Método
Tu trabajo está resuelto. Tu cuerpo no.
03.04 · CSS
.raw-outline {
color: transparent;
-webkit-text-stroke: 1.5px #fff;
}El contorno abre la sección y la frase maciza remata debajo, con una sola palabra en azul claro. Si el contorno aparece dos veces seguidas pierde el efecto, así que va uno por sección.
Escala 4 → 160px en saltos significativos. Ritmo vertical pedagógico. Radios premium grandes para cards y hero, pill total para botones.
01 · ESCALA
Cada salto dobla o aumenta 50%. Evita 6/10/14 — rompen el ritmo visual. Si necesitas un valor intermedio, revisa primero si el diseño está mal pensado.
space-14pxspace-28pxspace-416pxspace-624pxspace-832pxspace-1248pxspace-1664pxspace-2496pxspace-32128pxspace-40160px02 · RITMO VERTICAL
No improvises padding-y. Esta es la matriz canónica de separación vertical de toda superficie FF.
space-4002.01160px
space-3202.02128px
space-2402.0396px
space-1602.0464px
border02.051px (gap-px)
space-602.0624px
03 · RADIOS
La marca defaultea a radios grandes (20-32px) como firma premium. Botones siempre pill. Cards siempre rounded-2xl.
--r-sm03.01Tags, badges pequeños, code inline
--r-md03.02Inputs, alerts, dropdowns
--r-lg03.03Cards, popovers
--r-xl03.04Cards destacadas, modal estándar
--r-2xl03.05Hero cards, pricing featured, bento
--r-pill03.06Botones, tabs, paginación, badges
04 · GRIDS
Una columna efectiva. Cards full-width.
Layouts de 2 columnas. Bento grids.
Layouts editoriales. Max-width 1240px.
Lucide React. Stroke 1.5px, outline only — sin rellenos, sin duotone. Set curado de 29 iconos críticos agrupados por categoría.
01 · SET CURADO
Si un icono que necesitas no está aquí, primero pregunta si la superficie lo necesita realmente. La paleta visual cabe.
NAVEGACIÓN
arrow-rightchevron-rightchevron-downsearchplusxcheckCOMUNICACIÓN
mailphonemessage-squaremessage-circlesendESTADO · FEEDBACK
infocircle-helpsettingsshieldplayTIEMPO · AGENDA
calendarclocktimerPERSONAS
userusersENTRENAMIENTO · MÉTRICAS
dumbbelltargettrophyflameheartactivitybar-chart-3trending-up02 · REGLAS
02.01 · DO
Stroke 1.5px siempre.
Nunca mezclar weights distintos en la misma superficie.
Tamaño en pasos de 4.
12 · 14 · 16 · 20 · 24px. Nunca 13/15/22.
Color hereda del texto.
text-current por defecto. Accent solo en CTAs y status.
aria-hidden si va con texto.
El icono es decorativo cuando el label adyacente describe la acción.
02.02 · DON'T
No mezclar librerías.
Solo Lucide. Si falta un icono, se compone con primitivos.
No rellenos sólidos.
Rompen el lenguaje outline editorial de la marca.
No iconos a ≥32px.
Si necesitas tamaño grande, usa ilustración o el logo.
No emojis como iconos.
El brand es vectorial y monocromo. Emojis son texto.
Librería primitiva completa. Cada componente: forwardRef, focus ring visible, aria correcto, disabled/loading exclusivos. 32 piezas — todas importables desde @/app/brand-kit/components/ui.
<Button variant size />Primary domina la acción crítica. Secondary, subtle y ghost se reservan para acciones de soporte. Link en navegación textual.
size · loading · disabledloading bloquea el botón vía disabled={disabled || loading} y publica aria-busy.
<Badge tone dot pulse />Metadata corta. Pulse solo para estados críticos (en cola, error, en vivo).
<Tag />Etiqueta técnica neutra para chips de categoría.
<Avatar /> · <AvatarGroup max />Sin foto cae a iniciales. AvatarGroup colapsa después del max con un contador.
<Stat label value delta />Métricas marketing. Display extralight, label en mono uppercase.
Solo te escribo yo. Sin newsletter.
Necesito un email válido para enviarte la guía.
<Field label hint error>Field vincula label, hint y error vía aria-describedby. children es función — recibe id, aria-describedby, aria-invalid.
<Textarea /> · <Select />Mismos estados y mismos focus rings que Input.
form controlsTodos comparten focus ring accent/35 y aria roles nativos (role='switch' en Switch).
Sube la primera comparativa antes/después para verla aparecer.
<EmptyState icon title description action />Para listas vacías, transformaciones sin filtros, paginación vacía.
Plazas limitadas
Email guardado
Solo quedan 3 plazas
Pago rechazado
<Alert tone title />role='alert'. Title opcional, body en sans light.
<Banner action dismissible />Fondo accent, ancho completo. Usar para anuncios temporales (oferta, plazas).
useToast()Provider montado en layout. Hook push() encola notificaciones con duration por defecto 4s.
loading statesSpinner para bloqueos cortos, DotsLoader para envío de formularios, Skeleton para layouts en carga.
<Progress value /> · <ProgressCircle />Barra horizontal para tareas largas. Circle para resúmenes y stats.
<Modal open onClose />Portal + backdrop blur. Esc cierra. Focus traps via tabIndex=-1.
<Drawer side />Lateral right/left/bottom. Scroll interno, footer fijo opcional.
floating elementsTooltip = info contextual sobre hover/focus. Popover = contenido rico. Dropdown = menú de acciones.
Programa enfocado en ganar masa muscular con superávit calórico controlado.
<Tabs><TabList><Tab>…Roving tabindex + flechas izquierda/derecha. Solo el tab activo es tabbable.
<Breadcrumb items />aria-current='page' en el último. Separadores ChevronRight 12px.
<Pagination page total onPageChange />Compacta con elipsis cuando total > 7. aria-current en página activa.
<Stepper current steps />Para procesos lineales (onboarding, checkout, alta).
<Accordion type='single'>single (1 abierto) o multiple. aria-expanded + aria-controls en cada item.
<Collapsible trigger>Versión ligera del Accordion para un solo bloque colapsable.
Cómo importar
import { Button, Field, Input, useToast } from "@/app/brand-kit/components/ui";
function Hero() {
const { push } = useToast();
return (
<Field label="Email" required>
{(p) => <Input {...p} type="email" placeholder="tu@email.com" />}
</Field>
);
}Los patrones que visten el fondo sin competir con el texto. Primero los del sistema Raw, que son los de la home; después los del claro, que siguen en las landings de anuncios. Todos viven en globals.css.
01 · SISTEMA RAW
Están hechos solo con CSS, sin imágenes y sin librerías de animación, así que la home se ve así sin pagarlo en velocidad. Lo que la frena es el vídeo del hero y el píxel de Meta.
.raw-concrete01.01Gris muy oscuro con un ruido SVG encima y fundido a negro. Menú, barra fija y bandas de sección. El ruido va dentro del CSS, así que no descarga ninguna imagen.
.raw-outline01.02Titular sin relleno, solo el trazo blanco de 1.5px. Abre sección. Uno por sección: repetido seguido deja de llamar la atención.
.raw-smoke01.03Tres manchas blancas desenfocadas en la parte baja. Funde el vídeo del hero con la sección siguiente. Solo en el hero.
.raw-marquee01.04Cinta azul inclinada con el texto avanzando en bucle de 38 s. Es lo único que se mueve solo en la home. Una por página. Aquí arranca al apuntarla o al entrar con el teclado.
.raw-link01.05El CTA de la home: texto en Bebas con una línea de 2px debajo, que pasa a azul claro al apuntarlo. Sustituye al botón relleno en todo el sistema Raw, menos en el bloque del diagnóstico.
02 · SISTEMA ATLETA
Los de las landings de anuncios, las páginas legales y este manual. Cada uno con su clase, su muestra y dónde se usa.
.grid-bg02.01Grid de fondo con mask radial. Líneas a 56px, opacidad 0.04. Reservado al hero.
.radial-glow-blue02.02Dos gradientes elípticos del accent al 8% y 5%. Para hero, CTA, pricing featured.
Sobre band
.section-band02.03Banda surface-2 con border-top/border-bottom. Separa secciones sin heading adicional.
.diagonal-texture02.04Líneas a 45º del accent al 6%. Para superficies de soporte (FAQ, footer) sin gritar.
.pulse-dot02.05Pulso accent 2s ease-in-out infinito. Solo badges live, en vivo, escasez.
.stroke-number02.06Números display outline (sin relleno). Para sección Método y numeración 01-10.
.glass-nav02.07Translucencia blanca 78% + backdrop-blur 20px. Solo navbar fijo.
.shadow-cta02.08Halo accent + sombra negra suave. Solo botones primarios.
03 · BAR ACCENT SYSTEM
Gramática visual recurrente. Cada elemento tiene un rol claro — eyebrow, énfasis, callout, separador.
Horizontal accent · 32×1px
03.01Eyebrow → línea → label. Marca inicio de subsección.
Underline trio · 3/2/1px
03.02Énfasis editorial bajo headline. Tres capas decrecientes.
No empecé fuerte. Me hice fuerte.
Vertical accent · 3px
03.03Callouts, quotes destacados, blockquotes.
Divider con dot
03.04Separar bloques de contenido similar sin border completo.
04 · REGLAS
Un patrón por sección como máximo. Mezclar grid-bg + radial-glow es la excepción heredada del hero.
Patrones siempre en fondo, nunca encima de copy.
No se mezclan los dos sistemas en una misma página: o todo Raw, o todo claro.
Lo que se mueve solo, una cosa por página, y siempre apagado con «reducir movimiento» activado.
Cero degradados purpurinos, cero blobs animados, cero ilustraciones isométricas.
Si un patrón no aparece aquí, no existe en la marca.
Cómo se ve la marca aplicada en producto. Hero de landing, dashboard cliente, chat móvil con Íñigo, social card 1:1. Todos construidos con primitivos de la librería.
01 · LANDING HERO
Decenas de tíos antes que tú tenían tu mismo gimnasio y la misma sensación de no avanzar. Hoy están donde tú quieres estar.
Hero landing v3
Aplicación principal: badge, headline brutal, subheadline con números, CTA single-purpose. Esta es la versión productiva.
Dashboard cliente
Stats al pie + agenda semanal. Componentes primitivos (Stat, Tag, Card).
¿Cómo lo veis hoy?
Íñigo · 9:14Subo 2kg en press banca. Listo.
9:21A por ello. Mantén la pausa abajo.
Íñigo · 9:22Chat móvil con Íñigo
WhatsApp / DM con cliente. La burbuja del cliente va en accent — su voz domina.
De inseguro a
fuerte y confiado.
Social card 1:1
IG feed, OG share. Misma firma que landing — grid-bg + radial-glow + em italic. Badge live arriba.
Plantillas listas con copy real. Landing de captura, pricing card, post de blog, email transaccional. Cero Lorem ipsum.
01 · 4 SUPERFICIES
LANDING · CAPTURA EMAIL
Llévate la guía que uso con mis clientes para empezar a mejorar tu físico con estructura. Sin coste.
SIN SPAM · SOLO TE ESCRIBO YO
Landing capture
Lead magnet · captura email arriba con promesa concreta + reassurance mono.
PLAN SEMESTRAL
Más popular82€/mes · pago único
SIN PERMANENCIA OCULTA · CANCELA CUANDO QUIERAS
Pricing card · featured
Card destacada con scale + shadow-featured. Lista 6 features máximo + CTA full-width.
La mayoría rota ejercicios cada mes "para no aburrir el cuerpo". El cuerpo no se aburre — el ego sí. Lo que necesitas es progresión medible en pocos movimientos: añadir 2,5 kg, una repetición más, dos segundos de pausa al inicio del concéntrico.
Cambiar es cómodo. Progresar duele. Y el cuerpo solo responde a lo segundo.
Post blog · long-form
Tag categoría + lectura mono + headline editorial. Body 14-16px con em itálica en frases clave.
La guía que pediste. Y una cosa más.
Hola,
Aquí tienes la guía. Ábrela en plan: 20 minutos hoy, marca las dos cosas que vas a aplicar esta semana, cierra.
Tres acciones aplicadas mañana valen más que el libro entero leído sin actuar.
Si quieres que lo veamos juntos antes de empezar, reservas una llamada aquí. Sin compromiso.
— Íñigo
Email transaccional
Subject con em italic. Cuerpo plano sin imágenes — la voz lleva el peso. Link accent.
Cómo escribe la marca. Cinco atributos justificados, vocabulario sí/no, ejemplos de copy real con la firma em itálica azul.
01 · ATRIBUTOS
Si una pieza no encarna alguno de estos cinco, no suena a FF Coaching.
Una idea por frase. Verbo activo. Sin rodeos, sin disclaimers, sin 'puede que'. El lector ya está cansado de gurús.
Datos antes que adjetivos. Si dices 'transformación' la respaldas con un antes/después o un caso. Si no, no lo digas.
Habla a un adulto, no a un adolescente ni a un coach. Vocabulario llano, no broseo, no jerga gym.
Si algo no es para todos, lo dices. Si requiere disciplina, lo dices. No vendemos atajos.
Tono tranquilo y seguro. La autoridad no necesita gritar. Cero exclamaciones.
02 · VOCABULARIO
02.01 · SÍ
02.02 · NO
03 · COPY REAL
Copy en uso en landing, emails y microcopy. Repite la firma em italic azul con criterio.
De inseguro a fuerte y confiado.
03.01Vengo de estar flaco. Hoy ayudo a hombres que quieren más de sí mismos a construir el físico y la confianza que merecen.
03.02Quiero empezar →
03.03Ver resultados reales
03.04Necesito un email válido para enviarte la guía.
03.05La guía que pediste. Y una cosa más.
03.06Ábrela en plan: 20 minutos hoy, marca las dos cosas que vas a aplicar, cierra. Tres acciones aplicadas mañana valen más que el libro entero leído sin actuar.
03.07Quién decide qué, dónde viven los assets, cómo se versiona la marca. Si está aquí, no se discute en cada PR.
01 · MATRIZ DE DECISIÓN
Decide / Aprueba / Ejecuta. Si no está aquí, se pregunta al director creativo.
| # | Asset | Decide | Aprueba | Ejecuta |
|---|---|---|---|---|
| 01.01 | Tokens en globals.css | Director creativo | Íñigo | Frontend |
| 01.02 | Copy comercial (hero, CTA) | Íñigo | Director creativo | Copy / Claude |
| 01.03 | Componentes UI | Frontend | Director creativo | Frontend |
| 01.04 | Assets sociales (PFP, banner) | Diseño | Íñigo | Diseño |
| 01.05 | Cambios de logo (FFLogo) | Director creativo | Íñigo | Frontend |
| 01.06 | Pricing & oferta | Íñigo | — | Frontend |
02 · UBICACIONES
src/app/globals.cssTokens canónicos (@theme inline)
src/components/ff-logo.tsxLogo por código (3 sizes)
public/video-hero.mp4Vídeo hero horizontal + vertical
public/retrato-*.jpgRetratos Íñigo (BN + color)
src/app/brand-kit/components/ui/Librería UI (32 componentes)
src/proxy.tsRouting multi-host (Next 16)
03 · VERSIONADO + FLOW
03.01 · VERSIONADO
v1.X.0Añadir sección, añadir componente, ajustes menores no breaking.
v2.0.0Cambio de paleta o tipografía. Breaking. Documentar tabla antes/después.
vX.Y.ZCada cambio en tokens bumpea versión y se documenta en CHANGELOG.md sin excepción.
03.02 · FLUJO DE CAMBIO
Proponer cambio en issue o conversación corta. No abrir PR ciego.
Si afecta tokens: actualizar globals.css primero. El resto se deriva.
Validar contraste WCAG real (no aproximación) en cualquier nuevo par color/texto.
Si afecta componentes: añadir entrada en sección 07 y 16 antes de mergear.
Bumpear versión + entrada en CHANGELOG. Sin esto el merge no entra.
Dónde vive la marca y qué pesa más en cada canal. La identidad no cambia; el énfasis sí.
01 · 6 CANALES
Tres reglas concretas por canal. Si un canal no aparece aquí, no existe en el ecosistema FF.
ffcoaching.es
@inigoo00
Long-form
Skool externo
Cal.com + transaccional
+34 630 02 55 80
Lo que separa la marca aplicada con criterio del cover obvio del sector. Ocho a cada lado, todas específicas.
01 · CRITERIO OPERATIVO
01.01 · DO
Signal Blue al 1%
Un acento por pantalla máximo. Si aparece más, se desangra.
Una base por página
Negro en la home y en los opt-ins; off-white #FAFAFA en las landings de anuncios y las legales. Nunca las dos en la misma página.
Hero con video real o grid-bg
Nunca stock photo. La autoridad se construye con material propio.
Eyebrows mono uppercase
Tracking 3.5px, color accent. Aparecen al inicio de cada subsección.
Titulares con su fuente y su peso
Bebas Neue a 0.92 de interlineado en Raw; Barlow Semi Condensed en 600/700 con tracking negativo en el claro.
Una firma por sistema
La em itálica azul en el claro, el titular en contorno en Raw. Si una página no lleva la suya, no parece de la marca.
Un solo CTA con peso por pantalla
Píldora rellena en el sistema claro, enlace subrayado en Raw. Sin terciarios: el ojo se confunde.
Iconos Lucide outline 1.5px
Tamaño en múltiplos de 4 (12/16/20/24). Mismo stroke en todos.
01.02 · DON'T
No segundo color de acento
Rojo, naranja, verde. Cero. Solo Signal Blue para énfasis.
No mezclar las dos parejas de fuentes
Bebas y Inter van juntas; Barlow y Barlow Semi Condensed, juntas. Ninguna página cruza una con otra, y no se añade una quinta.
No accent sobre fg en texto pequeño
No pasa WCAG AA. Solo en CTAs grandes (≥18pt semibold).
No emojis
Ni en producto ni en manual. Iconos vectoriales siempre.
No animaciones bouncy
Easing cubic-bezier(0.22, 1, 0.36, 1), duración ≤300ms.
No degradados purpurinos
Cero blobs animados, cero isométricos, cero glassmorphism saturado.
No copy de gurú
'Transformación radical', 'fórmula', 'hack', 'secreto', 'bestia'. Fuera.
No párrafos largos en mayúsculas
El texto de apoyo de Raw va espaciado y en mayúsculas, así que se queda en dos o tres líneas. Más que eso cansa y se deja de leer.
Todos los assets oficiales servidos como archivos reales. Cero pendientes, cero links rotos.
01 · BRAND PACK
La opción rápida: descarga el pack completo y tienes el sistema listo para arrancar otro proyecto, hacer handoff o archivar.
15.01 · FEATURED
ZIP · ~27 MB
Pack completo en un solo archivo: tokens (globals.css), logos, retratos, vídeos (horizontal + vertical), OG image, brand-kit HTML, README. Generado por scripts/build-brand-pack.ps1.
Descargar brand-pack.zipCONTENIDO · 6 CARPETAS
02 · ASSETS INDIVIDUALES
Si solo necesitas una pieza específica del sistema, cada archivo está servido desde el dominio sin necesidad de bajar el ZIP entero.
CSS · 5 KB
Paleta off-white editorial v2.0 + utilidades (grid-bg, radial-glow, shadow-cta, stroke-number…). Variables CSS + @theme inline listas para Tailwind 4.
TSX · 2 KB
Componente del logo parametrizado en 3 tamaños (nav / footer / hero). React + TypeScript, dependencia única clsx.
JPG · alta res
Retrato vertical B&N editorial (Hero / About) + horizontal a color (press, featured). Derechos: uso exclusivo FF Coaching.
SVG · PNG
Pack social: og-image.png (1200×630), favicon.svg vectorial, apple-touch-icon.png (180×180). Listos para cabeceras HTML.
MP4 · ~17 MB
Loop 16:9 desktop. Sin audio. Para hero principal y mockups. Codec H.264, compatible con safari.
MP4 · ~10 MB
Loop 9:16 mobile. Reencuadre vertical del hero para soportes móviles. Mismo material, otro framing.
03 · INTEGRACIÓN
Tres líneas en tu globals.css y heredas paleta + tipografía + firma de marca. El resto lo decide cada proyecto destino.
15.03 · GLOBALS.CSS DESTINO
ARCHIVO COMPLETO
@import "tailwindcss";
:root {
--bg: #FAFAFA;
--surface: #FFFFFF;
--fg: #09090B;
--muted: #71717A;
--accent: #3B82F6;
/* … resto en brand-tokens.css */
}
@theme inline {
--color-bg: var(--bg);
--color-surface: var(--surface);
--color-fg: var(--fg);
--color-muted: var(--muted);
--color-accent: var(--accent);
}
em {
font-style: italic;
color: var(--accent);
font-weight: 300;
}Versión profunda de §07. Cada componente con preview, código copiable y nota de accesibilidad. Importable desde @/app/brand-kit/components/ui.
01 · INSTALACIÓN
5 pasos. La librería UI no depende de shadcn ni de ningún registry — es código propio copiable.
16.01 · 5 PASOS
SHELL1. Copiar src/app/globals.css (tokens + @theme inline)
2. Copiar src/lib/utils.ts (cn helper)
3. Copiar src/app/brand-kit/components/ui/ → components/brand/ui/
4. npm install clsx tailwind-merge lucide-react
5. import { Button } from "@/components/brand/ui";02 · CATÁLOGO COMPLETO
Cada componente con preview, código copiable y nota de accesibilidad.
02.01 · PRIMITIVO
Button<Button />6 variantes × 4 tamaños. loading bloquea y publica aria-busy.
02.02 · PRIMITIVO
Badge · Tag<Badge /> · <Tag />Metadata. Badge admite tone, dot, pulse. Tag es etiqueta neutra.
aria-label si el valor no aparece en el texto adyacente.02.03 · FORM
Input · Field<Field><Input /></Field>Field vincula label, hint y error con aria-describedby + aria-invalid.
Solo te escribo yo.
02.04 · FORM
Textarea · Select<Textarea /> · <Select />Mismos estados que Input. Select renderiza Chevron decorativo.
02.05 · FORM
Checkbox · Radio · Switch<Checkbox /> · <Radio /> · <Switch />Wrapping label-as-container para clickable area amplia. Switch usa role='switch'.
02.06 · PRIMITIVO
Avatar · AvatarGroup<Avatar /> · <AvatarGroup max />Iniciales como fallback. Group colapsa con contador +N.
02.07 · PRIMITIVO
Stat · EmptyState<Stat /> · <EmptyState />Stat para métricas marketing. EmptyState para listas vacías.
Sube tu primer registro.
02.08 · FEEDBACK
Alert<Alert tone />4 tonos en línea. Body en sans light. Publica role='alert'.
Email guardado
Error en el pago
02.09 · FEEDBACK
Toast + useToastuseToast() · <ToastProvider />Provider montado en layout. Hook push() encola y auto-cierra a 4s.
02.10 · FEEDBACK
Spinner · DotsLoader · Progress · ProgressCircle · Skeletonloading statesGranularidad de feedback según duración esperada.
02.11 · OVERLAY
Modal · Drawer<Modal /> · <Drawer />Portal + backdrop blur. Esc cierra. body overflow hidden mientras abierto.
02.12 · OVERLAY
Tooltip · Popover · Dropdownfloating elementsTooltip = hover info. Popover = contenido rico. Dropdown = menú de acciones.
02.13 · NAVIGATION
Tabs<Tabs><Tab /></Tabs>Roving tabindex + arrow keys. Solo el tab activo es tabbable.
Panel A
02.14 · NAVIGATION
Breadcrumb · Pagination · Steppernavigation primitivesPagination con elipsis si total > 7. Stepper para procesos lineales.
02.15 · DISCLOSURE
Accordion<Accordion />Accordion single o multiple. aria-expanded + aria-controls en cada item.