BuddyGrowth — Design System

01

Colore

Palette costruita su un blu diretto e affidabile: comunica azione e fiducia, con quattro accenti dedicati alle aree principali del prodotto.

Primary — usato per CTA principali e stati attivi

#E1EAFE

100
tint

#97B8FC

300
light

#1761F8

500
base

#1455DA

600
hover

#1146B3

700
pressed

#1D4894

900
deep

Secondary — accenti delle sezioni principali

#FFC857

yellow
Home / Dashboard

#FC7E41

orange
Mentorship

#43B97F

green
Buddies

#A194FE

purple
Eventi

Ink — testo e supporto

#9CA3AA

ink
300

#223343

ink
base

#16212C

ink
deep

Neutrali — sfondi e superfici

#EBF0F3

background

#FFFFFF

surface
card

#D3D9DE

border
divider

#AFB7BE

disabled

02

Tipografia

Un'unica famiglia per tutto il prodotto: Inter. I pesi, non un secondo font, distinguono titoli, azioni e testo di dettaglio.

Inter

Work smarter, connect betterH1 · SemiBold · 48

Trova il mentor giusto per teH2 · SemiBold · 32

Prossimi eventi
questa settimanaH3 · SemiBold · 24 · due righe

Un percorso di crescita costruito insieme, non affidato al caso.Body · Regular · 16

Disponibile martedì e giovedìBody Heavy · Bold · 16

Nessuna seconda famiglia: la coerenza tra titoli e testo lungo è affidata interamente ai pesi di Inter, dal SemiBold dei titoli al Regular dei contenuti di dettaglio.

03

Bottoni

Due livelli, primario e secondario, ciascuno con quattro stati, costruiti sulla stessa scala cromatica del blu primario.

	Default	Hover	Pressed	Disabled
Primary	Connetti	Connetti	Connetti	Connetti
Secondary	Annulla	Annulla	Annulla	Annulla

04

Componenti

Elementi ricorrenti nei flussi di onboarding, filtri e gestione delle connessioni.

Toggle

Attivo

Disattivo

Filtro reparto

Seleziona reparto

Design

Prodotto

Marketing

Notifiche

3

1

Salva

Chiamata

Disponibilità

Lun – Ven

Weekend

05

Card Buddy & Mentorship

Avatar reale al posto delle iniziali: il progetto punta su connessioni tra persone riconoscibili, non su profili anonimi.

Sofia Colombo

UX Designer · Design · Milano

Appassionata di design system, disponibile per un caffè virtuale su onboarding e componenti.

Connetti

Public speaking per team leader

Elena Marchi · Head of Marketing · Torino · 12 partecipanti

Gio 18 · 17:00 Partecipa

06

Navigazione

Sidebar verticale, sempre visibile: Home, Messaggi, Buddies, Mentorship, Eventi, Impostazioni.

Home

Messaggi2

Buddies

Mentorship

Eventi

Impostazioni

07

Messaggistica

Bubble asimmetriche: blu per chi scrive, superficie neutra per l'interlocutore.

Ciao! Ho visto che ti sei iscritta al programma di mentorship, come possiamo iniziare?

Volentieri! Vorrei concentrarmi su public speaking e gestione dei feedback.

Perfetto, propongo una prima call questo giovedì per definire gli obiettivi insieme.

08

Spaziatura & raggi

Scala coerente per margini interni e arrotondamenti, condivisa da bottoni, card e componenti.

Spacing

4px

8px

12px

16px

24px

32px

48px

Radius

8px · input

12px · componenti piccoli

20px · card

pill · bottoni, tag, nav