Carbometrix Brand Guidelines Brand Style Guide
← Color Fonts

Carbometrix Brand Guidelines

Sistema visual para una marca climate-financial con contraste claro y oscuro, tipografia precisa y un lenguaje de volumen translucido que vuelve legible la data sin verse frio ni generico.

FUENTE: Carbometrix-Brand-Guidelines-DESIGN.md

Typography

ABC Normal - substitute
Heading system
Instrument Sans
Specimen · 400 · 38px · ls -0.05em
Body system
Instrument Sans
400 · 16px / 24px
Carbometrix usa cuerpo limpio y sereno para que reportes, narrativas de riesgo y paneles de producto se lean con autoridad sin perder aire editorial.
Original fonts · Heading: ABC Normal -> Instrument Sans · Body: ABC Normal -> Instrument Sans · Labels: ABC Normal -> Instrument Sans (Google substitute).
La guia original muestra la familia ABC Normal en regular, medium y bold; el HTML usa Instrument Sans para conservar una grotesk precisa y menos generica.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
01 02 03 04 05 06 07 08 09 0%

Colors

Climate accents
Climate Blue#4F6FE0
Coral Signal#FF7E73
Data Cyan#79D5E3
Graphite Core#101010

Background #F7F6F2 · Surface #FFFFFF · Text #161616 · Border #D8DCE3 · Accent #4F6FE0 / #FF7E73 / #79D5E3

Overview

Editorial system
LayoutSpacious editorial spread
Content width~1180px
FramingSplit light and dark canvases
Grid12 cols with 24px gutters

Buttons

2 styles
Primary Secondary
Primary#101010 · #F4F5F8 · pill
Secondarytransparent · #161616 · 1px border

Components

Data calm

Signal card

Una pieza funcional debe sentirse blanca, precisa y con aire. El color entra como halo o como figura, nunca como ruido.

Measure Invest
Cardwhite / 12px / subtle shadow
Benefit cardgraphite / white text / fine border

Spacing

8px base
Spacing rhythm
Calm hierarchy
La separacion amplia ayuda a que los visuales cientificos respiren y no compitan con el copy financiero.
Scale
8122024325696

Elevation & Depth

Translucent volume

La profundidad aparece por capas y planos con opacidad baja. La sombra existe, pero el protagonismo lo tienen los gradientes climaticos y la arquitectura translucida de cubos, paneles y orbitas.

Surface#FFFFFF / #101010
Border1px soft hairline
Shadow0 18px 50px rgba(22,22,22,.06)
Techniquelayered translucent gradients

Shapes

Cube grammar
cube orb bars layers planet grid

El lenguaje visual usa geometria simple convertida en volumen de datos. El radio vive en cards y pills, no en las figuras principales.

Do's and Don'ts

Guardrails

Do

Usa blanco y negro como esqueleto antes de cargar la composicion con color.
Deja que una sola figura geometrica cargue la energia principal del bloque.
Haz que azul, coral y cian entren como informacion en volumen.

Don't

No conviertas el sistema en una SaaS azul generica con widgets por todos lados.
No uses verdes eco dominantes ni ilustracion amable de consumo.
No metas sombras pesadas o brillos glossy que maten la sutileza.

Motion

Subtle

Si se anima, debe hacerlo como una respiracion de capas: fades, desplazamientos leves y flotacion muy controlada. Nada debe sentirse promo-tech; el movimiento acompana la lectura.

Motion levelSubtle
Durations180 / 320 / 700ms
Easingcubic-bezier(.22,1,.36,1)
Patternfade, float, layer shift
Generado desde DESIGN.md · design-md-styleguide · Carbometrix Brand Guidelines
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --color-primary: #4F6FE0;
  --color-primary-hover: #3F5CCC;
  --color-primary-active: #314AB0;
  --color-secondary: #FF7E73;
  --color-accent: #79D5E3;
  --color-accent-soft: #B8EAF1;
  --color-neutral: #F2F4F8;
  --color-background: #F7F6F2;
  --color-surface: #FFFFFF;
  --color-surface-alt: #ECE9E0;
  --color-surface-dark: #101010;
  --color-surface-dark-soft: #1C1C1E;
  --color-text-primary: #161616;
  --color-text-secondary: #4F535B;
  --color-text-muted: #8D929C;
  --color-text-on-primary: #FFFFFF;
  --color-text-on-dark: #F4F5F8;
  --color-border: #D8DCE3;
  --color-border-subtle: #E8EBF0;
  --color-success: #4CAF79;
  --color-success-bg: #EAF7EF;
  --color-warning: #FFB756;
  --color-warning-bg: #FFF2DB;
  --color-error: #D96058;
  --color-error-bg: #F9E7E5;
  --color-info: #79D5E3;
  --color-info-bg: #E9F9FC;
  --font-display: "ABC Normal";
  --font-body: "ABC Normal";
  --radius-sm: 0px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --space-base: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 56px;
  --space-gap: 24px;
  --space-section-padding: 96px;
}
@theme {
  --color-primary: #4F6FE0;
  --color-primary-hover: #3F5CCC;
  --color-primary-active: #314AB0;
  --color-secondary: #FF7E73;
  --color-accent: #79D5E3;
  --color-accent-soft: #B8EAF1;
  --color-neutral: #F2F4F8;
  --color-background: #F7F6F2;
  --color-surface: #FFFFFF;
  --color-surface-alt: #ECE9E0;
  --color-surface-dark: #101010;
  --color-surface-dark-soft: #1C1C1E;
  --color-text-primary: #161616;
  --color-text-secondary: #4F535B;
  --color-text-muted: #8D929C;
  --color-text-on-primary: #FFFFFF;
  --color-text-on-dark: #F4F5F8;
  --color-border: #D8DCE3;
  --color-border-subtle: #E8EBF0;
  --color-success: #4CAF79;
  --color-success-bg: #EAF7EF;
  --color-warning: #FFB756;
  --color-warning-bg: #FFF2DB;
  --color-error: #D96058;
  --color-error-bg: #F9E7E5;
  --color-info: #79D5E3;
  --color-info-bg: #E9F9FC;
  --font-display: "ABC Normal";
  --font-body: "ABC Normal";
  --radius-sm: 0px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --spacing-base: 8px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 32px;
  --spacing-xl: 56px;
  --spacing-gap: 24px;
  --spacing-section-padding: 96px;
}
{
  "colors": {
    "primary": "#4F6FE0",
    "primary-hover": "#3F5CCC",
    "primary-active": "#314AB0",
    "secondary": "#FF7E73",
    "accent": "#79D5E3",
    "accent-soft": "#B8EAF1",
    "neutral": "#F2F4F8",
    "background": "#F7F6F2",
    "surface": "#FFFFFF",
    "surface-alt": "#ECE9E0",
    "surface-dark": "#101010",
    "surface-dark-soft": "#1C1C1E",
    "text-primary": "#161616",
    "text-secondary": "#4F535B",
    "text-muted": "#8D929C",
    "text-on-primary": "#FFFFFF",
    "text-on-dark": "#F4F5F8",
    "border": "#D8DCE3",
    "border-subtle": "#E8EBF0",
    "success": "#4CAF79",
    "success-bg": "#EAF7EF",
    "warning": "#FFB756",
    "warning-bg": "#FFF2DB",
    "error": "#D96058",
    "error-bg": "#F9E7E5",
    "info": "#79D5E3",
    "info-bg": "#E9F9FC"
  },
  "typography": {
    "display-lg": {
      "fontFamily": "ABC Normal",
      "fontSize": "64px",
      "fontWeight": "400",
      "lineHeight": "60px",
      "letterSpacing": "-0.04em"
    },
    "body-md": {
      "fontFamily": "ABC Normal",
      "fontSize": "16px",
      "fontWeight": "400",
      "lineHeight": "24px"
    },
    "label-md": {
      "fontFamily": "ABC Normal",
      "fontSize": "11px",
      "fontWeight": "500",
      "lineHeight": "16px"
    }
  },
  "rounded": {
    "sm": "0px",
    "md": "12px",
    "lg": "20px",
    "full": "9999px"
  },
  "spacing": {
    "base": "8px",
    "sm": "12px",
    "md": "20px",
    "lg": "32px",
    "xl": "56px",
    "gap": "24px",
    "section-padding": "96px"
  }
}
---
version: "1.0"
name: "Carbometrix Brand Guidelines"
description: "Sistema visual para una marca de medicion de carbono orientada a instituciones financieras: contraste editorial claro/oscuro, geometria translucida, gradientes climaticos y una grotesk precisa de tono europeo."
colors:
  primary: "#4F6FE0"
  primary-hover: "#3F5CCC"
  primary-active: "#314AB0"
  secondary: "#FF7E73"
  accent: "#79D5E3"
  accent-soft: "#B8EAF1"
  neutral: "#F2F4F8"
  background: "#F7F6F2"
  surface: "#FFFFFF"
  surface-alt: "#ECE9E0"
  surface-dark: "#101010"
  surface-dark-soft: "#1C1C1E"
  text-primary: "#161616"
  text-secondary: "#4F535B"
  text-muted: "#8D929C"
  text-on-primary: "#FFFFFF"
  text-on-dark: "#F4F5F8"
  border: "#D8DCE3"
  border-subtle: "#E8EBF0"
  success: "#4CAF79"
  success-bg: "#EAF7EF"
  warning: "#FFB756"
  warning-bg: "#FFF2DB"
  error: "#D96058"
  error-bg: "#F9E7E5"
  info: "#79D5E3"
  info-bg: "#E9F9FC"
typography:
  display-lg:
    fontFamily: "ABC Normal"
    fontSize: "64px"
    fontWeight: 400
    lineHeight: "60px"
    letterSpacing: "-0.04em"
  body-md:
    fontFamily: "ABC Normal"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "24px"
  label-md:
    fontFamily: "ABC Normal"
    fontSize: "11px"
    fontWeight: 500
    lineHeight: "16px"
rounded:
  sm: "0px"
  md: "12px"
  lg: "20px"
  full: "9999px"
spacing:
  base: "8px"
  sm: "12px"
  md: "20px"
  lg: "32px"
  xl: "56px"
  gap: "24px"
  section-padding: "96px"
components:
  button-primary:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.text-on-dark}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "12px 18px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    borderColor: "{colors.border}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "12px 18px"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border-subtle}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "20px"
---

# DESIGN.md - Carbometrix Brand Guidelines

> Sistema de diseno extraido de la captura `Carbometrix-Brand-Guidelines-2026-06-18-12_10_24.png`.
> La referencia muestra una identidad para una empresa de carbon performance enfocada en instituciones financieras, con lenguaje editorial, geometria atmosferica y un contraste muy controlado entre claridad institucional y profundidad tecnica.

---

## 1. Tema Visual y Atmosfera

Carbometrix se siente como una firma de inteligencia climatica que quiere hablar con rigor financiero sin parecer un dashboard burocratico. La marca no se apoya en hojas verdes ni en soluciones eco obvias. En lugar de eso, construye credibilidad con una mezcla de blanco editorial, negro profundo, diagramas geometrizados y transparencias que parecen capas de datos o mercados superpuestos.

La atmosfera mezcla dos mundos. Por un lado, la pagina se abre con una limpieza muy institucional: mucho blanco, una grotesk precisa, aire generoso y composiciones centradas. Por el otro, la marca introduce un universo oscuro y tecnico donde las formas parecen modelos de riesgo, cubos de datos, globos climaticos o capas de informacion suspendida. Esa dualidad es clave: Carbometrix no debe verse ni demasiado activista ni demasiado fintech generica. Debe sentirse exacta, serena y moderna.

Los colores no son fuertes por saturacion absoluta sino por su temperatura. El azul electrico comunica metodo y horizonte, el coral introduce humanidad y urgencia suave, y el cian convierte la ciencia en algo legible y contemporaneo. Las transparencias y los gradientes hacen que las formas se perciban como volumen de informacion, no como decoracion gratuita.

**Palabras clave de personalidad**: editorial, climatico, financiero, preciso, translucido, calmado, tecnico, contemporaneo

**Densidad del layout**: spacious

**Modo preferido**: both, con alternancia clara y oscura

**Nivel de ornamentacion**: subtle con momentos elaborados en visuales de marca

---

## 2. Paleta de Colores y Roles Semanticos

La paleta trabaja en dos registros. El primero es institucional y editorial: blancos, cremas frios, gris grafito y texto casi negro. El segundo es atmosferico: azul, coral y cian, usados como gradientes transparentes, planos superpuestos y destellos de informacion.

### Colores principales

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Climate Blue | `--color-primary` | `#4F6FE0` | titulares de sistema, datos clave, planos de cubo, toggles, focos | `#FFFFFF` |
| Coral Signal | `--color-secondary` | `#FF7E73` | energia humana, alertas suaves, caras calidas del gradiente | `#161616` |
| Data Cyan | `--color-accent` | `#79D5E3` | superficies de apoyo, halo cientifico, visualizaciones | `#161616` |
| Soft Cyan Mist | `--color-accent-soft` | `#B8EAF1` | tintes suaves, fondos auxiliares, overlays | `#161616` |

### Neutros del sistema

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Editorial Background | `--color-background` | `#F7F6F2` | fondo general claro |
| Card White | `--color-surface` | `#FFFFFF` | tarjetas, modulos informativos |
| Soft Stone | `--color-surface-alt` | `#ECE9E0` | paneles suaves y transiciones claras |
| Graphite Core | `--color-surface-dark` | `#101010` | fondos oscuros, hero split, posters |
| Night Graphite | `--color-surface-dark-soft` | `#1C1C1E` | paneles oscuros secundarios |
| Carbon Ink | `--color-text-primary` | `#161616` | headings y copy principal |
| Data Grey | `--color-text-secondary` | `#4F535B` | cuerpo secundario |
| Mist Label | `--color-text-muted` | `#8D929C` | labels y notas |

### Estados semanticos

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Success Green | `--color-success` | `#4CAF79` | estado positivo y compliance |
| Warning Amber | `--color-warning` | `#FFB756` | precauciones, warnings suaves |
| Error Clay | `--color-error` | `#D96058` | estados negativos |
| Info Cyan | `--color-info` | `#79D5E3` | informacion contextual |

### Regla de color

Carbometrix casi nunca usa los tres acentos cromaticos al mismo peso. En cada composicion debe dominar una direccion: azul para estructura, coral para tension humana o cian para atmosfera de datos. Los neutros siempre llevan el volumen principal de la pagina.

---

## 3. Tipografia

La guia muestra de forma explicita la familia `ABC Normal` en pesos regular, medium y bold. Es una grotesk muy limpia, de construccion contemporanea, con suficiente neutralidad para lo institucional y suficiente ritmo para verse editorial en gran formato. Todo el sistema parece vivir dentro de esa misma familia.

Como `ABC Normal` no esta disponible en Google Fonts, la mejor sustitucion para HTML debe conservar precision, modales abiertos y una presencia contemporanea sin volverse demasiado startup ni demasiado tecnica. Para esta marca, las candidatas mas cercanas son `Instrument Sans`, `Plus Jakarta Sans` e `IBM Plex Sans`. La mejor equivalencia visual para el headline y el cuerpo es `Instrument Sans`, porque mantiene un eje moderno, una construccion refinada y una energia menos generica que otras grotesks comunes.

### Fuentes base

```css
--font-heading: 'ABC Normal', 'Instrument Sans', sans-serif;
--font-body: 'ABC Normal', 'Instrument Sans', sans-serif;
--font-label: 'ABC Normal', 'Instrument Sans', sans-serif;
```

**Nota de implementacion HTML**:  
Original observada en la guia: `ABC Normal`  
Sustitucion renderizada en HTML: `Instrument Sans` (Google Fonts)

### Escala tipografica

| Token | rem | px equiv. | Line height | Uso |
|------|-----|-----------|-------------|-----|
| `text-xs` | `0.6875rem` | `11px` | `16px` | labels, indices, metadata |
| `text-sm` | `0.875rem` | `14px` | `20px` | notas y captions |
| `text-base` | `1rem` | `16px` | `24px` | cuerpo principal |
| `text-lg` | `1.125rem` | `18px` | `28px` | subtitulos y parrafos destacados |
| `text-2xl` | `2rem` | `32px` | `36px` | titulares de bloque |
| `text-4xl` | `4rem` | `64px` | `60px` | gesto principal editorial |

### Reglas de jerarquia

- La marca no depende de serif, italic ni condensadas; toda la expresion viene de la escala, el aire y el contraste de color.
- Los headings pueden ir con tracking ligeramente negativo.
- Labels y metadata deben permanecer pequenos, precisos y muy alineados.
- Cuando el fondo es oscuro, la tipografia debe respirar; no hay que saturar con bloques grandes de texto.

---

## 4. Layout y Composicion

La estructura combina paginas muy abiertas con modulos focales. La marca sabe alternar spreads luminosos y paneles oscuros sin romper continuidad, porque siempre conserva una misma disciplina de margen, anclaje y silencio visual.

### Principios visibles

- Uso frecuente de marcos amplios y mucho vacio alrededor del contenido.
- Una figura principal por seccion: cubo, globo, barras, capas o visual de datos.
- Texto alineado con bordes internos firmes, nunca flotando sin sistema.
- Las transiciones entre secciones suelen apoyarse en una linea degradada fina.
- Las composiciones pueden partir el lienzo en claro/oscuro como gesto editorial.

### Tokens de layout

```css
--container-max: 1180px;
--grid-columns: 12;
--grid-gap: 24px;
--section-padding: 96px;
--card-padding: 20px;
--content-measure: 44ch;
```

### Logica espacial

Cuando el sistema esta en claro, el contenido debe sentirse institucional y legible. Cuando entra el negro, la marca puede ponerse mas atmosferica, pero el texto y las formas siguen colocados con calma. Nada se amontona.

---

## 5. Componentes

Los componentes son pocos, sobrios y orientados a presentar informacion con autoridad. No deben sentirse consumer ni juguetones. El protagonismo sigue siendo del layout, la tipografia y los visuales geometricos.

### Boton primario

```css
background: #101010;
color: #F4F5F8;
border: 1px solid transparent;
border-radius: 9999px;
padding: 12px 18px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
```

**Hover**: aclarar ligeramente el fondo hacia `#1C1C1E` o sumar halo de baja opacidad.  
**Active**: reducir un poco la luminosidad del texto y compactar la sombra.  
**Focus**: anillo azul fino usando `#4F6FE0`.

### Boton secundario

```css
background: transparent;
color: #161616;
border: 1px solid #D8DCE3;
border-radius: 9999px;
padding: 12px 18px;
```

### Card informativa

```css
background: #FFFFFF;
border: 1px solid #E8EBF0;
border-radius: 12px;
padding: 20px;
box-shadow: 0 18px 50px rgba(22,22,22,0.06);
```

### Cards oscuras de beneficio

```css
background: #101010;
border: 1px solid rgba(255,255,255,0.12);
color: #F4F5F8;
padding: 22px;
```

### Inputs y controles

Los inputs deben ser blancos, silenciosos, con borde frio muy fino y foco azul. Los toggles pueden usar la paleta de acentos sobre neutro oscuro para representar estados o datasets.

---

## 6. Profundidad, Material y Efectos

La profundidad no viene de sombras pesadas ni de glassmorphism genrico. Viene de transparencias apiladas, degradados climaticos y planos geometricos que parecen datos en volumen. Las sombras existen, pero estan subordinadas a la construccion de capas.

### Material visual

- Transparencias frias con opacidad baja a media.
- Planos superpuestos con gradientes azul, coral y cian.
- Negro granulado o grafito profundo como base de contraste.
- Halos suaves, no brillos exagerados.

### Receta de elevacion clara

```css
box-shadow:
  0 18px 50px rgba(22, 22, 22, 0.06),
  0 6px 18px rgba(22, 22, 22, 0.04);
```

### Receta de visual translucido

```css
background: linear-gradient(135deg, rgba(255,126,115,0.45), rgba(121,213,227,0.35) 40%, rgba(79,111,224,0.45));
border: 1px solid rgba(255,255,255,0.28);
backdrop-filter: blur(10px);
```

La marca debe parecer precisa y ligera, no glossy. El volumen tiene que sentirse arquitectonico, casi como una maqueta de informacion.

---

## 7. Shapes, Iconografia y Artefactos

La marca se apoya en geometria elemental y en artefactos que convierten datos abstractos en formas poeticas. Cubos, globos, anillos, capas y barras no aparecen como iconos stock sino como visualizaciones estilizadas.

### Lenguaje de formas

- Cubos transparentes y prismas para hablar de capas, estructura y modelos.
- Circulos, orbitas y globos para representar planeta, alcance o sistemas.
- Barras en volumen y flechas verticales para crecimiento y transicion.
- Panels rectangulares con bordes netos y divisiones internas muy finas.

### Radios

- `0px` para marcas de composicion, lineas y paneles duros.
- `12px` para cards funcionales.
- `9999px` para controles tipo pill y toggles.

### Iconografia

Evitar librerias de iconos demasiado suaves o caricaturescas. Si hay iconos de interfaz, deben ser lineales, discretos y compatibles con un contexto de producto institucional.

---

## 8. Responsive y Aplicacion

En responsive, lo mas importante es conservar la calma del sistema. El hero puede colapsar, pero no debe perder su dualidad claro/oscuro ni la relacion entre texto y figura principal.

### Reglas responsivas

- Los headings bajan de `64px` a un rango entre `34px` y `42px`.
- Las composiciones divididas en claro/oscuro deben apilarse sin perder jerarquia.
- Los visuales geometricos pueden reducirse o simplificarse antes de competir con el copy.
- Las cards oscuras deben mantener padding generoso incluso en movil.
- Los botones y toggles deben respetar minimo `44x44px`.

### Aplicaciones visibles en la guia

- Hero editorial
- Posters y out-of-home
- App icon
- Cards de beneficios
- Visuales de data storytelling

---

## 9. Do's and Don'ts

### Do

- Usa blanco editorial y negro profundo como esqueleto antes de introducir acentos.
- Mantiene las formas geometricas limpias y con opacidades controladas.
- Usa el azul como color de estructura y el coral como contrapunto humano.
- Deja mucho espacio alrededor de los visuales principales.
- Haz que los gradientes parezcan informacion en volumen, no un wallpaper decorativo.

### Don't

- No conviertas la marca en un sistema "eco" obvio con verdes dominantes y hojas.
- No llenes las interfaces de widgets, tablas y chrome innecesario.
- No uses sombras negras pesadas que opaquen la sutileza de las transparencias.
- No metas serif editoriales ni monos agresivos, porque cortan la precision del sistema.
- No uses demasiados acentos al mismo tiempo con la misma intensidad.

---

## 10. Motion

Si esta identidad se traduce a web, el movimiento debe sentirse como una respiracion de capas, no como una animacion de marketing vistosa. Los elementos pueden flotar, cruzarse o encenderse, pero siempre de forma lenta, limpia y calculada.

### Tokens de motion

- **Nivel**: subtle
- **Duraciones**: `180ms`, `320ms`, `700ms`
- **Easing**: `cubic-bezier(.22,1,.36,1)`
- **Patrones**: fade in suave, hover con elevacion minima, parallax leve en planos translucidos

### Reglas

- La animacion nunca debe romper la lectura institucional.
- Prefiere apariciones por opacidad y pequeños desplazamientos.
- Respeta `prefers-reduced-motion`.

---

## 11. Prompts de Agente

### Prompt para landing

> Disena una landing para una marca climate-financial al estilo Carbometrix: base blanca editorial con secciones negras de contraste, tipografia grotesk limpia tipo ABC Normal, visuales geometricos translucidos en azul, coral y cian, y composiciones muy aireadas con tono institucional contemporaneo.

### Prompt para dashboard marketing

> Crea una pagina de producto inspirada en Carbometrix. Usa cards sobrias, mucho espacio, copy financiero claro y un sistema de visualizaciones geometricas sutiles. Evita verde eco generico y evita chrome recargado.

### Prompt para posters

> Genera una serie de posters de marca con fondo negro profundo, tipografia blanca precisa, una figura principal translcida en gradiente azul coral cian y un layout editorial con gran control del espacio negativo.

---

## 12. Anexo Tecnico

### Sustitucion tipografica HTML

- **Original observada**: `ABC Normal`
- **Candidatas comparadas**: `Instrument Sans`, `Plus Jakarta Sans`, `IBM Plex Sans`
- **Elegida para HTML**: `Instrument Sans`
- **Razon**: conserva una neutralidad refinada, menos generica que una sans default y con suficiente tension editorial para los headlines grandes.

### Stack sugerido

- HTML autocontenido
- CSS con gradientes, transparencias y sombras de baja opacidad
- Google Fonts para `Instrument Sans`

### Guardrail final

Si una futura pagina basada en este sistema empieza a verse como SaaS azul generica o como marca eco amable de consumo, se perdio el matiz correcto. Carbometrix debe sentirse como una herramienta seria, editorial y contemporanea para leer el riesgo climatico con claridad.