Remasto

Overview

Remasto is an AI-powered interview preparation platform that democratizes professional interview coaching through adaptive practice scenarios, real-time feedback analytics, and communication skill assessment. The design system embodies a 'Tech-Forward Clarity' aesthetic—combining vibrant purple (#8c52fe) accent energy with clean, minimal surfaces (white #ffffff, light grays #f5f5f5) to create an interface that feels both sophisticated and approachable. The brand serves ambitious job seekers, MBA candidates, and visa interview applicants who demand precision, transparency, and measurable progress. The visual language evokes confidence through bold typography (DM Sans at 700 weight), purposeful color hierarchy, and generous whitespace that reduces cognitive load during high-stakes practice sessions.

Remasto's voice is direct, encouraging, and data-driven—never patronizing, always actionable. The tone balances professional rigor with human warmth: 'Your communication clarity improved 12% since last session' rather than 'You did okay.' Copy emphasizes agency and progress: users don't 'fail' interviews, they 'identify gaps' and 'refine delivery.' The brand personality is that of a trusted coach who has seen thousands of interviews and knows exactly what works. Example sentence in brand voice: 'Your eye contact was steady, but slow down on technical definitions—you're rushing when you're uncertain.'

Colors

The color system is built on a 'Accent-Forward' philosophy where the vibrant purple primary (#8c52fe) acts as the signature brand color, appearing on all CTAs, interactive states, and key moments of user agency. This purple is paired with a clean white surface (#ffffff) and a subtle light gray container system (#f5f5f5 → #e0e0e0) that creates visual depth without distraction. The secondary blue (#2196f3) supports data visualization and informational hierarchy, while the tertiary amber (#f59e0b) highlights achievements and positive feedback moments. On-surface text is a sophisticated dark gray (#262a38) rather than pure black, reducing eye strain during extended reading of interview transcripts and feedback. The surface-variant (#ebeef4) provides a soft purple tint for subtle backgrounds, r

Typography

The typography system uses DM Sans exclusively—a geometric, modern sans-serif that conveys technical competence while remaining warm and human. The hierarchy is built on weight contrast rather than size alone: display (56px, 700 weight) for hero headlines, headline-lg (40px, 700) for section titles, headline-md (28px, 600) for subsections, and body-md (16px, 400) for primary content. Letter-spacing is tightened on large sizes (-0.02em on display, -0.015em on headline-lg) to create visual density and authority, while body text uses +0.01em spacing to enhance readability during intense focus sessions. Line-height is generous (1.5x on body, 1.33x on headlines) to reduce cognitive friction when parsing interview feedback or scenario descriptions. Labels use 600 weight at 14px with 0.01em track

Layout

The layout system uses a 12-column grid with a 1280px max-width container, centered with 24px gutters on desktop and 16px on tablet. The spacing scale is semantic: lg (40px) separates major sections (hero from features, features from testimonials), md (24px) groups related components (card padding, section internal spacing), and sm (12px) creates micro-rhythm within components (list item padding, label-to-input spacing). The design favors asymmetric layouts—hero content is left-aligned with right-side imagery or gradient overlays, creating visual momentum toward CTAs. Whitespace is intentional: the hero section uses 64px top/bottom padding (xl spacing) to create breathing room around the headline 'AI Practice Studio for Communicat[ion].' Cards are arranged in a 3-column grid on desktop, co

Elevation & Depth

Elevation is achieved through a subtle shadow and border system rather than dramatic depth. Level 1 (Base): flat white surface (#ffffff) with no shadow, used for primary content areas and hero sections. Level 2 (Cards & Inputs): 1px solid border in surface-variant (#ebeef4) plus box-shadow 0 1px 2px rgba(0, 0, 0, 0.06), creating a soft lift that distinguishes interactive elements without visual heaviness. Level 3 (Modals & Popovers): box-shadow 0 16px 40px rgba(0, 0, 0, 0.12) with a 1px border in surface-variant, signaling modal priority and focus capture. Hover states on cards transition to L

Shapes

The shape system follows a 'Soft-Technical' philosophy: rounded corners are present but restrained, signaling modernity without sacrificing professional gravitas. Buttons use 4px radius (sm) for primary actions, creating a subtle softness that feels contemporary while maintaining sharp edges for clarity. Cards and containers use 16px radius (lg) to create visual warmth and approachability—this is where users spend extended time reviewing feedback, so the softer corner radius reduces visual tension. Inputs and form fields use 8px radius (md) as a middle ground, balancing functionality with frie

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses #8c52fe background with white text, 8px vertical and 16px horizontal padding, 4px border-radius, and 40px height. On hover, the background darkens to #7a3fe8 with a 200ms transition, providing clear feedback without animation lag. The button-secondary uses white background with purple text and a 1px purple border, 9999px radius (pill shape), and identical padding/height—this signals 'alternative' or 'exploratory' actions like 'Use Cases' or 'Sample Analytics.' Button-tertiary is transparent with purple text, used for inline links or low-priority actions; on hover, it gains a light purple background (#e6e1f9) at 200ms. All buttons use DM Sans 600 weight at 14px with 0.01em letter-spacing for

Do's and Don'ts

**Do**

• Do use the primary purple (#8c52fe) exclusively for CTAs and interactive focus states—it's the brand signature and must remain distinctive.
• Do maintain 24px gutters and 40px section spacing (lg token) to create breathing room; dense layouts reduce user confidence during high-stakes practice.
• Do apply DM Sans 700 weight on headlines and 600 on labels; weight contrast creates hierarchy more effectively than size alone.
• Do use the surface-variant (#ebeef4) for subtle backgrounds and borders; it reinforces brand presence without overwhelming white space.
• Do transition all interactive states at 200ms with cubic-bezier(0.2, 0, 0, 1) easing; this feels snappy without being jarring.
• Do use 4px border-radius on primary buttons and 9999px on secondary/tertiary to create visual hierarchy through shape language.

**Don't**

• Don't use pure black (#000000) for text; use on-surface (#262a38) instead to reduce eye strain during extended reading of feedback.
• Don't apply shadows exceeding 40px blur radius; the design is grounded and professional, not floating or ethereal.
• Don't mix typefaces; DM Sans is the exclusive font family across all scales and weights.
• Don't use the secondary blue (#2196f3) or tertiary amber (#f59e0b) as primary CTAs; reserve purple for all high-priority actions.
• Don't exceed 1280px container width; this ensures body text line-length stays under 80 characters for readability.
• Don't animate transitions faster than 150ms or slower than 300ms; this maintains perceived responsiveness without feeling sluggish.