Branding

SFS no es una app genérica pintada de verde. Es una plataforma que respira fútbol. Cada decisión visual —desde la paleta hasta las sombras— evoca la cancha, el partido bajo las luces, la precisión de un pase.

La cancha como inspiración

El lenguaje visual de SFS se construye sobre los elementos gráficos del fútbol, reinterpretados con elegancia y abstracción:

Elemento del fútbol	Traducción visual en SFS
El césped	La paleta de verdes (`field` + `grass`) y los gradientes que evocan la textura del campo
Las líneas del campo	Patrón de fondo sutil con círculo central, arcos y líneas de banda — visible como textura decorativa
El partido nocturno	Fondo oscuro (`#0a0a0a`) que emula la cancha iluminada artificialmente
La red del arco	Sombras suaves con tinte verde y geometrías orgánicas (border-radius amplios)
El movimiento del balón	Animaciones fluidas, transiciones suaves, gradientes direccionales

Imaginería del fútbol

SFS usa imágenes como protagonistas absolutos de cada pantalla. No como decoración — como el centro de la experiencia:

Fotos de canchas reales en máxima calidad, optimizadas para carga rápida en mobile
Imágenes hero que ocupan el viewport completo en la landing y páginas de descubrimiento
Miniaturas nítidas en listados y resultados de búsqueda, con lazy loading y placeholders
Ilustraciones geométricas (abstractas, inspiradas en líneas de campo) para estados vacíos y onboarding

Nunca usar:

Fotos de archivo (stock photography)
Imágenes genéricas de personas jugando sin contexto real
Ilustraciones cartoon o infantiles

Filosofía visual: elegancia, futuro, minimalismo

Tres palabras que definen cada decisión de diseño en SFS:

✨

Elegancia

Gradientes sutiles, sombras con personalidad, tipografía refinada. Nada es cuadrado — todo tiene curva, intención, profundidad.

🔮

Futuro

Glassmorphism, blur effects, transiciones fluidas. La interfaz se siente viva, no estática. El scroll es un gesto, no una acción mecánica.

◻️

Minimalismo

Flujos de usuario mínimos. Un toque = una acción. Sin menús anidados, sin wizard de 7 pasos ni configuraciones que podrían ser defaults inteligentes.

Paleta de colores

El sistema cromático de SFS se construye sobre dos verdes ancla y una escala de grises oscuros. Todo existe en modo oscuro por defecto.

Field

#0a5c2a

Field Light

#0d7234

Grass

#16a34a

Grass Light

#22c55e

Superficies y texto

Background

#0a0a0a

Surface

#141414

Surface Hover

#1c1c1c

Elevated

#1a1a1a

Text

#ededed

Text Muted

#a1a1aa

Text Dim

#71717a

Filosofía del color

Principio	Aplicación
Dark-first	El fondo `#0a0a0a` emula la cancha nocturna. Los acentos verdes resaltan como el césped bajo las luces del estadio.
Dos verdes, un propósito	`field` (`#0a5c2a`) es profundo — fondos, secciones, badges. `grass` (`#16a34a`) es vibrante — CTAs, links, acentos.
Profundidad con gradientes	Las superficies nunca son planas. Un gradiente sutil (`#141414` → `#1a1a1a`) da profundidad sin romper el minimalismo.
Sombras con intención	Las sombras incluyen un tinte verde (`rgba(10, 92, 42, ...)`) que las ancla al tema. No son negras — son del color del campo.

Gradientes

SFS define tres gradientes principales que se usan consistentemente en toda la plataforma:

Gradiente	CSS	Uso
Field	`linear-gradient(135deg, #0a5c2a, #0d7234, #0a5c2a)`	Fondos de sección, badges, headers
Grass	`linear-gradient(135deg, #16a34a, #22c55e)`	Botones primarios, CTAs
Glow	`radial-gradient(ellipse, rgba(22,163,74,0.12), transparent)`	Resplandor decorativo detrás de hero y cards destacadas

Reglas de gradientes

Usar ángulo 135° como default — evoca la diagonal del campo de fútbol.
Nunca más de 3 stops en un gradiente lineal.
Los gradientes radiales (glow) son decorativos, no funcionales. Nunca poner texto sobre ellos.

Tipografía

SFS usa Geist de Vercel como familia tipográfica principal, complementada con Geist Mono para código.

Geist Bold — Títulos

Geist Regular — Cuerpo de texto. Diseñada para legibilidad en pantalla con alturas-x generosas y formas abiertas. Funciona especialmente bien en modo oscuro.

Geist Mono — Código y datos tabulares

Escala tipográfica

Token	Tamaño	Uso
`xs`	12px	Badges, metadatos
`sm`	14px	Texto secundario, labels
`base`	16px	Cuerpo de texto
`lg`	18px	Subtítulos
`xl`	20px	Títulos de sección pequeños
`2xl`	24px	Títulos de sección
`3xl`	30px	Títulos de página
`4xl`	36px	Hero tagline
`5xl`	48px	Reservado para moments especiales

Logo e isotipo

El logotipo de SFS es puramente tipográfico: las tres letras SFS compuestas en Geist Bold. El isotipo es un ⚽ — limpio, universal, instantáneamente reconocible como fútbol.

⚽

SFS

Logotipo + Isotipo

Imagen como protagonista

En SFS, las imágenes mandan. Cada pantalla se diseña alrededor de la imagen, no al revés:

Hero images ocupan el 100% del viewport en mobile. En desktop, 50-60%.
Cards de cancha muestran la foto primero, los datos después.
Listados usan thumbnails grandes (mínimo 80px en mobile) con lazy loading.
Estados vacíos usan ilustraciones geométricas abstractas (no fotos de stock).
Optimización: WebP/AVIF con srcset, blur-up placeholders, carga progresiva.

Tono de voz

SFS habla como un compañero de equipo, no como un manual corporativo.

Principio	Significado
Directo	“Reservá tu cancha”, no “Proceda a efectuar su reserva”.
Cálido	El fútbol es pasión. Cercanía, no formalidad.
Útil	Cada palabra ayuda a completar una tarea.
Neutro	“Administrador” y “Jugador” en la UI, no “dueño”.

Ejemplos

✅ Hacer

“Tu reserva está confirmada para el sábado a las 18:00.”

✅ Hacer

“La cancha ‘La Bombonera’ ya no está disponible. ¿Probamos a las 19:00?”

❌ Evitar

“Se ha producido un error al procesar su solicitud de reserva. Por favor, intente nuevamente.”

Recursos

Archivo	Propósito
`web/src/app/globals.css`	Fuente de verdad para la app (Tailwind `@theme inline`)
`docs/src/styles/custom.css`	Adaptación del DS para Starlight (mismas variables)

Cualquier cambio en paleta, gradientes o tipografía debe reflejarse en todos los archivos relevantes.