Your library starts empty. Inspiration does not.

# Rediseño de home · Multiverse Computing: criterio.md

> The design system of this project as decided so far. Follow the decided areas; where an area is open, ask before inventing.

**criterio.design** · 2026-10-11

## How to use this file

> For the agent that reads this file: what binds, what guides, and what to do when they clash.

1. **Required.** The brand's values, where the file has them (the palette and its hex codes, the typefaces, the type scale, the Tokens section), and every Never line. They are marked `(required)`, as in `**Never** (required):`. Use the values exactly as written: the brand's are the only hex codes and families allowed. Never invent a shade between two of the palette's; for a tint, use one of its hex codes with opacity. In `font-family`, the brand's family is followed only by a generic one (`sans-serif`, `monospace`), never another named family. Never break a Never line.
2. **Direction.** Each area's decision. Follow it and adapt it to the task; never contradict it. A value a decision names (a hex, a family, a size) is used as written. A decision the team made outranks one proposed from the board.
3. **Guidance.** The references under each area, marked `**References (n)** (guidance):`, and the References at the end are inspiration to read the intent from, never something to copy: not their layout, copy, images or logos. What a reference lists as Measured describes that reference: it is not the palette or the typefaces. No reference is the brand.
4. **Open or not covered.** Where an area is open, or the file says nothing about what you need, ask the person. Never fill the gap with a default.
5. **Conflicts.** Never lines, then the brand's values, then a decision the team made, then a proposed one, then the references. Tell the person about the clash.

## The project

Rediseño a ciegas de la home de una empresa de deep tech para presentar al cliente: su copy y su marca, con un nivel de diseño y de detalle que hoy no tiene. Cinco días y 31 entregas con IA.

## In one paragraph

Home de una empresa de compresión de modelos de IA, en un solo tema oscuro. Schibsted Grotesk para todo el texto y JetBrains Mono, la de su propia web, para cifras y etiquetas. Un rojo que marca una sola cosa por escena. Ritmo por fondos alternos y hairlines, dos radios y ninguno más. Ilustraciones isométricas dibujadas por código, con material y sin juguete. Y un movimiento que llega y se para: gravedad sin rebotes, nada en bucle, hover solo donde hay acción.

## Typography

Schibsted Grotesk 400, 500 y 600, con itálica 400, para todo el texto. JetBrains Mono 400 y 500 para cifras, kickers, etiquetas y specs. Titulares en caja baja, también los que el cliente escribe en caja alta. text-wrap balance en escritorio y pretty por debajo de 720px; tabular-nums en cifras.

**Why:** La mono es la que usa la web real de Multiverse, leída de sus hojas de estilo: la marca del cliente manda sobre el gusto.

**Never** (required):
- Inter, Roboto, Arial o Space Grotesk por defecto
- Una mono que no sea la de la marca del cliente

- **Decided by the team**
- **References (3)** (guidance):
  - [Multiverse Computing](https://multiversecomputing.com). Take: La web del cliente. Manda en copy, logo, fuentes y cifras: el titular y el cierre se toman literales.
  - [Schibsted Grotesk](https://fonts.google.com/specimen/Schibsted+Grotesk). Take: La fuente de todo el texto, en 400, 500 y 600 con itálica 400. Titulares en caja baja.
  - [JetBrains Mono](https://www.jetbrains.com/lp/mono/). Take: La mono de la web del propio cliente: para cifras, kickers, etiquetas y specs, con tabular-nums.

## Color

Un solo tema, oscuro. Fondos #15181C, #1B1F24, #22272D y #2A3037; tinta #F8FAFC, #C9CED5 y #8E959E; líneas en tinta al 12 y al 22 %. Rojo #F01438 para rellenos y reglas, #FF5C77 para texto y rgba(240,20,56,.14) para fondos teñidos. Logos de clientes en tinta monocroma.

**Why:** Si todo es rojo, nada es rojo: el rojo marca una cosa por escena, el modelo.

**Never** (required):
- Un segundo tema
- Un footer de otro color que la página
- Fotos de prensa o de stock fuera de paleta
- Retratos en el rojo de marca: van en los grises de la página, techo #A6ADB5

- **Decided by the team**
- **References (2)** (guidance):
  - [Multiverse · rediseño](https://multiversecomputing.treseiscero.app). Take: Donde acabó el trabajo tras 31 entregas: un tema oscuro, dos radios, una firma de movimiento por sección.
  - [Linear](https://linear.app). Take: Un solo tema oscuro hecho de grises fríos escalonados y hairlines: el mismo ritmo de fondos alternos.

## Layout

Ancho máximo 1440px y gutter clamp(20px, 4vw, 64px). El ritmo lo dan dos fondos alternando por secciones, con hairline arriba y abajo de las elevadas. Dos radios: 6px para toda caja y control, 2px para marcas pequeñas. Las rejillas de información son una hoja: celdas unidas, cantos rectos, divisiones dashed que sobresalen. Una sola sección centrada, como ruptura. Altos en dvh o lvh, nunca vh.

**Why:** Ocho radios distintos en una página fue el olor de una web sin sistema.

**Never** (required):
- Tarjetas SaaS separadas con gap donde la información es una rejilla
- Píxeles fijos para algo que sangra fuera del gutter
- Interpolar hacia auto (flex-basis, height, width)
- Clases en el marcado sin regla CSS detrás, o id duplicados

- **Decided by the team**
- **References (4)** (guidance):
  - [Multiverse · rediseño](https://multiversecomputing.treseiscero.app). Take: Donde acabó el trabajo tras 31 entregas: un tema oscuro, dos radios, una firma de movimiento por sección.
  - [Mistral AI](https://mistral.ai). Take: Andoni pasó tres capturas de su sección de bloques: rejilla de celdas unidas y cantos rectos, como una hoja.
  - [Linear](https://linear.app). Take: Un solo tema oscuro hecho de grises fríos escalonados y hairlines: el mismo ritmo de fondos alternos.
  - [SandboxAQ](https://www.sandboxaq.com). Take: Deep tech de IA y cuántica contada con cifras y sin épica, el registro que pide el copy.

## Motion & interaction

Una firma por sección, no un fade-up uniforme. Lo que pesa cae con gravedad (power2.in) y lo de debajo cede 3,2px y vuelve. Las ilustraciones se dibujan al entrar, contorno y luego color, y se quedan quietas; una animación de datos pasa una vez y para. Hover solo donde hay acción: el CTA primario cierra cinco barras a tres en 180ms y revela puntos en 24px junto al cursor, con un pulso de 1,05s desde el punto por el que entras. Elegir una pestaña o un testimonio es un click. Todo lo infinito va en transform u opacity y se pausa fuera de pantalla.

**Why:** Los rebotes le quitan seriedad a una empresa de deep tech; el movimiento llega y se para.

**Never** (required):
- Rebotes de cualquier tipo: elastic, back, overshoot, squash-and-stretch
- Caídas con ease-out cuando se pide peso: frenan como una pluma
- Bucles decorativos, incluida una línea de escaneo
- Hover en lo que no se pulsa o en lo que ya está abierto
- Cambiar el color del CTA al hover, o icono en los CTA secundarios
- Animar box-shadow o left en bucle

- **Decided by the team**
- **References (2)** (guidance):
  - [Multiverse · rediseño](https://multiversecomputing.treseiscero.app). Take: Donde acabó el trabajo tras 31 entregas: un tema oscuro, dos radios, una firma de movimiento por sección.
  - [GSAP Eases](https://gsap.com/docs/v3/Eases/). Take: El visor de curvas: power2.in para lo que cae con gravedad, y lo de debajo que cede 3,2px y vuelve.

## Iconography

Nada de iconos de stock. Cada producto lleva su símbolo real, recortado de su propio logotipo; cada sector, su icono propio. Flechas y chevrons de la marca, no genéricos.

**Why:** Un glifo inventado para un producto que ya tiene logo en la página es lo primero que el cliente detecta.

**Never** (required):
- Glifos inventados para un producto que ya tiene logotipo
- El mismo icono en todas las piezas de un bloque
- Iconos genéricos en un círculo gris como única ilustración

- **Decided by the team**
- **References (1)** (guidance):
  - [IBM Design Language · iconos](https://www.ibm.com/design/language/iconography/ui-icons/). Take: Iconos con reglas propias de trazo y retícula. Aquí ni eso: cada producto lleva su símbolo real recortado de su logotipo.

## Logo

El isotipo real, en su variante de 9 bandas, impreso en la tapa del modelo en cada ilustración. El footer termina en el logo real, no en piezas que se le parecen. Logo del nav a 52px sin mover la altura del header. Logos de clientes igualados por tinta medida, no por caja.

**Why:** Donde va la marca va la marca.

**Never** (required):
- Barras que imitan el isotipo
- El isotipo completo a tamaño pequeño: sus franjas bajan del píxel

- **Decided by the team**
- **References (1)** (guidance):
  - [Multiverse Computing](https://multiversecomputing.com). Take: La web del cliente. Manda en copy, logo, fuentes y cifras: el titular y el cierre se toman literales.

## Imagery

Quince ilustraciones isométricas dibujadas por código, en unidades de mundo, cada una con una línea de lo que afirma y ningún sujeto repetido. Material: una sola luz arriba a la izquierda, degradado por cara, cantos en sombra de su propia cara, sombra de contacto, reflejo del rojo sobre la placa y barrido especular. Retratos del equipo en rampa gris a 180px y opacidad plena.

**Why:** «Parece de juguete» siempre significa que falta material, no que sobra.

**Never** (required):
- Caras planas de un color con contorno negro de 1px
- Ilustraciones como dibujo de líneas
- Dos ilustraciones que cuentan lo mismo con el mismo objeto
- Retratos «a trazo» hechos por código cuando la referencia es una pintura

- **Decided by the team**
- **References (1)** (guidance):
  - [Mistral AI](https://mistral.ai). Take: Andoni pasó tres capturas de su sección de bloques: rejilla de celdas unidas y cantos rectos, como una hoja.

## Voice and tone

El copy es del cliente: titular principal, cierre y frases de posicionamiento, literales de su web actual. Titulares nuevos solo en las secciones que no tenían. Cifras de sus notas de prensa. Un estado se cuenta de una sola manera.

**Why:** Si el cliente ve copy nuevo, deja de mirar el diseño; cambiar su posicionamiento es una decisión estratégica que no nos toca.

**Never** (required):
- Fechas o cifras inventadas
- Un producto «coming soon» en un sitio y «early access» en otro

- **Decided by the team**
- **References (3)** (guidance):
  - [Multiverse Computing](https://multiversecomputing.com). Take: La web del cliente. Manda en copy, logo, fuentes y cifras: el titular y el cierre se toman literales.
  - [SandboxAQ](https://www.sandboxaq.com). Take: Deep tech de IA y cuántica contada con cifras y sin épica, el registro que pide el copy.
  - [Quantinuum](https://www.quantinuum.com). Take: Copy técnico de cuántica que se lee: frases de posicionamiento cortas, una idea por bloque.