Career Network

Overview

Career Network is a professional mentorship marketplace designed to democratize career growth through structured peer-to-peer connections. The platform serves ambitious professionals seeking guidance and experienced mentors eager to share expertise, all unified by a shared virtual currency (CVC) that incentivizes participation. The aesthetic is 'Accessible Professionalism'—a clean, light-dominant interface with a vibrant primary blue (#0080FF) accent that signals trust, clarity, and forward momentum. The design philosophy rejects unnecessary ornamentation; every visual element serves a functional purpose, from the generous whitespace that reduces cognitive load to the rounded pill-shaped buttons (32px border-radius) that feel approachable rather than corporate. The emotional response is one of confidence and belonging: users feel they are entering a vetted, well-organized community, not a chaotic social feed.

The brand voice is conversational yet authoritative—direct without being cold, encouraging without being patronizing. Vocabulary leans toward action-oriented language ('Get matched', 'Offer your expertise', 'Grow your career') and avoids jargon-heavy terminology. The tone celebrates community and mutual benefit: 'all while growing your career in a vibrant, engaged community' exemplifies the brand's emphasis on collective progress. Example sentence in brand voice: 'Connect with a mentor who's walked your path, then mentor someone else—that's how careers accelerate.'

Colors

The color system is anchored by a trust-driven primary blue (#0080FF), the dominant accent used on all primary CTAs ('Get Started', 'Login'), interactive states, and focus indicators. This blue appears frequently (161 instances) and is the visual signature of the platform—it signals actionability and professional credibility. The secondary blue (#005BB5) is deployed on hover states for primary buttons, creating a subtle depth shift (background-color: #005BB5) that confirms interaction without jarring the user. Surface colors are predominantly white (#ffffff) with a carefully calibrated container stack: surface-container-lowest (#f2f4ff) for subtle backgrounds, surface-container-high (#e9ecef) for hover states on secondary elements, and surface-container-highest (#e0e0e0) for disabled or de

Typography

The type system employs a two-font strategy: Gilroy (a geometric sans-serif) for all display and headline levels (54px, 40px, 28px), and Roboto for body and label text (18px, 16px, 14px, 12px). This pairing creates visual distinction between navigational/hero content and supporting information. Gilroy's tight, modern letterforms (-0.02em to -0.01em letter-spacing on headlines) convey forward momentum and professionalism, while Roboto's neutral, highly legible character ensures body text remains scannable at 16px with 1.5 line-height (24px). The display level (54px, 700 weight, -0.02em spacing) is reserved for hero headlines like 'Where Mentorship Powers Career Growth', commanding attention without aggression. Headline-md (28px, 600 weight) is used for section titles and card headers, maint

Layout

The layout follows a 12-column grid with a fixed container max-width of 1280px, centered on desktop (padding: 0 50px at 1280px+ breakpoints). The page rhythm is governed by a semantic spacing scale: lg (40px) separates major sections (hero from feature showcase), md (24px) creates breathing room between cards and content blocks, and sm (12px) is used for internal padding within components. The header is fixed at 80px height (padding: 0 50px) with a 1px bottom border (#D2D2D2), ensuring persistent navigation without consuming vertical real estate. The hero section uses generous vertical padding (lg spacing above and below) to emphasize the primary CTA ('Get Started'), which sits in a white pill-shaped button (border-radius: 32px, padding: 10px 40px) with a subtle shadow (0px 2px 13.1px rgba

Elevation & Depth

Visual hierarchy is conveyed through a three-tier shadow system and subtle background color shifts, avoiding heavy drop shadows that would feel dated. Level 1 (Base): the white surface (#ffffff) with no shadow, used for the main page background and card interiors. Level 2 (Standard Card): cards and dropdowns use box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) with a 1px border (color: #d2d2d2), creating a soft lift that distinguishes them from the background without aggression. Level 3 (Elevated/Hover): on card hover, the shadow expands to 0px 4px 20px rgba(0, 0, 0, 0.1) and the background shifts t

Shapes

The shape philosophy is 'Approachable Geometry'—rounded corners are used strategically to soften the interface and reduce visual tension, but never so aggressively that the design feels childish or frivolous. Buttons employ the most aggressive rounding: border-radius: 32px (full pill shape), applied to both primary (#0080FF) and secondary buttons, making them feel inviting and clickable. This 32px radius is the brand's signature shape, appearing on the 'Get Started' CTA, 'Login' button, and all primary interactive elements. Cards and input fields use a more conservative border-radius: 16px (lg

Components

Action Elements Primary buttons (button-primary) are the hero of the interaction layer: background-color: #0080FF, color: #ffffff, border-radius: 32px, padding: 10px 40px, height: 44px, with box-shadow: 0px 2px 13.1px rgba(0, 0, 0, 0.08). On hover, the background shifts to #005BB5 (secondary blue), and the shadow deepens slightly, confirming interaction. The transition uses cubic-bezier(0.4, 0, 0.2, 1) over 250ms, ensuring smooth, professional motion. Secondary buttons (button-secondary) invert the logic: background-color: #ffffff, color: #0080FF, border: 1px solid #d2d2d2, border-radius: 32px, padding: 8px 30px. On hover, the background becomes #e9ecef (surface-container-high), maintaining the blue text color. Focus states on both button types apply a 2px solid outline in the primary

Do's and Don'ts

**Do**

• Do use the primary blue (#0080FF) exclusively for CTAs, focus states, and interactive elements—it is the brand's signature and must remain distinctive.
• Do apply the full shadow stack (0 4px 12px rgba(0, 0, 0, 0.08) for standard, 0px 4px 20px rgba(0, 0, 0, 0.1) for elevated) to create depth without visual noise.
• Do maintain the 32px border-radius on all primary buttons and pill-shaped interactive elements to signal approachability and trust.
• Do use Gilroy for headlines and Roboto for body text—never mix or substitute; this pairing is the typographic identity.
• Do apply generous whitespace (lg: 40px between sections, md: 24px within cards) to reduce cognitive load and guide the eye to key content.
• Do use the full Material 3 color token system (surface-container-lowest through surface-container-highest) to create a coherent, accessible color hierarchy.
• Do apply transitions using cubic-bezier(0.4, 0, 0.2, 1) over 250ms for all interactive state changes to maintain a consistent, professional motion language.

**Don't**

• Don't use colors outside the defined palette—no custom hex values, no gradients, no transparency overrides that deviate from the token system.
• Don't apply shadows heavier than 0px 4px 20px rgba(0, 0, 0, 0.1); deeper shadows feel dated and undermine the clean aesthetic.
• Don't round corners below 4px or above 32px except for full circles (border-radius: 50%); this maintains visual consistency and prevents the interface from feeling either too sharp or too soft.
• Don't use the primary blue (#0080FF) for body text or secondary information—reserve it exclusively for interactive elements to maintain visual hierarchy.
• Don't mix font families within a single component; Gilroy is for display/headlines, Roboto is for body/labels, never combine them in a single text block.
• Don't apply letter-spacing tighter than -0.02em or looser than 0.1em; extreme spacing breaks readability and feels amateurish.
• Don't use opacity or transparency to create depth; use the shadow and background-color token system instead for predictable, accessible results.