Softwares for Construction and Engineering
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
- Error
- Warning
Greyscale
Color for text, borders, shadow and other componente of UI.
#F5F5F5
Greyscale 50
Tab headers, generic background
#E0E0E0
Greyscale 100
Input field background, header of steps and divider.
#CCCCCC
Greyscale 200
Input and form border, icon navigation.
#666666
Greyscale 700
Titoli predefiniti delle intestazioni dei passaggi, sottotitoli dell’elenco dei passaggi
Preset headers in the stepform, subtitle of the stepform.
#3D3D3D
Greyscale 800
Bodytext, popup/toast info border.
#1A1A1A
Greyscale 900
Headers, titles, tags
La Salle Green - Brand Color
La Salle Green is the main brand color. Used to underline significant headers, CTA or interactive elements.
#EDFFF2
La Salle Green 50
Some specific backgrounds.
#90FFAF
La Salle Green 300
Used for non functional UI elements.
#007E23
La Salle Green 800
Default interactiv color, pop up success board.
#005518
La Salle Green 900
Hover color for link e primary button.
Error
For situation where something relevant is missing or for destructive actions.
#FFEBEA
Error 50
Error alert, background of invalid form.
#BB180F
Error 600
Error link/button/icon, text error, pop-up error border.
#990C04
La Salle Green 700
Link/CTA/icon for desctructive actions on hover.
Attention
To comunicate to the users something that requires their immediate attention.
#FFFAE5
Warning 50
Background attention alert.
#FFCC00
Warning 500
Default attention.
#856A00
Warning 800
Pop-up border or attention tag
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
Large smartphones, small tablets
Tablets
Small screens (e.g. MacBook 15″)
Larger laptops and external monitors
Typography
Typography
Milligram
Black 80px/64px/48px
Line height 110%
Letter spacing -2%
Display Large
Milligram
Bold 64px/48px/36px
Line height 110%
Letter spacing -1.5%
Display Medium
Milligram
Bold 48px/36px/28px
Line height 120%
Letter spacing -1%
Display Small
Milligram
Semi bold 40px/32px/28px
Line height 120%
Letter spacing -1%
Title Screen
Milligram
Semibold 32px/28px/24px
Line height 130%
Letter spacing -0,5%
Title section
Milligram
Medium 24px/20px/18px
Line height 140%
Letter spacing -0.5%
Title subsection
Milligram
Regular 20px/18px/16px
Line height 140%
Letter spacing 0%
Title body
Milligram
Regular 18px/16px/16px
Line height 150%
Letter spacing 0%
Body large
Milligram
Regular 16px/14px/14px
Line height 150%
Letter spacing 1%
Body default
Milligram
Bold 16px/14px/14px
Line height 150%
Letter spacing 1.25%
Body default bold
Milligram
Light 14px/12px/12px
Line height 140%
Letter spacing 2%
Caption
Milligram
Bold 16px/14px/14px
Line height 120%
Letter spacing 2%
Button Text
Components
03
UI
