Born from the AI era. Not bolted onto it.

:root {
  --bg: #E5E5E5;
  --bg-soft: #F3F3F3;
  --surface: #FFFFFF;
  --surface-dark: #000000;
  --text: #000000;
  --text-soft: #242424;
  --muted: #6D6D6D;
  --primary: #FFF100;
  --border: rgba(0, 0, 0, 0.12);
  --font-display: "Barlow Condensed", sans-serif;
  --font-body: "Instrument Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

.dayos-hero-title {
  font-family: var(--font-display);
  font-size: clamp(72px, 11vw, 134px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  max-width: 6ch;
}

.dayos-cta {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 16px;
  background: #000;
  color: #fff;
  border: 0;
}

<section class="bg-[#E5E5E5] text-black">
  <div class="mx-auto grid max-w-[1200px] gap-8 px-4 py-16 lg:grid-cols-[1.02fr_.98fr]">
    <div>
      <h1 class="max-w-[6ch] font-[Barlow_Condensed] text-[clamp(72px,11vw,134px)] font-bold uppercase leading-[0.9] tracking-[-0.045em]">
        Born from the AI era.
      </h1>
      <p class="mt-8 max-w-[34ch] text-[clamp(19px,2vw,23px)] leading-[1.42] text-[#242424]">
        We provide the AI that does the work.
      </p>
    </div>
    <aside class="rounded-[40px] border border-black/10 bg-white/80 p-7 shadow-[0_22px_50px_-28px_rgba(0,0,0,.22)]">
      ...
    </aside>
  </div>
</section>

{
  "name": "dayos",
  "theme": "light",
  "colorFamily": "yellow",
  "sections": ["Minimal Tech", "Dirección de Arte", "Monocromático"],
  "colors": {
    "black": "#000000",
    "white": "#FFFFFF",
    "grey100": "#F3F3F3",
    "grey200": "#E5E5E5",
    "grey500": "#979797",
    "yellow": "#FFF100"
  },
  "typography": {
    "displayOriginal": "SuisseIntlCond",
    "displayRender": "Barlow Condensed",
    "bodyOriginal": "SuisseIntl",
    "bodyRender": "Instrument Sans",
    "monoOriginal": "SuisseIntlMono",
    "monoRender": "IBM Plex Mono"
  },
  "metrics": {
    "heroH1Size": "130px",
    "heroH1LineHeight": "117px",
    "heroH1LetterSpacing": "-3.9px",
    "navRadius": "48px",
    "sectionMargin": "96px"
  }
}

---
version: "1.0"
name: "Dayos"
description: "Sistema visual enterprise-AI de alto contraste: canvas gris industrial, titulares condensados en negro absoluto, bloques negros de gran radio y acento amarillo electrico aplicado como energia puntual dentro de un lenguaje de producto serio."
colors:
  primary: "#FFF100"
  primary-hover: "#FFF45A"
  primary-active: "#E3D600"
  secondary: "#000000"
  accent: "#E5E5E5"
  accent-soft: "#F3F3F3"
  neutral: "#FFFFFF"
  background: "#E5E5E5"
  background-soft: "#F3F3F3"
  surface: "#FFFFFF"
  surface-dark: "#000000"
  text-primary: "#000000"
  text-secondary: "#242424"
  text-muted: "#6D6D6D"
  text-on-dark: "#FFFFFF"
  text-on-primary: "#000000"
  border: "rgba(0, 0, 0, 0.12)"
  border-strong: "rgba(0, 0, 0, 0.22)"
  support: "#979797"
  success: "#FFF100"
  success-bg: "rgba(255, 241, 0, 0.16)"
  warning: "#FFF100"
  warning-bg: "rgba(255, 241, 0, 0.16)"
  error: "#000000"
  error-bg: "rgba(0, 0, 0, 0.08)"
typography:
  display-xl:
    fontFamily: "SuisseIntlCond"
    fontSize: "130px"
    fontWeight: 700
    lineHeight: "117px"
    letterSpacing: "-3.9px"
  body-lg:
    fontFamily: "SuisseIntl"
    fontSize: "20px"
    fontWeight: 400
    lineHeight: "24px"
  body-xs:
    fontFamily: "SuisseIntl"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "18px"
  mono-sm:
    fontFamily: "SuisseIntlMono"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "16px"
rounded:
  nav-pill: "48px"
  button: "16px (derivado visual)"
  frame: "30px (derivado visual)"
  panel: "40px (derivado visual)"
  rounded-section: "56px (derivado visual)"
spacing:
  base: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  xxl: "48px"
  hero-copy-gap: "64px"
  section-margin: "96px"
components:
  nav:
    backgroundColor: "#F3F3F3"
    textColor: "#000000"
    borderRadius: "48px"
    height: "48px"
  cta-primary:
    backgroundColor: "#000000"
    textColor: "#FFFFFF"
    height: "48px"
    borderRadius: "16px (derivado visual)"
  hero-card:
    backgroundColor: "#E5E5E5"
    textColor: "#000000"
    typography: "{typography.display-xl}"
  rounded-section:
    backgroundColor: "#000000"
    textColor: "#FFFFFF"
    borderRadius: "56px (derivado visual)"
---

# DESIGN.md - Dayos

> Sistema de diseno extraido de `https://www.dayos.com/`.
> Generado siguiendo el skill `url-inspiration-styleguide`.
> Base observada desde HTML, CSS reales, variables del sitio y captura en vivo.

---

## 1. Tema Visual y Atmosfera

Dayos no intenta verse amigable por defecto.

Tampoco intenta verse experimental.

Se posiciona en un punto mas util: serio, duro y contemporaneo.

La pagina comunica que el producto no asesora.

Hace.

Ese matiz verbal se traduce directo al sistema visual.

El hero usa una base gris industrial en lugar de blanco puro.

Esa decision ya cambia la lectura.

El sistema entra a una zona mas fisica, mas de producto, mas cercana a maquinaria que a software generico.

Encima de ese canvas aparece una tipografia condensada, enorme, negra y casi brutalista.

La escala del titular no deja espacio para dudas.

La marca habla como quien ya resolvio el problema y solo esta enunciando el nuevo orden.

El negro no se reserva para texto.

Tambien estructura secciones completas con grandes bloques curvos.

Esos bloques generan contraste de ambiente sin necesidad de una paleta extensa.

Dayos obtiene fuerza por oposicion:

- gris claro contra negro
- negro contra blanco
- tipografia masiva contra microcopy utilitario
- producto enterprise contra acento jugueton amarillo

El amarillo `#FFF100` aparece como energia puntual.

No gobierna el sistema completo.

Se usa como chispa.

Eso lo vuelve mas potente.

En el hero, los cubos amarillos alrededor de la pieza 3D funcionan como vectores de tension.

No son decoracion pasiva.

Son una manifestacion visual del cambio que Dayos promete producir dentro de sistemas pesados.

La atmosfera general se puede describir asi:

- industrial
- decisiva
- condensada
- high-contrast
- enteramente de producto
- agresiva sin caer en ruido
- minimal en color, maximal en escala

La pagina no vende una IA abstracta.

Vende una sustitucion operativa para trabajo enterprise.

Todo el sistema visual refuerza esa idea.

### Palabras clave de personalidad

- preciso
- frontal
- enterprise
- operativo
- tenso
- mecanico
- moderno
- sobrio
- art-directed
- sistemico

### Densidad del layout

Densidad media en navegacion.

Densidad alta en headline.

Densidad baja en el uso de color.

Densidad media-alta en bloques oscuros posteriores.

### Modo preferido

Claro en hero y navegacion.

Oscuro en bloques de argumento y conversion.

El sistema real no es solo light ni solo dark.

Es alternancia por contraste.

### Lectura de direccion de arte

- El titular manda mas que la captura de interfaz.
- La pieza 3D tiene funcion narrativa.
- El grey canvas evita el look startup generico.
- El negro aparece como gravedad visual.
- El amarillo se usa como energia, no como tema.
- La curva grande de las secciones negras suaviza la dureza del sistema.
- El menu en pill mantiene sofisticacion y control.
- El sitio parece premium por escala y decision, no por ornamento.
- El sistema se siente enterprise, pero no aburrido.
- El sistema se siente listo para vender una tesis, no solo features.

---

## 2. Paleta de Colores y Roles Semanticos

La paleta visible de Dayos es reducida y disciplinada.

Eso es exactamente lo que le da autoridad.

No hay un arcoiris de estados ni una familia enorme de acentos.

La marca trabaja con pocos materiales muy bien jerarquizados.

### Colores reales detectados

| Nombre | Variable / fuente | Valor | Rol |
|---|---|---|---|
| Negro base | `--cl-black` | `#000000` | texto principal, CTA, bloques negros |
| Blanco base | `--cl-white` | `#FFFFFF` | texto sobre negro y superficies altas |
| Gris 100 | `--cl-grey-100` | `#F3F3F3` | fondo del nav pill |
| Gris 200 | `--cl-grey-200` | `#E5E5E5` | fondo del hero |
| Gris 500 | `--cl-grey-500` | `#979797` | texto de apoyo y neutral tecnico |
| Amarillo | `--cl-yellow` | `#FFF100` | acento dominante de marca |

### Colores derivados necesarios para sistema extendido

> El sitio no expone una escala completa de estados. Los siguientes valores son derivados y deben tratarse como utilitarios, no como identidad central.

| Nombre | Valor | Nota |
|---|---|---|
| Amarillo hover | `#FFF45A` | derivado para feedback interactivo |
| Amarillo active | `#E3D600` | derivado para estados comprimidos |
| Negro suave | `#242424` | derivado para copy secundario intenso |
| Gris texto | `#6D6D6D` | derivado para metadatos y notas |
| Hairline oscuro | `rgba(0,0,0,0.12)` | derivado para bordes |
| Hairline fuerte | `rgba(0,0,0,0.22)` | derivado para contenedores destacados |

### Roles semanticos recomendados

| Rol | Token | Valor | Uso |
|---|---|---|---|
| Fondo principal | `--color-bg` | `#E5E5E5` | hero y fondo principal |
| Fondo secundario | `--color-bg-soft` | `#F3F3F3` | pills, railes, tarjetas claras |
| Surface clara | `--color-surface` | `#FFFFFF` | panels altos y contenido tecnico |
| Surface oscura | `--color-surface-dark` | `#000000` | secciones argumentales |
| Texto principal | `--color-text` | `#000000` | titulares y elementos de control |
| Texto secundario | `--color-text-secondary` | `#242424` | copy de apoyo en claro |
| Texto muted | `--color-text-muted` | `#6D6D6D` | labels, metadata, notas |
| Texto sobre oscuro | `--color-text-on-dark` | `#FFFFFF` | copy dentro de paneles negros |
| Acento principal | `--color-primary` | `#FFF100` | highlights y marcadores |
| Texto sobre acento | `--color-text-on-primary` | `#000000` | boton y badges amarillos |

### Contraste observable

- `#000000` sobre `#E5E5E5` = alto contraste y lectura inmediata.
- `#000000` sobre `#F3F3F3` = alto contraste.
- `#FFFFFF` sobre `#000000` = contraste maximo.
- `#000000` sobre `#FFF100` = correcto para CTA y tags.
- `#6D6D6D` sobre `#E5E5E5` = adecuado para metadata breve.
- `#979797` sobre `#E5E5E5` = reservar para info secundaria.

### Lo que la paleta evita

- evita azules de SaaS tradicional
- evita gradientes espectaculares
- evita colores de dashboard genérico
- evita neones tech
- evita beige editorial

### Comportamiento recomendado del amarillo

El amarillo no debe expandirse a grandes fondos de lectura.

Su mejor papel es:

- subrayar
- marcar
- actuar como vector
- resaltar un dato
- encender un microcomponente

Si se usa demasiado, Dayos deja de sentirse premium y pasa a verse promocional.

---

## 3. Tipografia

La tipografia es uno de los activos centrales del sistema.

No esta ahi para decorar.

Esta ahi para empujar la tesis comercial.

### Familias observadas

```css
--font-display: "SuisseIntlCond";
--font-body: "SuisseIntl";
--font-mono: "SuisseIntlMono";
```

### Sustitucion curada para HTML de inspiracion

```css
--font-display: "Barlow Condensed";
--font-body: "Instrument Sans";
--font-mono: "IBM Plex Mono";
```

### Razon de la sustitucion

`SuisseIntlCond` tiene una condensacion precisa, corporativa y muy controlada.

Necesitaba un reemplazo web que mantuviera:

- compresion vertical
- energia industrial
- limpieza tecnica
- capacidad de soportar mayusculas gigantes

`Barlow Condensed` cumple mejor ese rol que una grotesk estandar.

`SuisseIntl` es una sans neutral contemporanea.

`Instrument Sans` conserva una neutralidad viva sin caer en el anonimato absoluto.

`SuisseIntlMono` no esta disponible de forma abierta.

`IBM Plex Mono` conserva el tono sistemico y tecnico adecuado para metadata y codigo.

### Escala tipografica real observada

| Token | Familia | Tamano | Peso | Interlineado | Tracking | Uso |
|---|---|---|---|---|---|---|
| Display hero | `SuisseIntlCond` | `130px` | `700` | `117px` | `-3.9px` | hero principal |
| Body large | `SuisseIntl` | `20px` | `400` | `24px` aprox | `normal` | descripcion del hero |
| Body xs | `SuisseIntl` | `14px` | `500` | `18px` aprox | `-0.01em` | nav y labels |
| Mono sm | `SuisseIntlMono` | `12px` | `400` | `16px` | `-0.03em` | microcopy tecnico |

### Caracter del display

El display esta pensado para mayuscula.

Su verdadera voz no vive en parrafos.

Vive en:

- impacto
- escala
- compresion
- repeticion
- contundencia

No debe mezclarse con estilos decorativos.

No necesita outlines, sombras o gradientes.

Su fuerza ya esta en la masa negra y en el tracking negativo.

### Caracter del body

El body debe dejar respirar al headline.

Su funcion no es competir.

Su funcion es:

- aterrizar la promesa
- explicar el diferencial
- mantener tono ejecutivo
- dar informacion util

El cuerpo no es editorial suave.

Es funcional y directo.

### Uso del mono

El mono debe reservarse para:

- metadata
- labels
- fichas tecnicas
- tokens
- numericos
- categorias de soporte

No conviene llevarlo a grandes bloques de contenido.

### Specimen obligatorio

La muestra tipografica debe mantenerse en una sola linea:

`AaEeCcGg50.`

En Dayos esta linea funciona mejor en display condensado porque demuestra:

- compresion
- contraste entre caja alta y baja
- lectura numerica
- agresividad controlada del punto final

### Reglas de jerarquia

- headline principal siempre en display condensado
- section headlines pueden usar la misma familia o una adaptacion menor
- cuerpo en sans neutral
- metadata en mono
- acentos verbales en mayuscula si el tono requiere dureza

---

## 4. Layout, Grid y Ritmo

El layout de Dayos mezcla una grilla muy sobria con momentos de escala extrema.

No es una pagina de tarjetas pequeñas.

Es una pagina de grandes bloques de tesis.

### Estructura visible del hero

- logo a la izquierda
- nav pill centrado
- CTA oscuro a la derecha
- headline a gran escala en columna izquierda
- objeto 3D en columna derecha
- copy secundaria debajo del headline

### Rasgos del sistema de layout

- contenedor amplio
- mucho aire lateral
- headline dominante por anchura mas que por longitud
- uso fuerte de columnas desbalanceadas
- secciones negras con esquinas muy redondeadas
- alternancia de superficies claras y oscuras

### Ritmo espacial observado

| Espacio | Valor | Nota |
|---|---|---|
| Altura del nav | `48px` | real |
| Radio del nav | `48px` | real |
| Margen superior descripcion hero | `64px` | real desde CSS |
| Section margin | `96px` | real desde CSS var |
| Frame radius | `30px (derivado visual)` | aproximacion para micrositio |
| Rounded black section | `56px (derivado visual)` | aproximacion visual |

### Comportamiento del layout

La composicion no depende de una sola alineacion central.

Se apoya en dos fuerzas:

- alineacion izquierda muy firme para mensaje
- contrapeso visual fuerte a la derecha

Eso genera una sensacion de sistema completo.

No parece una landing armada solo con copy y screenshot.

### Regla clave para replicas

Si el headline pierde escala, Dayos pierde autoridad.

Si la pieza 3D pierde peso, Dayos pierde singularidad.

Si el gris se vuelve blanco puro, Dayos pierde cuerpo material.

---

## 5. Componentes y Patrones de Interfaz

Dayos trabaja con pocos componentes visibles pero muy afinados.

### 5.1 Navegacion principal

El menu central usa un pill largo con fondo `#F3F3F3`.

Caracteristicas reales:

- altura `48px`
- radio `48px`
- tipografia `SuisseIntl`
- tamano `14px`
- peso `500`
- texto negro

Este componente tiene dos funciones:

- contener varios items sin parecer barra corporativa pesada
- suavizar la severidad del headline gigante

### 5.2 CTA principal

El CTA "Schedule a Demo" se presenta como bloque negro con texto blanco.

Valores visibles:

- fondo `#000000`
- texto `#FFFFFF`
- altura `48px`
- radio aproximado `16px (derivado visual)`

El boton no necesita sombra luminosa.

Su contraste es suficiente.

### 5.3 Bloque argumental negro

La siguiente seccion del sitio entra en un gran contenedor negro con radio muy amplio.

Eso marca cambio de capitulo.

El sistema usa esta pieza para:

- pasar de promesa a argumento
- cambiar ambiente
- introducir datos y claims

### 5.4 Triptico AI / GAP / CLOSED

Este patron sintetiza el discurso.

Cada columna usa:

- titulo muy corto y contundente
- descripcion breve
- mucho aire
- contraste extremo

Es una muy buena referencia para:

- storytelling enterprise
- comparativas
- before / after
- presentacion de tesis

### 5.5 Tarjetas de producto

El sitio tambien usa tarjetas y modulos para:

- Hero Answers
- Hero Actions
- Hero Experts
- casos de uso
- verticales

No todos los estilos estan visibles en la extraccion inicial con el mismo detalle.

Lo constante es:

- bloques grandes
- tipografia contundente
- fondo claro u oscuro segun contexto
- copy breve y ejecutivo

### 5.6 Footer y contacto

El footer sigue la misma linea:

- estructura clara
- muchos links ordenados
- correo visible
- tono operativo

No intenta cerrar con discurso emocional.

Cierra con infraestructura de navegacion.

---

## 6. Imagen, 3D, Iconografia y Materialidad

La pieza 3D del hero es central.

No es una ilustracion cualquiera.

Funciona como metafora del producto.

### Lo que muestra la pieza

Un volumen central compuesto por bloques rotulados con plataformas enterprise:

- SAP
- Oracle
- Workday
- ServiceNow

Alrededor aparecen cubos amarillos y verdes.

Eso comunica:

- interoperabilidad
- ensamblaje
- movimiento
- modularidad
- operacion dentro de sistemas reales

### Materialidad observada

- superficies blancas con motas sutiles
- caras oscuras y claras
- madera en algunos bloques inferiores
- reflejo y sombra suaves
- acentos de color aplicados en piezas satelite

### Implicaciones para una replica

La direccion de arte correcta no debe reemplazar esta pieza por:

- un dashboard plano
- un simple mockup
- un gradiente abstracto
- un render sci-fi generico

Necesita un objeto con masa, volumen y significado.

### Iconografia

No se observa un set iconografico protagonista.

El logo y los logos de plataformas cumplen esa funcion.

Eso refuerza una idea importante:

La marca no depende de iconitos.

Depende de:

- palabra
- objeto
- contraste
- composicion

---

## 7. Motion, Interaccion y Cambio de Tema

El sitio contiene motion, pero no en el sentido decorativo tipico de startup.

### Motion observado

- hero con video / pieza animada
- textos divididos por lineas para entrada del headline
- loops de hover en links y CTAs
- cambio de temas entre `grey`, `black` y `white`
- rounded sections que escalan entre fondos

### Sensacion del motion

No es jugueton.

No es blando.

No es viscoso.

Se siente controlado, estructural y de producto.

### Principios de movimiento para conservar la marca

- usar transiciones firmes
- evitar overshoot caricaturesco
- mantener duraciones medias
- favorecer deslizamientos y revelados
- usar el cambio de superficie como parte del drama

### Lo que no conviene hacer

- microinteracciones blandas tipo app lifestyle
- fades demasiado lentos
- rebotes elasticos
- gradientes animados sin relacion con la marca

### Cambio de tema como recurso narrativo

Dayos usa el paso de gris a negro para separar discurso.

Eso es mas potente que usar una simple linea divisoria.

En una extension del sistema:

- gris = presentacion de promesa
- negro = argumento duro y tesis
- blanco / claro = modulos de soporte o detalle

---

## 8. Voz, Copy y Jerarquia Verbal

La voz de Dayos es frontal.

No pide permiso.

No explica de mas.

Declara.

### Frases observadas

- `Born From The AI era. Not Bolted Onto It.`
- `We don't sell managed services to the enterprise. We provide the AI that does the work.`
- `WE'RE REVOLUTIONIZING THE WAY GOOD WORK GETS DONE.`
- `INTRODUCING HERO`
- `FINALLY, AI THAT UNDERSTANDS YOUR BACK OFFICE.`
- `RUN A BETTER BUSINESS WITH DAYOS.`

### Rasgos de la voz

- frases cortas
- claim alto en mayusculas
- cuerpo explicativo directo
- lenguaje de reemplazo, no de asistencia ligera
- tono enterprise sin jerga inflada

### Estructura verbal preferida

1. tesis corta
2. contraste con el sistema anterior
3. explicacion ejecutiva
4. CTA claro

### Lo que la voz evita

- humor
- sentimentalismo
- tecnoblabla innecesario
- promesas difusas de IA
- exceso de adjectivos

### Reglas para escribir dentro del sistema

- empezar con verbo o afirmacion fuerte
- usar titulares de 2 a 7 palabras cuando sea posible
- reservar mayusculas para golpes principales
- explicar despues del golpe, no antes
- convertir complejidad en claridad operacional

---

## 9. Accesibilidad, Contraste e Implementacion Web

Visualmente, Dayos parte de una ventaja fuerte: mucho contraste.

### Buenas decisiones observadas

- negro sobre gris claro
- blanco sobre negro
- tipografia grande en zonas clave
- navegacion amplia
- CTA visible por masa y color

### Riesgos potenciales

- gris `#979797` puede quedarse corto en texto pequeno sobre `#E5E5E5`
- el amarillo no debe usarse para parrafos largos
- titulares en mayuscula condensada requieren espacio suficiente en mobile
- objetos 3D no deben invadir el area de lectura del hero

### Recomendaciones de implementacion

- limitar ancho del headline en mobile
- mantener `line-height` cerrado pero no colapsado
- dar espacio claro al copy secundario
- asegurar `focus-visible` fuerte en botones negros y pills
- ofrecer fallback si el hero visual falla

### Reglas de contraste minimo

- texto principal oscuro sobre fondo claro
- texto blanco solo en superficies realmente oscuras
- acentos amarillos con texto negro
- metadata gris solo en cuerpos breves o labels

### Fallback recomendado para hero

Si la imagen del hero falla:

- mostrar panel plano con `#E5E5E5`
- mantener wordmark o nombre de la marca
- no dejar imagen rota

---

## 10. Reglas del Sistema y Checklist de Uso

Dayos depende de disciplina.

Con pocos elementos, cualquier desviacion se nota mas.

### Hacer

- usar headline enorme y condensado
- sostener el gris industrial como base
- usar negro para estructura dura
- mantener el amarillo como chispa, no como wallpaper
- conservar curvas grandes en bloques oscuros
- escribir copy con decision
- usar mono para detalles tecnicos
- dar peso real al objeto de marca o visual 3D

### Evitar

- convertir el sistema a blanco puro por defecto
- suavizar demasiado el titular
- llenar todo de cards pequeñas
- reemplazar el amarillo por azul SaaS
- mezclar varias familias de display
- meter gradientes innecesarios
- sobredecorar el CTA
- usar iconografia cute

### Si hubiera que expandirlo a producto

El sistema puede crecer bien hacia:

- dashboards enterprise
- onboarding B2B
- case studies
- pitch pages
- micrositios de verticales

Siempre que conserve:

- contraste
- condensacion
- alternancia de superficies
- copy severo

---

## Anexo A. Evidencia de extraccion y tokens listos para uso

### Variables reales detectadas

```css
--cl-black: #000000;
--cl-white: #FFFFFF;
--cl-grey-100: #F3F3F3;
--cl-grey-200: #E5E5E5;
--cl-grey-500: #979797;
--cl-yellow: #FFF100;
```

### Hero real observado

- Fondo hero: `rgb(229, 229, 229)`
- Texto hero: `rgb(0, 0, 0)`
- H1: `SuisseIntlCond`, `130px`, `700`, `117px`, `-3.9px`
- Body hero: `SuisseIntl`, `20px`, `400`
- Nav background: `rgb(243, 243, 243)`
- Nav radius: `48px`

### Texto real observado

**Hero headline**

`Born From The AI era. Not Bolted Onto It.`

**Hero description**

`We don't sell managed services to the enterprise. We provide the AI that does the work. Production-ready in 2 weeks. A new agent every year, lowering your support cost the longer you run Hero.`

**Meta description**

`AI agents that replace enterprise AMS teams. Hero logs in, executes, and validates directly inside Oracle, Workday, and SAP.`

### Snippet CSS base recomendado

```css
:root {
  --bg: #E5E5E5;
  --bg-soft: #F3F3F3;
  --surface: #FFFFFF;
  --surface-dark: #000000;
  --text: #000000;
  --text-soft: #242424;
  --muted: #6D6D6D;
  --primary: #FFF100;
  --border: rgba(0,0,0,0.12);
  --font-display: "Barlow Condensed", sans-serif;
  --font-body: "Instrument Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}
```

### Snippet de headline

```css
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(72px, 11vw, 134px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  max-width: 6ch;
}
```

### Snippet de CTA

```css
.btn-dayos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 16px;
  background: #000;
  color: #fff;
  border: 0;
}
```

### Snippet de bloque negro

```css
.chapter-black {
  background: #000;
  color: #fff;
  border-radius: 56px;
  padding: clamp(32px, 4vw, 56px);
}
```

### Lo no detectado directamente

- radio exacto del CTA principal: no detectado, derivado visual
- radio exacto del rounded section negro: no detectado, derivado visual
- escala completa de estados semanticos: no detectado
- libreria iconografica formal: no detectado
- especificacion oficial de grid en columnas: no detectado

### Veredicto del sistema

Dayos pertenece a una categoria poco comun:

marca enterprise con energia visual agresiva, pero con una paleta contenida y un sistema extremadamente controlado.

Su verdadera firma no es solo el amarillo.

Es la combinacion de:

- gris material
- negro estructural
- condensacion extrema
- objeto 3D con plataformas reales
- discurso verbal sin rodeos

Si esa combinacion se conserva, la marca sigue siendo Dayos.

Si se diluye cualquiera de esas piezas centrales, la marca se vuelve otro sitio tech mas.