Guía de estilo/color
Paleta principal
La paleta central define la base de la marca. Los colores primarios establecen identidad. Los neutrales hacen el trabajo pesado.
La restricción crea impacto.
#f5f5f5
#121212
#1a1a1a
#b3b3b3
#777
#333
#111
#fff
#f7f7f7
#555
#888
#e0e0e0
#ffc700
#ffc700
Colores Funcionales
Los colores funcionales existen para comunicar el estado: éxito, advertencia, error y enfoque. Deben ser instantáneamente reconocibles y usarse de manera consistente.
Nunca reutilice colores funcionales para la decoración.
- Acción primaria
Nombre: Accent Gold
HEXADECIMAL: #FFC700
Función: CTA primario, estados activos, interacciones clave, énfasis, enlaces.
Este es el único color de alta atención en el sistema. - Secundaria/Silenciar
Nombre: Secondary Dark
HEXADECIMAL: #B3B3B3
Función: Texto secundario, elementos de interfaz de usuario de soporte, acciones menos prominentes.
Se utiliza para reducir el peso visual sin eliminar la visibilidad. - Desactivado/Marcador de posición
Nombre: Placeholder Dark
Hex: #777777
Función: Estados inhabilitados, texto marcador de posición, elementos inactivos.
Señal el estado no interactivo o inactivo. - Separador/Estructural
Nombre: Divider Dark
Hex: #2A2A2A (aprox. del tono divisor en la imagen)
Función: Divisores, bordes sutiles, separación estructural.
Proporciona jerarquía sin competir con el contenido.
Proporciones de contraste de accesibilidad
Todas las combinaciones de colores deben cumplir o superar los estándares de accesibilidad. Esto no es opcional.
La accesibilidad es una línea de base, no una característica.
Encabezado
El color del lorem ipsum es amet, consecteur adipiscing elit. Suspenda varios elementos en el elemento tristico de eros. Este curso, mi más oscuro es el color oscuro, el color es nulo, pero commodo me da la vida libre. Aenean faucibus nibh y justo curso de rutrum lorem imperdiet. Sin embargo, no puede ser un riesgo tristico sin riesgo.
Encabezado
El color del lorem ipsum es amet, consecteur adipiscing elit. Suspenda varios elementos en el elemento tristico de eros. Este curso, mi más oscuro es el color oscuro, el color es nulo, pero commodo me da la vida libre. Aenean faucibus nibh y justo curso de rutrum lorem imperdiet. Sin embargo, no puede ser un riesgo tristico sin riesgo.
Marca vs. uso del color de la interfaz de usuario
Los colores de la marca llaman la atención. Los colores de la interfaz de usuario guían el comportamiento. Mezclar los dos crea confusión.
El color de la marca y el color de la interfaz de usuario sirven para diferentes propósitos. No son intercambiables.
El color de la marca comunica identidad.
El color de la interfaz de usuario comunica la función.
Deben permanecer separados.
Uso del color de la marca
El Accent Gold existe para representar a la marca.
Utilícelo para:
- CTAs principales
- Navegación activa
- Momentos clave de énfasis
- Enlaces e interacciones destacadas
El oro debe sentirse intencional y raro. El uso excesivo reduce el impacto.
Nunca use color de marca para elementos estructurales.
Uso del color de la interfaz de usuario
Los tonos neutros potencian la interfaz.
Utilice neutrales para:
- Fondos
- Secciones
- Divisores
- Texto del cuerpo
- Elementos secundarios
- Estados inhabilitados
El color de la interfaz de usuario admite legibilidad y jerarquía.
Nunca debe competir con el énfasis de la marca.
Reglas
- No utilice oro para bloques decorativos.
- No utilice el color de la marca para los estados de error o del sistema.
- No introduzca nuevos colores sin actualizar el sistema.
- Si todo es oro, nada es importante.