Mawidi

Overview

Mawidi is a bilingual AI receptionist platform designed for GCC service businesses—clinics, salons, and booking-driven teams—that transforms missed WhatsApp messages into confirmed, prepaid appointments. The brand embodies "Operational Optimism": a design language that combines vibrant, growth-oriented green accents (#0F9972, #10B981, #22C55E) with a clean, professional white canvas and deep navy typography (#0F172A). The aesthetic is neither corporate-austere nor playful-casual; it sits at the intersection of healthcare professionalism and modern SaaS efficiency. The UI evokes trust, speed, and bilingual fluency—every interaction feels instant and capable. Voice: direct, solution-focused, never jargon-heavy. Example: "Your next appointment is Thursday at 10:00 AM with Dr. Sara. Confirmed and paid."

Colors

The color system is anchored by a vibrant teal-green primary (#0F9972) used exclusively for primary CTAs, active states, and brand moments—this is the color users click to book, confirm, or take action. It appears in gradients (blending with #22C55E and #74AD46) on hero headlines to signal energy and growth. Secondary green (#10B981) and tertiary lime (#22C55E) provide supporting accents for badges, success states, and WhatsApp-native UI elements (echoing WhatsApp's #25D366). The surface stack is anchored in pure white (#FFFFFF) with a carefully calibrated gray scale: surface-container-low (#E2E8F0) for subtle backgrounds, surface-container-high (#94A3B8) for dividers and disabled states, and on-surface (#0F172A) for primary text. Shadows use rgba(0, 0, 0, 0.15) for md elevation and rgba(1

Typography

The type system uses Inter exclusively for body and UI text, paired with the same Inter for headings to create a unified, modern voice. Display (76px, 800 weight, -0.03em tracking) anchors hero sections with maximum impact; headline-lg (40px, 700 weight) and headline-md (28px, 700 weight) establish section hierarchy with tight negative letter-spacing (-0.02em, -0.01em) to convey confidence and speed. Body text (16px–18px, 400 weight, 24–28px line-height) is set with generous line-height (1.5) to ensure readability on mobile and in dense appointment-booking contexts. Labels (12–14px, 600 weight) use uppercase letter-spacing (0.08em) for form fields and status badges, creating visual distinction without size inflation. All headings use -0.02em to -0.03em letter-spacing to tighten the visual

Layout

The layout system uses a 12-column grid with a max-width of 1200px (container-max), centered with mx-auto. Hero sections use a 2-column asymmetric grid (1.1fr 1fr) with 56px gap, allowing the left column (copy + CTAs) to dominate while the right hosts the WhatsApp mockup. Spacing follows a semantic scale: gutter (24px) for horizontal padding on full-width sections, lg (40px) for section separation (margin-top/bottom), md (24px) for card padding and component spacing, sm (12px) for internal component gaps. The page rhythm alternates between full-width hero (padding: 48px 24px 120px), constrained content sections (max-width: 1200px, mx-auto), and feature grids (3–4 columns on desktop, 1–2 on mobile). Radial gradients (60% 60% at 75% 30%, rgba(15, 153, 114, 0.18)) create subtle depth behind h

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle background layering, avoiding dark overlays. Level 1 (Base): white background (#FFFFFF) with optional radial gradient overlays at 0.05–0.18 opacity. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background: #FFFFFF, border: 1px solid #E2E8F0. Level 3 (Elevated/Hover): box-shadow: 0 10px 30px rgba(15, 153, 114, 0.25), background: #F8FAFC, border: 1px solid #CBD5E1. Primary-colored shadows (using rgba(15, 153, 114, 0.25)) reinforce brand identity on interactive elements. Buttons use box-shadow: 0 10px 30px rgba

Shapes

The shape philosophy is "Approachable Precision": rounded corners are used consistently but not excessively, signaling modern friendliness without sacrificing professional clarity. Buttons use rounded-lg (1rem / 16px) for primary and secondary actions, creating a soft-edged, clickable appearance. Cards and containers use rounded-xl (1.5rem / 24px) for larger surfaces, while input fields use rounded-DEFAULT (0.5rem / 8px) for a tighter, form-like feel. Badges and pills use rounded-full (9999px) to create a distinct visual category for status indicators and tags. The rationale: larger radius (xl

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use backgroundColor: {colors.primary} (#0F9972), textColor: white, padding: 12px 24px, height: 48px, rounded-lg, and box-shadow: 0 10px 30px rgba(15, 153, 114, 0.25). On hover (button-primary-hover), the background darkens to #0D8761 and shadow increases to 0 12px 36px rgba(15, 153, 114, 0.35), with a transition: all 200ms ease-out. Secondary buttons (button-secondary) use a transparent background with a 2px solid border in primary color and the same text color; on hover, the background fills with primary-container (#A7F3D0) and text shifts to on-primary-container (#003D2E). Ghost buttons (button-ghost) have no border or background at rest; on hover, they gain a subtle background-color: {color

Do's and Don'ts

**Do**

• Do use primary green (#0F9972) exclusively for CTAs, active states, and brand-defining moments—it's the visual anchor that signals 'click here' and 'success'.
• Do maintain generous white-space: 40px between major sections, 24px between cards, 12px between inline elements—breathing room builds trust in a booking context.
• Do apply negative letter-spacing (-0.02em to -0.03em) on all headings to tighten visual rhythm and convey speed and confidence.
• Do use box-shadow: 0 10px 30px rgba(15, 153, 114, 0.25) on primary buttons and elevated cards to reinforce the green brand identity through color-tinted shadows.
• Do ensure all interactive elements (buttons, inputs, cards) have clear focus states with outline: 2px solid {colors.primary} and outline-offset: 2px for accessibility.

**Don't**

• Don't use primary green on body text, backgrounds, or non-interactive elements—reserve it for actions and accents to maintain visual hierarchy and prevent fatigue.
• Don't apply rounded-full to buttons or cards; use rounded-lg (16px) for buttons and rounded-xl (24px) for cards to maintain professional clarity.
• Don't use shadows darker than rgba(0, 0, 0, 0.15) or blur filters; the system relies on offset and opacity, not darkness, to create depth.
• Don't mix font families; Inter is the sole typeface for all text, headings, and labels—consistency reinforces the modern, unified brand voice.
• Don't reduce line-height below 1.5 on body text or below 1 on headings; generous line-height ensures readability in dense appointment-booking interfaces and on mobile.