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

Cinque bottoni — primario, secondario, arrow, il bottone hero e quello delle card corso — ciascuno con quattro stati.

Primary

Secondary

Arrow

Default

Sign Up

Explore

Hovering

Sign Up

Explore

Pressed

Sign Up

Explore

Disabled

Sign Up

Explore

Start learning & Enroll now

Due bottoni aggiunti dopo la revisione del mockup: il bottone della hero, dove la freccia passa da destra a sinistra al passaggio del mouse, e il bottone delle card corso, che da contorno diventa pieno.

Start learning — hero

Enroll now — card corso

Default

Start learning

Enroll now

Hovering

Start learning

Enroll now

Pressed

Start learning

Enroll now

Disabled

Start learning

Enroll now

Prova dal vivo — passa il mouse sopra

Prova dal vivo

La freccia nascosta resta sempre nel codice: non compare e non scompare, scivola sotto alla pillola. Cosi l'animazione parte subito e non fa saltare il resto della riga.

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

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