Skillshare

Overview

Skillshare is a peer-to-peer creative learning platform that champions accessibility, community, and hands-on skill development. The design system embodies a philosophy of "Approachable Optimism"—combining a clean, light-forward aesthetic with vibrant accent colors that signal energy, possibility, and creative empowerment. The brand serves a global audience of creators, learners, and teachers who value practical knowledge over gatekeeping, and the UI reflects this democratizing spirit through generous whitespace, clear hierarchies, and a warm, encouraging tone. The visual language prioritizes clarity and motion: every interaction feels responsive and alive, never static or corporate.

The brand voice is conversational, encouraging, and action-oriented. Skillshare speaks to the creator in you—not the expert, but the curious person ready to learn. Vocabulary leans into verbs (explore, create, discover, build) and avoids jargon. The tone is never condescending; it assumes the user is capable and motivated. Example sentence in brand voice: "Start for free and discover what you're capable of creating today."

Colors

The Skillshare color system is built on a foundation of light, accessible neutrals anchored by two powerful accent colors: a vibrant teal-green primary (#55da9b) and a deep purple secondary (#5620c1). The primary color is the hero accent—used exclusively on call-to-action buttons ("Start for Free", "Sign Up"), interactive focus states, and key brand moments. It conveys growth, possibility, and forward momentum. The secondary purple is reserved for badges, secondary actions, and accent highlights that require visual distinction without competing with primary CTAs. The surface stack ranges from near-white (#fafafa) to deeper grays (#dcdee1, #8e9699) to create subtle depth without sacrificing legibility. All text on light surfaces uses the dark neutral on-surface (#0b1215) at 18px/400 weight

Typography

The typography system is anchored in GT Walsheim Pro, a geometric sans-serif that conveys both professionalism and approachability. The type hierarchy spans from a bold 56px display size (used sparingly for hero headlines) down to 13px labels for metadata and tertiary information. Headlines (36px–26px, all 700 weight) use a tight line-height of 1.22–1.27 to create visual impact and density; body text (18px–16px, 400 weight) uses a more generous 1.33–1.5 line-height for readability and breathing room. The label tier (14px–13px, 700 weight) is used for button text, chip labels, and form labels—always bold to signal interactivity. Letter-spacing is minimal (0 to -0.02em) on headlines to reinforce their weight and presence, while body text remains neutral (0em). When small labels appear over b

Layout

The layout system uses a 12-column grid with a max-width of 1200px, centering content on desktop and allowing full-bleed on mobile (< 600px). The primary spacing unit is 8px, with semantic tokens for common gaps: gutter (24px) separates major sections, lg spacing (40px) creates breathing room between hero and content blocks, and md spacing (24px) is the default padding inside cards and containers. The page rhythm follows a "content-first" model: the hero section (with background image and overlay) spans full-width with 48px vertical padding (header) and 40px horizontal padding (gutter). Below the fold, class cards are arranged in a responsive grid: 1 column on mobile, 2 on tablet (600px+), and 3–4 on desktop (1200px+), each card using 12px internal spacing (sm) and 24px gap between cards (

Elevation & Depth

Elevation in Skillshare is achieved through subtle shadows and layering, never through color darkening or borders alone. The shadow system follows three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for cards and minor UI elements at rest, md (0 4px 12px rgba(0, 0, 0, 0.08)) for hovered cards and modals, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for floating elements like dropdowns or overlays. Cards at rest use sm shadow; on hover, they transition to md shadow over 200ms (cubic-bezier(0.4, 0, 0.2, 1)) to signal interactivity without jarring the user. The hero section uses a semi-transparent dark o

Shapes

The shape philosophy is "Soft-Technical"—combining subtle rounding with geometric precision to feel both approachable and professional. Border-radius follows a four-tier scale: sm (4px / 0.25rem) for buttons, inputs, and small UI elements; DEFAULT (8px / 0.5rem) for standard cards and containers; md (12px / 0.75rem) for larger cards and modals; lg (16px / 1rem) for hero sections and full-width containers. Buttons use sm radius (4px) to maintain a compact, action-oriented appearance; cards use DEFAULT (8px) for a balanced, friendly feel; and the hero section uses lg (16px) to create a soft, wel

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use #55da9b background with #0b1215 text, 4px radius, 12px vertical / 20px horizontal padding, and 700 weight label text (14px). On hover, the background lightens to #3fc97a over 200ms; on active/press, it darkens to #2d9b7a. Secondary buttons are transparent with a 2px solid #55da9b border and #55da9b text; on hover, they fill with the primary-container color (#a8f0d1) and shift text to on-primary-container (#0d3d2e). Ghost buttons have no background or border, using on-surface text (#0b1215); on hover, they gain a surface-container-high background (#dcdee1) and text shifts to primary (#55da9b). All button transitions use cubic-bezier(0.4, 0, 0.2, 1) timing over 200ms for a snappy, responsive feel.

Conta

Do's and Don'ts

**Do**

• Do use the primary teal (#55da9b) exclusively on CTAs and interactive focus states—never on passive text or backgrounds.
• Do maintain 24px gutter spacing between major content sections and 12px internal padding within cards to create visual breathing room.
• Do apply the md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) on hover to cards and buttons to signal interactivity without jarring motion.
• Do use GT Walsheim Pro at 700 weight for all headlines and button text to reinforce hierarchy and action-orientation.
• Do ensure all text on light backgrounds meets WCAG AA contrast (4.5:1 minimum); use #0b1215 on-surface for body text and #3a4649 on-surface-variant for secondary information.

**Don't**

• Don't use the secondary purple (#5620c1) on primary CTAs—reserve it for badges, secondary actions, and accent highlights only.
• Don't apply shadows larger than lg (0 16px 40px rgba(0, 0, 0, 0.12)) to any element; excessive shadow depth contradicts the clean, approachable aesthetic.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the geometric consistency.
• Don't place body text smaller than 16px on light backgrounds without increasing line-height to 1.5 or larger; readability suffers below this threshold.
• Don't mix font families within a single component; GT Walsheim Pro is the sole typeface for all UI text, ensuring visual cohesion.