Tudoor

Overview

Tudoor is India's trusted learning marketplace that bridges students, parents, and verified teachers across dance, music, coding, academics, languages, fitness, cooking, and more. The design system embodies a philosophy of **Transparent Marketplace Clarity**—a clean, accessible aesthetic that prioritizes trust signals, side-by-side comparison, and frictionless discovery. The UI evokes confidence through a light, airy canvas (surface: #f8fafc) anchored by a professional blue primary (primary: #1868db) and a warm teal secondary (secondary: #14b8a6) that humanize the two-sided marketplace dynamic. The brand personality is straightforward, empowering, and locally rooted: it speaks to Indian families seeking quality education without jargon or false promises.

Voice: direct, reassuring, action-oriented. Tudoor avoids hyperbole and instead leads with verification, transparency, and outcomes. Example sentence: "Compare 5 verified guitar teachers side by side—see their rates, availability, and student reviews before you decide." The tone balances professionalism (for parents and teachers) with approachability (for students), using active verbs and concrete benefits rather than aspirational abstractions.

Colors

The color system is built on a **trust-first palette** where verification and clarity drive every choice. Primary (#1868db) is the signature action color—used on all CTAs ("Discover Tutors", "Sign up"), focus states, and key interactive elements. It conveys professionalism and authority without coldness. Secondary (#14b8a6), a warm teal, represents the human side of the marketplace: it highlights verified badges, student success stories, and the community aspect. Tertiary (#0891b2) provides a third accent for status indicators and secondary CTAs.

The surface stack is deliberately light and minimal: surface (#f8fafc) is the default canvas, with surface-container (#e2e8f0) used for subtle section breaks and surface-container-highest (#94a3b8) for disabled or de-emphasized states. On-surface

Typography

The type system pairs Plus Jakarta Sans (display, headlines) with Inter (body, labels) to balance personality with legibility. Plus Jakarta Sans at 72px / 800 weight (display) commands attention on hero sections and creates visual hierarchy through weight and scale rather than color. Headline-lg (40px / 700) is used for section titles and major CTAs, while headline-md (28px / 700) anchors subsections. Body-lg (18px / 400) and body-md (16px / 400) are the workhorses for descriptive copy and teacher profiles, set to 28px and 24px line-height respectively for comfortable reading on mobile and desktop. Label-md (14px / 600) is applied to button text, badges, and form labels with 0.01em letter-spacing for crispness. Label-sm (12px / 500) is reserved for metadata, timestamps, and secondary infor

Layout

The layout follows a **12-column fluid grid** with a max-width of 1100px, centered on desktop and edge-to-edge on mobile (with 24px gutter on each side). The spacing scale is semantic: lg (40px) separates major sections (hero to features, features to testimonials), md (24px) is used for card padding and component spacing, and sm (12px) for internal element spacing within cards or lists. The container-max-width of 1100px ensures readability without excessive line lengths on ultra-wide displays.

White-space is generous: the hero section uses 64px (xl spacing) above and below the headline, creating breathing room that reinforces trust and clarity. Cards are padded with md (24px) and separated by lg (40px) vertically. On mobile, spacing compresses to sm (12px) between components and md (24px)

Elevation & Depth

Depth is achieved through **subtle, purposeful shadows** rather than layering or glassmorphism. The elevation system has three levels: sm (0 1px 2px rgba(15, 23, 42, 0.06)) for hover states on flat elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and modals, and lg (0 10px 32px rgba(15, 23, 42, 0.1)) for elevated modals and floating CTAs. The shadow color uses the on-surface tone (#0f172a) at low opacity to maintain the light, clean aesthetic—no pure black shadows. Cards at rest use md elevation; on hover, they lift to lg elevation with a smooth transition (150ms cubic-bezier(0.

Shapes

The shape philosophy is **Soft-Technical Accessibility**: rounded corners are used strategically to soften the interface without sacrificing clarity or professionalism. Buttons and CTAs use full (9999px) border-radius to create pill-shaped affordances that feel modern and clickable; this is applied to all button variants (primary, secondary, ghost) with consistent 44px height and 12px 24px padding. Cards and containers use xl (1.5rem / 24px) border-radius, creating a friendly but structured appearance. Input fields use full (9999px) radius to match buttons and create visual cohesion in forms.

Components

Action Elements Buttons are the primary interaction mechanism. **button-primary** uses primary (#1868db) background with on-primary (#ffffff) text, full radius, 44px height, and 12px 24px padding. On hover, the background darkens to #1560c7 with a 150ms transition. On active/press, it shifts to #0d47a1. The label uses label-md typography (14px / 600 weight). **button-secondary** has a transparent background with primary (#1868db) text and a 1px solid primary border; on hover, the background becomes primary-container (#dbeafe) with on-primary-container text. **button-ghost** is fully transparent with on-surface text; on hover, it gains a surface-container-high background. All buttons use cursor: pointer and disable opacity: 0.5 when disabled.

Containers & Surfaces **card** is the f

Do's and Don'ts

**Do**

• Do use primary (#1868db) exclusively for CTAs and interactive focus states—it is the only accent color users should click on.
• Do maintain 44px minimum height for all touch targets (buttons, inputs, list items) to meet WCAG 2.1 Level AAA touch target sizing.
• Do apply md (24px) padding inside cards and lg (40px) spacing between major sections to preserve visual breathing room and reduce cognitive load.
• Do use Plus Jakarta Sans at 72px / 800 weight for hero headlines to establish immediate visual hierarchy and brand personality.
• Do pair full (9999px) radius on buttons and inputs with xl (24px) radius on cards to create a cohesive, approachable aesthetic.
• Do apply label-sm typography with text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) on badges over busy backgrounds to ensure legibility.
• Do use secondary (#14b8a6) exclusively for verification badges and trust indicators—never on CTAs or primary actions.
• Do test all color combinations for 7:1+ contrast ratio (WCAG AAA) using on-surface (#0f172a) as the default text color.

**Don't**

• Don't use gradients or multi-color backgrounds—the system relies on solid colors and elevation (shadows) for depth and clarity.
• Don't apply border-radius < full (9999px) to buttons or input fields; use xl (24px) only for cards and containers.
• Don't exceed 1100px container-max-width on desktop; wider layouts reduce readability and dilute the marketplace focus.
• Don't use tertiary (#0891b2) or error (#dc2626) as primary CTAs; reserve them for secondary actions and validation states.
• Don't apply shadows with pure black (#000000); always use rgba(15, 23, 42, x) to maintain the light, trustworthy aesthetic.
• Don't set letter-spacing > 0.05em on body copy; tight tracking (-0.02em to 0em) maintains professionalism and readability.
• Don't use opacity < 0.5 for disabled states; instead, use surface-container-highest (#94a3b8) background with reduced contrast.
• Don't mix Plus Jakarta Sans and Inter in the same headline; use Plus Jakarta Sans for all display and headline levels exclusively.