FairConnect Design System

Colori

I colori principali definiti nelle linee guida + le 10 gradazioni per ogni colore.

Principale
bg-fcp-50
bg-fcp-100
bg-fcp-200
bg-fcp-300
bg-fcp-400
bg-fcp-500
bg-fcp-600
bg-fcp-700
bg-fcp-800
bg-fcp-900
Secondario
bg-fcs-50
bg-fcs-100
bg-fcs-200
bg-fcs-300
bg-fcs-400
bg-fcs-500
bg-fcs-600
bg-fcs-700
bg-fcs-800
bg-fcs-900
Terziario
bg-fct-50
bg-fct-100
bg-fct-200
bg-fct-300
bg-fct-400
bg-fct-500
bg-fct-600
bg-fct-700
bg-fct-800
bg-fct-900

Grid system

Per il grid system useremo quello di tailwind disponibile a questa pagina: Tailwind Grid System

Typography

Il font scelto è Helvetica Neue

H1/2.25rem/Regular

H2/2rem/Regular

H3/1.75rem/Regular

H4/1.5rem/Regular

H5/1.25rem/Regular
H6/1.125rem/Regular

Paragraph/1rem/Regular

Paragraph/1rem/Bold

Body1/1rem/Regular Body/Small/Regular Body/ExtraSmall/Regular

Icone

Sono state scelte le icone di Google Material Font. Qualche esempio:

search home settings favorite

Bottoni

Bottoni in stile material secondo le linee guida (DSL)

Tutte le variazioni di colore possono essere usate

TextField

Input in stile material secondo le linee guida (DSL)

L'email non è valida

Sidebar

La sidebar è stata inserita in un blocco che simula lo schermo. Ridurre lo chermo per vedere l'effetto responsive animato.

Sidebar aperta

Sidebar chiusa

App-bar (header)

La appbar è stata inserita in un blocco che simula lo schermo

La barra può rimanere fissa in alto se si scrolla la pagina (configurabile)

LOGO
person

Snack-bar (notifiche)

Le notifiche appaiono in basso a sinistra nello schermo. Premere il pulsante per mostrarle tutte.

Tabella

Tabella

Nome Cognome E-mail
Mario Rossi m.rossi@gmail.com
Michela Rossi m.rossi@gmail.com
Paola Rossi m.rossi@gmail.com
Giuseppe Rossi m.rossi@gmail.com
Mario Rossi m.rossi@gmail.com
Mario Rossi m.rossi@gmail.com

Tabella compatta

Nome Cognome E-mail
Mario Rossi m.rossi@gmail.com
Michela Rossi m.rossi@gmail.com
Paola Rossi m.rossi@gmail.com
Giuseppe Rossi m.rossi@gmail.com
Mario Rossi m.rossi@gmail.com
Mario Rossi m.rossi@gmail.com

Tabella a strisce

Nome Cognome E-mail
Mario Rossi m.rossi@gmail.com
Michela Rossi m.rossi@gmail.com
Paola Rossi m.rossi@gmail.com
Giuseppe Rossi m.rossi@gmail.com
Mario Rossi m.rossi@gmail.com
Mario Rossi m.rossi@gmail.com

Chips (badges)

Chips secondo schema DLS. SOno possibili diverse tipologie di chip: badge semplice, con tag di gruppo (in alto), chiudibile

CHIP
TAG
big chip with tag
CLOSEABLE ×
colore sec. ×
colore ter. ×
colore rosso ×
colore verde ×

Dialog (popup)

Un popup richiudibile

Stepper

Stepper verticale nei vari stati (completato, attivo, da fare)

STEP 1
description of the step above
STEP 2
description of the step above
STEP 3
description of the step above

Box (in aggiunta al DLS)

I box sono utili per mostrare informazioni inline, spesso di carattere warning o error

info box
error box
success box
warning box

Gruppo di bottoni (in aggiunta al DLS)

I gruppi di bottoni sono utili in sostituzione ad un radio (o quando ha senzo tenere dei bottoni uniti)

Tabs

I tab sono utili per raggruppare informazione in maniera compartimentale

Tab 1
Tab 2
Very long tab title - Tab 3

Progress bar in alto alla pagina

La progress bar in alto è utile per mostrare un caricamento senza bloccare la pagina

Loading

Il loading può essere a tutto schermo (bloccante) oppure locale

Loading icon:

Loading che copre un intero elemento:

Switch box (in aggiunta al DLS)

Lo switch box è utile per mostrare che una configurazione è attiva

Switch non attivo

Switch attivo