Editorial Fintech Identity
Tailored for Indian creators doing 3 to 20 deals a month. Built on a strict 60-30-10 palette, neo-brutalist hard shadows, and WCAG AA contrast.
The 60-30-10 Color Foundation
60% Warm Off-White backgrounds, 30% Deep Black typography & structure, 10% Vibrant Orange accents.
Warm off-white for page backgrounds prevents clinical glare and creates editorial warmth.
Grounds the layout with editorial weight. Used for text, dark buttons, and 2px borders.
Reserved for key CTA buttons, active highlights, and important monetary numbers.
Semantic Status System
Small status badges only — never used as background floods.
Typography & Indian Money Formats
Display font Space Grotesk for confident headlines + clean Geist for financial figures.
Get Paid on Time.
₹4,50,000 Total Deal Pipeline
Automated Brand Follow-ups
Motifs: Stamps, Tickets, & Hard Shadows
Tactile details that give PayTrail an unmistakable editorial character.
Applied on settled invoices and past-due alerts with subtle rotation.
Hard 90-degree offset shadows without blur for high-confidence tactile feel.
Component Gallery & Interactive States
All buttons, inputs, skeletons, and notifications with zero hardcoded inline colors.
Button Hierarchy
Form Input Controls
Loading Skeleton Placeholders
Interactive Toast System
Non-blocking notifications with high contrast styling.
Official Brand Logo & Favicon
High-DPI vector-aligned monogram mark and full wordmark with transparent backgrounds.
Used in marketing hero headers, invoice headers, and welcome screens.
Used in navbars, mobile apps, avatars, and compact buttons.
Multi-res ICO (16x16, 32x32) & 512x512 PNG touch icon for home screens.
Official 3D Product Illustrations
All 5 assets converted to WebP under 55KB each, cataloged in /public/images/README.md.
Marketing landing hero & onboarding welcome screen.
Dashboard & deals empty state when no brand deals are logged yet.
Deal settlement celebration & marked-as-paid confirmation modal.
Overdue follow-up queue & reminder automation setup.
Brand Directory header & creator reliability score lookup.
Reusable EmptyState Component
Standardized illustration container with custom title, copy, and action button.
No brand deals logged yet
Log your first brand deal to generate GST-ready invoices, schedule milestone payouts, and automate follow-ups to finance contacts.
Error Experiences & Branded Loader
Fintech-grade 404, offline network recovery, 500 server crash, 503 maintenance, and viewport-centered loader.
Looks like you've lost your trail.
The page you're looking for doesn't exist, has been moved, or is no longer available.