Try for Free
Walletap

Brand Guidelines

Everything you need to represent the Walletap brand consistently across all platforms, materials, and communications.

Logo

Use the color variant on dark backgrounds (preferred). Use the positive variant on light backgrounds. Maintain clear space equal to the logomark height on all sides.

Primary — Color
Primary — ColorSVG
Primary — Negative
Primary — NegativeSVG
Primary — Positive
Primary — PositiveSVG
Secondary — Color
Secondary — ColorSVG
Secondary — Negative
Secondary — NegativeSVG
Secondary — Positive
Secondary — PositiveSVG
Logomark — Color
Logomark — ColorSVG
Logomark — Negative
Logomark — NegativeSVG
Logomark — Positive
Logomark — PositiveSVG

Usage Rules

DO
  • Use on dark backgrounds when using color variant
  • Maintain minimum clear space (1x logomark height)
  • Use SVG format whenever possible
  • Minimum size: 24px height (mark), 80px width (full)
DON'T
  • Stretch, rotate, or skew the logo
  • Change the logo colors
  • Place on busy or low-contrast backgrounds
  • Add drop shadows, outlines, or effects

Colors

The Walletap palette is warm and energetic, anchored by coral/orange primary tones on blue-tinted dark backgrounds.

Primary

Main interactive color — buttons, links, active states, gradient anchor.

50#FEF4E7
300#EEAA54
500#E6965AMain
700#DB3B33
900#B22A1F

Secondary

Accents, highlights, secondary actions.

50#FFF2E6
300#FFD19A
500#FF9A4DMain
700#E6651A
900#B8470D

Semantic

Status indicators, alerts, feedback.

Info#00B8D9
Success#22C55E
Warning#FFAB00
Error#FF5630

Backgrounds

Blue-tinted dark surfaces. Dark theme only.

Default#141A21Page bg
Paper#1C252ECards
Neutral#28323DInputs

Neutrals

Text hierarchy, borders, disabled states.

0#FFFFFF
100#F9FAFB
200#F4F6F8
300#DFE3E8
400#C4CDD5
500#919EAB
600#637381
700#454F5B
800#1C252E
900#141A21

Typography

Geist Sans for all interface text. Geist Mono for code, IDs, timestamps, and metrics.

Display / 64px

Connect to Wallets

H1 / 48px

Key Features

H2 / 36px

Pricing Plans

H3 / 24px

Case Studies

H4 / 20px

Card Heading

Body 1 / 16px

Issue passes directly to your customers' mobile wallets.

Body 2 / 14px

Smart notifications and real-time analytics included.

Caption / 12px

Last updated 2 hours ago

DO
  • Geist Sans for all interface text
  • Geist Mono for code, IDs, timestamps, metrics
  • Negative letter-spacing on headings (-0.02em to -0.03em)
  • Weight 800 only for hero/display text
  • Body text at 400 weight, labels at 500
DON'T
  • Use Lato, Public Sans, Barlow, or Roboto (legacy)
  • Mix more than 2 font families on one surface
  • Use body text below 12px
  • Use positive letter-spacing on headings
  • Use light weight (300) for primary content

Spacing & Radius

Based on a 4px base unit. Consistent spacing creates visual rhythm across all surfaces.

Spacing Scale

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-12
48px
space-16
64px

Border Radius

radius-sm4px — Chips, badges
radius-md8px — Buttons, cards (default)
radius-lg12px — Modals, large cards
radius-xl16px — Hero sections

Gradients & Effects

The brand gradient is the signature Walletap visual element. Use it sparingly for maximum impact.

gradient-brand (primary)

Use for: hero text (via background-clip), primary buttons, key accent elements.

gradient-brand-extended (3-stop)

Use for: large background surfaces, section dividers, marketing materials.

Shadow System

shadow-cardCards, elevated surfaces
shadow-dropdownMenus, dropdowns
shadow-primaryPrimary button glow

Component Patterns

How tokens combine into reusable UI patterns. These examples show the intended aesthetic.

Buttons

Inputs

Card

Growth Plan

For growing businesses with active wallet programs.

$49/mo

Tone of Voice

How Walletap sounds across all communications — marketing, UI copy, emails, and social media.

Clear, not clever

Explain what Walletap does in plain language. Avoid jargon, buzzwords, and marketing fluff.

DO: "Issue passes directly to your customers' mobile wallets."
DON'T:"Leverage our cutting-edge digital wallet ecosystem to maximize customer engagement."

Confident, not aggressive

State capabilities directly. Don't oversell or use superlatives.

DO: "Walletap handles pass creation, distribution, and analytics."
DON'T:"The world's most powerful wallet pass platform ever created!"

Warm, not casual

Be approachable and human, but maintain professionalism.

DO: "Need help? Our team is here for you."
DON'T:"Yo! Hit us up if you're stuck lol"

Technical, not intimidating

When discussing APIs or technical features, be precise but accessible.

DO: "Authenticate with your API key to create passes programmatically."
DON'T:"Utilize the RESTful authentication paradigm to instantiate pass objects."

Downloads

Grab the assets you need to create on-brand materials.

Logo Pack

All logo variants in SVG and PNG formats. Primary, secondary, and logomark in color, negative, and positive.

All SVGs

Color Palette

Full token set as JSON — import into design tools, email builders, or code.

Coming soon

Fonts

Geist Sans and Geist Mono — the official Walletap typefaces.

Coming soon
Brand Guidelines | Walletap