The Internet Of Chains

:root {
  --canvas: #E2E2DF;
  --surface: #F7F6F3;
  --surface-dark: #151317;
  --text: #070607;
  --text-soft: #4F4E4E;
  --primary: #FC5000;
  --primary-hover: #EB4A00;
  --violet: #524AE9;
  --sulfur: #F5F28E;
  --font-display: "Teko", sans-serif;
  --font-body: "DM Sans", sans-serif;
  --font-mono: "Fragment Mono", monospace;
  --radius-pill: 800px;
  --radius-card: 40px;
}

.caldera-hero-title {
  font-family: var(--font-display);
  font-size: clamp(88px, 16vw, 200px);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.caldera-cta {
  min-height: 58px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #F7F6F2;
}

<section class="bg-[#E2E2DF] text-[#070607]">
  <div class="mx-auto grid max-w-[1180px] gap-8 px-4 py-20 lg:grid-cols-[1.05fr_.95fr]">
    <div>
      <h1 class="max-w-[7ch] font-[Teko] text-[clamp(88px,16vw,200px)] font-bold uppercase leading-[0.86] tracking-[-0.045em]">
        The Internet Of Chains
      </h1>
      <p class="mt-5 max-w-[36ch] text-[clamp(18px,2.2vw,24px)] leading-[1.45] text-[#4F4E4E]">
        Caldera is a network of interconnected, purpose-built blockchains.
      </p>
      <div class="mt-8 flex flex-wrap gap-3.5">
        <button class="min-h-[58px] rounded-[800px] bg-[#FC5000] px-7 text-[#F7F6F2]">
          Explore Chains
        </button>
        <button class="min-h-[58px] rounded-[800px] border-[1.5px] border-dotted border-[#070607] px-7">
          Book a Call
        </button>
      </div>
    </div>
  </div>
</section>

{
  "name": "caldera",
  "theme": "light",
  "colorFamily": "orange",
  "sections": ["Dirección de Arte", "Moderno", "Creativo"],
  "colors": {
    "primary": "#FC5000",
    "primaryHover": "#EB4A00",
    "secondary": "#070607",
    "canvas": "#E2E2DF",
    "surface": "#F7F6F3",
    "violet": "#524AE9",
    "sulfur": "#F5F28E"
  },
  "typography": {
    "displayOriginal": "PP Neue Corp Compact Ultrabold",
    "displayRender": "Teko",
    "bodyOriginal": "DM Sans",
    "bodyRender": "DM Sans",
    "monoOriginal": "Fragment Mono",
    "monoRender": "Fragment Mono"
  },
  "metrics": {
    "heroSize": "80px",
    "statSize": "56px",
    "cardRadius": "40px",
    "pillRadius": "800px"
  }
}

---
version: "1.0"
name: "Caldera"
description: "Sistema visual blockchain de tono expansionista: canvas marfil mineral, tipografia compacta hiper pesada, negro casi tinta como estructura, naranja volcanico como impulso y acentos secundarios violeta y amarillo para modular el ecosistema."
source:
  url: "https://caldera.xyz/"
  capture: "caldera-hero.jpg"
  generatedWith: "url-inspiration-styleguide"
classification:
  theme: "light"
  colorFamily: "orange"
  sections:
    - "Dirección de Arte"
    - "Moderno"
    - "Creativo"
colors:
  dominant: "#FC5000"
  primary: "#FC5000"
  primary-hover: "#EB4A00"
  primary-active: "#E21B00"
  secondary: "#070607"
  accent: "#524AE9"
  accent-soft: "#F5F28E"
  neutral: "#F7F6F2"
  background: "#E2E2DF"
  background-soft: "#EADAC7"
  surface: "#F7F6F3"
  surface-dark: "#151317"
  surface-dark-2: "#1F1E1F"
  text-primary: "#070607"
  text-secondary: "#4F4E4E"
  text-muted: "#757473"
  text-on-primary: "#F7F6F2"
  text-on-dark: "#F7F6F2"
  border: "#070607"
  border-subtle: "#A0A09E"
  success: "#177C5E"
  success-bg: "#E6F4EE (derivado para completar el sistema)"
  warning: "#F5F28E"
  warning-bg: "#FFFDD8 (derivado para completar el sistema)"
  error: "#E21B00"
  error-bg: "#F9D7D2 (derivado para completar el sistema)"
  info: "#524AE9"
  info-bg: "#E7E5FF (derivado para completar el sistema)"
typography:
  display-xl:
    fontFamily: "PP Neue Corp Compact Ultrabold"
    fontSize: "80px"
    fontWeight: 400
    lineHeight: "88px"
    letterSpacing: "normal"
  stat-lg:
    fontFamily: "PP Neue Corp Compact Ultrabold"
    fontSize: "56px"
    fontWeight: 400
    lineHeight: "56px"
  body-md:
    fontFamily: "DM Sans"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: "24.8px"
  mono-sm:
    fontFamily: "Fragment Mono"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "16px"
rounded:
  pill: "800px"
  card: "40px"
  soft: "24px (derivado visual)"
spacing:
  base: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "40px"
  xxl: "64px"
  section-gap: "96px (derivado visual)"
  container-padding: "32px a 52px observados"
components:
  button-primary:
    backgroundColor: "#FC5000"
    textColor: "#F7F6F2"
    typography: "{typography.body-md}"
    rounded: "{rounded.pill}"
    padding: "18px 36px (derivado visual)"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "#070607"
    border: "1.5px dotted #070607"
    rounded: "{rounded.pill}"
    padding: "18px 36px (derivado visual)"
  social-chip:
    backgroundColor: "#FC5000"
    textColor: "#F7F6F2"
    rounded: "{rounded.pill}"
  box-card:
    backgroundColor: "#F7F6F3"
    textColor: "#070607"
    rounded: "{rounded.card}"
    padding: "32px to 40px (derivado visual)"
notes:
  fidelity: "Los colores, familias y radios principales provienen del HTML y estilos en vivo. Sombras y algunos espacios se derivan visualmente cuando el sitio no los expone de forma aislada."
  specimen: "AaEeCcGg50."
---

# DESIGN.md - Caldera

> Sistema de diseno extraido de `https://caldera.xyz/`.
>
> Generado siguiendo el skill `url-inspiration-styleguide`.
>
> Base observada desde HTML, estilos computados, variables SSR de Framer, tipografias declaradas y captura real.

---

## 1. Tema Visual y Atmosfera

Caldera no se presenta como una marca blockchain que quiera verse eterea.

Tampoco se apoya en el repertorio habitual de fondos galacticos, gradientes neones o interfaces de terminal como atajo visual.

Hace algo mas inteligente.

Construye una identidad que se siente fisica.

El canvas es un marfil mineral, casi polvo claro, sobre el que cae una tipografia negra extremadamente compacta y pesada.

Ese contraste convierte la home en un cartel de escala urbana.

La marca habla como una infraestructura que no esta pidiendo permiso.

Esta declarando territorio.

El titular `The Internet Of Chains` es enorme, frontal y condensado.

No necesita subtitulo heroico.

La fuerza visual ya esta en la masa del texto.

Eso hace que la pagina se lea menos como producto crypto ornamental y mas como sistema de expansion.

El naranja `#FC5000` funciona como verdadero combustible del lenguaje.

No se queda en un detalle.

Se usa en el logo, el CTA superior, botones, iconos sociales y pequenos impulsos de atencion.

La pagina adquiere tension porque ese naranja no vive solo.

Convive con un negro casi tinta, un marfil mineral, un violeta electrico y un amarillo acido muy concreto.

La marca no es maximalista en cantidad de recursos.

Pero si en actitud.

Tiene una direccion de arte clara:

- tipografia de poster
- campos de color plenos
- bordes punteados
- radios enormes
- composicion con mucho vacio alrededor del headline

El resultado se siente moderno, expansivo y categorico.

Nunca blando.

Nunca neutro.

Nunca genericamente tech.

### Palabras clave de personalidad

- tectonico
- expansivo
- soberano
- tipografico
- volcánico
- internet-scale
- audaz
- fisico
- contemporaneo
- ecosistemico

### Densidad del layout

Densidad baja en hero.

Mucha superficie vacia.

Pocas decisiones, muy grandes.

### Modo preferido

Claro.

El sistema se expresa en fondo mineral claro con tipografia negra masiva.

### Nivel de ornamentacion

Medio.

Hay gestos de forma y color marcados, pero no saturacion decorativa.

### Audiencia visual objetivo

Equipos de infra blockchain, builders, fondos, integradores y actores que quieren sentir escala y liderazgo de ecosistema, no una app linda sin peso institucional.

### Traduccion digital

Si este sistema se usa bien en otras superficies, debe sentirse como una mezcla entre poster corporativo, señaletica cultural y producto de infraestructura web3 con mucha confianza.

Si se usa mal, se vuelve una landing web3 mas.

La diferencia esta en la escala, el aire y la precision cromatica.

---

## 2. Paleta de Colores y Roles Semanticos

La paleta observable de Caldera esta organizada como un sistema con un centro extremadamente claro:

el naranja volcanico manda.

Todo lo demas orbita alrededor de su energia.

El marfil mineral sostiene la pagina.

El negro casi tinta estructura.

El violeta y el amarillo aparecen como extensiones de ecosistema, no como ruido.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Naranja volcanico | `--color-primary` | `#FC5000` | CTA principal, logo, iconos sociales, impulsos de conversion | `#F7F6F2` |
| Naranja hover | `--color-primary-hover` | `#EB4A00` | Hover del CTA y botones activos | `#F7F6F2` |
| Naranja activo | `--color-primary-active` | `#E21B00` | Estado presionado y enfasis de alerta | `#F7F6F2` |
| Negro tinta | `--color-secondary` | `#070607` | Tipografia principal, bloques oscuros, contraste estructural | `#F7F6F2` |
| Violeta red | `--color-accent` | `#524AE9` | Modulo de ecosistema, apoyo distintivo, chips secundarios | `#F7F6F2` |
| Amarillo sulfur | `--color-accent-soft` | `#F5F28E` | Highlight auxiliar, tile de apoyo, contraste alegre | `#070607` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Canvas mineral | `--color-background` | `#E2E2DF` | Fondo dominante del sitio, gran superficie de hero |
| Canvas calido | `--color-background-soft` | `#EADAC7` | Apoyo tonal, posible alternancia de seccion |
| Surface clara | `--color-surface` | `#F7F6F3` | Cajas grandes, footer links box, superficies elevadas |
| Surface oscura | `--color-surface-dark` | `#151317` | Cards de alto contraste, footer CTA, overlays |
| Surface oscura 2 | `--color-surface-dark-2` | `#1F1E1F` | Profundidad secundaria y continuidad sobre dark |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Texto principal | `--color-text` | `#070607` | Headlines, labels, links principales |
| Texto secundario | `--color-text-secondary` | `#4F4E4E` | Parrafos, contenido explicativo, notas de apoyo |
| Texto muted | `--color-text-muted` | `#757473` | Metadata, microcopy, anotaciones |
| Texto sobre primario | `--color-text-on-primary` | `#F7F6F2` | CTA naranja y chips naranja |
| Texto sobre dark | `--color-text-on-dark` | `#F7F6F2` | CTA oscuro y bloques negros |

### Colores de estado

> El sitio visible no expone un sistema completo de estados UI. Los siguientes colores completan el sistema y se marcan cuando no son literales del sitio.

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Exito | `--color-success` | `#177C5E` | `#F7F6F2` |
| Exito (bg) | `--color-success-bg` | `#E6F4EE` | `#070607` |
| Advertencia | `--color-warning` | `#F5F28E` | `#070607` |
| Advertencia (bg) | `--color-warning-bg` | `#FFFDD8` | `#070607` |
| Error | `--color-error` | `#E21B00` | `#F7F6F2` |
| Error (bg) | `--color-error-bg` | `#F9D7D2` | `#070607` |
| Info | `--color-info` | `#524AE9` | `#F7F6F2` |
| Info (bg) | `--color-info-bg` | `#E7E5FF` | `#070607` |

### Relaciones cromaticas

La potencia de Caldera no viene de tener muchos colores.

Viene de administrar muy bien el peso relativo de cada uno.

El marfil ocupa superficie masiva.

El negro ocupa mensaje.

El naranja ocupa accion.

El violeta y el amarillo ocupan expansion del sistema.

### Regla de uso

Si un layout empieza a usar naranja como fondo continuo dominante, el sistema pierde autoridad y se vuelve promocional.

Si elimina el naranja y deja solo negro sobre marfil, pierde su fuerza de marca.

La relacion correcta es:

- marfil como territorio
- negro como estructura
- naranja como propulsion

---

## 3. Reglas de Tipografia

```css
--font-heading: "PP Neue Corp Compact Ultrabold", "Teko", sans-serif;
--font-body: "DM Sans", sans-serif;
--font-mono: "Fragment Mono", monospace;
```

**Google Fonts para esta pieza HTML**

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=Fragment+Mono&family=Teko:wght@500;600;700&display=swap" rel="stylesheet">
```

**Nota de sustitucion**

La fuente display original observada en el sitio es `PP Neue Corp Compact Ultrabold`.

No esta disponible en Google Fonts.

Para el HTML de inspiracion, la sustitucion curada es `Teko`.

Se eligio porque conserva:

- condensacion fuerte
- masa vertical
- presencia de poster
- tono corporativo con gesto casi industrial

No replica exactamente el ancho ni el dibujo.

Pero sostiene el temperamento correcto mejor que una sans generica.

`DM Sans` y `Fragment Mono` si aparecen como familias reales observadas del sitio.

### Escala tipografica

| Token | rem | px | line-height | Uso |
|------|-----|----|-------------|-----|
| `--text-xs` | 0.75rem | 12px | 1.35 | metadata mono, chips, labels tecnicos |
| `--text-sm` | 0.875rem | 14px | 1.45 | links secundarios, captions |
| `--text-base` | 1rem | 16px | 1.55 | cuerpo general |
| `--text-md` | 1.125rem | 18px | 1.5 | copy de apoyo en hero extendido |
| `--text-lg` | 1.5rem | 24px | 1.3 | modulos explicativos |
| `--text-xl` | 3rem | 48px | 1 | headings de categoria |
| `--text-2xl` | 3.5rem | 56px | 1 | stats principales |
| `--text-3xl` | 5rem | 80px | 1.1 | headline de seccion grande |

### Pesos tipograficos

```css
--font-regular: 400;
--font-medium: 500;
--font-bold: 700;
```

La fuente display observada aparece con peso visual extremo aunque el browser compute `400`.

Eso se debe al diseño de la familia.

No al peso CSS tradicional.

### Tracking

```css
--tracking-tight: -0.04em (derivado visual para display HTML)
--tracking-normal: 0em
--tracking-wide: 0.04em
--tracking-wider: 0.08em
```

En el sitio real, el display detectado aparece con `letter-spacing: normal`.

Para la sustitucion HTML con `Teko`, conviene una leve compresion visual derivada.

Se debe marcar como:

`(derivado visual para sostener la personalidad original)`

### Regla clave

El heading no se trata como un texto.

Se trata como arquitectura.

El cuerpo en `DM Sans` debe permanecer sobrio y utilitario para que el contraste entre infraestructura y gesto grafico siga funcionando.

---

## 4. Estilos de Componentes

### Boton primario

```
Background: #FC5000
Color: #F7F6F2
Border: none
Border-radius: 800px
Padding: 18px 36px (derivado visual)
Font-family: "DM Sans"
Font-size: 16px
Font-weight: 700

Hover:
  Background: #EB4A00
  Transform: translateY(-1px)

Active:
  Background: #E21B00
  Transform: translateY(0)

Focus:
  Outline: 2px solid #070607
  Outline-offset: 3px

Disabled:
  Opacity: 0.45
  Cursor: not-allowed
```

### Boton secundario

```
Background: transparent
Color: #070607
Border: 1.5px dotted #070607
Border-radius: 800px
Padding: 18px 36px (derivado visual)
Font-family: "DM Sans"
Font-size: 16px
Font-weight: 500

Hover:
  Background: rgba(7, 6, 7, 0.04) (derivado para completar el sistema)

Active:
  Background: rgba(7, 6, 7, 0.08) (derivado para completar el sistema)

Focus:
  Outline: 2px solid #FC5000
  Outline-offset: 3px
```

### Boton dark / footer CTA

```
Background: #070607
Color: #F7F6F2
Border: none
Border-radius: 800px
Padding: 18px 36px (derivado visual)
```

### Social chip

```
Background: #FC5000
Color: #F7F6F2
Size: circular or rounded capsule
Border-radius: 800px
```

### Input / newsletter

El sitio visible muestra modulos de captura y newsletter, pero no deja una receta CSS aislada completa del input base.

Lo reconstruible de forma fiel es:

```
Background: #F7F6F3
Color: #070607
Border: 1.5px dotted #070607
Border-radius: 800px o 40px segun contexto (derivado por familia real)
Placeholder: #757473
Padding: 16px 20px (derivado visual)
```

### Card clara de caja

```
Background: #F7F6F3
Color: #070607
Border: none o hairline invisible
Border-radius: 40px
Padding: 32px to 40px
Shadow: none observable; volumen construido por campo pleno y radio grande
```

### Card oscura de CTA

```
Background: #070607
Color: #F7F6F2
Border-radius: 40px
Padding: 32px to 40px
```

### Navegacion

La navegacion trabaja como una franja limpia sin barra contenedora obvia.

Elementos observados:

- logo naranja
- links en negro
- iconos sociales oscuros
- CTA naranja en pill
- divisores punteados verticales

Receta:

```
Background: transparent sobre #E2E2DF
Color: #070607
Divisor: 1.5px dotted #070607
```

### Badges y chips

No se observa un set formal de badges de producto, pero la familia visual sugiere:

- chips negros sobre marfil
- chips naranjas sobre fondo claro
- chips violetas para ecosistema

Siempre con radios muy altos.

### Alertas y toasts

`(no detectado)`

Si se derivan, deben seguir el sistema de color semantico ya documentado y usar la misma familia de radios altos con borde casi inexistente.

---

## 5. Principios de Layout

Caldera usa el espacio como gesto de poder.

El hero no intenta rellenar.

Intenta dominar.

### Escala de espaciado

```css
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 40px;
--space-8: 52px (derivado visual)
--space-9: 64px;
--space-10: 96px (derivado visual)
```

### Contenedor

El sitio parece operar con un ancho amplio y generoso.

Hay padding lateral suficiente para que el headline respire.

Valores observables o derivados:

- padding horizontal desktop: `32px a 52px`
- separacion entre bloques grandes: `64px a 96px`

### Filosofia de layout

La composicion se apoya en tres reglas:

1. un titular extremadamente dominante
2. mucho vacio alrededor de ese titular
3. modulos grandes de esquinas muy redondas como cambio de ritmo

### Grid

No se percibe una grid decorativa.

Se percibe una reticula amplia, editorial y flexible.

El sitio parece mas cartel que dashboard.

### Jerarquia espacial

La jerarquia no la produce un stack de cards.

La produce la escala.

Eso es importante.

Si se intenta miniaturizar el sistema en docenas de paneles equivalentes, pierde su esencia.

### Gaps

Los gaps en navegacion y hero son contenidos.

Los gaps entre secciones grandes son amplios.

Ese contraste organiza el ritmo.

---

## 6. Profundidad y Elevacion

Caldera no depende de sombras complejas.

La mayor parte de la profundidad se construye por:

- color plano
- radio gigante
- contraste claro/oscuro
- presencia del headline

### Naturaleza de la elevacion

Es un sistema mas grafico que atmosferico.

No necesita glass.

No necesita blur.

No necesita halos.

### Sombras

`box-shadow` prominente en componentes principales:

`(no detectado de forma estructural)`

En esta lectura, la elevacion util puede completarse asi:

```css
--shadow-none: none;
--shadow-soft: 0 12px 28px rgba(7, 6, 7, 0.08); /* derivado para completar el sistema */
--shadow-card-dark: 0 16px 30px rgba(7, 6, 7, 0.18); /* derivado para completar el sistema */
```

### Tabla de niveles

| Nivel | Uso | Receta |
|------|-----|--------|
| Flat | textos, nav, links | sin sombra |
| Soft | card clara secundaria | `0 12px 28px rgba(7,6,7,.08)` derivado |
| Contrast | CTA dark o modulo negro | contraste por color, no por blur |

### Radios de borde

```css
--radius-pill: 800px;
--radius-card: 40px;
--radius-soft: 24px; /* derivado para subcomponentes */
```

### Regla de profundidad

Si un componente necesita verse importante, primero cambia su campo y su radio.

Solo despues considera sombra.

Ese orden es coherente con la marca.

---

## 7. Lo que Si y lo que No

### Si hacer

1. Usa titulares compactos y enormes porque la marca gana por masa tipografica y no por adorno.

2. Deja grandes extensiones de canvas claro porque el vacio es parte del gesto institucional.

3. Usa el naranja como detonador puntual de accion porque su valor depende de no volverse fondo constante.

4. Conserva radios extremadamente altos en botones y chips porque son parte reconocible del sistema.

5. Apoya la composicion con negro casi tinta y superficies claras redondeadas porque esa oposicion organiza toda la pagina.

6. Permite que violeta y amarillo entren como extensiones de ecosistema porque ayudan a mostrar diversidad sin romper la identidad central.

### No hacer

1. No conviertas la identidad en un sistema neomorfico o con glows web3 porque la marca no necesita efectos para verse poderosa.

2. No sustituyas la condensacion del display por una grotesca normal porque perderias la fuerza de poster que sostiene el hero.

3. No llenes el canvas de tarjetas equivalentes porque el sistema no trata la informacion como dashboard modular tradicional.

4. No uses naranja en todas partes porque deja de ser propulsion y se vuelve ruido promocional.

5. No ablandes los contrastes con grises demasiado suaves porque la marca vive de la decision negra sobre fondo mineral.

6. No conviertas el lenguaje en premium-lujo silencioso porque Caldera no es delicada: es expansiva y tectonica.

---

## 8. Comportamiento Responsive

El sitio esta montado en Framer con breakpoints visibles en el HTML SSR.

### Breakpoints detectados

```css
@media (min-width: 1600px) { ... }
@media (min-width: 1300px) and (max-width: 1599px) { ... }
@media (min-width: 1000px) and (max-width: 1299px) { ... }
@media (min-width: 768px) and (max-width: 999px) { ... }
@media (max-width: 767px) { ... }
```

### Filosofia responsive

La marca no cambia de tono al bajar de tamano.

Cambia de escala.

Ese matiz importa.

### Mobile

- reducir headline sin perder contundencia
- conservar CTA pill grandes
- apilar modulos y chips sin perder el vacio
- usar padding lateral generoso

### Tablet

- mantener estructura amplia
- permitir dos columnas solo si la tension tipografica no se pierde

### Desktop

- privilegiar titulares enormes
- reservar mas de medio hero a espacio respirable

### Touch targets

Los botones observados se ven amplios y aptos para toque.

Mantener minimo `44px` de alto funcional es coherente con el sistema.

### Riesgo responsive

La fuente display sustituta puede crecer demasiado facil.

En HTML de inspiracion conviene controlar:

- wrap
- tracking
- max-width

para no romper la composicion.

---

## 9. Guia de Prompts para Agentes

### Inicializacion de sesion

```text
Construye una interfaz con lenguaje Caldera: canvas mineral claro, titulares ultra condensados y pesados, negro casi tinta como estructura, naranja volcanico como energia principal y radios muy altos en CTAs. Piensa mas en poster institucional para infraestructura que en dashboard SaaS tradicional.
```

### Crear una nueva pantalla

```text
Disena una nueva pantalla siguiendo el sistema Caldera. El headline debe cargar la mayor parte del peso visual. Usa mucho aire, pocos bloques, CTAs redondos de alto contraste y evita gradientes blandos o efectos crypto genericos.
```

### Anadir componente al UI kit

```text
Agrega un componente al UI kit de Caldera respetando: tipografia display compacta para momentos de declaracion, DM Sans para operatividad, Fragment Mono para metadata, botones pill con radio extremo y campos de color plenos antes que sombras complejas.
```

### Revision de consistencia

```text
Revisa esta pantalla con criterio Caldera. Marca donde el naranja se este usando de mas, donde falte masa tipografica, donde los radios no respeten la familia extrema y donde el layout se haya vuelto demasiado modular o SaaS.
```

### Variante para campana

```text
Genera una variante de campana dentro del sistema Caldera. Puedes aumentar la presencia de violeta o amarillo como color de apoyo, pero el eje debe seguir siendo: canvas mineral, negro tinta, headline de poster y CTA volcanico.
```

### Variante para documento institucional

```text
Adapta el sistema Caldera a una pagina institucional o de reporte. Baja el ruido promocional, pero conserva la escala del headline, la limpieza del fondo mineral y la autoridad grafica del negro y el naranja.
```

---

## 10. Movimiento

El HTML y el sitio muestran apariciones, escalados y transiciones suaves.

No parece un sistema basado en motion exuberante.

Parece uno basado en energia de entrada contenida.

### Nivel de motion

Medio.

Suficiente para que los modulos lleguen con vida.

No tanto como para que la experiencia dependa del gesto.

### Patrones detectados

- elementos que escalan desde `0.9`
- elementos con `opacity: 0` antes de entrar
- apariciones progresivas en cards y chips sociales

### Duraciones sugeridas desde evidencia

```css
--motion-fast: 160ms;
--motion-base: 280ms;
--motion-slow: 420ms;
--motion-enter: 600ms; /* derivado desde las apariciones observadas */
```

### Easings

`(no detectado literal en output legible del sitio)`

Para completar el sistema:

```css
--ease-standard: cubic-bezier(.16, 1, .3, 1); /* derivado para completar el sistema */
--ease-snappy: cubic-bezier(.2, .8, .2, 1); /* derivado para completar el sistema */
```

### Propiedades animadas

- opacity
- scale
- transform

No hay evidencia principal de parallax pesado ni malla luminosa constante.

### Regla de motion

El movimiento debe reforzar la idea de despliegue de ecosistema.

No debe parecer juguete ni interfaz gamer.

### Reduced motion

Toda pieza inspirada en este sistema debe respetar `prefers-reduced-motion`.

La marca soporta bien una version casi estatica porque su fuerza central es tipografica y cromatica, no animada.

---

## Anexo: Stack tecnico detectado

### Plataforma / builder

- Framer

### Tipografias detectadas

- `PP Neue Corp Compact Ultrabold`
- `DM Sans`
- `Fragment Mono`
- `Inter` aparece cargada en el HTML, pero no domina la identidad principal visible

### Colores detectados en variables SSR

- `#FC5000`
- `#EB4A00`
- `#E21B00`
- `#070607`
- `#151317`
- `#1F1E1F`
- `#F7F6F2`
- `#E2E2DF`
- `#EADAC7`
- `#524AE9`
- `#F5F28E`
- `#177C5E`

### Comportamiento detectado

- breakpoints SSR de Framer
- escalados de entrada
- opacidad inicial en modulos
- chips sociales con fondo naranja y radio extremo

### 3D / WebGL

`(no detectado)`

### Animacion avanzada

No verificable como libreria independiente desde esta pasada.

La evidencia visible es suficiente para clasificar el motion como moderado y basado en transformaciones simples.

### Nota final de fidelidad

Los valores centrales de identidad, colores, familias y radios provienen del sitio real.

Los estados faltantes, algunas sombras y parte de la escala de spacing se derivan para completar el sistema y siempre se han marcado como tal.