Brand Guidelines

DutyBoost design system — colors, typography, spacing, and principles.

Business Card

Color Palette

Primary Blue

#1A5FFF

CTAs, links, highlights

Accent Orange

#FF7A00

Secondary actions, badges

Background

#F4F6FB

Page background

Card White

#FFFFFF

Cards, surfaces

Foreground

#0D1524

Body text, headings

Muted Foreground

#6B7590

Subtext, placeholders

Border

#D8DDE8

Dividers, input borders

Destructive Red

#DC2626

Errors, alerts

Chart Green

#00C478

Positive metrics, charts

Chart Purple

#8B5CF6

Charts, highlights

Typography

Display / Heading

Space Grotesk

700 Bold · 48–72px

Hero headlines, section titles

The quick brown fox

Subheading

Space Grotesk

600 SemiBold · 24–36px

Card headings, feature titles

The quick brown fox

Body

Inter

400 Regular · 16px

Paragraph text, descriptions

The quick brown fox

Body Strong

Inter

500 Medium · 16px

Labels, emphasized body copy

The quick brown fox

Small / Caption

Inter

400 Regular · 12–14px

Metadata, footnotes, badges

The quick brown fox

Button

Inter

600 SemiBold · 14–16px

All interactive buttons

The quick brown fox

Spacing Scale

xs

4px

Icon gaps, tight padding

sm

8px

Compact UI elements

md

16px

Standard padding, card gaps

lg

24px

Section inner padding

xl

32px

Card padding, section spacing

2xl

48px

Section vertical spacing

3xl

64px

Hero spacing, page sections

Border Radius

sm

10px

Badges, small chips

md

10px

Inputs, smaller cards

lg

12px

Cards, modals

xl

16px

Feature cards

2xl

24px

Hero blocks, CTA banners

full

9999px

Pill buttons, avatars

Design Principles

Clarity First

Every interface should communicate its purpose instantly. Use hierarchy, white space, and consistent type to lead the eye to what matters most.

Trust Through Consistency

Use the same tokens, components, and patterns everywhere. Consistent design builds trust with partners and travellers across all touchpoints.

Performance-Oriented

KPIs are prominent, actions are clear, and friction is minimised. DutyBoost is a results-driven product — the UI reflects that.

Mobile-Ready Always

Every component is designed mobile-first and tested at 375px. Retailers scan QR codes on mobile; travellers check credits on mobile.

Color with Purpose

Primary blue signals trust and action. Accent orange signals energy and opportunity. Never use color decoratively — it carries semantic meaning.

Accessible & Inclusive

All text meets WCAG AA contrast ratios. Interactive elements have visible focus states. The platform serves users across 6 languages.

Ready to use the guidelines?

Download the full brand guidelines as a PDF to share with your team or agency.

We use cookies to improve your experience. You decide which cookies to allow — essential cookies are always required for the platform to function. Cookie Policy