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
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#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.
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.
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