Features
Use Cases
Resources
ContactTruelist
Brand guidelines for the Warm Sophistication direction. A reference for applying the visual identity across marketing and product.
Version 1.0 — February 2026
Foundation
Brand Principles
Three ideas that guide every design decision.
Quiet Confidence
We don't shout. The product speaks for itself. Our design communicates authority through restraint, precision, and warmth — never through flashiness.
Warmth Over Sterility
Data tools can feel cold. We choose warm tones, organic serif type, and tactile textures to make a technical product feel human and approachable.
Timeless, Not Trendy
We avoid design trends that will date quickly. Every choice — from type to color — should feel just as relevant in three years as it does today.
Identity
Logo
The Truelist mark is the B1 Pillar — a tall T with a thin crossbar. It appears as a standalone mark or paired with the Fraunces wordmark.
Primary
Secondary Variants
Mark Only — Social & App Icons
For profile pictures, favicons, and app icons. The mark sits centered inside a square container with generous padding. Use rounded corners appropriate to the platform.
| Platform | Shape | Recommended | Size |
|---|---|---|---|
| X / Twitter | Circle crop | Primary (espresso bg) | 400x400 |
| Circle crop | Primary (espresso bg) | 400x400 | |
| GitHub | Square, rounded | Primary or Sage | 512x512 |
| Favicon | Square | Primary (espresso bg) | 32x32, 16x16 |
| App Icon | Squircle (iOS) | Primary (espresso bg) | 1024x1024 |
Wordmark Lockups
Usage Rules
Do
- Keep clear space around the mark equal to the crossbar width
- Use only approved color combinations shown above
- Minimum size: 24px for digital, 10mm for print
- Place on solid or near-solid backgrounds only
Don't
- — Stretch, rotate, or skew the mark
- — Recolor outside the brand palette
- — Place on busy photographs or gradients
- — Add drop shadows, outlines, or effects to the mark
- — Swap the Fraunces wordmark for another typeface
Misuse Examples
Visual Style
Imagery & Photography
We lean on UI mockups, product screenshots, and abstract patterns over stock photography. When images are needed, they should feel warm, real, and unforced.
Image Treatment
Apply the brand-img-warm class
to shift cool-toned images toward our warm palette.
Screenshots and product images use rounded-xl
with brand-shadow.
Images should sit within the content container. Never stretch edge-to-edge — maintain breathing room consistent with the brand's generous spacing.
Color
Palette
Warm, muted, and deliberate. Espresso and Cream form the primary axis. Terracotta is the accent — use it sparingly for maximum impact.
Typography
Type System
Fraunces brings warmth and character to headings. DM Sans keeps body text clean and highly readable. The pairing balances personality with clarity.
Weight 500
Weight 500
Weight 500
Weight 400
Weight 400
Weight 700, uppercase
Weight 600
Interactions
Buttons
Simple, clear hierarchy. Primary actions use Espresso. Terracotta is reserved for high-emphasis moments only. Ghost links for tertiary actions.
Motion
Animation & Transitions
Motion should be subtle and purposeful. Quick transitions that feel responsive, never bouncy or playful. The brand moves with quiet confidence.
transition-all hover:-translate-y-px — 1px lift on hover. Subtle enough to feel intentional.transition-colors — default
150ms ease. For links, borders, backgrounds.group-hover:bg-brand-parchment — background shift on parent hover.Avoid
Iconography
Icons
We use Google Material Symbols Outlined
for all icons. Outlined style, weight 300, no fill. Always wrap icons in the
<Icon> component.
Global Settings
.material-symbols-outlined {
font-variation-settings:
'FILL' 0, /* Outlined, never filled */
'wght' 300, /* Light weight — matches DM Sans */
'GRAD' 0, /* No gradient */
'opsz' 24; /* Optical size */
}Sizes
Container Patterns
Icons in feature lists and cards should be wrapped in a container. Never float a bare icon next to a heading — always use one of these patterns.
Container Colors
Inline Usage
- done Unlimited email verifications
- done REST and GraphQL API access
- done No credit card required
Common Icons
Preferred icon names for common concepts. Use these consistently across pages.
Layout
Spacing Scale
Generous spacing is a hallmark of this brand. Let content breathe. When in doubt, add more space.
Border Radius
Consistent corner rounding reinforces the brand's warmth. Sharper for small elements, softer for large containers.
Depth
Shadows
Subtle, warm shadows using espresso-tinted rgba values. Never use pure black shadows. Depth should whisper, not shout.
.brand-shadow {
box-shadow:
0 8px 40px rgba(44, 24, 16, 0.06), /* espresso-tinted ambient */
0 1px 3px rgba(44, 24, 16, 0.04); /* tight contact shadow */
}UI Elements
Components
Core building blocks. All components use the same color palette and border radius (6px for inputs, 10px for cards).
Upload your list
Drag and drop a CSV or connect via API to get started.
Verified
This email is valid and deliverable.
| Status | Risk | |
|---|---|---|
| hello@acme.co | Valid | Low |
| info@example.com | Risky | Medium |
| test@fake.xyz | Invalid | High |
Patterns
Dark Sections & Backgrounds
Espresso backgrounds create contrast and visual rhythm. Use them for CTAs, headers, and emphasis blocks. Always include subtle texture to avoid flat, lifeless sections.
Ready to put Truelist to the test?
Start verifying for free — no credit card required.
accent-circles accent-circles-a on wrapper.radial-gradient(ellipse at 30% 0%, rgba(184,92,56,0.15), transparent 60%)radial-gradient(ellipse at 70% 100%, rgba(74,124,89,0.1), transparent 50%)h-px bg-brand-terracotta opacity-40Voice
Tone & Language
Clear, confident, human. We explain complex things simply. We don't oversell or use hype language.
Do
- "Clean your email list in minutes" — direct, clear benefit
- "Fixed monthly pricing" — simple, factual
- "We verify every email" — honest and straightforward
- "No credit card required" — removes friction plainly
Don't
- — "Revolutionary AI-powered email validation" — overpromises
- — "Supercharge your email marketing!!" — hype language
- — "The world's most advanced verification engine" — unverifiable
- — "Unlock unlimited potential" — vague, cliched
Download Brand Assets
Logo files in SVG and PNG formats across all color variants and sizes.
PNGs available in 16, 32, 48, 64, 128, 256, 512, and 1024px. 13 SVG variants.