Marca
La pitón dibuja la “p” de Pyzed y la reemplaza en el wordmark. El lomo coincide con la altura de x de IBM Plex
Sans y la cola baja como un descendente. Los logos, los iconos de la app y los tokens de color están en
assets/brand; scripts/brand.py los genera todos a
partir de los mismos trazos y colores.
| Archivo | Uso |
|---|---|
pyzed-wordmark.svg, pyzed-wordmark-dark.svg |
El logo principal, sobre fondo claro y oscuro (al menos 72 px de ancho) |
pyzed-design.svg, pyzed-design-dark.svg |
El lockup de Pyzed Design |
pyzed-mark.svg, pyzed-mark-dark.svg |
El isotipo solo, desde 24 px (barras de navegación y de título) |
pyzed-mark-small.svg |
Una silueta sin ojos, para 16 a 20 px |
pyzed-mark-black.svg, pyzed-mark-white.svg |
Una sola tinta |
app-icon.svg, app-icon-dark.svg |
El icono de la app, índigo y grafito |
Deja alrededor del isotipo un margen tan ancho como su cabeza, y no lo estires, gires ni cambies de color fuera de la paleta de abajo.
Superficies grafito en capas, como un editor de código. El índigo es la marca y el ámbar se reserva para LEDs y displays, con el lenguaje de paneles de un rack de audio. El oscuro («Grafito») es el modo por defecto; el claro («Papel») mantiene las mismas jerarquías.
| Token | Grafito (oscuro) | Papel (claro) |
|---|---|---|
| Fondo | #0D0E11 |
#F6F7F9 |
| Superficie | #14161B |
#FFFFFF |
| Panel | #191C22 |
#F1F3F6 |
| Elevado | #222630 |
#E7EAF0 |
| Borde | #2A2F39 |
#DCE0E7 |
| Texto | #E7E9EE |
#14161B |
| Texto secundario | #9AA1AE |
#576070 |
| Índigo | #8B83FF |
#4F46E5 |
| Índigo sólido (botones) | #5B50F0 |
#4F46E5 |
| LED ámbar | #F5A524 |
#F5A524 |
assets/brand/tokens.json tiene todos los tokens, también los del display (LCD), la cuadrícula del lienzo y los
colores de código.
Tipografía
Sección titulada «Tipografía»IBM Plex Sans para todo lo que se lee: titulares 700, subtítulos 600 y texto 400. Es la misma familia que usan los componentes de Pyzed. IBM Plex Mono para código, teclas, etiquetas y antetítulos.
En esta web
Sección titulada «En esta web»- Los colores son variables CSS en
docs/src/styles/custom.css: las--sl-color-*de Starlight más--pz-brand,--pz-surface,--pz-led,--pz-lcdy el resto, para los componentes dedocs/src/components. - El wordmark de la cabecera es
src/components/brand/Wordmark.astro;Mark.astrodibuja el isotipo en línea para que tome el color del texto que lo rodea. Sus trazos se copian descripts/brand.py. - Los bloques de código usan dos temas de Expressive Code hechos con los colores de código de la marca, en
docs/src/styles/code. - El favicon es
assets/brand/favicon.svg;python docs/scripts/gen_og.pydibuja las tarjetas sociales y los iconos PNG a partir del icono de la app.