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. Recolor to white for dark grounds, or one color 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. Recolor to white on dark grounds or 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 — 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
Two self-hosted variable typefaces. A serif for voice, a sans for everything functional.
Ag
Ag
Display heading
Display / hero · Newsreader · clamp(2–3rem) · 600
Section heading
Section heading · Newsreader · clamp(1.6–2.4rem) · 600
Feature title
Feature title · Newsreader · 1.25rem · 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
Pairing
Newsreader for headings and the occasional editorial moment; Inter for everything else. Eyebrows are always Inter, uppercase, letter-spaced, in royal blue (or sky on dark). Don’t set body copy in the serif.