Styleguide

A list of common design elements

01. Grid

02. Colors

Accent

Complementary

Tertiary

Header

Text

Border

03. Typography

Body: System default stack

AaZz

Regular

AaZz

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

CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Magazzini Alimentari RiunitiGiovanni RovelliItaly

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

Adipiscing arcu etiam

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

Aliquam enim ut

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.