Name | hex-code | where is it used | Where is it from |
---|---|---|---|
brown-light-00 | #e5cdad | header | sand in logo |
brown-light-01 | #f6ede2 | every 2nd section | like sand, but brighter |
brown-dark | #966b40 | header, footer, reduction | trunk in logo - slightly darkened for contrast |
brown-dark-01 | #895929 | button:hover | darken brown dark |
green | #3b8439 | ||
green-01 | #4ba747 | button--2ndary:hover | brightened green |
red | c23934 " | input help | Salesforce Lightning Design System |
Font level | Mobile Size | Desktop Size |
---|---|---|
4 | 38px | 53px |
3 | 27px | 38px |
2 | 20px | 27px |
1 | 14px | 20px |
0 | 10px | 14px |
Level | where is it used |
---|---|
4 | .hero__title |
4 | h1 (is .hero__title) |
3 | h2 |
2 | h3 |
2 | hero__supertitle |
2 | .hero__subjektorientiert |
2 | hero__supertitle |
1 | header |
1 | reduction |
1 | text |
1 | button |
1 | footer |
1 | button |
1 | text |
0 | footer |
0 | help text |
Mobile: 1 Desktop:
Line width | Where applied |
---|---|
1px | Around important buttons |
2px | Below Header |
z-index | What |
---|---|
80 | sticky header |
100 | Overlay |