Answers AI

Overview

Answers AI is an AI-powered homework assistant designed for students seeking instant, reliable solutions to academic problems. The brand embodies "Accessible Clarity"—a design philosophy that prioritizes speed, precision, and visual simplicity without sacrificing sophistication. The interface uses a clean white canvas with vibrant indigo accents (#392bff primary, #6268ff secondary) to create a trustworthy, modern aesthetic that feels both professional and approachable. The emotional response is one of confidence and relief: users feel empowered to tackle difficult problems with an intelligent partner at their side.

Answers AI speaks in a direct, encouraging tone—never condescending, always solution-focused. The vocabulary is conversational yet precise: "Snap a photo, get solutions instantly" rather than "Leverage our advanced optical recognition infrastructure." The brand personality is that of a knowledgeable peer tutor: patient, clear, and genuinely invested in the student's success. Example sentence in brand voice: "Your homework just got 2M+ smarter."

Colors

The color system centers on a high-contrast, accessible palette built around a signature indigo primary (#392bff) that appears on all call-to-action elements, links, and interactive states. This primary is paired with a complementary secondary indigo (#6268ff) used for supporting accents, hover states, and gradient overlays. The surface stack is anchored in pure white (#ffffff) for maximum clarity and readability, with subtle container variants (surface-container-lowest: #f7f7ff, surface-container: #efefff, surface-container-highest: #dfe0ff) providing visual hierarchy without introducing competing colors. The on-surface text is a warm near-black (#1f2937) for optimal contrast and legibility on light backgrounds (WCAG AAA compliant at 16px body text). Tertiary purple (#564cda) is reserved

Typography

The type system uses Manrope exclusively—a geometric sans-serif that conveys modernity and approachability. Display (76px, 700 weight, -0.02em tracking) is reserved for hero headlines and major section titles, commanding attention without aggression. Headline-lg (40px, 700 weight) anchors secondary sections, while headline-md (28px, 600 weight) breaks up content into digestible chunks. Body text (16px, 400 weight, 24px line-height) is set with generous leading to ensure readability on screens and printed materials. Labels and UI text use 14–16px weights (500–600) with increased letter-spacing (0.01–0.02em) to improve scannability in dense interfaces. For small labels over busy backgrounds or gradient overlays, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to maintain legibility. The wei

Layout

The layout uses a 12-column grid system with a max-width of 1280px, centered on the viewport. The gutter is 24px between columns, providing breathing room without excessive white space. Hero sections use full-width padding (100px horizontal on desktop, 20px on mobile) to create an immersive experience, while content sections use a more conservative 40px margin (lg spacing token) for separation. Container max-widths are enforced at 1280px to prevent line lengths from exceeding 75 characters, maintaining optimal readability. The spacing scale is semantic: unit (8px) for micro-interactions, sm (12px) for component padding, md (24px) for section margins, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Whitespace is used strategically to guide the eye: the her

Elevation & Depth

Elevation is achieved through a restrained shadow system that avoids the heavy, dark shadows common in older Material Design. Level 1 (base surfaces) uses no shadow—the white background (#ffffff) is the foundation. Level 2 (cards, modals) applies a soft shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle depth without visual weight. Level 3 (floating elements, popovers) uses 0 4px 16px rgba(0, 0, 0, 0.1), which paradoxically appears lighter due to increased blur radius and reduced opacity—this creates a sense of "floating" rather than "pressing down." The nav bar uses a specialized treatmen

Shapes

The shape philosophy is "Soft Modernism"—rounded corners that feel contemporary and friendly without sacrificing professionalism. Buttons use 12px border-radius (lg token), creating a distinctly rounded appearance that invites interaction. Cards and containers use 20px (xl token) for a more generous, approachable feel. Input fields use 8px (DEFAULT token) for a subtle, understated appearance that doesn't compete with content. The nav bar uses 20px radius to match card styling, creating visual cohesion. Full-radius (9999px) is used exclusively for badges and pill-shaped elements. The rationale:

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses background: {colors.primary} (#392bff), color: white, padding: 12px 32px, border-radius: 12px, and font-weight: 500. On hover, apply transform: scale(0.98) and opacity: 0.9 with a 150ms transition, creating a tactile "press" sensation. The secondary button uses a 1px border at {colors.primary} with background: rgba(57, 43, 255, 0.05) and the same text color, allowing for visual hierarchy without color saturation. Ghost buttons (for tertiary actions) use transparent background with {colors.on-surface-variant} text, transitioning to {colors.primary} on hover with background: {colors.surface-container-high}. All buttons include box-shadow: 0 4px 17px 0px rgba(70, 58, 209, 0.3) for the primary variant, c

Do's and Don'ts

**Do**

• Do use the primary indigo (#392bff) exclusively for CTAs, links, and focus states—never dilute it with secondary colors on the same element.
• Do maintain 24px minimum padding on all card containers and 12px on input fields to ensure comfortable touch targets (48px minimum height for buttons).
• Do apply the Manrope typeface at 400 weight for body text and 600+ for interactive elements—never mix weights within a single component.
• Do use the shadow system consistently: 0 3px 8px for Level 2 (cards), 0 4px 16px for Level 3 (modals)—never invent custom shadows.
• Do enforce the 12-column grid with 24px gutters and 1280px max-width on all layouts—never exceed these constraints without explicit design review.

**Don't**

• Don't use the secondary indigo (#6268ff) as a primary CTA color—it's reserved for supporting accents and hover states only.
• Don't apply border-radius smaller than 8px on interactive elements or larger than 20px on buttons—this breaks the visual hierarchy.
• Don't mix Manrope with system fonts or other typefaces—the entire system depends on Manrope's geometric consistency.
• Don't create custom shadows or use drop-shadow filters—use only the defined elevation tokens (sm, md, lg) with rgba(0, 0, 0, opacity) values.
• Don't exceed 75 characters per line on body text or use line-height smaller than 1.5 (24px at 16px font-size)—readability is non-negotiable.