Skillshare

Skillshare, black-and-white-dominant, neon-accent

Preview image. Unlock full-res

Poster studio on matte black — bold instructor faces, chalk-white type, single neon pulse.

Industrymedia, education
Palette
#000000
#ffffff
#0b1215
#394649
#e0e0e0
#757575
#232424
#55da9b
#00ff84
#24c2f2
#6927ef
#5620c1

Skillshare operates in stark black-and-white contrast with a single electric cyan-green accent that fires only on key interactive moments. The hero splits between a chalk-white left panel with bold headline weight and a pure black right panel hosting the registration flow — a literal light/dark duality that mirrors its creator/learner tension. Photo cards of instructors are presented edge-to-edge without padding, letting faces fill the frame; identity replaces ornament. The GT Walsheim Pro typeface at weight 700 for headlines and tight 0.90-0.96 line heights on large sizes creates a stacked, poster-like density. Cyan-green (#55da9b) and the brighter #00ff84 appear exclusively on CTAs and checkmarks — tiny amounts of color doing maximum work against acres of black and white. Use #55da9b exclusively for the primary CTA button — never as a background fill for sections, badges, or decorative elements Apply GT Walsheim Pro weight 700 with line-height 0.90–0.96 at 46–48px for all display headlines; the tight stacking is the signature poster effect Use 0.1em letter-spacing on ALL-CAPS metadata labels (11–13px) — MEMBERS, CLASSES, TEACHERS all track wide to distinguish label hierarchy from body text Set instructor/creator photography cards to zero padding — images fill 100% of card face with a bottom scrim overlay for text legibility Use border-radius 4px for all buttons, inputs, and cards; reserve 100px radius only for pill-shaped tags or badges — never apply 100px to buttons On black-background sections, use #232424 as the surface for stat/metric cards to create depth without shadows or borders Keep #00ff84 confined to small checkmarks and icon fills on dark backgrounds only — never use it as button background or large fill Never use the Creator Violet (#6927ef) or Electric Cyan (#24c2f2) as background fills for large sections — they are micro-accent colors for icons and specific interactive states only Never round hero photography or category browse strips — hard edges on full-bleed images are intentional; adding radius breaks the edge-to-edge poster aesthetic Never use weight 100 GT Walsheim Pro for any functional text — it appears only in decorative/watermark contexts and is illegible at body sizes on dark backgrounds Never place the Skill Green CTA (#55da9b) on a white section as a ghost or outlined variant — it only works as a filled button on both black and white backgrounds Never apply box-shadows to dark-theme (#000000 background) components — depth is achieved through #232424 surface elevation, not shadow Never mix multiple accent colors in the same section — pick either #55da9b or #24c2f2 per section, never both simultaneously Never set body text line-height below 1.40 at sizes 13–18px — tight line-height is reserved for 36px+ display sizes only

More like this