Resume Builder

Overview

Resume Builder is a career-acceleration platform that democratizes professional document creation through an intuitive, multi-device interface. The design aesthetic is 'Gradient Minimalism'—a philosophy that pairs a clean, light-neutral canvas with bold, energetic accent colors (coral-red primary, purple secondary, warm-orange tertiary) to signal speed, confidence, and forward momentum. The brand serves job seekers across all experience levels, from first-time resume writers to career changers, and the UI conveys both accessibility and sophistication through its measured use of color and generous whitespace.

The voice is encouraging yet grounded: direct, action-oriented, and free of corporate jargon. Resume Builder speaks to users as peers navigating a high-stakes process, offering concrete proof points ("Get hired 36% faster") without hyperbole. The tone is warm but professional—think a career coach who celebrates small wins and removes friction. Example sentence in brand voice: "Your resume is ready to impress. Download it now and start applying."

Colors

The color system is built on a light, neutral foundation (white #ffffff, soft grays #f7f7f7 to #e0e0e0) that keeps the interface calm and readable. The primary accent is a vibrant coral-red (#fe4a5a), used exclusively for the most important call-to-action buttons ("Create My Resume Now") and interactive focus states. This color appears infrequently but commands attention—it's the visual embodiment of the brand's promise to accelerate hiring. Secondary accent is a rich purple (#a053cf), deployed for supporting UI elements, stat highlights, and secondary CTAs; it adds sophistication without competing for attention. The tertiary accent, warm orange (#fd9d60), appears in gradient overlays and decorative elements, creating visual warmth and approachability. On-surface text is pure black (#00000

Typography

The type system is anchored by Lexend (a geometric, open-source sans-serif optimized for screen legibility) for all body, heading, and label text, paired with Poppins (a rounded, friendly sans-serif) exclusively for button labels to create a subtle visual distinction for interactive elements. Lexend's generous letterforms and consistent x-height make it ideal for resume-related content, where clarity is paramount. The hierarchy spans from display (60px, weight 700) down to label-sm (12px, weight 500), with deliberate weight shifts: headlines use weight 500 for a modern, approachable feel rather than heavy 700, while body text sits at weight 300 (light) to maximize whitespace and reduce cognitive load. Button labels in Poppins weight 700 at 14px create tactile emphasis without oversizing. A

Layout

The page layout uses a 12-column grid with a max-width of 1280px, maintaining a fluid layout on mobile (full-width with 24px gutter) and fixed on desktop. The spacing scale is semantic: section separation uses lg (40px), card padding uses md (24px), and internal element spacing uses sm (12px). The hero section occupies the full viewport height with asymmetric layout—the left side features a 3D-rendered resume mockup (visual proof), while the right side contains the headline, subheading, and dual CTAs (primary action in coral-red, secondary in outlined style). Below the fold, sections are stacked vertically with lg spacing (40px) between them, creating a rhythm that feels neither cramped nor excessive. Container max-width is 1280px, ensuring text remains readable on ultra-wide displays. Whi

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle background gradients rather than heavy drop-shadows. Level 1 (Base): flat white background (#ffffff) with no shadow. Level 2 (Cards & Containers): box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1) paired with a soft background gradient (e.g., #eff3f9 to #ffffff) to suggest a slightly raised surface. Level 3 (Modals & Overlays): box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.1) with a semi-transparent backdrop (rgba(0, 0, 0, 0.5)) to create clear modal separation. Hover states elevate cards to Level 3 shadows, signaling interactivity. The shad

Shapes

The shape philosophy is 'Friendly Precision'—rounded corners are used strategically to soften the interface without sacrificing professionalism. Buttons and primary CTAs use xl (1.5rem / 24px) border-radius, creating a pill-like shape that feels approachable and modern. Cards and input fields use lg (1rem / 16px) for a balanced, slightly rounded appearance that's neither too sharp nor too bubbly. Secondary UI elements (badges, small containers) use md (0.75rem / 12px) or DEFAULT (0.5rem / 8px) for subtle definition. The reasoning: large radius on high-priority elements (buttons) draws the eye

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses backgroundColor: {colors.primary} (#fe4a5a), textColor: {colors.on-primary} (white), padding: 16px 32px, height: 48px, and rounded: {rounded.xl} (24px). On hover, the background shifts to #ff6b7a with a soft glow (box-shadow: 0px 4px 12px rgba(254, 74, 90, 0.25)). On active/pressed, the background darkens to #e52586. Secondary buttons are outlined: transparent background, 2px border in {colors.primary}, same padding and height. On hover, the background fills with {colors.primary-container} (#ffd9de) while maintaining the border. Button text uses {typography.label-md} (Poppins, 14px, weight 600) for tactile emphasis. Transitions between states should use a 200ms ease-out timing function.

Containe

Do's and Don'ts

**Do**

• Do use the coral-red primary (#fe4a5a) exclusively for the highest-priority CTA on each page—typically 'Create My Resume Now' or 'Start Building'—to create a clear visual hierarchy and guide user attention.
• Do maintain generous whitespace (minimum 24px padding on cards, 40px between sections) to reduce cognitive load and make the interface feel approachable rather than cluttered.
• Do apply Lexend at weight 300–500 for body and heading text to preserve the modern, open aesthetic; reserve Poppins weight 700 for button labels only to create tactile emphasis.
• Do use the purple secondary (#a053cf) and orange tertiary (#fd9d60) as supporting accents in gradients, badges, and secondary UI; never use them as primary CTAs, as this dilutes the brand's visual clarity.

**Don't**

• Don't use multiple bright accent colors in the same section—the coral-red, purple, and orange should never appear together in a single hero or card, as this creates visual noise and weakens the primary CTA.
• Don't apply shadows heavier than 0px 20px 30px rgba(0, 0, 0, 0.1); deeper shadows make the interface feel dated and heavy, contradicting the brand's modern, accessible positioning.
• Don't use system fonts or generic sans-serifs (e.g., -apple-system, system-ui) in place of Lexend or Poppins; the custom typefaces are core to the brand's visual identity and legibility.
• Don't reduce border-radius below 8px (DEFAULT) on interactive elements; sharp corners feel corporate and cold, whereas the brand's personality is warm and approachable.