MarcaBrand
Manual de MarcaBrand Guidelines
El look de ImagineOS se llama Blueprint: papel blanco roto, tinta casi negra, un solo rojo de acento, filetes finos y cifras hechas con datos reales. Es un solo juego de tokens con dos densidades: editorial para los homes y densa para las páginas que cargan datos.
The ImagineOS look is called Blueprint: off-white paper, near-black ink, one red accent, hairline rules and figures made from real data. It is one token set with two densities: editorial for homes and dense for pages that load data.
PrincipiosPrinciples
Papel, tinta, grisesPaper, ink, greys
La página es papel. El texto es tinta o uno de dos grises. Nada más es un color.
The page is paper. Text is ink or one of two greys. Nothing else is a colour.
Un solo rojo, para alertas y énfasisOne red, only for alerts and emphasis
El acento marca lo que está mal o lo que hay que ver: un enlace roto, algo vencido. Si todo es rojo, nada lo es.
The accent marks what is wrong or what must be seen: a broken link, an overdue item. If everything is red, nothing is.
Filetes, no cajasHairlines, not boxes
La estructura sale de líneas de 0,5 a 1 px y del espacio en blanco. Sin sombras, sin esquinas redondeadas, sin degradados, sin rellenos para armar una tarjeta.
Structure comes from 0.5–1 px rules and from whitespace. No shadows, no rounded corners, no gradients, no fills to make a card.
Las cifras son datosFigures are data
Cada gráfica, mapa o número sale de una fuente real. Una figura decorativa es un defecto.
Every chart, map or number is drawn from a real source. A decorative figure is a defect.
Paneles en rejillaPanels in a grid
Las páginas densas son una rejilla de paneles rotulados; las editoriales, una idea por bloque.
Dense pages are a grid of labelled panels; editorial pages are one idea per block.
El contraste no es opcionalContrast is not optional
El gris de rótulos es #666, no #777: #777 sobre el papel mide 4,2:1 y no pasa WCAG AA en texto pequeño.
The label grey is #666, not #777: #777 on the paper measures 4.2:1 and fails WCAG AA for small text.
LogotipoLogo
Monograma cuadrado para favicon/encabezado, y una versión ancha con wordmark para tarjetas de vista previa social.
Square monogram for favicon/header use, and a wide wordmark version for social preview cards.
Paleta de colorColor palette
Siete tokens, los mismos en las dos densidades. Papel, tinta y grises hacen casi toda la página; el rojo ocupa como mucho el 3 % del área.
Seven tokens, the same in both densities. Paper, ink and greys make almost the whole page; red covers at most 3 % of the area.
- paper · #f7f6f2Fondo de todo.Background of everything.
- ink · #111Texto, filetes fuertes, trazos de las figuras.Text, strong rules, figure marks.
- ink-2 · #444Texto de cuerpo en editorial, texto secundario.Body text on editorial, secondary text.
- ink-3 · #666Rótulos y pies de figura (AA sobre el papel).Labels, captions (AA on paper).
- grey · #b4b2aaAnillos exteriores, marcas deshabilitadas.Outer rings, disabled marks.
- rule · #dad8d0Filetes separadores.Hairline separators.
- accent · #c8321eSólo alertas y énfasis; como mucho el 3 % del área.Alerts and emphasis only; at most 3 % of the area.
TipografíaTypography
Dos familias del sistema, sin archivo de fuente y sin CDN: una serif para titulares y cuerpo editorial, y una monoespaciada para rótulos, cifras y pies. En una página densa la monoespaciada es toda la página.
Two system families, with no font file and no CDN: a serif for editorial display and body, and a monospace for labels, figures and captions. On a dense page the monospace is the whole page.
Serif
Construye sin límites.Build without limits.
"Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif
MonoespaciadaMonospace
0123456789
ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace
Dos densidadesTwo densities
La densidad sigue lo que hace la página, no quién la lee. La prueba es una sola pregunta: ¿la página le pide datos al servidor? Un home —la portada pública, el inicio de una sección— es editorial: semiinteractivo con JavaScript sólo del lado del cliente, sin base de datos ni peticiones después de cargar, y se lee también con JavaScript apagado. Una página de datos —listas, tableros, paneles, formularios— es densa.
The density follows what the page does, not who reads it. The test is one question: does the page query the server for data? A home (the public front, the start page of a section) is editorial: semi-interactive with client-side JavaScript only, no database and no request after load, and it still reads with JavaScript off. A data page (lists, boards, panels, forms) is dense.
| MedidaMeasure | Editorial | DensaDense |
|---|---|---|
| TitularesHeadings | Serif 40–96 px | Mono 28 / 20 / 16 px |
| CuerpoBody | Serif 17 px | Mono 14 px |
| RótulosLabels | Mono 12 px | Mono 12 px |
| CifrasFigures | Mono 32–56 px | Mono 32 px |
| EspacioSpacing | 24 · 40 · 64 · 96 px | 8 · 14 · 22 · 32 px |
| ToqueTouch | ≥ 44 px | ≥ 44 px |
Las dos se diseñan primero para un teléfono de 375 px; el escritorio agrega columnas, nunca información que el teléfono no tenga.
Both are designed for a 375 px phone first; desktop adds columns, never information the phone page lacks.
UsoUsage
HazDo
- Separa los bloques con un filete de 1 px o con 64 px de espacio o más.
- Usa el rojo para lo único que está roto o vencido.
- Dibuja las cifras desde el archivo de datos real, con la fuente y la fecha en el pie.
- Escribe los números en monoespaciada con cifras tabulares.
- Mantén los rótulos en 12 px o más en las páginas editoriales.
- Deja las figuras como SVG estático para que la página funcione sin JavaScript.
- Separate blocks with a 1 px rule or 64+ px of space.
- Use red for the one thing that is broken or overdue.
- Draw figures from the real data file, with the source and date in the caption.
- Set numbers in monospace with tabular figures.
- Keep the label size at 12 px or more on editorial pages.
- Bake figures as static SVG so the page works without JS.
No hagasDon’t
- No dibujes una tarjeta con relleno, borde y sombra.
- No uses el rojo como color de marca, de botón o de adorno.
- No uses fotos de banco, ilustraciones ni cifras inventadas.
- No mezcles una segunda familia sans-serif.
- No pongas rótulos de 8 px en una página de cliente.
- No dependas de un script ni de una fuente de red para mostrar contenido.
- Draw a card with a fill, border and shadow.
- Use red as a brand colour, a button colour or a decoration.
- Use stock images, illustrations or invented numbers.
- Mix a second sans-serif family.
- Put 8 px labels on a client page.
- Depend on a script or a network font to show content.