# EGGS Design System — Especificación para agentes
Este archivo es **autosuficiente**. Si lo has leído completo, tienes todo lo
necesario para producir interfaces, portales o presentaciones con la identidad
de EGGS sin consultar nada más.
- **Quién es EGGS:** consultora de innovación, parte de Sopra Steria. Oficinas en Madrid, Valencia y Barcelona.
- **Claim:** Experiencias Inteligentes iX. Impulsadas por tecnología, creadas por (y para) humanos.
- **Contacto:** hola@eggsdesign.es
- **Base URL de assets:** `https://ds.eggsdesign.es`
---
## 0 · Arranque rápido
La vía más fiable: enlaza la hoja canónica y usa los tokens.
```html
```
Eso te da las fuentes Haffer reales, los tokens de color, la escala tipográfica
y las clases utilitarias (`.t-m-title`, `.surface-dark`, `.eggs-modal`…).
Si necesitas un archivo standalone sin dependencias externas, copia el bloque
`:root` de la sección 2 y el `@font-face` de la sección 1.
**Esqueleto mínimo correcto:**
```html
Experiencias Inteligentes iX
```
---
## 1 · Tipografía · Haffer Prototypo
Tres cortes, tres funciones. **No hay más. Nunca uses cursiva.**
| Familia CSS | Corte | Uso | Peso |
|---|---|---|---|
| `var(--font-display)` | Haffer Display | UNA palabra destacada dentro de un título grande | 700 |
| `var(--font-concrete)` | Haffer Concrete | Todos los títulos, navegación, botones, labels | 500 |
| `var(--font-light)` | Haffer Concrete Light | Cuerpo, descripciones, campos de texto, pies | 300 |
Existe un cuarto corte, **Haffer Abstract**, reservado para usos expresivos
puntuales (portadas, gráficos). No lo uses en interfaz.
**La regla de composición:** el título va en Concrete y se levanta *una sola*
palabra a Display. Nunca un título entero en Display. Nunca cuerpo en Concrete.
```html
Experiencias Inteligentes
iX
```
Si necesitas declarar las fuentes tú mismo:
```css
@font-face{font-family:'Haffer Display';src:url('https://ds.eggsdesign.es/fonts/HafferPrototypo-Display.woff2') format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Haffer Concrete';src:url('https://ds.eggsdesign.es/fonts/HafferPrototypo-Concrete.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:'Haffer Concrete Light';src:url('https://ds.eggsdesign.es/fonts/HafferPrototypo-ConcreteLight.woff2') format('woff2');font-weight:200 400;font-display:swap}
@font-face{font-family:'Haffer Abstract';src:url('https://ds.eggsdesign.es/fonts/HafferPrototypo-Abstract.woff2') format('woff2');font-weight:400 700;font-display:swap}
```
### Escala tipográfica
| Token | Tamaño | Familia | Line-height | Tracking |
|---|---|---|---|---|
| `--type-xl-title` | 200px | Concrete | 1.0 | -0.02em |
| `--type-l-title` | 97px | Concrete | 1.05 | -0.015em |
| `--type-m-title` | 64px | Concrete | 1.1 | -0.01em |
| `--type-s-title` | 40px | Concrete | 1.15 | — |
| `--type-xs-title` | 24px | Concrete | 1.3 | — |
| `--type-body-xl` | 24px | Light | 1.3 | — |
| `--type-body` | 20px | Light | 1.45 | — |
| `--type-body-s` | 16px | Light | 1.5 | — |
| `--type-caption` | 14px | Light | 1.45 | +0.01em |
Los titulares de EGGS son deliberadamente **más grandes de lo que dicta la
convención web**. Es la firma del sistema. En hero, no bajes de 96px en desktop.
Mínimos absolutos: 16px en interfaz, 24px en slides 1920×1080, 12pt en impresión.
---
## 2 · Color
Copia este bloque si trabajas sin la hoja canónica:
```css
:root{
/* Principales — la base del sistema */
--color-black:#171717;
--color-white:#ffffff;
--color-warm-white:#f5f0e6; /* "Arena" — el fondo de marca */
/* Secundarios — para diferenciar, dar vida, ilustrar */
--color-human-teal:#26A9AB;
--color-vibrant-indigo:#B0C2FF;
--color-earth:#B8A58B;
--color-spark-green:#D8FD8A;
/* Terciarios — acción y contraste, sobre todo en fondos oscuros */
--color-tertiary-red:#FF6232; /* Rojo-anaranjado — CTA principal */
--color-tertiary-teal:#1E98AA; /* Teal action — CTA secundario */
--color-tertiary-spark:#C5FE4D; /* Spark (Hard) — acento de contraste */
/* Grises */
--color-grey-90:#616161; --color-grey-80:#666666; --color-grey-70:#888888;
--color-grey-50:#CACACA; --color-grey-25:#EDEDED;
/* Radios */
--radius-pill:9999px; --radius-card:16px; --radius-card-lg:24px; --radius-surface:48px;
/* Espaciado (rejilla de 8) */
--s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:32px;
--s-6:48px; --s-7:64px; --s-8:96px; --s-9:120px; --s-10:160px;
/* Motion */
--ease-standard:cubic-bezier(0.65,0,0.35,1);
--dur-micro:200ms; --dur-state:350ms; --dur-reveal:600ms;
}
```
### Cómo se usa cada familia
**Principales (Blanco · Negro · Arena).** Son el 90 % de cualquier composición.
Arena `#F5F0E6` es el fondo por defecto de páginas y superficies largas. El
blanco puro se reserva para tarjetas y campos *sobre* Arena. El negro es
`#171717`, no `#000000`.
**Secundarios.** Para diferenciar datos en infografías, dar energía controlada,
ilustrar. Teal y Earth aportan el lado humano; Indigo y Spark el lado tech.
Úsalos como campos planos grandes, nunca como texto sobre Arena.
**Terciarios.** Colores de acción y contraste. Su sitio natural son los
**fondos oscuros**: sobre negro, un botón Rojo-anaranjado o Spark Hard es la
llamada a la acción. Sobre Arena, prefiere negro o blanco.
**En pausa — NO usar:** el amarillo `#F5C801` y los tres colores de misión
(Human red `#FF7163`, Industrial green `#84E2AE`, Urban purple `#9562F4`).
Sus tokens siguen en la hoja por compatibilidad, pero están retirados.
### Contraste
Texto siempre ≥ 4.5:1 contra su fondo (3:1 sólo a tamaño titular). Sobre los
terciarios usa **siempre tinta negra**, nunca blanca — Spark Hard y
Rojo-anaranjado son demasiado claros para texto blanco. Sobre Teal action
`#1E98AA` sí funciona el blanco.
---
## 3 · Superficies, radios y sombras
Radios permitidos, **sin excepciones**: `9999px` pill (botones, tags, campos),
`16px` tarjeta de contenido, `24px` tarjeta hero / bloque oscuro,
`48px` superficie grande. **Nunca 4, 8 o 12px.** Nunca radios distintos en el
mismo elemento.
Sombras: prácticamente no existen. La elevación se comunica con contraste de
color, no con sombra. Las dos únicas permitidas:
```css
--shadow-flat: 0 3px 3px rgba(0,0,0,0.25); /* bandeja de iconos */
--shadow-modal: 0 24px 64px -12px rgba(23,23,23,0.18); /* modal flotante */
```
Cero degradados. Cero grano. Cero glow. Cero sombras internas.
**Recurso de marca — ventana blanca sobre Arena:** superficie blanca con radio
`24px`, sombra suave, sobre fondo Arena. Es el patrón para modales, tarjetas
destacadas y cualquier superficie de tarea única. Dentro, el icono va sobre una
mancha de color plano (círculo o cuadrado redondeado con uno de los secundarios).
```css
.eggs-modal{
background:#fff;border-radius:24px;padding:40px;
box-shadow:0 24px 64px -12px rgba(23,23,23,.18);
max-width:520px;
}
.eggs-modal .icon-blob{
width:56px;height:56px;border-radius:16px;
background:var(--color-vibrant-indigo);
display:grid;place-items:center;margin-bottom:24px;
}
```
---
## 4 · Botones · el componente firma
Dos piezas separadas en reposo — una pill de texto y un disco con flecha, del
**mismo color** — que **crecen y se unen** en hover formando una sola forma
continua. Dentro del disco, un carril con dos copias del icono se desliza,
creando el efecto de flecha infinita. Es el gesto más reconocible del sistema.
```css
.eggs-filter{
--b-h:60px; --b-h-hover:68px; --b-fill:#fff; --b-ink:#171717; --b-gap:8px;
position:relative;display:inline-flex;align-items:center;height:var(--b-h-hover);
font-family:var(--font-concrete),sans-serif;font-weight:500;font-size:20px;
color:var(--b-ink);cursor:pointer;background:transparent;border:0;padding:0;
gap:var(--b-gap);text-decoration:none;
}
.eggs-filter .pill{
height:var(--b-h);display:flex;align-items:center;padding:0 30px;
background:var(--b-fill);color:var(--b-ink);border-radius:9999px;
line-height:1;letter-spacing:-0.005em;white-space:nowrap;
transition:height .4s var(--ease-standard),padding-right .4s var(--ease-standard),margin-right .4s var(--ease-standard);
}
.eggs-filter .disc{
width:var(--b-h);height:var(--b-h);border-radius:50%;background:var(--b-fill);
overflow:hidden;position:relative;flex:0 0 auto;
transition:width .4s var(--ease-standard),height .4s var(--ease-standard);
}
.eggs-filter:hover .pill{
height:var(--b-h-hover);
padding-right:calc(30px + var(--b-gap) + var(--b-h-hover));
margin-right:calc(-1 * (var(--b-gap) + var(--b-h-hover)));
}
.eggs-filter:hover .disc{width:var(--b-h-hover);height:var(--b-h-hover)}
.eggs-filter .rail{
position:absolute;inset:0;width:200%;height:100%;display:flex;align-items:center;
transform:translateX(-50%);transition:transform .55s var(--ease-standard);
}
.eggs-filter:hover .rail{transform:translateX(0)}
.eggs-filter .rail .ico{flex:0 0 50%;height:100%;display:grid;place-items:center;color:var(--b-ink)}
.eggs-filter .rail .ico svg{width:20px;height:20px;display:block}
/* Variantes */
.eggs-filter.white{--b-fill:#fff;--b-ink:#171717}
.eggs-filter.black{--b-fill:#171717;--b-ink:#F5F0E6}
.eggs-filter.on-dark.white{--b-fill:#F5F0E6;--b-ink:#171717}
.eggs-filter.cta-red{--b-fill:#FF6232;--b-ink:#171717}
.eggs-filter.cta-spark{--b-fill:#C5FE4D;--b-ink:#171717}
.eggs-filter.outline{--b-fill:transparent;--b-ink:#171717}
.eggs-filter.outline .pill,.eggs-filter.outline .disc{box-shadow:inset 0 0 0 1px currentColor}
```
```html
```
**Qué variante usar:** sobre Arena, `black` para la acción principal y `white`
o `outline` para las secundarias. Sobre fondo oscuro, `on-dark white` para la
principal y `cta-red` / `cta-spark` cuando quieras que destaque de verdad.
Existe la variante **sólo círculo** (`.eggs-circle`) para acciones secundarias:
el mismo disco con el mismo hover, sin pill.
---
## 5 · Campos de formulario
Pill de 56px, borde fino, label en Concrete 12px encima. Unificado en toda la
familia: formularios, wizards, modales, filtros y contacto usan este mismo campo.
```css
.eggs-input{
width:100%;height:56px;padding:0 20px;background:#fff;color:#171717;
border:1px solid rgba(23,23,23,.14);border-radius:9999px;
font-family:var(--font-light),sans-serif;font-weight:300;font-size:16px;
line-height:1;outline:none;
transition:border-color .2s var(--ease-standard),box-shadow .2s var(--ease-standard);
}
.eggs-input:hover{border-color:rgba(23,23,23,.3)}
.eggs-input:focus{border-color:#171717;box-shadow:0 0 0 3px rgba(23,23,23,.08)}
.eggs-input[aria-invalid="true"]{border-color:#FF6232}
.eggs-input:disabled{background:#EDEDED;color:#888;border-color:transparent}
textarea.eggs-input{height:auto;min-height:132px;padding:16px 20px;border-radius:24px;line-height:1.5}
label{font-family:var(--font-concrete),sans-serif;font-weight:500;font-size:12px;color:#171717}
```
El error se marca con borde Rojo-anaranjado `#FF6232` más un mensaje del mismo
color en Concrete 12px debajo. Nunca sólo con color: siempre texto.
---
## 6 · Navegación
Cabecera con el logo 2×2 a la izquierda y, a la derecha, un botón `outline`
más el botón **«Menú»**. El primer nivel de navegación vive en un panel
overlay, no en enlaces en línea.
**Cabecera**
- Al cargar, el logo es grande (96 px) y la cabecera alta.
- Al hacer scroll, la cabecera **reduce su altura** y el logo se encoge a
32 px, pero sigue visible y completo. No se oculta nunca.
- Sin subrayados en hover.
**Botón «Menú»**
Pill oscuro con la palabra «Menú» y un **disco de 40 px** a su derecha. El
disco contiene un carril de tres iconos —`X · retícula 2×2 · retícula 2×2`—
de 40 px cada uno, dentro de un contenedor con `overflow:hidden`:
- Reposo: `translateX(-40px)` → se ve la retícula 2×2.
- Hover: `translateX(-80px)` → desliza a la segunda copia de la retícula, lo
que produce el efecto de icono infinito (sale por un lado y entra por otro).
- Panel abierto: `translateX(0)` → se ve la X.
**Panel overlay**
- `position:fixed`, anclado arriba-derecha, `transform-origin:top right`.
- Escala desde esa esquina: `translateX(-50px) translateY(50px) scale(0)` →
`translateX(0) translateY(0) scale(1)`, en 500 ms con la curva del sistema.
- 616 px de ancho y `border-radius:50px` en desktop; pantalla completa y sin
radio por debajo de 640 px.
- Fondo Carbón `#171717`, texto Arena.
- Jerarquía en dos niveles: los destinos principales en Concrete grande
(clamp 36–52 px), los secundarios más pequeños (clamp 22–28 px) separados
con un margen superior.
- Cada ítem lleva una **bolita de 12 px a su izquierda** (`left:-32px`,
`position:absolute`) que entra **desde abajo** (`translateY(30px)` →
`translateY(0)`) en hover, sin desplazar el texto. En el ítem activo se
queda fija y en Spark Hard `#C5FE4D`.
- El botón «Menú» debe quedar **por encima** del panel (`z-index` mayor) para
poder cerrarlo; con el panel abierto la cabecera se vuelve **transparente**
para que el panel se vea por debajo, y el botón `outline` invierte sus
colores a claro sobre oscuro.
- Cierra con `Escape`, al pinchar un enlace, con el scrim o con el propio botón.
- Al pie del panel, un bloque de enlaces sociales con etiqueta en Light 13 px.
---
## 6b · Pie de página
Fondo Carbón `#171717`, texto Arena. Tres bloques en este orden:
1. **CTA** — titular en Concrete (clamp 32–52 px) con un párrafo de apoyo en
Light a su derecha, separado por una línea a 16 % de opacidad.
2. **Columnas** — el logo en blanco ocupando la primera columna, y tres
columnas de enlaces. Cada una con su etiqueta en Light 12 px, mayúsculas y
`letter-spacing:0.08em` en gris `#8f8b83`; los enlaces en Concrete 19 px,
con hover a Spark Hard.
3. **Línea inferior** — contacto a la izquierda, aviso de copyright y la
pertenencia a Sopra Steria a la derecha, en Light 13 px.
---
## 7 · Iconografía
**Phosphor Icons, peso Regular** es el set aprobado para el 95 % de necesidades.
Trazo de 1.5px, un solo color.
```html
```
Existe además un set propio de EGGS con el motivo **puntos que se convierten en
línea** para momentos de marca. Nunca emoji. Nunca glifos Unicode como iconos:
la flecha siempre se dibuja en SVG.
---
## 8 · Layout y composición
- Fondo Arena por defecto. Padding generoso en el primer pliegue: 120–160px.
- Todo alineado a la izquierda. El centrado se reserva para llamadas cortas.
- Navegación mínima, 5–7 enlaces, en frase (no Title Case).
- Rejilla de 8. Padding de tarjeta: `64px 72px` en grandes, `32px` en pequeñas.
- Grupos de elementos hermanos (botones, chips, nav, tarjetas) con
`display:flex` o `grid` + `gap`, nunca márgenes individuales.
- **Fluidez:** salvo formatos fijos (slides, impresión, mockups de dispositivo),
todo debe reflowear. `max-width` en lugar de `width`, tracks `minmax(0,1fr)`,
sin `nowrap` ni altos fijos en cajas con texto.
### Motion
Easing único: `cubic-bezier(0.65,0,0.35,1)`. Duraciones: 200ms micro, 350ms
cambios de estado, 600ms revelados. Entradas con fade + `translateY(16px)`.
**Sin rebotes, sin muelles.** EGGS es medido, no juguetón.
---
## 9 · Voz y contenido
- Frase en minúscula siempre. Lo único en mayúsculas es **EGGS**.
- "Nosotros" para el estudio, "tú" para el lector. En español, tuteo.
- Seguro sin fanfarronear. Curioso sin pasarse de listo. Cálido sin blandura.
- Estructura: un titular corto y rotundo + una frase larga que lo explica.
- Cero emoji. Cifras: uno–nueve en palabra, 10+ en número.
- Sin relleno. Si una sección se siente vacía, es un problema de maquetación,
no un hueco de contenido que rellenar con texto inventado.
---
## 10 · Presentaciones
Para "genérame una presentación con los estilos de EGGS":
- Formato 1920×1080 o 1280×720. Texto nunca por debajo de 24px.
- Máximo 1–2 colores de fondo en todo el deck. Alterna Arena y negro.
- **Sobre fondo negro, el texto va en Arena `#F5F0E6`** — nunca negro.
- Portada: chip + titular enorme en Concrete con una palabra en Display + bajada en Light.
- Separador de sección: campo de color plano con un número y un titular gigante.
- Cita: fondo negro, texto Arena grande, comilla en Spark Hard.
- Datos: números enormes en Concrete sobre Arena, etiqueta en Light debajo.
- Cierre: logo EGGS + claim + hola@eggsdesign.es.
- El logo va arriba a la izquierda en todas las slides menos portada y cierre.
Hay plantillas listas en `https://ds.eggsdesign.es/slides/index.html`.
---
## 11 · Logo
Marca 2×2 con las letras E-G-G-S. Sólo dos archivos aprobados:
- `https://ds.eggsdesign.es/assets/logo-eggs-black.svg` — sobre claro
- `https://ds.eggsdesign.es/assets/logo-eggs-white.svg` — sobre oscuro
Proporción 916.68 × 1041.25 (≈0.88 ancho × 1 alto). Usa **siempre el SVG**.
**Nunca redibujes el monograma con tipografía.** Nunca lo deformes, rotes,
recolorees ni le añadas efectos. Margen libre mínimo alrededor: la altura de
una de sus letras.
---
## 12 · Checklist antes de entregar
1. ¿Fondo Arena y no blanco puro?
2. ¿Títulos en Concrete, cuerpo en Light, y como máximo una palabra en Display?
3. ¿Cero cursivas?
4. ¿Radios sólo 9999 / 16 / 24 / 48?
5. ¿Cero degradados y cero sombras decorativas?
6. ¿Los botones son pill + disco que se unen en hover?
7. ¿Sobre fondo oscuro el texto es Arena, no negro?
8. ¿El logo es el SVG oficial, sin redibujar?
9. ¿Contraste de texto ≥ 4.5:1?
10. ¿Cero emoji y cero datos de relleno?