FF COACHING · BRAND SYSTEM v1.0
Manual operativo de la marca FF Coaching. 16 secciones canónicas, 32 componentes primitivos production-ready, tokens versionados, patrones gráficos y descargas. Listo para importar al producto.
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.
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
Solo Poppins bold. Nada de cursivas, serifs, monospace.
05 · DESCARGAS
SVGs vectoriales (Poppins live text), PNGs alta resolución rasterizados, favicons del set completo y el componente React.
05.01 · SVG
Vectoriales · 06 ARCHIVOS
05.02 · PNG
Bitmap alta res · 06 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
05.03 · ICON
Favicons & touch icons · 04 ARCHIVOS
05.04 · CODE
Componente React · 01 ARCHIVOS
Paleta off-white editorial con un único acento Signal Blue. Regla 60/30/9/1: background domina, foreground respira, surface contiene, accent aparece como detonante.
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. |
Poppins para display y body en pesos ligeros (200/300). JetBrains Mono para todo lo técnico. Firma de marca: em itálica azul como acento de autoridad.
01 · FAMILIAS
La variedad sale del peso (200 → 700) y del tracking, no de cambiar de fuente. Italic solo en em.
Poppins
200 · 300 · 400 · 500 · 600 · 700 + italicGeometric sans con personalidad. Cuerpo legible a 14-16px. Peso ligero (200/300) para titulares premium. La italic solo se usa en <em> con color accent — firma única de marca.
JetBrains Mono
400 · 500Monoespaciada para datos, métricas, eyebrows, captions. Aparece en UPPERCASE con tracking 1.5-3.5px según el rol. Da textura técnica vs el Poppins editorial.
02 · JERARQUÍA
De display gigante a caption mono — cada token tiene tamaño, peso, tracking y uso definidos. No improvisar.
display02.01
clamp(48 → 128px) · -4px
w200 / 300
De inseguro a fuerte y confiado
Hero brutal. Una vez por pantalla.
h102.02
clamp(40 → 84px) · -3px
w200 / 300
Acompañamiento, no entrenamiento.
Apertura de sección principal.
h202.03
clamp(28 → 56px) · -2px
w200 / 300
Estructura. Seguimiento. Dirección.
Subsección dentro de un bloque.
h302.04
20 · -0.5px
w500
Plan de entrenamiento adaptado
Títulos de cards y listas destacadas.
lead02.05
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.06
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.07
13 · 1.6
w300
Texto secundario, notas al pie, descripciones complementarias.
Microcopy, hints, descripciones de cards pequeñas.
eyebrow02.08
11 · 3.5px tracking
w500
EYEBROW · 11PX · 3.5PX
Eyebrows de sección, badges, tags accent.
caption-mono02.09
11 · 1.5px tracking
w400
CAPTION · 11PX · 1.5PX
Captions, counters NN.MM, labels técnicos.
03 · FIRMA
La firma única de marca. Aparece en headlines, body y stats. Si una superficie no la usa, la marca está incompleta.
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
250+
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.
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>
);
}Patrones secundarios que respiran sobre la paleta sin competir con el contenido. Todos viven en globals.css como utilidades reutilizables.
01 · UTILIDADES CSS
Cada uno tiene su clase CSS, su preview y su contexto de uso. Importables desde globals.css.
.grid-bg01.01Grid de fondo con mask radial. Líneas a 56px, opacidad 0.04. Reservado al hero.
.radial-glow-blue01.02Dos gradientes elípticos del accent al 8% y 5%. Para hero, CTA, pricing featured.
Sobre band
.section-band01.03Banda surface-2 con border-top/border-bottom. Separa secciones sin heading adicional.
.diagonal-texture01.04Líneas a 45º del accent al 6%. Para superficies de soporte (FAQ, footer) sin gritar.
.pulse-dot01.05Pulso accent 2s ease-in-out infinito. Solo badges live, en vivo, escasez.
.stroke-number01.06Números display outline (sin relleno). Para sección Método y numeración 01-10.
.glass-nav01.07Translucencia blanca 78% + backdrop-blur 20px. Solo navbar fijo.
.shadow-cta01.08Halo accent + sombra negra suave. Solo botones primarios.
02 · BAR ACCENT SYSTEM
Gramática visual recurrente. Cada elemento tiene un rol claro — eyebrow, énfasis, callout, separador.
Horizontal accent · 32×1px
02.01Eyebrow → línea → label. Marca inicio de subsección.
Underline trio · 3/2/1px
02.02Énfasis editorial bajo headline. Tres capas decrecientes.
No empecé fuerte. Me hice fuerte.
Vertical accent · 3px
02.03Callouts, quotes destacados, blockquotes.
Divider con dot
02.04Separar bloques de contenido similar sin border completo.
03 · 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.
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
250 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.
Off-white #FAFAFA como base
60% de superficie. La marca respira en aire claro.
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 weight 200/300
Tracking -2px o más negativo. Editorial premium, no SaaS.
em itálica azul como firma
Único acento de autoridad. Repítelo con criterio en cada superficie.
CTA primario en pill accent
Secundario ghost pill con border. 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 tercera fuente
Solo Poppins + JetBrains Mono. La variedad sale del peso, no de la familia.
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 exclamaciones ni mayúsculas gratuitas
La autoridad no grita. Si lo quieres enfatizar, usa em.
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.