Color de marca. Símbolo, nombre y fondos principales.
- HEX
- RGB
- HSL
- CMYK ≈
Texto blanco encima: 19,58:1 · negro: 1,07:1
Texto y símbolo sobre fondos claros. Fondo de la versión oscura.
15 · Blanco, negro y luz
Color
Nitente no tiene color. Tiene luz. Todo lo que no es blanco ni negro pertenece a los productos.
La regla de la familia
Nitente usa solo blanco y negro. Cada producto tiene su propio color (Ember, Solar, vinotinto). Nitente nunca toma el color de un producto, y un producto nunca usa el blanco y negro puro como si fuera suyo.
Paleta
Superficies y tarjetas en modo oscuro.
- HEX
- RGB
- HSL
- CMYK ≈
Texto blanco encima: 18,59:1 · negro: 1,13:1
Fondo plano de los íconos de app.
Parte alta del degradado Reflect.
- HEX
- RGB
- HSL
- CMYK ≈
Texto blanco encima: 13,18:1 · negro: 1,59:1
Nunca como color de texto.
Texto secundario y líneas sobre oscuro.
- HEX
- RGB
- HSL
- CMYK ≈
Texto blanco encima: 3,25:1 · negro: 6,46:1
Solo texto de apoyo sobre fondos oscuros.
Superficies claras y fondo del ícono claro.
- HEX
- RGB
- HSL
- CMYK ≈
Texto blanco encima: 1,12:1 · negro: 18,77:1
Fondo de tarjetas y papel.
Color de marca sobre oscuro. La luz.
- HEX
- RGB
- HSL
- CMYK ≈
Texto blanco encima: 1,00:1 · negro: 21,00:1
Símbolo y nombre sobre fondos oscuros.
HEX es el valor de verdad. CMYK es una aproximación sin perfil ICC: hasta imprimir una prueba no es un valor aprobado. No se asigna Pantone sin comparar con el abanico físico.
Proporción de uso
- Negro y grafito 55% Fondos y texto
- Blanco y niebla 38% Fondos y símbolo
- Humo 7% Apoyo
El degradado Reflect
En el ícono de app, el fondo va de #2F3034 arriba a #060607 abajo, con un resplandor blanco al 22 % en el centro y un borde con reflejo. Más oscuro que esto el símbolo gana contraste; más claro, lo pierde.
Contraste
Las combinaciones se verifican contra WCAG 2.2: 4,5:1 para texto normal, 3:1 para texto grande y componentes de interfaz.
| Texto \ Fondo | Negro Nitente | Humo | Niebla | Blanco |
|---|---|---|---|---|
| Negro Nitente | · | 6,03:1 AA | 17,50:1 AAA | 19,58:1 AAA |
| Humo | 6,03:1 AA | · | 2,90:1 No pasa | 3,25:1 Solo grande |
| Niebla | 17,50:1 AAA | 2,90:1 No pasa | · | 1,12:1 No pasa |
| Blanco | 19,58:1 AAA | 3,25:1 Solo grande | 1,12:1 No pasa | · |
Tokens
:root {
--nitente-negro: #0B0C0D;
--nitente-grafito: #121315;
--nitente-grafito-claro: #2F3034;
--nitente-humo: #8A8F98;
--nitente-niebla: #F2F2F3;
--nitente-blanco: #FFFFFF;
}{
"nitente-negro": "#0B0C0D",
"nitente-grafito": "#121315",
"nitente-grafito-claro": "#2F3034",
"nitente-humo": "#8A8F98",
"nitente-niebla": "#F2F2F3",
"nitente-blanco": "#FFFFFF"
}@theme {
--color-nitente-negro: #0B0C0D;
--color-nitente-grafito: #121315;
--color-nitente-grafito-claro: #2F3034;
--color-nitente-humo: #8A8F98;
--color-nitente-niebla: #F2F2F3;
--color-nitente-blanco: #FFFFFF;
}