Typography
The Typography is basically set with the setup. There are some adjustments possible. (See tailwindcss.com) This paragraph is the standard text appearance and has three different version.
Small Font Size – 12px/0.75rem
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Normal Font Size – 16px/1rem
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Big Font Size – 20px/1.25rem
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
Huge Font Size – 30px/1.875rem
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
Headings
Headlines can be used from h1 to h6. Please make sure to use Headlines accordingly to SEO-Guidelines. Try to avoid using h1 more the once on one page. There are two predefined versions of each headline. Use the LEANability-heading to structure your content. To enable it, use the checkbox “LEANability-Heading” in the “Erweitert”-Tab in the sidebar.
H1 – Headline 1
H1 – Headline 1
H2 – Headline 2
H2 – Headline 2
H3 – Headline 3
H3 – Headline 3
H4 – Headline 4
H4 – Headline 4
H5 – Headline 5
H5 – Headline 5
H6 – Headline 6
H6 – Headline 6
Links & Buttons
See the different versions of links. In generell you can use the hole LEANability-ColorPalette to create Links. Links with no additional adjustments will be blue, a bit bolder as normal text, and underlined on hover. To bring consistency and make it easier for your users, try to use on of these tree versions:
For Buttons, and CallToActions it is the same like for Links. You can use the hole LEANability-ColorPalette to create buttons. Try to avoid to create to many versions. A Button without any additional settings will appear as “Primary Button” in pink. You have again two options. The inline button – will appear as long as the inside text – or the block button. Keep always consistency in mind.
Primary Buttons
Use the Primary Button for important actions, like “Sending a important form”, “Choose a training” etc.
Secondary Buttons
Secondary Buttons should be used for any secondary action like “Register for Newsletter”, “Get more Infos” etc.
Accent Buttons
You can use all Colors from the current Color-Set. But try to keep the UI consistent.
Ghost Buttons
To use the Ghost-Button, simply use the Checkbox “Ghost Button” in the submenu of “custom”