Identidad
Manual de marca
Cómo se ve, cómo habla y cómo se construye Se fue la luz. Esta página usa los mismos componentes y colores que el sitio: si algo cambia acá, cambia en todos lados. La versión completa para el equipo está en docs/MANUAL_DE_MARCA.md.
01
Esencia
Propósito. Que cualquier persona sepa, en segundos y con datos verificables, si es probable que se corte la luz en su zona y qué está pasando con la red eléctrica.
Posición. Somos un servicio público independiente: claro como un parte meteorológico, preciso como un informe técnico. No somos un organismo oficial y no lo parecemos.
Por qué sobrio. Se usa cuando hay calor, tormenta o un corte: gente preocupada, a veces con poca batería. El diseño baja la ansiedad, prioriza la información y no dramatiza. El color se reserva para el estado del riesgo.
Personalidad
- Sobria
- no dramatiza
- Precisa
- cita sus fuentes
- Cercana
- habla de vos
- Honesta
- dice lo que no sabe
02
Logo
Símbolo: mínimo 16 px
El símbolo es un medidor con la aguja hacia el riesgo: lo que hace el sitio, medir la red y estimar el riesgo de corte. El nombre va en una sola palabra, como el dominio, con «luz» en Azul red. El símbolo va en Azul red sobre fondo claro o en blanco sobre Azul red, con un área de resguardo igual al diámetro del eje a cada lado.
- SÍSímbolo + nombre en una palabra y en minúsculas: «sefuelaluz».
- SÍSímbolo solo en favicon, íconos de app y espacios chicos.
- NOBrillos, sombras de neón, degradados o contornos.
- NOEl nombre en mayúsculas, separado en palabras o con otra parte en color.
- NORotar, deformar, cambiar el grosor del trazo o mover la aguja.
- NOReemplazar el símbolo por un rayo o una lamparita.
03
Color
Una base neutra cálida, un único color de marca y tres colores de estado que significan siempre lo mismo. Cada tono tiene su versión para el tema oscuro, ajustada aparte (no es una inversión). Todos los textos superan un contraste de 4,5:1.
Neutros
Papel
bg · #F6F5F1 / #0E1013
Fondo de la página.
Blanco
surface · #FFFFFF / #15181D
Tarjetas, paneles y diálogos.
Hueso
sunken · #EFEEE9 / #1C2027
Áreas hundidas: estados vacíos, pestaña activa, cajas de nota.
Línea
line · #E0DED8 / #2B3038
Bordes y divisores de 1 px.
Línea fuerte
line-strong · #C7C4BC / #3F4650
Bordes de campos y botones secundarios.
Tinta
ink · #15171A / #ECEDEE
Títulos, cifras y texto principal. Color del logo.
Grafito
ink-2 · #454A52 / #B6BBC2
Texto de cuerpo y descripciones.
Niebla
ink-3 · #676C74 / #8B919A
Rótulos, ayudas, fechas y metadatos.
Marca
Azul red
accent · #1D4F91 / #86AEEA
Único color de marca: acciones principales, enlaces, foco y la serie de datos de los gráficos.
Estado
Normal
ok · #1E6B4A / #5DBE8F
Riesgo normal, con suministro, luz restaurada.
Alerta
warn · #8F5300 / #E3A649
Riesgo elevado, avisos del SMN, factores en aumento.
Crítico
crit · #B3261E / #F07A6E
Riesgo crítico, cortes, corte masivo.
- SÍLos colores de estado solo para estado, y siempre acompañados de ícono y texto.
- SÍEl azul red para acciones y para la serie de datos de los gráficos.
- NOUsar rojo o verde para decorar, o el ámbar como color de marca.
- NOEscribir colores en hexadecimal en los componentes: siempre los tokens.
04
Tipografía
IBM Plex Sans para todo el texto y las cifras, e IBM Plex Mono para rótulos y datos técnicos. Es una familia de origen industrial, con números claros, licencia libre (SIL OFL) y alojada en el propio sitio, sin Google Fonts.
Titular
40 px · Semibold 600 · interlineado 1,15 · tracking −2%
Riesgo normal de cortes en Caballito
Cifra principal
48 px · Semibold 600 · tracking −2%
15.416 MW
Título de página
32-36 px · Semibold 600
Política de privacidad
Título de sección
20 px · Semibold 600 · tracking −1%
Reportes de vecinos
Cuerpo
15-16 px · Regular 400 · interlineado 1,6
Probabilidad estimada de quedarte sin luz según la demanda nacional.
Secundario
13-14 px · Regular 400
Actualizado 00:44 · Fuente: CAMMESA
Rótulo
IBM Plex Mono 11 px · Medium 500 · mayúsculas · tracking +8%
Demanda nacional · SADI
05
Iconografía
Íconos de línea de la familia Lucide, a 16 px (20 px en espacios amplios), del color del texto que acompañan. Un ícono nunca va solo: siempre con texto o con una etiqueta accesible. No se usan emojis en la interfaz, en las notificaciones ni en los textos para compartir.
06
Componentes
Botones
Uno solo primario por vista. El rojo, solo para reportar un corte (el botón y la confirmación).
Estados
Normal de 0 a 3, Alerta de 4 a 6 y Crítico de 7 a 10. Siempre ícono, texto y color juntos.
Campos
Alto de 40 px, borde Línea fuerte y foco con el azul red.
Datos
- Distribuidora
- Edesur
- Temperatura
- 21,4 °C
07
Datos y gráficos
- Una sola cifra principal por panel, grande y sin efectos.
- Líneas de 2 px en azul red, con un relleno al 10%. Grilla de 1 px en Línea, nunca punteada. Nunca dos ejes verticales.
- Al pasar el cursor, una línea guía y el valor exacto. Etiquetas solo donde aportan (el último dato, el máximo).
- Los medidores llevan la severidad en el relleno; el riel es un paso tenue del mismo tono.
- Siempre la fuente y la hora del dato.
08
Redacción
- SÍEspañol rioplatense, con vos: «Usá tu ubicación».
- SÍFrases cortas, en sentence case; mayúsculas solo en los rótulos.
- SÍCifras en formato argentino: 15.416 MW, 0,2%, 21 °C, 00:44.
- SÍDecir de dónde sale el dato y cuán seguro es.
- NOSignos de exclamación, emojis o alarmismo («¡EMERGENCIA!»).
- NOJerga técnica sin explicar («SADI» va con «sistema nacional»).
SÍ Riesgo elevado de cortes en Caballito. Hay ráfagas de 70 km/h previstas para las 18 h.
NO ¡¡ALERTA!! Se viene un APAGÓN en Caballito
09
Accesibilidad
- Contraste mínimo de 4,5:1 para texto y de 3:1 para elementos gráficos, en los dos temas.
- El color nunca es la única señal: estados con ícono y texto, gráficos con rótulo.
- Foco visible en todos los controles, diálogos que se cierran con Escape y animaciones lentas, sin destellos rápidos.
- Todo se puede usar desde un celular de 360 px de ancho.