LogoColourTypeComponentsIn contextTokensBrand center · v1LogoColourTypeComponentsIn contextTokensBrand center · v1Logo, colour, type and components for a marketplace app that puts cheap fuel on your route, built from the original identity board and UI screens.
● Brand center v1 · 2026
A rounded, heavy wordmark with a gradient from fresh green to mint, a fuel-gauge cut through the “e”, and three spark lines above it.
on ink · gradient
on white · deep
on green · ink
on deep · white
The board lists five brand colours. Green and cyan grow into nine-step ramps; the wordmark gradient becomes a token of its own.
Steps 100–400 mix the base with white; 600–900 with Ink.
Raleway (Black and Regular) and Montserrat (Light and caps) are the two faces shown on the original board.
1234:root {
/* colour · the five brand dots */
--fuel-ink-900: #002D33; --fuel-deep-800: #003E50;
--fuel-green-500: #00E193; --fuel-cyan-500: #00B1D2;
--fuel-orange-500: #FFA928;
/* colour · derived */
--fuel-green-800: #007C5D; --fuel-haze-600: #4D7A7F;
--fuel-map-100: #E7EDF5;
--fuel-gradient-brand: linear-gradient(180deg, #53E681, #16DD99); /* wordmark */
--fuel-gradient-action: linear-gradient(90deg, #00E193, #53E681); /* pill buttons */
/* type */
--fuel-font-display: "Raleway", system-ui, sans-serif;
--fuel-font-ui: "Montserrat", system-ui, sans-serif;
/* shape */
--fuel-radius-card: 20px; --fuel-radius-pill: 999px;
--fuel-shadow-card: 0 10px 28px rgba(0, 45, 51, .16);
}