Unstop

Overview

Unstop is a career-acceleration platform that transforms opportunity discovery into an energetic, accessible experience. Serving students and early-career professionals across India and beyond, the design system embodies 'Optimistic Clarity'—a visual language that combines bright, trustworthy blues with warm accents to convey possibility and forward momentum. The interface prioritizes clarity over decoration: clean typography hierarchies, generous whitespace, and purposeful color usage guide users through complex career pathways (internships, jobs, competitions, hackathons, courses) without cognitive overload. The emotional response is one of empowerment and momentum—users feel they are in control of their career trajectory, supported by a platform that understands their ambitions.

The brand voice is conversational yet authoritative, encouraging yet grounded. Unstop speaks to users as peers navigating career decisions, not as subjects receiving instructions. Vocabulary emphasizes agency ('Unlock Your Career', 'Access to 32M+ profiles', 'Start Playing') and community ('Trusted by Industry Veterans', 'Become a Mentor'). The tone avoids corporate jargon; instead, it uses concrete, action-oriented language. Example sentence in brand voice: 'Compete in live challenges, build your portfolio, and get discovered by top employers—all in one place.'

Colors

The color system is built on a foundation of trust (primary blue #0073E6) and opportunity (secondary gold #FFDD66), set against a light, accessible background. Primary (#0073E6) is the signature accent used on all CTAs, interactive elements, links, and focus states; it conveys reliability and forward momentum. Secondary (#FFDD66) is reserved for highlights, badges, and celebratory moments (e.g., 'Free' tags, achievement indicators). Tertiary green (#05C165) signals success, completion, and positive outcomes (e.g., 'Online' status, verified badges). Error red (#D63500) is used sparingly for warnings, validation errors, and destructive actions. The surface stack is anchored in light blues and whites: the body background is #DEEDFC (surface-container), which provides subtle visual warmth with

Typography

The type system uses Inter exclusively, a geometric sans-serif that conveys modernity and approachability. Display (56px, 800 weight, -0.03em tracking) is reserved for hero headlines like 'Unlock Your Career!'—the weight and negative tracking create visual impact and urgency. Headline-lg (46px, 800 weight) is used for major section titles and page headings, maintaining the same bold presence. Headline-md (32px, 600 weight) breaks down information hierarchy for subsections and card titles. Body text (16px, 400 weight, 24px line-height) is optimized for scannability and comfort at typical reading distances; the 1.5 line-height ratio (24px ÷ 16px) ensures adequate breathing room. Label-md (14px, 600 weight) is the default for buttons, form labels, and UI controls; the 600 weight provides visu

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining consistency across desktop and tablet breakpoints. The body background is #DEEDFC on desktop (creating a branded container), but switches to white (#FFFFFF) on mobile (max-width: 1023px) for clarity and reduced visual noise. Horizontal gutters are 24px (--gutter) on desktop, reducing to 12px on tablet and 8px on mobile. Vertical spacing follows a semantic scale: lg (40px) separates major sections (e.g., hero from featured cards), md (24px) separates component groups within sections, sm (12px) separates individual items within a list or grid. The hero section uses full-width layout with centered content; the h1 'Unlock Your Career!' is paired with a secondary headline and category pills (Internships, Jobs, Compe

Elevation & Depth

Depth is conveyed through a subtle shadow system and layered backgrounds rather than dramatic drop shadows. Level 1 (Base): the body background (#DEEDFC on desktop) provides the foundational layer. Level 2 (Standard Cards): cards use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border in #CDCDCD (outline-variant), creating a soft, lifted appearance. Level 3 (Hover/Elevated): on hover, cards elevate to box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), signaling interactivity. Buttons use the same md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to indicate clickability. Input fields use no shadow by

Shapes

The shape philosophy is 'Approachable Precision'—rounded corners are used consistently to soften the interface and create a friendly, modern aesthetic, but not so aggressively that the design feels childish or loses structure. Buttons and inputs use full-radius (border-radius: 24px or 9999px), creating pill-shaped elements that feel inviting and clickable. Cards use lg radius (16px), providing enough rounding to feel contemporary without obscuring content hierarchy. Smaller UI elements (badges, chips, tags) use full-radius (9999px) for visual distinction and to signal their secondary role. For

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (bg: #0073E6, text: white, 44px height, 12px vertical / 24px horizontal padding, border-radius: 24px) use label-md typography (14px, 600 weight) and the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)). On hover, the background darkens to #005CB8 with a 300ms transition; on active, the shadow increases to lg (0 8px 24px rgba(0, 0, 0, 0.12)). Secondary buttons (bg: #E9F4FF, text: #0073E6, border: 1px #CDCDCD) provide a lower-emphasis alternative; they use the same height and padding but no shadow. Tertiary buttons (bg: transparent, text: #0073E6, border: 1px #0073E6) are used for inline actions or less prominent CTAs. All buttons include a 200ms focus-visible outline (1px solid #0073E6) for keyboard accessibility.

##

Do's and Don'ts

**Do**

• Do use primary blue (#0073E6) exclusively for interactive elements (buttons, links, focus states) to create a consistent, recognizable interaction model.
• Do maintain 24px gutters and 40px section spacing to create breathing room and visual hierarchy; whitespace is a design feature, not wasted space.
• Do apply the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards and buttons; it's the system's signature depth cue.
• Do use Inter 600 weight for all labels and button text; it provides visual distinction without sacrificing legibility at small sizes.
• Do ensure all interactive elements have a minimum 44px height and 12px padding for comfortable touch targets on mobile.
• Do use full-radius (24px or 9999px) on buttons and inputs; it signals 'interactive' and creates a friendly, modern aesthetic.

**Don't**

• Don't use secondary colors (gold #FFDD66, green #05C165) on primary CTAs; reserve them for badges, highlights, and status indicators.
• Don't apply shadows larger than lg (0 8px 24px rgba(0, 0, 0, 0.12)) on standard components; it creates visual clutter and reduces clarity.
• Don't use text smaller than 14px (label-sm) in body copy; the system is optimized for 16px (body-md) as the default reading size.
• Don't mix border-radius values arbitrarily; stick to the defined scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 16px, xl: 20px, full: 9999px).
• Don't apply negative letter-spacing to body or label text; it reduces legibility. Negative tracking (-0.03em to -0.01em) is reserved for display and headline sizes.
• Don't use the light blue background (#DEEDFC) on mobile; switch to white (#FFFFFF) at max-width: 1023px to reduce visual noise and improve clarity.