# EGGS · Sistema de Diseño > EGGS es una consultora de innovación, parte de Sopra Steria. **Experiencias Inteligentes iX. Impulsadas por tecnología, creadas por (y para) humanos.** Cruzando estrategia, diseño y tecnología, creamos productos, servicios, marcas y modelos de negocio que convierten la inteligencia en cambio real. Este es el sistema de diseño que captura la identidad visual de EGGS, listo para que cualquier persona o agente lo use al construir slides, decks, mocks, prototipos, webs o plantillas de propuesta. --- ## Fuentes - **Figma — EGGS BRAND CENTER**. La página canónica de marca es `/Page-2` (Intro, Typography, Color, Buttons, Cards, Iconografía, Illustrations, Logos). El resto de páginas (Page-1, SHAREPOINT, Para-Ofertas, APPLE, FOTOS) son working pages que sólo se han usado como contexto. - **Guía antigua de marca:** https://eggs.anti.guide/brand-guidelines - **Logos oficiales:** monograma 2×2 EGGS entregado por el equipo de marca — `assets/logo-eggs-black.svg` / `.png` (negro sobre claro) y `assets/logo-eggs-white.svg` / `.png` (blanco sobre oscuro). **Usa siempre el SVG** cuando puedas; los PNG son fallback raster. Aspect ratio del archivo: 916.68 × 1041.25 (≈ 0.88 × 1). Estos son los **únicos archivos de logo aprobados** — nunca redibujes el monograma con tipografía. - **Web oficial:** https://www.eggsdesign.com — fuente canónica de tono, claim y copy de marketing. - **Decisiones recientes del equipo:** la paleta primaria actual es **Negro + Blanco + Arena** `#F5F0E6`. El amarillo `#F5C801` y los tres colores de Misión (Human red, Industrial green, Urban purple) están **PAUSADOS** — sus tokens siguen en el CSS pero no se usan en ningún componente activo. El claim actual es **"Experiencias Inteligentes iX. Impulsadas por tecnología, creadas por (y para) humanos."** - **Tipografía:** la marca usa **Haffer Prototypo** en tres pesos — **Display** (palabras destacadas dentro de títulos grandes), **Concrete** (todos los títulos, topbar, botones, labels), **Concrete Light** (cuerpo, descripciones, campos de texto). Las tres fuentes están auto-hospedadas en `/fonts` (woff2 + woff + ttf, más otf máster). Sin dependencia de Google Fonts. Variables CSS: `--font-display`, `--font-concrete`, `--font-light`. ## Qué contiene el sistema ``` / ├── README.md ← este documento ├── SKILL.md ← entry point del Skill ├── colors_and_type.css ← variables CSS + tokens semánticos ├── index.html ← landing del sistema (lista los assets) ├── assets/ ← logos, iconos, imágenes de marca ├── fonts/ ← Haffer Prototypo (Display, Concrete, Concrete Light) ├── preview/ ← preview cards mostradas en el Design System tab ├── ui_kits/ │ ├── website/ ← recreación del marketing site │ └── apps/ ← patrones de app: form, wizard, ficha detalle ├── templates/ │ ├── propuesta/ ← deck 16:9 de propuesta (9 slides) │ ├── one-pager/ ← resumen ejecutivo A4 │ └── documento/ ← documento largo imprimible └── slides/ ← plantillas 16:9 para propuestas y pitches ``` --- ## Fundamentos de contenido **Voz.** EGGS escribe como un estudio que conversa de tú a tú, no como un proveedor vendiéndole a un cliente. Frases cortas, declarativas, humanas. El claim actual — *"Experiencias Inteligentes iX. Impulsadas por tecnología, creadas por (y para) humanos."* — marca el ritmo: titular nominal con **iX** como énfasis propietario, seguido de una coletilla que humaniza la tecnología. Siempre van juntos; nunca el titular sin la coletilla. **Mayúsculas.** Sentence case en todo. Lo único que va en mayúsculas siempre es la propia palabra **EGGS** (la marca se estiliza como monograma 2×2). Etiquetas de sección, botones, navegación — todo en sentence case. Sin Títulos Tipo Capitalizado Comercial. **Pronombres.** "Nosotros" para el estudio, "tú" para el lector. Colectivo, invitando. Evita "nosotros vs. ellos". **Tono.** - **Confiados, no arrogantes.** "Creamos cambio real" — nunca "líder del sector" ni "best-in-class". - **Curiosos, no listillos.** Lenguaje plano antes que juegos de palabras. - **Cálidos, no blandos.** Entusiasmo, nunca cursilería. - **Con propósito.** Escribimos como si el trabajo tuviera consecuencias. **Forma de frase.** Combina una apertura corta y rotunda con una explicación más larga que la sostenga. > *"Diseñamos para que la innovación ocurra. No por accidente, sino por método."* Un sintagma nominal de titular. Después una frase que lo justifica. **Bilingüe.** EGGS opera entre noruego, inglés y español (herencia Sopra Steria España + Noruega). El copy debe sonar natural en cada idioma — nunca traducción mecánica. El español usa el registro de tuteo, no de usted. **Emoji.** No se usa. Los iconos hacen el trabajo que en otros sitios harían los emoji. **Numerales.** Cero a nueve en letra, 10 en adelante en cifra. Porcentajes con espacio antes del símbolo (`75 %`) en español/noruego; sin espacio (`75%`) en inglés. --- ## Fundamentos visuales ### Color La paleta gira en torno a **tres anclas primarias** (Negro, Blanco, Arena). Una pequeña **paleta secundaria** aporta variación: Human Teal, Vibrant Indigo, Earth, Spark Green. El amarillo y los tres colores de misión están **PAUSADOS** — sus tokens siguen disponibles en `colors_and_type.css` para que puedan volver sin retocar código. - **Anclas primarias:** Negro `#171717`, Blanco `#FFFFFF`, Arena / Warm White `#F5F0E6`. Estos tres sostienen todo el sistema. - **Paleta secundaria:** Human Teal `#26A9AB`, Vibrant Indigo `#B0C2FF`, Earth `#B8A58B`, Spark `#D8FD8A`. Para variación, hovers y bloques de caso. - **Colores terciarios:** Rojo-anaranjado `#FF6232`, Teal action `#1E98AA`, Spark (Hard) `#C5FE4D`. Reservados para CTAs y momentos de contraste sobre fondos oscuros — nunca como fondos extensos ni como color de marca general. - **Grises:** cinco escalones — Grey 90 `#616161`, Grey 80 `#666666`, Grey 70 `#888888`, Grey 50 `#CACACA`, Grey 25 `#EDEDED`. - **PAUSADOS:** Spark Yellow `#F5C801`, Human Red `#FF7163`, Industrial Green `#84E2AE`, Urban Purple `#9562F4`. No usar hasta que se reactiven. Tokens en `colors_and_type.css`. ### Tipografía **Haffer Prototypo** en tres roles distintos: | Familia | Peso | Rol | Ejemplo | |---|---|---|---| | **Haffer Display** | 700 (siempre upright — nunca itálica) | la palabra destacada *única* dentro de un título grande | **iX** en "Experiencias Inteligentes **iX**." | | **Haffer Concrete** | 500 | todos los títulos, topbar, botones, labels | "Selected work" · "Nuestro toolbox" | | **Haffer Concrete Light** | 300 | cuerpo de texto, descripciones, campos de formulario, captions | párrafos, descripciones de caso, footer | **Regla de composición:** el título va en Concrete; *una* palabra se eleva a Display para llevar el énfasis. Display siempre en upright — nunca itálica. Nunca uses Display para un título entero. Nunca uses Concrete para el cuerpo. Sans geométrico con un toque mecánico; aperturas abiertas, x-height generoso, `a` de una sola planta. Auto-hospedada desde `/fonts`. La tipografía va grande y con seguridad: el cuerpo rara vez baja de 16 px; los títulos viven entre 64 y 200 px en superficies hero. Escala: `XL Title` 200 px · `L Title` 97 px · `M Title` 64 px · `S Title` 40 px · `XS Title` 24 px · `Body XL` 24 px · `Body` 20 px · `Body S` 16 px · `Caption` 14 px. Los títulos usan line-height ajustado (1.0–1.1). ### Espaciado Grid de 8 puntos. Ritmo habitual: `8 · 16 · 24 · 32 · 48 · 64 · 96 · 120 · 160`. El padding interno de las cards grandes suele ser `64 × 72 px`; el de las pequeñas, `32 px`. Las heros usan `120 × 72 px`. ### Fondos - **Arena `#F5F0E6` es el fondo de marca.** Páginas, superficies largas y secciones hero salen de Arena por defecto. El blanco puro se reserva para UI densa. - **Fotografía a sangre** en cards de caso y thumbnails de "Work" — industrial, a escala humana, cálida. Evita fotografía corporativa fría o azulada. - **Campos de color planos** (sin gradientes) para crear ambiente: una hero entera en Teal, Earth o Negro con una sola frase grande. Es seña de identidad. - **Ruido, grano, gradientes:** se evitan. La marca es color plano + tipografía nítida. - **Patrones, texturas:** poco frecuente. El único motivo gráfico recurrente es el **monograma 2×2 de EGGS**, que también puede usarse en tile. ### Radios de esquina Sólo cuatro: - **Pill / circular** `9999px` — botones y tags. - **Card** `16 px` — cards de caso, news, bloques de contenido. - **Card grande** `24 px` — cards hero (intro, contacto) y el bloque negro de CTA. - **Superficie XL** `48 px` — bandejas tipo "iconografía", marcos fotográficos especiales. - Nunca uses 4 px, 8 px ni 12 px. Nunca mezcles radios distintos en el mismo elemento. ### Bordes, sombras, elevación - **Bordes** finos (`1px`), siempre negros al 100 %, o ausentes. No hay grises hairline. Si una card está sobre Arena, suele ser sin borde y se sostiene por su propio fondo. - **Sombras** casi inexistentes. La única documentada en el brand center es plana: `0 3px 3px rgba(0,0,0,0.25)` en la bandeja de iconografía. La elevación se comunica por contraste de color, no por sombra. - **Sin inner-shadows. Sin glows.** ### Botones **Black pill + arrow disc.** El patrón primario: pill negro (`border-radius: 100px`, padding horizontal `28 px`, texto `20 px`) con un **disco circular separado** con flecha pegado a la derecha. En hover, la flecha se desliza (marquee — entra otra desde la izquierda). Botón secundario: texto negro sobre Arena, sin relleno, underline en hover. ### Hover y press - **Hover:** sutil — animación de flecha, o flip de color (negro → Earth en algunos contextos). Nunca cambios sólo de opacidad. - **Press:** ligero scale a 98 % + oscurecimiento. No cambia la sombra. - **Focus:** outline negro 2 px con offset 4 px — accesible, no decorativo. ### Animación - **Easing por defecto:** `cubic-bezier(0.65, 0, 0.35, 1)` — ease-in-out medido, nunca bouncy. - **Duraciones:** 200 ms (micro), 350 ms (cambios de estado), 600 ms (reveals de página). - **Entradas:** fade + translateY(16 px). Limpio, sin parallax pesado. - **Sin bounces, sin overshoots.** EGGS es calmado, no juguetón. ### Imagen / fotografía Color grading cálido. Gente real en talleres reales. Documental, no posada. El blanco y negro se usa ocasionalmente para retratos y citas. Los colores tiran a ocres cálidos, teals y terracotas — alineados con la paleta. Evita stock corporativo azulado. ### Transparencias, blur Casi nunca. La marca es plana y opaca. Excepción: el texto sobre foto usa **gradiente de protección** (0 → 60 % negro, vertical) en lugar de cápsulas semitransparentes. ### Reglas de layout - Padding superior generoso en el primer fold (120–160 px). - Todo alineado a la izquierda; centrado sólo para callouts cortos. - Los titulares son intencionalmente "demasiado grandes" para el estándar web — esa es la firma. - Navegación mínima, 5–7 ítems, sentence case, sin separadores. - Footer en negro o Arena con el monograma "EGGS" grande. --- ## Iconografía Dos sistemas conviven en EGGS: 1. **Iconos propios EGGS.** Iconos de línea gráficos y fuertes, con un motivo recurrente: **puntos que se transforman en línea sólida** como parte del glifo (un cluster de puntos tipo braille que se resuelve en el trazo de una letra). Stroke uniforme, caps redondeados, un solo color (negro sobre Arena o blanco sobre negro). Tamaño mínimo: 24 px. Hojas de referencia en `assets/eggs-icons-sheet.png` y `assets/eggs-icons-detail.png`. 2. **Phosphor Icons Regular.** El icon-set utilitario para el 95 % de necesidades. 1053 iconos, gratis, open source. Se usa vía el plugin/biblioteca oficial de Phosphor en Figma. Siempre **Regular** (stroke 1.5 px). En los UI kits se carga desde CDN: `https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css`. **Emoji:** no se usa en UI. **Unicode como icono:** evítalo. La flecha siempre se dibuja (Phosphor `arrow-right` o EGGS custom). **PNG icons:** sólo para los logos propios y el monograma 2×2. Todo lo demás en SVG. --- ## Componentes Componentes React exportados, disponibles en `window.EGGSDesignSystem_8f759a`: - **Button** — pill + disco que se unen en hover. Variantes `black`, `white`, `outline`, `cta-red`, `cta-spark`; tamaños `md`/`sm`; flag `onDark`. - **CircleButton** — variante sólo disco, mismo hover de flecha infinita. Para acciones secundarias. - **Input** — campo pill de 56px con label en Concrete, estados de error y disabled, versión sobre fondo oscuro. - **Textarea** — variante multilínea, radio 24px, alto mínimo 132px. - **Select** — select nativo con el chevron de EGGS, acepta `options` y `placeholder`. - **Tag** — pill que sirve de badge, chip de filtro con `aria-pressed` o token descartable con `onRemove`. Cada uno vive en `components//` con su `.jsx`, su `.d.ts` y una tarjeta de preview. --- ## Plantillas Carpetas listas para copiar y rellenar. Cada una es autosuficiente: trae su `ds-base.js`, que carga las fuentes y los tokens desde la raíz del sistema. Para usarlas en otro proyecto, copia la carpeta y ajusta la línea `const base` de `ds-base.js`. - **`templates/propuesta/`** — deck 16:9 de propuesta. Nueve slides: portada, agenda, separador oscuro, título + párrafo con métricas, enfoque en cuatro fases, equipo, caso de éxito, plan temporal y cierre. Exporta a PDF o a PPTX/Keynote desde el menú de exportación. - **`templates/one-pager/`** — resumen ejecutivo de una página A4. Reto, propuesta, fases, entregables, equipo y cierre con contacto. Imprimible tal cual. - **`templates/documento/`** — documento largo con cabecera y pie que se repiten en cada página impresa. Para informes de investigación y entregables. Pagina sola al imprimir; incluye tabla, cita destacada y bloques que no se parten. --- ## Índice de archivos - `README.md` — este documento. - `SKILL.md` — entry point del Skill. - `colors_and_type.css` — variables CSS, tokens de color, tipo, espaciado, radio, sombra. - `index.html` — landing del sistema con todos los assets. - `assets/` — logos, hojas de iconos, imágenes de marca. - `fonts/` — Haffer Prototypo (Display, Concrete, Concrete Light) en woff2/woff/ttf/otf. - `preview/` — preview cards que aparecen en la pestaña Design System. - `ui_kits/website/` — recreación del marketing site. - `ui_kits/apps/` — patrones de app (formulario, wizard, ficha detalle) en desktop + mobile. - `slides/` — slides 16:9 de propuesta inspiradas en el deck de Para-Ofertas del Figma. - `templates/propuesta/` — plantilla de deck de propuesta (9 slides). - `templates/one-pager/` — plantilla de resumen ejecutivo A4. - `templates/documento/` — plantilla de documento largo con cabecera y pie repetidos. - `llms.txt` — índice para agentes de IA. - `AGENTS.md` — especificación completa y autosuficiente para agentes. - `downloads/` — pack de logos ZIP, paleta ASE/GPL, tokens JSON y página de descargas. --- ## Descargas `downloads/index.html` reúne todo lo descargable: - **`eggs-logos.zip`** — los cuatro archivos de logo aprobados (negro y blanco, SVG y PNG). - **`eggs-palette.ase`** — 15 colores en cuatro grupos para Illustrator, Photoshop e InDesign. - **`eggs-palette.gpl`** — la misma paleta para GIMP, Inkscape, Krita y Affinity. - **`eggs-tokens.json`** — color, tipografía, espaciado, radios y motion como datos. **Keynote y PowerPoint:** no hay archivo guardado a propósito — se genera al exportar el deck de propuesta (`Exportar → PowerPoint`), así sale siempre con la última versión de la marca. Keynote abre ese `.pptx` con el texto editable. Ojo: Haffer no está instalada en esos programas; instala las fuentes del pack o exporta a PDF si el deck va a viajar.