v2.0 is a refinement, not a redesign. The deep navy, the golden-ratio grid, and the Inter / JetBrains Mono stack stay. What changes: a unified CX monogram replaces the leaf, two competing greens collapse into one teal hue family, and the PWA install experience is hardened end to end.
Who CarbonX is for and what the visual language must signal at first glance.
CarbonX is financial infrastructure for a regulated commodity — voluntary carbon credits. The audience is institutional: corporate procurement teams, commodity desks, sustainability funds, registry counterparties. Not consumer offsetters.
The closest peers visually are Sylvera, Patch, and Watershed — terminal-aesthetic, data-forward, restrained. The brands we are not are Pachama (warm/scientific/photographic), legacy NGOs (Verra, Gold Standard), or consumer-offset apps. Every design choice in this bible exists to make CarbonX read as "Bloomberg terminal for carbon", not "we plant trees."
When in doubt: choose the more institutional option. Mono over sans for data. Navy over green for surface. One restrained accent over two competing ones. Specifications and registry IDs visible everywhere, because that is what credibility looks like in this category.
One mark. Two lockups. The leaf is retired. The CX monogram is the source of truth — everything else derives from it.
App icon, favicon, social avatars, compact navigation. Works from 16px favicon up to billboard scale. Rounded square ground at 18.75% corner radius — keep the ground intact when the mark sits on busy or photographic backgrounds.
Marketing site headers, footers, email signatures, press kits, document letterheads. "Carbon" set in Inter Bold at -0.04em tracking; the X is the same geometry as the monogram in signal teal. Outline the text in production exports.
Embossing, single-channel print, embroidery, partner co-brand walls where the signal teal would clash. Both letters in foreground white on navy ground.
Use only when a light background is mandated (regulatory filings, certain print). Switch the X to --primary (institutional teal) — the brighter Signal Teal loses contrast on white.
Clear space on all sides equals the width of the X's stroke (≈ 1/9 of the mark's height). Minimum sizes: monogram 16px (favicon), wordmark 80px wide (header). Below these thresholds, the mark loses legibility — switch to the monogram.
Pair the monogram with the navy ground when it sits on photography, illustration, or any non-brand background.
Reintroduce the leaf icon. It signals consumer-offset and undersells the institutional positioning.
Use the Mono variant when a single-color reproduction is required (engraving, single-channel print).
Change the X color to any green outside the teal hue family. The Signal Teal is the only accent on the mark.
Outline the wordmark text in production exports (PDF, EPS, SVG to be embedded) so Inter is not required to render.
Skew, rotate, or apply effects (drop shadow, glow, gradient fill) to the mark. The signal-teal box-shadow on hover in product UI is allowed; everywhere else, the mark is flat.
v2.0 collapses two competing greens into one teal hue family and demotes gold from CTA to status-only. Click any swatch to copy.
Primary Teal is the institutional surface accent — body links, button fills, secondary UI affordances. Signal Teal is the bright variant reserved for the logo X mark, verified/success states, hover glow, and focus rings. Same hue (~170°), different brightness. They are not interchangeable.
The gold #D9A839 token was used in v1.0 as both a "premium accent CTA" and the Pending status. This created hierarchy conflicts — a buy button and a stale-trade warning rendered in nearly the same color. In v2.0, gold is status-only. The single brand accent is teal (in its two values). All CTAs use Primary Teal with Signal Teal on hover.
Inter for display and body. JetBrains Mono for everything numeric, identifier, or specification-flavored. Use mono aggressively in product — every ticker, registry ID, vintage year, and tCO₂e quantity reinforces the institutional cue.
Inter Display is the same family with tighter spacing optimized for 24px+. If you want a slightly sharper hero, swap headlines ≥ 28px to Inter Display. Body remains Inter. Both load via the same Google Fonts URL.
8 × 8 px grid drawn from the foreground white, dimmed to golden-ratio opacity. Carried over from v1.0 — the single most distinctive atmospheric element in the system.
/* Apply as an absolute overlay inside hero / section atmospheres */
.grid-bg {
background-image:
linear-gradient(to right, hsl(var(--foreground)) 1px, transparent 1px),
linear-gradient(to bottom, hsl(var(--foreground)) 1px, transparent 1px);
background-size: 8px 8px;
opacity: 0.1618;
}
/* Hero variant: radial mask so the grid fades to dark at the edges */
.grid-bg.hero-mask {
mask-image: radial-gradient(ellipse 55% 70% at 28% 45%, black 40%, transparent 85%);
}Use on hero sections, large CTA blocks, and dashboard backgrounds. Do not use on dense data tables or cards — the pattern competes with content. For cards, use solid --card.
Live patterns for the most common product surfaces. All examples below are rendered with the v2.0 tokens.
Primary fills with Primary Teal; hover shifts to Signal Teal with a glow. No gold CTAs.
Mono type, 11px, semantic color at 8% bg / 40% border.
Tabular-nums mono. Success teal for up-ticks, destructive for down.
Democratic Republic of Congo · Vintage 2024
Mono with Signal Teal for variables and white for operators. This pattern signals scientific rigor — use it on methodology pages, MRV documentation, and project deep-dives.
What it takes to make CarbonX install cleanly on iOS, Android, and desktop — and look intentional doing it.
v1.0 shipped <meta name="theme-color" content="#0a0a0a"> but the brand background is #091221. This affects the iOS status bar tint and PWA splash. In v2.0, every PWA-relevant color resolves to #091221.
<!-- Place in <head> -->
<meta name="theme-color" content="#091221">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="CarbonX">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="icon" type="image/svg+xml" href="/icons/icon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180.png">| icon-32.png | 32 × 32 — favicon fallback |
| icon-192.png | 192 × 192 — Android home |
| icon-512.png | 512 × 512 — splash + store |
| icon-maskable-192.png | 192 — 10% safe padding |
| icon-maskable-512.png | 512 — 10% safe padding |
| icon-monochrome-512.png | White-on-transparent |
| apple-touch-icon-180.png | 180 — iOS home screen |
Master source: /icons/icon.svg (the CX monogram in this bible). Maskable variants must inset 10% on all sides so Android's adaptive icon cropping doesn't clip the C or X.
Apple does not auto-generate these. Each device size needs an explicit apple-touch-startup-image link. Without them, the launch flashes white before the dark UI loads.
Generate from the CX monogram on a #091221 ground at minimum these sizes:
Batch with Progressier or any PWA-asset generator.
Long-press on the installed icon should expose power-user shortcuts. Three is the sweet spot — more clutters the menu.
// excerpt from /manifest.webmanifest
{
"name": "CarbonX – Voluntary Carbon Credits Trading",
"short_name": "CarbonX",
"theme_color": "#091221",
"background_color": "#091221",
"display": "standalone",
"shortcuts": [
{ "name": "Market", "url": "/market" },
{ "name": "Portfolio", "url": "/portfolio" },
{ "name": "Settlements", "url": "/settlements" }
]
}The full manifest is shipped as a sibling file alongside this bible. After deploy, audit Lighthouse PWA (target ≥ 95) and verify the Android manifest preview in Chrome DevTools shows the maskable icon correctly framed.
One copy-paste prompt that updates the entire CarbonX codebase to v2.0 — tokens, components, logos, manifest, head tags. The full prompt ships as lovable-prompt.md; the essential excerpts are below.
:root {
/* Surfaces */
--background: 218 50% 7%;
--card: 216 42% 11%;
--popover: 216 40% 13%;
--sidebar: 218 48% 8%;
--border: 216 28% 16%;
/* Brand — teal in two values */
--primary: 174 50% 42%; /* #36A99E */
--signal: 170 58% 53%; /* #3FCBB7 */
--ring: 170 58% 53%;
/* Foreground */
--foreground: 210 18% 93%;
--muted-fg: 210 12% 48%;
/* Status (semantic only) */
--success: 160 45% 42%;
--warning: 40 65% 52%; /* demoted from CTA gold */
--destructive: 0 55% 48%;
--info: 210 55% 52%;
--radius: 0.625rem;
}// /components/brand/LogoMark.tsx
export function LogoMark({ size = 40, className = "" }) {
return (
<svg viewBox="0 0 512 512" width={size} height={size} className={className} aria-label="CarbonX">
<rect width="512" height="512" rx="96" fill="hsl(var(--background))"/>
<path d="M 222 184 A 92 92 0 1 0 222 328"
fill="none" stroke="hsl(var(--foreground))"
strokeWidth="50" strokeLinecap="round"/>
<g stroke="hsl(var(--signal))" strokeWidth="50" strokeLinecap="round">
<line x1="312" y1="184" x2="442" y2="328"/>
<line x1="442" y1="184" x2="312" y2="328"/>
</g>
</svg>
);
}How CarbonX speaks in marketing, product, and press. Short version: like an exchange operator, not a sustainability NGO.
Direct, technical, evidence-led. Mention registries, methodologies, vintages, and settlement mechanics by name. Numbers over adjectives. Assume the reader is a sophisticated buyer — they know what a tCO₂e is and they want to know who verified it.
Generic climate-positive language ("save the planet", "every credit makes a difference"), nature stock photography, leaf metaphors, founder-led activism tone. The category is full of this and it reads as low-rigor. CarbonX's edge is institutional credibility — voice should reinforce that.
"Trade verified voluntary carbon credits with real-time pricing, escrow settlement, and institutional-grade compliance."
Lock the words "verified", "escrow", and "institutional-grade" — they do the heavy positioning lifting in one sentence.