Brand Guidelines
TapMe Contact Brand
Official colors, typography, logos, and usage rules. Use these assets consistently to maintain a cohesive brand experience.
Logos
Always use the original logo files. Do not stretch, recolor, rotate, or add effects to any logo variant.
Primary Logo
Use on white or light backgrounds.
Primary Logo (SVG)
Preferred for print and scalable contexts.
White Logo
Use on navy, charcoal, or dark teal backgrounds.
White Logo (SVG)
Preferred white variant for print.
Icon — 64px
App icon, favicon, small UI contexts.
Icon — 128px
High-DPI icon, social media avatar.
Do
- ✓ Use the primary logo on white / light backgrounds
- ✓ Use the white logo on navy or dark teal backgrounds
- ✓ Maintain clear space equal to the height of the "T" in TapMe
- ✓ Scale proportionally, never distort
- ✓ Prefer SVG for print and large formats
Don't
- ✗ Recolor, tint, or add drop shadows to the logo
- ✗ Place the primary logo on dark or busy backgrounds
- ✗ Rotate or skew any logo variant
- ✗ Use the logo smaller than 80px wide in digital contexts
- ✗ Modify text or icon spacing within the logo
Color Palette
The TapMe palette centers on teal — a color that communicates trust, technology, and clarity. Always reference hex values directly; do not approximate or substitute similar colors.
Primary Palette
Primary Teal
teal-500
Buttons, CTAs, accent bars
Accent Teal
teal-400
Links, secondary accents
Light Teal
teal-300
Highlights, hover states, gradients
Navy
brand-navy
Dark backgrounds, nav, card fills
Charcoal
brand-charcoal
Footer, deepest background
Off-White
brand-offwhite
Light section backgrounds
Brand Gradient
Gradient Start
#22D3EE · teal-300
Gradient End
#0891B2 · teal-500
Status Colors
Success
status-success
Confirmations, positive indicators
Warning
status-warning
Alerts, caution states
Error
status-error
Errors, destructive actions
Typography
Two typefaces form the TapMe voice. Both are system fonts — no external font loading required.
Headings
Trebuchet MS
Used for all headings (H1–H6). Bold weight for primary headings, semibold for secondary. Never use for body copy.
Specimen
AaBbCcDd 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Body
Calibri
Used for body copy, UI labels, and captions. Regular weight for prose, semibold for emphasis. Comfortable at all sizes.
Specimen
AaBbCcDd 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Type Scale
One tap. Instant connection.
NFC Smart Cards for every professional
Share your contact in seconds
Product specifications
The quick brown fox jumps over the lazy dog. Calibri at 16px / 1.5 leading.
Caption and label text. Calibri at 14px. Used for metadata, timestamps, and secondary UI.
Voice & Taglines
TapMe speaks with clarity and confidence — professional but approachable. Short sentences. Active voice. No jargon.
Primary Tagline
One tap. Instant connection.
Extended Tagline
One tap. Instant connection. Always up to date.
Confident
"Share your contact in seconds — no app required."
Precise
"Works with any NFC-enabled smartphone. No download. No friction."
Human
"Your contact info, exactly when and where people need it."
Need brand assets?
For press, partnership, or co-marketing materials contact us directly. Do not modify or redistribute brand assets without written permission.
Contact Us