Official reference · 2026 edition

A brand that earns trust before it talks about technology.

These guidelines bring together the verbal and visual foundations of Billabex. They apply to the product, website, presentations, content and every external communication.

Billabex

The trusted colleague

Billabex feels like a capable person working alongside you — never a cold dashboard or an aggressive agency.

01 · Foundation

Debt collection is a relationship problem, not a technology problem.

Every brand decision starts with this insight. We make a sensitive task more human, calmer and easier to hand over.

“You work, you deliver, you get paid.”

Confident Warm Direct
CategoryUsual codeBillabex response
Collection SaaS Tool and dashboard Colleague and trust
Collection agency Aggressive and late Diplomatic from day one
Manual follow-up Stress and lost time Complete delegation

03 · Colors

Blue reassures. Red prompts action.

The palette is intentionally concise. Billabex red is a rare signal: a CTA, a strong link or a decisive accent.

Brand

Billabex red

#D62828

brand-primary

Dark red

#B91C1C

brand-secondary

Soft red

#FEF2F2

brand-soft

Inverse red

#FECACA

brand-inverse

Inks

Strong ink

#003049

ink-strong

Body ink

#244B5A

ink-body

Muted ink

#52677A

ink-muted

Subtle ink

#64748B

ink-subtle

Surfaces & lines

App

#F8FAFC

surface-app

Card

#FFFFFF

surface-card

Subtle

#F1F5F9

surface-subtle

Hairline

#E2E8F0

hairline

Functional states

Success

#047857

status-success

LinkedIn

#0A90D8

social-linkedin

The red signal rule

Authority comes from deep blue. Red draws attention to an action. If everything is red, nothing signals action anymore.

04 · Typography

One family. The full hierarchy comes from weight.

Outfit is the only official typeface. Its open forms bring warmth without multiplying styles.

Outfit Variable · 400–700

Aa Bb Cc Dd Ee Ff Gg · 0123456789 · € %

You work, you deliver, you get paid.

Billabex handles difficult conversations about money with the right tone, at the right time.

Display LG

28–44 px

700

Display

28 px

700

Heading 1

21 px

700

Lead

18–20 px

400

Heading 2

18 px

600

Body

14 px

400

Caption

12 px

600

  • Headings at 700, body copy at 400, labels at 500.
  • No second typeface and no Light 300 body copy.
  • Spaced capitals are reserved for short captions.
  • Line length: 65 to 75 characters.

05 · Composition

Room to breathe, clear structure, human warmth.

A page should read like a calm conversation, not a control panel.

Grid

1,200 px maximum container and 16 px mobile gutters.

Rhythm

8 px base and semantic section spacing.

Radii

6 to 16 px in general; pills are reserved for tags and navigation.

Elevation

Flat surface, fine border or short blue-tinted shadow — never both for decoration.

Section rhythm

Compact 48 px
Small 48 → 80 px
Standard 64 → 128 px
Hero 112 → 160 px top

What the composition rejects

  • Endless grids of identical cards.
  • Cold gray dashboards and neon accents.
  • Large soft shadows, glassmorphism and excessive radii.
  • Decorative patterns with no information.

06 · Components

Calm, direct and predictable components.

Red carries the primary action, white the alternative, with visible focus and explicit labels.

Content surface

One clear decision, not a control panel.

A card contains one coherent subject. It never contains another grid of cards.

Status message

The payment promise is being tracked.

07 · Imagery & icons

Show people at work, not abstract technology.

Imagery makes relief, relationships and real work tangible. Icons support understanding.

Photography direction

  • Credible work situations, natural light and human scale.
  • Gestures and environments familiar to small businesses.
  • Calm framing with useful negative space for copy.

Don't

  • Handshakes and generic stock smiles.
  • Humanoid robots, digital brains, holograms and fintech neon.
  • Aggressive scenes of conflict or money.

Icon system

Lucide, 2 px stroke, rounded ends, common size 20–24 px. An action always keeps a label.

08 · Voice

Lead with the outcome. Explain the mechanism second.

The Billabex voice is professional but approachable. It sounds like an expert colleague who takes ownership.

Write like Billabex

“You work, you deliver, you get paid.”

Concrete, active and memorable promise.

“Billabex follows up. You keep the relationship.”

The outcome comes before the mechanism.

“Remy saves four hours every month.”

A lived situation instead of an abstraction.

Don't write like a dashboard

“Optimize your DSO with our platform.”

Jargon before value.

“Revolutionize your cash collection.”

Generic and aggressive claim.

“Our solution makes follow-ups easier.”

Tool posture and vague outcome.

  • Active voice and short sentences.
  • Names and concrete situations when they clarify the point.
  • Avoid jargon or explain it on first use.
  • Use sentence case for headings.

09 · Accessibility & motion

The brand stays legible, understandable and calm for everyone.

Accessibility is not a design variant: it is part of trust. Every production targets WCAG 2.1 AA.

Contrast

At least 4.5:1 for body copy and 3:1 for large text.

Keyboard

Logical order, visible focus and no hover-only action.

Color

Information never relies on color alone.

Motion

Short, useful animations disabled with prefers-reduced-motion.

Language

Every public piece exists in French and English.

Before publishing

  • Does the logo come from an official file?
  • Is red still rare and action-oriented?
  • Is Outfit the only typeface?
  • Does the message sound like a colleague, not a tool?
  • Does the content work by keyboard, on mobile and without motion?
  • Are the French and English versions aligned?