AR Typing Platform

Overview

AR Typing Platform is a comprehensive government exam preparation tool designed for aspirants across India seeking to master English and Hindi typing skills (Krutidev, Mangal, Inscript) for court, administrative, and institutional typing examinations. The platform serves 120+ exam types including PHHC, DSSSB, SSC, MPSC, and Supreme Court typing tests. The aesthetic is 'Functional Clarity'—a clean, light-dominant interface with strategic use of cyan-blue accents (#0088CC) and warm gold highlights (#FFB81C) that create visual hierarchy without overwhelming the user. The design evokes professionalism and accessibility, making complex typing practice feel approachable and progress-driven. The emotional response is one of confidence: users see themselves progressing through structured, exam-aligned practice. Voice: direct, encouraging, and precise. The platform speaks in imperative clarity: 'Start Free. Upgrade When Ready.' 'Practice for Upcoming Typing Exams.' 'Join our Telegram for Live Typing Schedules.' Example sentence in brand voice: 'Master DSSSB LDC typing with 58 passages daily—track your WPM, accuracy, and error formula in real time.'

Colors

The color system balances a clean, neutral foundation with purposeful accent colors that guide user action and attention. Primary (#0088CC) is the signature cyan-blue used exclusively on call-to-action buttons ('Start Free. Upgrade When Ready'), active links, and focus states—it signals interactivity and trust. Secondary (#FFB81C) is a warm, energetic gold deployed on exploratory CTAs ('Explore all exams') and highlights, creating visual warmth without competing with primary. Tertiary (#9650EF) is a vibrant purple reserved for modal headers, badges, and secondary navigation, adding personality. Error (#DC3545) is a clear red for validation feedback and warnings. The surface stack is anchored in pure white (#FFFFFF) for the main canvas, with subtle grays (surface-container-highest: #E2E8F0,

Typography

The type system uses a single sans-serif family (-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial) across all scales, ensuring consistency and legibility on government exam interfaces where clarity is non-negotiable. Display (72px, 500 weight, -0.02em letter-spacing) anchors hero headlines like 'Start typing free, master with pro features.' Headline-lg (40px, 600 weight) is used for section titles and modal headers. Headline-md (28px, 600 weight) breaks up content zones. Title-lg (20px, 600 weight) labels cards and subsections. Body-lg (18px, 400 weight, 28px line-height) is reserved for hero copy and prominent descriptions. Body-md (16px, 400 weight, 24px line-height) is the default paragraph text, applied to exam descriptions and feature lists. Label-md (14px, 600 weight,

Layout

The layout uses a 12-column fluid grid with a max-width container of 1320px, centered on the viewport. Gutter spacing is 24px between columns, creating a rhythm that feels spacious without wasting horizontal real estate on desktop (1199px+) and tablet (768px–1198px) breakpoints. On mobile (< 768px), the grid collapses to single-column with 12px side margins. The spacing scale is semantic: lg (40px) separates major sections (hero from feature cards), md (24px) is the default padding inside cards and between related elements, sm (12px) is used for internal component spacing (button padding, list item gaps), and xs (4px) is reserved for micro-interactions (icon-to-text spacing). The container max-width of 1320px prevents line lengths from exceeding 80 characters on body text, maintaining read

Elevation & Depth

Depth is conveyed through a three-level shadow system that mimics subtle paper layering. Level 1 (Base/Surface): no shadow; elements sit flush on the white background. Level 2 (Raised Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) creates a soft, 3px lift—used on exam cards, input fields, and standard containers. Level 3 (Modals/Overlays): box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) combined with a semi-transparent dark overlay (rgba(0, 0, 0, 0.5) with backdrop-filter: blur(4px)) creates a pronounced modal layer that focuses attention. On hover, cards transition from Level 2 to Level 3 shado

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are applied consistently but conservatively, reflecting the professional, exam-focused context while maintaining approachability. Buttons and inputs use rounded.DEFAULT (0.375rem / 6px), a subtle curve that feels modern without appearing playful. Cards and modals use rounded.lg (1rem / 16px), a more generous radius that creates visual softness and encourages interaction. Full-width elements like the hero section and section backgrounds use rounded.DEFAULT or no rounding (0px) to anchor the layout. Badges and pills use rounded.full (9999p

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (backgroundColor: #0088CC, textColor: #FFFFFF, height: 44px, padding: 12px 24px, rounded: 6px, fontWeight: 600) are used for high-intent CTAs like 'Start Free' and 'Join our Telegram.' On hover, the background darkens to #0066AA with a 150ms cubic-bezier(0.4, 0, 0.2, 1) transition. On active/click, the background shifts to #004D7A and applies an inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.2)) to create a pressed effect. Secondary buttons (backgroundColor: #EDF2F7, textColor: #0088CC, border: 1px solid #DEE2E6) are used for exploratory actions like 'Read Blog' or 'Explore all exams.' Ghost buttons (backgroundColor: transparent, textColor: #0088CC) are used for tertiary actions; on hover, they gain a subtle

Do's and Don'ts

**Do**

• Do use primary blue (#0088CC) exclusively on high-intent CTAs and focus states—it is the brand's signature accent and must remain reserved for critical user actions.
• Do maintain 24px gutter spacing between major content sections and 12px internal padding within components to preserve the 'generous but purposeful' white-space philosophy.
• Do apply body-md (16px, 400 weight, 24px line-height) as the default paragraph text; it ensures legibility during extended reading and typing practice sessions.
• Do use the three-level shadow system (none, 0 3px 8px, 0 10px 15px) to create depth without visual clutter—shadows should feel subtle and supportive, never dramatic.
• Do apply 150ms–200ms transitions with cubic-bezier(0.4, 0, 0.2, 1) easing on all interactive state changes (hover, focus, active) to create a responsive, fluid interaction feel.

**Don't**

• Don't use secondary gold (#FFB81C) or tertiary purple (#9650EF) on primary CTAs—reserve these for exploratory actions and secondary navigation only.
• Don't apply border-radius values smaller than 6px on buttons or inputs; the minimum is rounded.DEFAULT (6px) to maintain the 'Soft-Technical' aesthetic.
• Don't exceed a container max-width of 1320px; wider layouts risk creating line lengths that exceed 80 characters and reduce reading comfort.
• Don't use system-ui or generic sans-serif fallbacks in typography declarations—always specify the full font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif) to ensure consistency across platforms.
• Don't apply shadows with high spread or blur values (> 15px blur); the shadow palette must remain subtle and supportive, never creating a 'floating' or 'lifted' appearance that distracts from content.