Logo · Color
The primary mark. Use on white or light backgrounds wherever space allows.
Height px —
Internal reference
G2Fuels brand guide
The marks, color, and type that make up the G2Fuels identity — for designers building decks, documents, and assets.
01 — Marks
Logos & marks
Preview each mark, recolor and size it, then export PNG or SVG. Each card notes where that mark is best used.
Logo · Solid
Single ink. White by default for dark grounds; recolor to one ink where the gradient would clash.
Color Height px —
Droplet · Color
The mark alone, for tight or established contexts — favicons, avatars, watermarks.
Height px —
Droplet · Solid
Single-ink droplet. White by default for dark grounds; recolor for single-color uses.
Color Height px —
02 — Color
Color
Click any swatch to copy its hex. Token names are the CSS custom properties used in code.
Brand
The wordmark colors — royal blue from "Fuels", sky from "G2".
Text
Light-ground text — a neutral charcoal ramp, headings down to captions.
Text on dark
On the dark stage — footer, hero, and the page-title band.
Backgrounds
Page and card surfaces — dark stage to white.
Borders
Dividers and outlines — hairline to emphasized.
03 — Type
Typography
One self-hosted variable typeface, used everywhere — from display headings down to captions.
Ag
Display heading
Display / hero · Inter · clamp(1.9–2.75rem) · 600
Section heading
Section heading · Inter · clamp(1.5–2.2rem) · 600
Feature title
Feature title · Inter · 1.15rem · 600
Section label
Eyebrow · Inter · 0.7rem · 650 · uppercase · +2px
Body copy sets the reading rhythm — Inter at a comfortable measure and line height, in the secondary text color for long-form passages.
Body · Inter · 1.05rem · 400 · line-height 1.7
Meta / caption · Inter · 0.68rem · 650 · uppercase
Usage
Inter carries the whole system — separate roles by weight and size, not by switching faces. Headings at 600–700; body at 400. Eyebrows are uppercase, letter-spaced, in royal blue (or sky on dark).