Sistema de diseño · v3
Componentes de Boffmedia
Gráfica de retransmisión aplicada a producto: cortes diagonales, datos en mono, naranja de marca como señal en directo. Todo lo de esta página son los componentes reales del kit.
6 ámbitos · 27 capítulos · 138 secciones — navega por ámbito o pulsa / para buscar
Color
Grafito profundo con paneles de acero y un único acento: el naranja Boffmedia. Los tonos semánticos se reservan para estado, nunca para decorar.
Paleta
tokens.cssFondo--bg
Panel--panel
Línea--line
Texto--text
Atenuado--muted
Naranja--accent
OK--ok
Aviso--warn
Error--bad
Info--info
Temas
data-theme="dark"data-theme="light"← cambia con el interruptor de la barra
Oscuro es nativo. El claro conserva la barra superior negra de retransmisión y oscurece el naranja para contraste AA.
Tipografía
Tres voces: Saira Condensed Italic para titulares (la voz de la señal), Saira para lectura e IBM Plex Mono para datos, etiquetas y todo lo operativo.
Escala
Saira Condensed · Saira · IBM Plex MonoDisplay / 800 italic / 72–148pxSeñal en directo
Título / 800 italic / 42–64pxEventos & Ranking
Subtítulo / 700 / 19–26px
Torneo Pixelmon Wingull 2
Cuerpo / Saira 400 / 15–17pxSumérgete en experiencias inmersivas y forma parte de una comunidad apasionada.
Dato / Mono 500–600 / 10–15pxTorneo · Servidor Wingull · 96 plazas
Kicker
<Kicker>Comunidad en acciónProducto destacado · Próximamente
Geometría
Nada de radios: la firma es el corte diagonal. Tres cortes fijos y una barra de acento de 4px. El corte siempre cae hacia la derecha, como un banner de retransmisión.
Cortes
.cut · .cut-tag · .cut-cornerCUT 10px
TAG 8px
CORNER 16px
BARRA 4px
Espaciado
ritmo 4px4px · micro
8px · chip
16px · grupo
24px · tarjeta
40px · bloque
84px · sección
01 / 27