SkillSprout — Design System

01

Colore

Palette naturale e rassicurante: il verde comunica crescita e fiducia, i toni scuri danno solidità e professionalità.

Primary — usato per CTA principali e stati attivi

#E3F9E1100 · tint

#8EEB84300 · light

#3FD436500 · base

#6EE365600 · hover

#1F8C1B700 · pressed

#042A1B900 · deep

Secondary & Ink — supporto e testo

#748981muted · light

#61739Cmuted · base

#13181Eink

#FFFFFFwhite

#F2F2F2background

#C9C9C9border / disabled

I valori delle sei tinte primarie e dei due toni muted sono quelli confermati nel documento di progetto originale; le tinte intermedie (tint, light, hover, pressed) sono state sistematizzate per costruire una scala coerente.

02

Tipografia

Poppins per titoli e call to action, Open Sans per testo lungo e informazioni di dettaglio.

Grow your skills.Poppins Bold / 32px

Sprout your potential.Poppins SemiBold / 22px

Grow with live learningsPoppins SemiBold / 18px

Achieve your goals with tailored learning paths.Open Sans Regular / 14px

Master new skills with hands-on guidance.Open Sans Regular / 12px

10.000+ learners · 150+ mentorsOpen Sans / 11px · caption

Le due famiglie restano distinte per ruolo: Poppins guida i momenti decisionali (titoli, hero, bottoni) mentre Open Sans resta neutra per tutto ciò che va letto con calma: descrizioni corsi, recensioni, dettagli mentore.

03

Bottoni

Tre livelli (primario, secondario, arrow) ciascuno con quattro stati.

Primary

Secondary

Arrow

Default

Sign Up

Explore

Hovering

Sign Up

Explore

Pressed

Sign Up

Explore

Disabled

Sign Up

Explore

04

Componenti

Elementi ricorrenti nelle sezioni corsi, community e call to action.

Categoria corso

Web Development

Valutazione

Statistica piattaforma

10.000+

learners attivi

Email — Iscrizione newsletter

Your email address

Mentore — badge specialità

UX Design

05

Card corso & recensione

Le due card più ricorrenti della landing page: presentazione corso e prova sociale.

Course card

Python for Beginners

Beginner · 6 lessons · Online

Explore course

Review card

SkillSprout helped me land my dream job! The live 1:1 classes made learning so engaging, and the mentors were incredibly supportive.

Emma R.

Marketing Specialist

06

Navigazione

Nav bar sempre visibile in cima alla pagina; testo di nav e footer con stati dedicati.

Footer text

Default

Hovering

Pressed

Navigation bar text

DefaultMentor Details

HoveringMentor Details

SelectedMentor Details

07

Logo & simbolo

Un libro e un germoglio che cresce, uniti in un unico simbolo: conoscenza e crescita delle competenze.

Esiste anche in versione animata: il simbolo si presenta da solo, oppure si apre per lasciare spazio al nome SkillSprout, usata in apertura della landing page.

08

Spaziatura & raggi

Scala sistematizzata per margini interni e arrotondamenti, coerente con lo stile organico del brand.

Spacing

4px

8px

12px

16px

24px

32px

48px

Radius

8px · input

12px · componenti piccoli

20px · card

pill · bottoni, tag, nav