ThisIsMe

Overview

ThisIsMe is a fintech-forward identity verification and KYC compliance platform designed for enterprises and small businesses navigating regulatory complexity. The design system embodies 'Accessible Professionalism'—a movement that marries corporate trust with human-centered warmth. The visual language prioritizes clarity and confidence through a restrained palette anchored by teal (#49b3c1) and coral (#ffb06d) accents, with generous whitespace and light typography (300–500 weights) that convey approachability without sacrificing authority. The UI evokes a sense of seamless, frictionless onboarding: users feel guided, not burdened.

The brand voice is precise, reassuring, and solution-focused. Vocabulary leans toward concrete outcomes ('30 Million+ Verifications', 'Quality, Guaranteed') rather than abstract promises. Tone is conversational yet professional—never breathless, never jargon-heavy. Example sentence in brand voice: 'From simple identity verification to tailor-made customer onboarding solutions, ThisIsMe empowers every business to master its FICA Compliance.'

Colors

The color system is built on a foundation of neutral surfaces (off-white #fefefe, light gray #f5f5f5) that provide calm, distraction-free canvases for content. Two accent colors drive interaction and emotional response: Primary (Coral #ffb06d) is reserved for high-priority CTAs ('Sign Up Online', 'Become FICA Compliant Today') and conveys warmth and forward momentum. Secondary (Teal #49b3c1) is used for supporting actions ('Request a Demo'), hero sections, and trust-building elements (the industries section background). Tertiary (Dark Slate #3b4753) anchors navigation and secondary headings, providing visual weight without coldness. On-surface text (#444444) is dark enough for WCAG AA compliance at 16px body copy (contrast ratio 10.5:1) while remaining approachable. The surface stack progr

Typography

The type system is anchored by Catamaran, a geometric sans-serif from Google Fonts that balances friendliness with professionalism. The hierarchy spans eight levels: Display (56px, weight 300) for hero headlines, Headline-lg (42px, weight 500) for section titles, Headline-md (38px, weight 300) for subsections, Title-lg (28px, weight 600) for card headers, Body-lg (18px, weight 400) for hero copy, Body-md (16px, weight 300) for standard body text, Label-md (14px, weight 500) for buttons and UI labels, and Label-sm (12px, weight 500) for captions and metadata. Light weights (300–400) dominate body and display text, creating an airy, modern aesthetic; medium weights (500–600) are reserved for interactive elements and headings to ensure scanability. Letter-spacing is minimal (-0.02em on displa

Layout

The page layout follows a 12-column grid with a max-width of 1200px, centered on the viewport. Sections alternate between light backgrounds (#fefefe, #f5f5f5) and accent backgrounds (teal #49b3c1) to create visual rhythm and guide the eye through the narrative. Horizontal padding is 24px (md spacing) on mobile and tablet, scaling to 40px (lg spacing) on desktop. Vertical section padding is 60–80px, with 40px (lg spacing) between major content blocks and 24px (md spacing) between subsections. The gutter between grid columns is 24px. Container widths scale responsively: 1-column on mobile (< 768px), 2-column on tablet (768–1024px), and 3-column on desktop (> 1024px). Whitespace is treated as a first-class design element: generous margins around hero copy, breathing room between service cards

Elevation & Depth

Depth is conveyed through subtle, layered shadows rather than bold contrast. The elevation system defines three levels: Level 1 (Standard Cards) uses box-shadow: 0 2px 4px rgba(0,0,0,0.05), creating a barely-perceptible lift from the surface. Level 2 (Hover/Interactive States) escalates to 0 4px 8px rgba(0,0,0,0.1), signaling interactivity without jarring the user. Level 3 (Modals/Overlays) applies 0 3px 8px rgba(0,0,0,0.15) for maximum prominence. All shadows use a soft, spread blur (4–8px) to avoid harsh edges. Cards and buttons transition between shadow levels on hover with a 0.2s ease timi

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are present but restrained, signaling approachability without sacrificing professional clarity. Buttons and small interactive elements use 5px (0.3125rem) border-radius, creating a subtle roundness that feels modern without being playful. Cards and larger containers use 10px (0.625rem) border-radius, balancing softness with definition. Service icons and circular elements use 50% border-radius for perfect circles. Input fields use 3px border-radius for minimal rounding that maintains a clean, functional appearance. The rationale: sharp 90

Components

Action Elements Buttons are the primary interaction mechanism. The Primary Button (background: #ffb06d, color: #ffffff, padding: 8px 16px, border-radius: 5px, font-size: 10px, font-weight: 500) is used for high-intent CTAs like 'Sign Up Online' and 'Become FICA Compliant Today'. On hover, the background shifts to #ff9a4d and a 0 4px 8px rgba(0,0,0,0.1) shadow appears, with a 0.2s ease transition. The Secondary Button (background: #49b3c1, color: #ffffff, same padding and radius) is used for supporting actions like 'Request a Demo'. Both buttons use Arial font-family to ensure cross-platform consistency. Buttons should never exceed 48px height; maintain a 1:2 width-to-height ratio for optimal touch targets.

Containers & Surfaces Cards are the primary content container. Standard car

Do's and Don'ts

**Do**

• Do use Catamaran at weights 300–500 for body and display text; reserve 600–700 for emphasis only.
• Do apply the teal (#49b3c1) accent to trust-building sections (testimonials, industries, hero callouts) and coral (#ffb06d) exclusively to primary CTAs.
• Do maintain 24px (md) or 40px (lg) spacing between major sections; never compress sections to < 60px vertical padding.
• Do use the 0 2px 4px rgba(0,0,0,0.05) shadow for standard cards and escalate to 0 4px 8px rgba(0,0,0,0.1) on hover with a 0.2s ease transition.
• Do ensure all text meets WCAG AA contrast ratios: body text (#444444) on light backgrounds achieves 10.5:1; white text on teal achieves 4.5:1.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary text or background; stick to #444444 on-surface and #fefefe surface.
• Don't mix Catamaran with system fonts or serif typefaces; maintain typographic consistency across all UI.
• Don't apply rounded corners > 10px to cards or buttons; the brand is professional, not playful.
• Don't use shadows > 0 4px 8px rgba(0,0,0,0.1) on standard elements; excessive shadow depth feels dated and cluttered.
• Don't place text directly on the teal background without sufficient contrast; always use white text or apply a semi-transparent overlay.