Versión 1.0 · octubre de 2026
Manual de identidad digital
El emblema, los colores, la tipografía y las piezas con las que la RFETA se presenta en su web y en sus aplicaciones.
Contenido
Índice
Este manual recoge la identidad digital de la RFETA: la que se ve en la web, las aplicaciones, las redes y los documentos en pantalla.
Logotipo
El emblema y el nombre
El emblema oficial acompañado del nombre en dos líneas. Úsalo siempre completo, sin deformarlo, recolorearlo ni añadirle efectos.
Logotipo
Espacio y usos
- Espacio de respeto
- Deja libre alrededor al menos x, la mitad del ancho del emblema. Ningún texto, foto o borde dentro de ese margen.
- Tamaño mínimo en pantalla
- 40 px de alto con el nombre. Por debajo, usa el emblema solo o el icono de aplicación.
Color
Colores principales
El azul RFETA da estructura (pie, cabeceras destacadas, fechas y botones principales); el azul real marca acciones y estados; el oro de diana solo se usa sobre fondos oscuros.
Azul RFETA
night · RGB 13 37 84
Estructura, pie, cabeceras destacadas y botón principal
Texto blanco 14,9:1 · AAA
Azul RFETA claro
night-2 · RGB 22 52 105
Estado activo y hover sobre azul RFETA
Texto blanco 12,1:1 · AAA
Azul RFETA profundo
night-3 · RGB 8 26 61
Fondos de máximo contraste
Texto blanco 17,1:1 · AAA
Azul real
brand · RGB 28 79 209
Enlaces, foco, sección activa e iconos
Texto blanco 6,8:1 · AA
Azul real oscuro
brand-ink · RGB 20 59 163
Hover de enlaces
Texto blanco 9,6:1 · AAA
Azul real suave
brand-soft · RGB 233 239 253
Fondos de iconos y estado seleccionado
Texto tinta 15,3:1 · AAA
Oro de diana
gold · RGB 243 195 60
Acento sobre fondos oscuros: botón, indicador, mes de la fecha
Texto tinta 10,7:1 · AAA
Oro suave
gold-soft · RGB 253 245 220
Avisos de plazo («últimos días»)
Texto tinta 16,2:1 · AAA
Color
Neutros y estado
Neutros
Fondo blanco con bandas «azul niebla»; tintas azuladas en lugar de gris puro.
Tinta #0D1830
ink · RGB 13 24 48 · texto blanco 17,6:1
Titulares y texto principal
Tinta 2 #28344D
ink-2 · RGB 40 52 77 · texto blanco 12,4:1
Texto de lectura
Secundario #5A6680
muted · RGB 90 102 128 · texto blanco 5,8:1
Entradillas, metadatos
Terciario #8792A7
subtle · RGB 135 146 167 · texto tinta 5,6:1
Marcas de agua, iconos inactivos
Línea fuerte #C9D1DD
line-strong · RGB 201 209 221 · texto tinta 11,5:1
Bordes de controles
Línea #E2E7EF
line · RGB 226 231 239 · texto tinta 14,2:1
Separadores
Azul niebla #F2F5FA
paper · RGB 242 245 250 · texto tinta 16,1:1
Bandas, cabeceras de página, rellenos suaves
Blanco #FFFFFF
surface · RGB 255 255 255 · texto tinta 17,6:1
Fondo de página y tarjetas
Estado
Rojo solo para «en directo» y errores; verde para lo abierto o correcto.
En directo #E0252F
live · RGB 224 37 47 · texto blanco 4,7:1
Competición en curso, errores
En directo suave #FDECEE
live-soft · RGB 253 236 238 · texto tinta 15,5:1
Fondo de aviso de cancelación
Correcto #1F8A4C
ok · RGB 31 138 76 · texto blanco 4,4:1
Inscripción abierta, confirmaciones
Color
Diana y divisiones
Colores con significado: la diana para puntuaciones y cada división (tipo de arco) con su color. Nunca como decoración.
Diana · oro (10-9) #FFE14D
ring-gold · RGB 255 225 77 · texto tinta 13,5:1
Puntuación 10, 9 y X
Diana · rojo (8-7) #F0444C
ring-red · RGB 240 68 76 · texto tinta 4,7:1
Puntuación 8 y 7
Diana · azul (6-5) #27A9E1
ring-blue · RGB 39 169 225 · texto tinta 6,6:1
Puntuación 6 y 5
Diana · negro (4-3) #222831
ring-black · RGB 34 40 49 · texto blanco 14,8:1
Puntuación 4 y 3
Recurvo #1C4FD1
div-r · RGB 28 79 209 · texto blanco 6,8:1
División recurvo
Compuesto #0F8A6A
div-c · RGB 15 138 106 · texto blanco 4,3:1
División compuesto
Arco desnudo #8A5A12
div-b · RGB 138 90 18 · texto blanco 5,9:1
División desnudo
Longbow #7B3FA0
div-l · RGB 123 63 160 · texto blanco 6,9:1
División longbow
Tradicional #B23A2B
div-t · RGB 178 58 43 · texto blanco 5,9:1
División tradicional
Medalla de oro #C69A2E
medal-gold · RGB 198 154 46 · texto tinta 6,8:1
Primer puesto
Medalla de plata #9AA3AD
medal-silver · RGB 154 163 173 · texto tinta 6,9:1
Segundo puesto
Medalla de bronce #B06B3F
medal-bronze · RGB 176 107 63 · texto tinta 4,2:1
Tercer puesto
Tipografía
Geist
Una sola familia, moderna y limpia, para titulares, texto y cifras. Google Fonts (licencia SIL Open Font License).
- Regular 400Campeonato de España de Sala
- Medium 500Campeonato de España de Sala
- Semibold 600Campeonato de España de Sala
- Bold 700Campeonato de España de Sala
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
0123456789 áéíóúü ¿? ¡! € · – «»
Web: Google Fonts · Apps con Expo: @expo-google-fonts/geist · Sin fuente disponible: system-ui.
Tipografía
Escala
Tamaños en escritorio y móvil. Titulares en 700 con interletraje cerrado; cifras siempre tabulares.
Titular de portada
78 / 42 px · 700 · -0.04 em
Yankton reúne a los mejores del 3D
Titular de página
68 / 44 px · 700 · -0.04 em
Calendario de competiciones
Título de sección
42 / 30 px · 700 · -0.04 em
Próximas competiciones
Titular de tarjeta
20 / 18 px · 600 · -0.02 em
Campeonato de España de Sala
Entradilla
19 / 17 px · 400 · 0 em
Toda la documentación oficial en un solo buscador.
Texto
17 / 16 px · 400 · 0 em
Los clubes organizan cursos de iniciación y prestan el material.
Texto pequeño
15 / 14 px · 400 · 0 em
Complejo Deportivo de Cantarranas · Madrid
Rótulo
12 / 12 px · 600 · 0.14 em
Team España
Cifra deportiva (tabular)
32 / 30 px · 700 · -0.035 em
31 · 1440 · 9,56
Componentes
Piezas que se repiten
Botones de esquina suave, fechas de competición en matriz azul, estados con significado y tarjetas sin filete.
Botones
Altura 44–48 px, radio 12 px, texto 15 px semibold. El oro solo sobre azul RFETA.
Estados de competición
Diana (puntuación)
Fecha de competición
La matriz azul con el mes en oro identifica las fechas en el calendario, las fichas y la portada.
Tarjeta
Fondo blanco, radio 20 px y sombra suave en reposo; al pasar el ratón sube 2 px y la sombra crece. Sin bordes ni filetes de color.
Forma y movimiento
Radios, sombras y animación
Radios
- 7 pxEtiquetas de estado
- 10 pxFiltros, chips, campos pequeños
- 12 pxBotones y campos
- 20 pxTarjetas
- 28 pxFotos destacadas y paneles
Sombras
- shadow-softTarjetas en reposo
- shadow-liftTarjetas al pasar el ratón, elementos flotantes
Sombras teñidas de azul RFETA, nunca negras.
Movimiento
cubic-bezier(0.22, 1, 0.36, 1)
- quick120 ms
- base200 ms
- page240 ms
- enter420 ms
- hero560 ms
- carousel8000 ms
- Fundidos cortos con salida suave
- Desplazamientos de 6 px como máximo
- Sin rebotes, zoom, parallax ni bucles (salvo el punto de «en directo»)
- Respetar «reducir movimiento» del sistema
Apps y desarrollo
Tokens de diseño
Colores, tipografía, radios, sombras y tiempos de animación en ficheros listos para usar. Son los mismos valores de la web.
- rfeta-tokens.jsonFormato estándar de tokens (W3C Design Tokens). Para Figma, Style Dictionary o cualquier plataforma.
- tokens.tsTema para React Native / Expo:
colors,fonts,type,radius,shadowsymotion. - Emblema e iconoPNG transparente del emblema e icono de aplicación de 512 × 512 px.
// Expo · npx expo install @expo-google-fonts/geist expo-font
import { useFonts, Geist_400Regular, Geist_500Medium,
Geist_600SemiBold, Geist_700Bold } from '@expo-google-fonts/geist'
import { colors, type } from './tokens'
<Text style={[type.headline, { color: colors.ink }]}>
Campeonato de España
</Text>