Resources / Brand Kit

The Credible
brand kit.

Everything you need to apply the Credible brand consistently — logo, color palette, typography, iconography, spacing, radii, shadows, buttons, and voice. Built from the live design tokens that drive this site.

01 — Logo

The Credible mark.

A single horizontal wordmark. Always reproduce with adequate clear-space and at a legible size. Use the ink-on-light variant by default; the inverse appears automatically on dark surfaces through CSS theming.

Light surface
Credible logo
Dark surface
Credible logo on dark

Clear-space

Reserve at least the height of the “C” on all sides. Nothing — text, imagery, container edges — should encroach on this margin.

Minimum size

Don’t reproduce the wordmark below 20 px tall on screen, or 14 mm tall in print. Use the standalone mark for smaller contexts.

Don’t

Don’t rotate, recolor, outline, stretch, drop-shadow, or add effects. Don’t place on busy photographic backgrounds without a solid backdrop.

02 — Color

Palette.

Forest-green primary, cool-mint surfaces, deep-ink type. The brand green (#1d895a) carries primary actions; the brighter mint (#4CBB84) carries highlights, gradients, and hover energy.

Brand

#0C1A14
Forest 700
Primary ink · backgrounds (light)
#1A2A22
Forest 600
Ink-2 · secondary text on light
#1D895A
Green 600
Brand · primary actions, links
#4CBB84
Green 400
Bright · highlights, gradients
#E6EFE8
Green 200
Tint · success bg, chips

Surface · light theme

#FAFDFB
Bg
Page background · light theme
#EEF5EF
Bg-soft
Section · subtle separation
#E6EFE8
Bg-cream
Card hover · cool tint
#FFFFFF
Surface
Cards · default elevated
#D8E3DC
Line
Borders · dividers

Surface · dark theme

#0A1612
Bg
Page background · dark theme
#0F2018
Bg-soft
Section · subtle separation
#142820
Surface
Cards · default elevated
#1A3328
Surface-2
Cards hover · nested elevation
#1F3A30
Line
Borders · dividers
#E9F4EE
Ink
Primary text on dark

Semantic

#1D895A
Success
Positive · confirmations
#B45309
Warn
Caution · pending
#B91C1C
Error
Negative · destructive
#2775CA
Info-blue
Stablecoin USDC · informational
03 — Typography

Type system.

Inter drives the entire interface — UI labels, body, headings. Instrument Serif appears only as italic emphasis inside display headings, never as standalone type. System mono for code and tabular data.

H1 · Inter 600
clamp(44px, 7vw, 96px) · -0.035em
Modern Payments
H1 emphasis · Instrument Serif italic
Same size, italic, used inline
for Modern Businesses.
H2 · Inter 600
clamp(32px, 4.6vw, 60px) · -0.03em
Built for the businesses cards decline.
H3 · Inter 600
20px · -0.01em
The Open Payments Stack.
Body · Inter 400
15px / 1.6 line-height
The payments rail for businesses traditional gateways won’t touch — built for risk-aware verticals, faster settlement, and permissionless prefunding.
Kicker · Inter 700 · uppercase
11.5px · 0.18em tracking
01 — How it works
Mono · system-ui mono
13px · for code, hashes, tx IDs
0x9a4f…b21c · ACH · USDC · 0.4s
04 — Iconography

Icon style.

24×24 viewBox, 1.5 px stroke, rounded line caps and joins, no fill. Icons inherit currentColor so they tint automatically with text and theme.

Product icons

Pay-in
Pay-out
Global Collection Account
Liquidity
Creddy (coming soon)

Industry icons

Prediction Markets
Stablecoin Fintechs
Creator Platforms
Web3 Platforms
Traders & Brokers
AI Startups
Gaming & Sports
Entertainment Apps
05 — Spacing

4 px base scale.

All gaps, padding, and margins are multiples of 4 px. Stay on the scale — even when it looks tight or generous, the rhythm matters more than any single value.

4
4 px
8
8 px
12
12 px
16
16 px
24
24 px
32
32 px
48
48 px
64
64 px
96
96 px
06 — Border radius

Corners.

Five radii cover almost everything: 6 / 10 / 18 / 24 / pill. Smaller for utility, larger for hero cards, pills for actions.

r-sm6 pxSmall chips, pills
r-md10 pxInputs, small cards
r-lg18 pxCards, panels
r-xl24 pxHero cards, callouts
r-pill999 (pill)Buttons, badges, chips
07 — Elevation

Shadows.

Shadows are tinted green to keep them in-brand. The most prominent — Glow — is reserved for hover and focus states on primary actions.

Soft0 1px 0 rgba(0,0,0,0.03)
Card0 8px 24px -16px rgba(29,137,90,0.10)
Hover0 18px 50px -22px rgba(29,137,90,0.20)
Glow0 12px 28px -10px rgba(29,137,90,0.55)
08 — Buttons

Action surfaces.

Three variants — Primary, Secondary, Ghost — at two sizes (default + lg). Primary buttons are black at rest and flip to brand green on hover.

09 — Voice & tone

How we sound.

Direct, modern, technically credible. We use plain English first, jargon second — and only when the jargon is the truest word. We trust the reader to be smart and busy.

Do
  • Lead with the outcome: “Merchants get paid — now.”
  • Quantify when you can: “~$500M processed in 7 months.”
  • Name competitors when it makes the comparison clearer.
  • Use italic serif for one or two words of emphasis per line.
Don’t
  • Over-promise: never use “guarantee”, “risk-free”, “always” about settlement.
  • Pile on adjectives: “truly next-generation revolutionary” ⇒ cut.
  • Hide the legal entity: Kiwimoney Inc shows up where it matters.
  • Use exclamation marks. Confidence is quiet.
10 — Social media banners

Twitter & LinkedIn covers.

Pre-rendered profile covers for X / Twitter (1500 × 500) and LinkedIn company pages (1128 × 191), in both light and dark variants. Download the PNG for direct upload, or grab the SVG for editing.

Need the full brand package?

Logo set (SVG, PNG, monochrome variants), favicons, partner assets, press-kit, and presentation templates.