SHElikes

Overview

SHElikes is a women-focused career development platform that transforms skill-building into an empowering, accessible journey. The design system embodies 'Purposeful Warmth'—a blend of approachable, human-centered aesthetics with strategic urgency that drives conversion. The brand serves ambitious women seeking flexible, skill-based career paths, communicating through a palette of warm coral-red accents (#d93f1f) against clean, neutral surfaces (#fbfbfc, #eeeeee) with strategic yellow highlights (#ffff99) that signal opportunity and time-sensitivity. The emotional response is one of clarity and possibility: the UI feels supportive yet energizing, never overwhelming.

The voice is direct, encouraging, and action-oriented—never patronizing. SHElikes speaks in concrete benefits ('50+ skills, one flat rate'), uses active verbs ('Start your free trial today'), and celebrates progress with warmth. Example sentence in brand voice: 'Your next chapter starts with a single lesson—join thousands of women building careers on their terms.'

Colors

The color system centers on a warm, high-contrast palette designed for clarity and conversion. Primary (#d93f1f) is the brand's signature coral-red accent, used exclusively on CTAs, active states, and key interactive elements—it commands attention without aggression. Secondary (#4c6072) is a muted slate-blue that grounds the interface, appearing in body text, secondary buttons, and countdown timers to establish trust and stability. Tertiary (#ffff99) is a soft, warm yellow reserved for urgency signals (countdown badges, promotional highlights) and decorative accents—it creates visual rhythm without distraction.

The surface stack progresses from bright (#ffffff) for primary content areas through mid-tone containers (#eeeeee, #f5f5f5) to dim backgrounds (#e5e5e5), enabling clear layering wi

Typography

The type system pairs brandon-grotesque (a geometric sans-serif from Typekit) for headlines and CTAs with Yu Gothic (a warm, humanist Japanese typeface) for body copy, creating a bilingual-friendly hierarchy that feels both modern and approachable. Display (60px, 700 weight, -0.04em tracking) anchors hero sections with bold confidence; headline-lg (40px, 700 weight) commands section introductions; headline-md (28px, 600 weight) organizes content zones. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) maintain readability across responsive breakpoints, with 0.01em letter-spacing to prevent cramping in Japanese text. Label-md (14px, 600 weight, 0.02em tracking) and label-sm (12px, 500 weight, 0.03em tracking) handle buttons, badges, and UI labels

Layout

The layout employs a 12-column responsive grid with a 1200px container max-width, scaling fluidly to 840px on tablet and 440px on mobile. White-space is generous but purposeful: lg spacing (40px) separates major content sections, md spacing (24px) organizes subsections, and sm spacing (12px) tightens component internals. The gutter is consistently 24px, creating breathing room without excess. Hero sections occupy full viewport height with positioned CTAs (bottom: 14% on desktop, bottom: 6% on tablet, centered on mobile), establishing immediate visual hierarchy. Countdown timers and urgency messaging sit in fixed positions (bottom: 1vw on desktop, bottom: 0 on mobile) with opacity transitions (500ms ease) to appear/disappear as users scroll. Container max-width of 1200px ensures content nev

Elevation & Depth

Depth is achieved through a restrained shadow system that maintains the clean, modern aesthetic without visual heaviness. Level 1 (Base): no shadow; surfaces sit flush on the background (#fbfbfc). Level 2 (Standard Cards): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), paired with 1px solid border in surface-variant (#cccccc) to define edges subtly. Level 3 (Elevated/Hover): box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.08), 0 10px 25px -5px rgba(0, 0, 0, 0.11), creating a soft lift effect on card hover (transition: 200ms ease). Interactive elements (buttons, inputs) use Level 2 shadows by default

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are present but restrained, reflecting the brand's balance between approachability and professionalism. Border-radius follows a deliberate scale: sm (2px) for subtle definition on inputs and small UI elements; DEFAULT (4px) for standard inputs and minor components; md (6px) for cards, buttons, and primary interactive surfaces; lg (8px) for elevated cards and modals; xl (12px) for large containers and hero sections; full (9999px) for badges and pill-shaped elements. Buttons use md (6px) to feel modern without appearing overly rounded; car

Components

Action Elements Primary buttons (#d93f1f on white, 48px height, 12px 24px padding, 6px radius, label-md typography) are the conversion engine—every page features at least one above the fold. On hover, background shifts to #f46057 (primary-container) with a 200ms ease transition and box-shadow elevation to Level 3. On active/click, background darkens to #d93f1f with an inset shadow (0 2px 4px rgba(0, 0, 0, 0.15)) to create a pressed effect. Secondary buttons use a transparent background with a 2px solid #d93f1f border, shifting to surface-container-high (#e5e5e5) on hover. CTAs include a shimmer overlay (animation: shiny 2s ease-in-out infinite) with a 50px gradient sweep at 100deg, creating a subtle 'shine' effect that draws attention without distraction.

Containers & Surfaces Car

Do's and Don'ts

**Do**

• Do use primary (#d93f1f) exclusively on CTAs and active states—it's the brand's conversion signal and must never be diluted or overused.
• Do apply lg spacing (40px) between major content sections and md spacing (24px) between subsections to maintain the clean, breathing aesthetic.
• Do pair brandon-grotesque headlines with Yu Gothic body copy to create a warm, bilingual-friendly hierarchy that feels both modern and human.
• Do use countdown timers in secondary (#4c6072) with 700 font-weight and 0.02em letter-spacing to emphasize urgency without aggression.
• Do transition all interactive elements (buttons, cards, inputs) over 150–200ms ease to signal responsiveness and build confidence.
• Do reserve tertiary (#ffff99) for time-limited offer badges and decorative accents—never use it for body text or primary CTAs.

**Don't**

• Don't use shadows exceeding 48px blur radius or opacity above 0.11—the aesthetic is clean and airy, not heavy or dramatic.
• Don't apply border-radius greater than 12px on standard components; the brand is 'Soft-Technical', not rounded-consumer.
• Don't mix typefaces within a single headline or CTA—brandon-grotesque for display/labels, Yu Gothic for body, never reversed.
• Don't place CTAs below the fold without a fixed or sticky alternative; conversion depends on immediate visibility.
• Don't use secondary (#4c6072) for CTAs or primary interactive elements—it's a supporting color for trust and stability, not action.
• Don't exceed 1200px container width on desktop; narrower breakpoints (1024px, 840px) must trigger responsive adjustments to maintain visual balance.