Isabelle's Styleguide

Typography

Headings; Playfair Display #308e37

Code

<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>

Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

Avenir Next 16px

Quis assumenda explicabo eius harum modi perspiciatis est consequuntur beatae voluptates. Perspiciatis deleniti at ipsum laborum, et voluptate quas corrupti dolores, placeat nemo sint temporibus facere quis sed inventore, repellat, recusandae quam? Accusamus, laudantium? Necessitatibus dicta laborum mollitia labore facilis qui optio dignissimos. Necessitatibus alias quos dignissimos suscipit natus illum.

Grid

Basic Grid

Column 6
Column 6
Column 4
Column 4
Column 4
Column 3
Column 3
Column 3
Column 3
Column 3
Column 6
Column 3

Complex Grids

Column 6
Column 6
Column 3
Column 6
Column 3
Column 12
3
3
3
3
4
4
4

Responsive Grids

Col 6
Col 6
Col 6
Col 6
Col 6
Col 6
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, amet qui molestiae fugiat ut laboriosam porro ad vero deserunt fuga, velit, vitae pariatur ipsam facere quis, totam odit dolor? Veniam perferendis aliquid dignissimos vel optio laborum non, repudiandae aliquam laboriosam saepe, ad dolore necessitatibus tempora delectus corrupti praesentium ipsam repellat?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime nesciunt commodi perspiciatis unde soluta ullam, libero assumenda quisquam quia, repudiandae expedita excepturi ea molestiae recusandae deleniti architecto, exercitationem veniam totam consequuntur eum corrupti. Fuga qui corporis nesciunt odio voluptatibus sed est? Alias, modi. Eos laboriosam et, esse ipsa dignissimos, nulla.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, nobis fugiat, rem velit nulla veniam modi voluptates. Quos accusamus laudantium nihil rerum suscipit reprehenderit minima nam ducimus eaque eum. Quos animi ad sapiente earum. Nulla at veritatis dolore reiciendis aut. Corrupti nam dolor cumque commodi voluptates rem dignissimos iste distinctio.

Layout

Title

Item 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, ut.

Item 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, ut.

Item 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, ut.

Card

Basic Card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum saepe iste quae quod mollitia quaerat sunt, eaque in aut autem aliquid exercitationem natus atque iusto vero reprehenderit? Ipsa, omnis sed?

Soft Card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum saepe iste quae quod mollitia quaerat sunt, eaque in aut autem aliquid exercitationem natus atque iusto vero reprehenderit? Ipsa, omnis sed?

Hard Card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum saepe iste quae quod mollitia quaerat sunt, eaque in aut autem aliquid exercitationem natus atque iusto vero reprehenderit? Ipsa, omnis sed?

Medium Card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum saepe iste quae quod mollitia quaerat sunt, eaque in aut autem aliquid exercitationem natus atque iusto vero reprehenderit? Ipsa, omnis sed?

Dark Card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum saepe iste quae quod mollitia quaerat sunt, eaque in aut autem aliquid exercitationem natus atque iusto vero reprehenderit? Ipsa, omnis sed?

Rainbow Card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum saepe iste quae quod mollitia quaerat sunt, eaque in aut autem aliquid exercitationem natus atque iusto vero reprehenderit? Ipsa, omnis sed?

View Window

Tables

Basic Table

Striped Table

Lined Horizontal

Lined Vertical

Lined Border

Lined Every

Lined All

Forms

Contact Submission Form

Form Label & Control

Payment Form

Itemized

2019 Apple Watch $150

Applicable taxes $30

Total $180

Potential Buttons

Choose on the right
Bold Button

Checkbox

Products

Figure

Mint Apple Watch

Product Card

2017 Apple Watch
$85

Some text about the watch...

Card Grid

2018 Apple Watch
$95

Some text about the watch here...
2019 Apple Watch
$110

Some text about the watch here...
2021 Apple Watch
$220

Some text about the watch here...