Turtlemint

Overview

Turtlemint is a fintech insurance marketplace built on the principle of 'Insurance Simplified'—transforming complex financial products into accessible, trustworthy experiences. The brand serves Indian consumers, advisors, and enterprises seeking transparent insurance comparison and purchase. The aesthetic is 'Approachable Professionalism': a clean, light-filled interface with vibrant accent colors (teal primary #009F69, electric blue secondary #0693E3) that convey energy and reliability without sacrificing clarity. The UI evokes a sense of calm competence—like a knowledgeable advisor who makes complex decisions feel manageable.

Turtlemint's voice is conversational yet authoritative: direct, jargon-light, and human-first. The brand personality balances playfulness (the mascot robot, warm illustrations) with financial credibility (clear data presentation, trust badges, advisor testimonials). Tone examples: 'Get an Insurance Quote' (action-oriented), 'Technology trusted by advisors' (confidence-building), 'Grow your business by selling insurance' (opportunity-focused). The brand never feels corporate-stiff; it feels like a helpful friend who happens to know insurance inside-out.

Colors

Turtlemint's color system centers on a vibrant, nature-inspired teal primary (#009F69) paired with a secondary electric blue (#0693E3) and warm tertiary orange (#FF6900). The primary teal is used exclusively for CTAs, interactive states, and brand-defining moments—it appears on the 'I Confirm' button, link underlines, and focus rings. The secondary blue supports data visualization and secondary actions (e.g., 'Become an Advisor' cards). Tertiary orange is reserved for accent badges, ratings, and celebratory elements (the Google Play review badge uses this warm tone).

The surface stack is anchored in clean whites and near-whites: surface (#FFFFFF) for primary content areas, surface-container (#EEEEEE) for subtle section dividers, and surface-container-high (#E9ECEF) for hover states on car

Typography

Turtlemint uses Roboto as its single typeface family, leveraging weight variation (400, 500, 600, 700) to create visual hierarchy without typeface switching. Display-level headings (48–60px, weight 700, -0.04em letter-spacing) command attention on hero sections; headline-md (32px, weight 600) structures section breaks; body-md (16px, weight 400, 24px line-height) ensures comfortable reading at standard viewing distances. The type system emphasizes generous line-height (1.5–1.75x) and subtle negative letter-spacing on large sizes to create a premium, spacious feel. Label-md (14px, weight 600) is used for button text and form labels, with a 0.01em letter-spacing to maintain crispness at small sizes. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels (label-sm) when layered over

Layout

Turtlemint employs a fluid 12-column grid with a max-width container of 1280px, adapting gracefully from mobile (single-column stacks) to desktop (multi-column layouts). The page rhythm is governed by a semantic spacing scale: lg spacing (40px) separates major sections (hero, product cards, testimonials), md spacing (24px) creates breathing room within card groups, and sm spacing (12px) is used for internal component padding. The hero section uses a 50/50 split on desktop (text left, mascot illustration right) with a soft gradient background transitioning from pale pink to pale green, creating visual warmth without distraction. Section containers use a gutter of 24px on all sides, with card grids typically displaying 3 columns on desktop, 2 on tablet, and 1 on mobile. White-space is genero

Elevation & Depth

Depth in Turtlemint is achieved through subtle, layered shadows and strategic use of background color shifts rather than dramatic drop-shadows. Level 1 (Base): the white surface (#FFFFFF) with no shadow, used for primary content areas and the page background. Level 2 (Elevated Cards): surface-container-lowest (#F9F9F9) with a 1px solid border at #DEE2E6 and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift without visual heaviness. Level 3 (Hover/Interactive): surface-container-high (#E9ECEF) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), signaling interactivity. Modals and ove

Shapes

Turtlemint employs 'Soft-Technical' border-radius philosophy: buttons and primary CTAs use full-rounded (border-radius: 32px, or 9999px) to feel friendly and approachable, while cards and containers use moderate rounding (8px / 1rem) to maintain structure and professionalism. Input fields use 8px (md) rounding to signal form-like utility without softness. The reasoning: full-rounded buttons feel like a helpful hand reaching out; moderate card rounding balances warmth with trustworthiness. Chips and badges use full-rounded (32px) to feel like distinct, self-contained units. The mascot robot and

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (bg: #009F69, text: white, padding: 12px 24px, border-radius: 32px, height: 48px) use the brand teal and appear on all major CTAs ('I Confirm', 'Get Quote'). On hover, the background shifts to #A8D5C4 (primary-fixed-dim) with a 200ms transition, signaling interactivity without jarring color shifts. Secondary buttons (transparent bg, teal text, 2px teal border) are used for lower-priority actions and maintain the same 48px height for touch-target consistency. All buttons use {typography.label-md} (14px, weight 600) for crisp, readable text.

Containers & Surfaces Cards are the primary content container. Standard cards use surface-container-lowest (#F9F9F9) with a 1px border at #DEE2E6, 24px padding, and 8px

Do's and Don'ts

**Do**

• Do use the teal primary (#009F69) exclusively on CTAs, focus rings, and brand-defining interactive moments—it's the visual anchor that builds recognition.
• Do maintain 24px gutter spacing and 40px section separation to reinforce the 'simplified' brand promise through uncluttered layouts.
• Do apply full-rounded (32px) border-radius to buttons and chips to convey approachability; use 8px rounding for cards and inputs to maintain structure.
• Do use Roboto weight 700 for display/headline levels and weight 400 for body copy, avoiding weight 500 in favor of clear 400/600/700 hierarchy.
• Do apply the 200ms ease-in-out transition timing consistently across hover states, focus rings, and background shifts for a cohesive, responsive feel.

**Don't**

• Don't use the secondary blue (#0693E3) or tertiary orange (#FF6900) on primary CTAs—reserve them for secondary actions, data visualization, and accent badges.
• Don't apply shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12) on cards; the design relies on subtle elevation, not dramatic depth.
• Don't mix typefaces; Roboto is the single family. Avoid system fonts or serif fallbacks—always specify Roboto with appropriate fallbacks (sans-serif).
• Don't use pure black (#000000) or pure white (#FFFFFF) for text on colored backgrounds; use on-primary (#FFFFFF) or on-primary-container (#007D64) for proper contrast.
• Don't apply border-radius smaller than 4px or larger than 32px on interactive elements; the graduated scale (4px → 8px → 32px) maintains visual coherence.