Screenshot of Tranch

Tranch

www.tranch.com

The reference for B2B fintech that refuses to look like B2B fintech — sketchbook-style asymmetric-radius cards, hand-drawn cartoon illustrations, pure black borders on white.

Fintech Invoice Payment B2b strong

Design tokens

white
page
surface
surfaceMid
black
textGrey77
textMid58
textDark21
accentLavender
accentLime
blue
display
'Bw Gradual', system-ui, sans-serif
body
'Inter var', ui-sans-serif, system-ui, sans-serif
mono
(none on homepage)

Do / Don't

Reference it for

  • Asymmetric radius 0px 48px 0px 0px as the card-border signature — appears 7 times in the captured radii inventory
  • Thick black borders (~2px) on white cards instead of subtle shadow — distinctive sketchbook feel
  • Underlined section H2s ("Tranch is trusted by", "Customer and Partner Testimonials") like textbook chapter headings
  • Hand-drawn cartoon illustrations — dollar coin on paper plane, etc. — replaces stock photography or product mockups
  • Monochrome palette with two saturated accents (lavender #a973ff + lime #d9fc50) used sparingly
  • Bw Gradual display font (paid) paired with Inter Var (free) — rounded-terminal geometric sans
  • Logo wall of 7+ AmLaw firms — prestige customer signal for B2B legal-tech
  • Dual-tabbed product demo (Pay Later / Pay Now) with detailed invoice mockup

Do not copy

  • The Bw Gradual font licence
  • The cartoon dollar/paper-plane illustration style — bespoke illustration commission
  • The Tranch logotype (custom sketched logo with the asymmetric border applied directly to the wordmark frame)
  • The AmLaw firm logos (Gunderson Dettmer, Paul Hastings, etc.) — Tranch-specific customers
  • The "Tranch joins Elite" acquisition announcement — brand-specific event
  • The lavender + lime accent combination — Tranch-specific brand

Signature moves

asymmetric-radius sketchbook cards

cards carry an asymmetric radius signature (0px 48px 0px 0px, appearing 7 times) with thick ~2px pure-black borders on white instead of shadow, for a hand-drawn sketchbook feel.

underlined textbook section headings

section H2s are underlined like textbook chapter headings, and a quote glyph sits in italic-bracket style inside testimonial cards as editorial punctuation.

hand-drawn illustration over stock

hand-drawn cartoon illustrations (dollar coin on a paper plane) replace stock photography or product mockups, refusing the default B2B-fintech look, with two saturated accents (lavender #a973ff + lime #d9fc50) used sparingly.