Software edilizia, architettura, ingengeria
Brand Identity:
Manuel Alvaro
Web Design:
Francesco Cicero
Aggiungi qui il testo dell’intestazione
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
01
Information Architecture
02
Design System
Color palette
- Greyscale palette
- La Salle Green
- Errore
- Attenzione
Greyscale
Colori del testo e dei bordi, ombre e altri componenti dell’interfaccia utilizzano una scala di grigi
#F5F5F5
Greyscale 50
Intestazioni di tabella, sfondi generici
#E0E0E0
Greyscale 100
Sfondi dei campi di input, intestazioni dei passaggi e divisori
#CCCCCC
Greyscale 200
Bordi di form/input, icone di navigazione
#666666
Greyscale 700
Titoli predefiniti delle intestazioni dei passaggi, sottotitoli dell’elenco dei passaggi
#3D3D3D
Greyscale 800
Testo del corpo, bordo di avvisi/toast informativi
#1A1A1A
Greyscale 900
Intestazioni, titoli, etichette
La Salle Green - Brand Color
La Salle Green è il colore principale del brand.
L’ho utilizzato per evidenziare intestazioni di rilievo, call to action e elementi cliccabili.
#EDFFF2
La Salle Green 50
Alcuni sfondi specifici
#90FFAF
La Salle Green 300
Usato per elementi dell’interfaccia non funzionali
#007E23
La Salle Green 800
Colore cliccabile predefinito, bordo degli avvisi/toast di successo
#005518
La Salle Green 900
Colore di sfondo al passaggio del mouse su link e pulsanti primari
Errore
Sono riservati a situazioni in cui manca qualcosa di importante o per azioni irreversibili o distruttive.
#FFEBEA
Error 50
Avviso di pericolo (o errore), sfondo dei campi del form non validi
#BB180F
Error 600
Link/pulsante/icona di errore, testo di errore, bordo dell’avviso di errore
#990C04
La Salle Green 700
Sfondo di link/call to action/icona distruttivi al passaggio del mouse
Attenzione
Per comunicare agli utenti che qualcosa richiede la loro immediata attenzione.
#FFEBEA
Warning 50
Sfondo alert attenzione
#BB180F
Warning 500
Attenzione default
#856A00
Warning 800
Bordo degli avvisi o tag di avvertimento
Breakpoints
Name
Base
sm
md
lg
xl
Width in px
0
600
1024
1440
1920
Width in EM
0
37.5
64
90
120
Example devices
Smartphones
Smartphones più grandi, piccoli tablet
Tablets
Schermi piccoli (es. Macbook 15″)
Portatili più grandi e monitor esterni
Tipografia
Tipografia
Milligram
Black 80px/64px/48px
Altezza linea 110%
Spaziatura lettere -2%
Display Large
Milligram
Bold 64px/48px/36px
Altezza linea 110%
Spaziatura lettere -1.5%
Display Medium
Milligram
Bold 48px/36px/28px
Altezza linea 120%
Spaziatura lettere -1%
Display Small
Milligram
Semi bold 40px/32px/28px
Altezza linea 120%
Spaziatura lettere -1%
Title Screen
Milligram
Semibold 32px/28px/24px
Altezza linea 130%
Spaziatura lettere -0,5%
Title section
Milligram
Medium 24px/20px/18px
Altezza linea 140%
Spaziatura lettere -0.5%
Title subsection
Milligram
Regular 20px/18px/16px
Altezza linea 140%
Spaziatura lettere 0%
Title body
Milligram
Regular 18px/16px/16px
Altezza linea 150%
Spaziatura lettere 0%
Body large
Milligram
Regular 16px/14px/14px
Altezza linea 150%
Spaziatura lettere 1%
Body default
Milligram
Bold 16px/14px/14px
Altezza linea 150%
Spaziatura lettere 1.25%
Body default bold
Milligram
Light 14px/12px/12px
Altezza linea 140%
Spaziatura lettere 2%
Caption
Milligram
Bold 16px/14px/14px
Altezza linea 120%
Spaziatura lettere 2%
Button Text
Components
03
UI
