Brand kit

Everything you need to look like Truust.

Our logo, colors, type, components and voice in one place. Press, partners and designers: this is the source of truth.

Cobalt leads

Big blue surfaces carry the brand. Everything else supports it.

Yellow sparks

One yellow moment per view: a pill, a check, a hover. Never a wall of it.

Round and calm

Generous radii, hairline borders and tight, confident type.

Color

Cobalt, a spark of yellow.

Click any value to copy it. Hex values come straight from the live design tokens, so they always match the site.

Brand

CobaltAa

Primary brand color. Headings accents, primary buttons, large surfaces, links.

YellowAa

The spark. Pills, check badges, hover states and highlights. Use sparingly so it stays special.

InkAa

Text that sits on yellow, and the darkest tone in the system.

Neutrals

TextAa

Body copy and headings on white or paper surfaces.

GrayAa

Supporting copy, descriptions, captions and numbering.

HairAa

1px borders on cards, inputs and dividers.

PaperAa

Section backgrounds, input fills and soft card surfaces.

Supporting

TintAa

Pale cobalt wash for feature cards and code chips.

Cobalt deepAa

End stop of the cobalt gradient. Not for flat use.

Signal orangeAa

Live and alert accents only, like the pulsing dot on the waitlist badge.

Signature gradient

The Truust Cobalt gradient.

160° from a bright cobalt through brand Cobalt into a deep navy. Used on the footer, banners and feature cards, always with a 1px Cobalt border.

Approved pairings

Aa
White on Cobalt
Aa
Yellow on Cobalt
Aa
Ink on Yellow
Aa
Text on White
Aa
Gray on Paper
Aa
White on Yellow

Typography

Tight, bold, confident.

Headlines run semibold with strong negative tracking. Body copy stays regular, in gray, with generous line height.

Section heading

clamp(32px, 4.6vw, 64px) · semibold · -0.05em · 1.03

Trade with total confidence.

Feature heading

clamp(30px, 3.8vw, 52px) · semibold · -0.045em · 1.05

One notification away.

Card heading (large)

clamp(24px, 2.3vw, 32px) · semibold · -0.035em · 1.1

You set the price

Card heading

21px · semibold · -0.025em · 1.15

Get notified

Lead paragraph

17–18px · regular · 1.6

Truust connects riders with real deliveries from buyers and sellers around you.

Body

15.5–16px · regular · 1.55

Send the price you’re happy to deliver for.

Label / eyebrow

14px · semibold

Why ride with Truust

Caption / fine print

13px · regular

© 2026 Truust Marketplace. All rights reserved.

Weights

Semibold (600) for everything that headlines. Regular for body. No bold or black weights.

Tracking

Tighten as the size grows: -0.05em on the biggest, -0.025em on card titles, normal on body.

Numerals

Use tabular numbers for step counts, prices and anything that lines up.

Buttons

Pills that lift on hover.

Every button is fully rounded, semibold, and rises 2px on hover while swapping color. Hover the examples below.

On light surfaces

Primary Highlight SecondaryDisabled
  • Primary: Cobalt fill, hover to Yellow with Ink text.
  • Highlight: Yellow fill, hover to Cobalt.
  • Secondary: White with hairline, hover to Cobalt.
  • Disabled: 40% opacity, no hover.

On Cobalt surfaces

Highlight

Use the white button on cobalt cards and banners. It is the same JoinButton used across the site, and it opens the waitlist modal.

Anatomy

rounded-fullpx-7 py-4text-[16px]font-semiboldgap-2 icon 18pxhover: translateY(-2px)200ms ease

Cards and radii

Big radii, quiet borders.

The bigger the surface, the bigger the radius. Every card has a 1px border in its own color family.

16px

Inputs

rounded-2xl

24px

Chat bubbles, small tiles

rounded-[24px]

32px

Step cards, modals (36 for large)

rounded-[32px]

36px

Perk cards, spotlight panels

rounded-[36px]

44px

Footer, CTA banners, hero cards

rounded-[44px]

Full

Buttons, pills, icon circles

rounded-full

Cobalt card

Hero moments and key messages. Gradient, Cobalt border, white text.

Yellow card

A single punchy highlight per section. Ink text only.

Tint card

Soft emphasis. Pale cobalt wash with a faint cobalt border.

White card

The default container. White with a hairline border.

Forms

Soft fields, clear focus.

Inputs sit on Paper with a hairline border. On focus they turn white with a Cobalt border and a soft halo.

Secure my spot

Rules

  • Labels sit above fields: 14px semibold in Text color.
  • Fields are rounded-2xl with px-5 py-3.5, 15.5px text.
  • Primary submit button is full width and fully rounded.
  • Reassure under the button in 13px Gray (“No spam”).
  • Don’t use red borders for empty states. Disable the button instead.

Badges and pills

Small things that sparkle.

Yellow pill

Launching soon

Status and announcements. Ink text, 14px semibold, optional 16px icon.

Icon badge and check

Icon badge for cards, yellow check for lists, orange pulse for “live”.

Social buttons

XIGFB

44px circles, 14% white fill, flip to white on hover.

Layout and spacing

One container, steady rhythm.

The grid

Containermax-w-7xl mx-auto
Page gutterpx-6
Section paddingpy-20 (CTA: pb-24)
Card grid gapgap-4 (small) · gap-5 (large)
Card paddingp-8 · p-9 · md:p-10 / md:p-12
Section rhythmWhite, then Paper, alternating
Feature layout12-column grid, 5 / 7 split

Section pattern

Eyebrow label
Heading · max-w-2xl · mb-12
Card 1
Card 2
Card 3

Every section starts with a small label, a tight heading, then a card grid that wraps from 1 to 2 to 4 columns.

Iconography

Light-stroke Lucide.

We use Lucide icons at 20px with a 1.5 stroke inside an icon badge. Large decorative icons go up to 96px at 1.25. Check marks use a heavy 3 stroke.

Bike
BellRing
BadgeDollarSign
UserCheck
MapPin
Wallet
ShieldCheck
Handshake
ArrowRight
Home

Voice and tone

Warm, plain, a bit playful.

We talk like a trusted friend who happens to know escrow. Short sentences, no jargon, and a wink where it fits.

Lines we use

Trade with total confidence.
The Global Social-Commerce Escrow Protocol, anywhere in Nigeria.
Deliver nearby. Set your price.
Be first when we launch. No spam, just your invite.

Principles

  • Reassure first. Safety is the product.
  • Say it simply, then stop.
  • Nigerian by default: ₦, local places, local jokes.
  • Playful in small moments, never at the user’s expense.

Say

  • “Your money stays safe until you confirm delivery.”
  • “Name your price. The seller picks the rider.”
  • “Truust” always with a capital T, one word.

Avoid

  • Crypto or fintech buzzwords: “decentralized”, “web3”, “seamless”.
  • Scare tactics about scams. Show the fix, not the fear.
  • “TRUUST”, “truust”, or “Truust App” in running text.
Press and partners

Need something else?

Tell us what you’re making and we’ll send the right assets.

Contact us