01. Grid
02. Colors
Accent
Complementary
Tertiary
Header
Text
Border
03. Typography
Body: System default stack
Regular
Bold
Headings: Questa Grande
AaKkZz
Display
Size: 45px — L-Height: 1.15 (52px)
Display
Heading H1
Size: 37px — L-Height: 1.15 (43px)
Heading 1
Heading H2
Size: 31px — L-Height: 1.15 (36px)
Heading 2
Heading H3
Size: 26px — L-Height: 1.15 (30px)
Heading 3
Heading H4
Size: 22px — L-Height: 1.15 (25px)
Heading 4
Heading H5
Size: 18px — L-Height: 1.35 (24px)
Heading 5
Heading H3
Size: 13px — L-Height: 1.35 (18px)
Heading 6
Body / Paragraph
Size: 15px — L-Height: 1.6 (24px)
Whenever I go back to the guest house during the morning to copy the contract, the gentlemen are still there eating their breakfasts.
04. Table
Try this responsive table on different screen sizes and you’ll be amazed:
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
05. Buttons
Regular Filled Primary Secondary Info Small Small filled Small primary Small sec. Small info
06. Media
07. Alignment
The image block can be left, right or center aligned. Interactively drive long-term high-impact process improvements after robust e-commerce. Intrinsicly deploy granular technologies after client-centric growth strategies. Authoritatively embrace.
Wide image
Left aligned image
Objectively morph e-business synergy through prospective markets. Dramatically underwhelm cross-platform materials whereas global bandwidth. Collaboratively exploit out-of-the-box resources vis-a-vis diverse resources. Credibly streamline proactive scenarios through scalable channels. Quickly reconceptualize flexible processes. Vivamus cursus tempor sem, et pulvinar velit egestas. Nunc eleifend felis porttitor libero volutpat, porta feugiat ex ornare. Quisque sit amet lorem. Nunc eleifend felis porttitor libero volutpat, porta feugiat ex ornare. Quisque sit amet lorem nulla. Nulla convallis placerat dui et sagittis. Maecenas sagittis sem arcu. Fusce rhoncus elementum rutrum. Mauris aliquet sapien et mauris tristique lobortis. Aenean at dictum ligula, id semper velit.
Right aligned image
Nullam venenatis viverra mauris vel volutpat. Sed egestas tortor in massa efficitur, et posuere tellus ornare. Ut id enim ante. Donec vehicula diam in lacus fermentum, vel pulvinar ligula hendrerit. Phasellus dignissim odio vel mauris sodales, eget suscipit nibh aliquam. Phasellus rutrum risus eget lectus mollis, et ultrices leo ultricies. Vivamus cursus tempor sem, et pulvinar velit egestas. Nunc eleifend felis porttitor libero volutpat, porta feugiat ex ornare. Quisque sit amet lorem. Nunc eleifend felis porttitor libero volutpat, porta feugiat ex ornare. Quisque sit amet lorem nulla. Nulla convallis placerat dui et sagittis. Maecenas sagittis sem arcu. Fusce rhoncus elementum rutrum.