style guide

portfolio


typography

heading 1

heading 2

heading 3

heading 4

heading 5

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam animi doloribus voluptates adipisci commodi odit architecto consectetur laudantium veniam esse minima expedita aperiam nesciunt, quae dignissimos! Natus, itaque. Praesentium, voluptatibus.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam, fuga animi! Vero reiciendis aliquid et natus quae mollitia optio vel iure, totam saepe dolorem deleniti doloribus animi modi maiores in.

heading 1

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim eveniet corporis omnis cumque impedit ipsum temporibus tempore alias vero molestiae asperiores architecto, rerum voluptates nam mollitia suscipit officia incidunt! Voluptas.

Button

heading 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. A accusamus totam voluptas animi, dolores rerum blanditiis molestias excepturi sequi! Ipsum quod neque repellat nihil, excepturi ab dolore maiores autem facere!

(blockquote) Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas qui alias numquam eum soluta temporibus tempora sequi fugit eaque? Tempora totam nostrum sed minus molestias corrupti optio iste perspiciatis nesciunt!

heading 3

Lorem ipsum dolor sit amet consectetur adipisicing elit.Sequi voluptate voluptas recusandae perspiciatis delectus quidem quod facilis error quisquam maiores velit minus, itaque mollitia consequuntur a, numquam tenetur aliquam amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi explicabo molestias ad cumque, sint voluptatibus veniam asperiores amet saepe excepturi voluptate, iusto quia corrupti quasi consequuntur, suscipit fugiat nobis aperiam.

heading 4

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, eos illo velit sequi.
  2. Et aspernatur nisi temporibus qui alias quasi dignissimos harum minus asperiores dolor.
  3. Ad debitis reprehenderit animi expedita.

colors

main

--color-primary

-darker

-dark

-light

-lighter

-a30

--color-accent

-darker

-dark

-light

-lighter

black & white

--color-black

-a80

-a10

--color-white

feedback

--color-success

-darker

-dark

-light

-lighter

-a20

--color-error

-darker

-dark

-light

-lighter

-a20

--color-warning

-darker

-dark

-light

-lighter

-a20

contrast

--color-contrast

-lower

-low

-medium

-high

-higher

-a45

--color-bg

-a20


grids / layouts

grids

Example of the grid structure used, and all combinations of columns which can be used within the website.

1of7

1of7

1of7

1of7

1of7

1of7

1of7

2of7

4of7

1of7

2of7

5of7

7of7

layouts

Layout used for pages without a sidebar or details.

header

content


Layout used for projects and any page that needs a sidebar.

header

sidebar

content

details


buttons

themes

Text
Primary
Subtle
Accent
Disabled

sizes

Button sm
Button
Button md
Button lg
Button full width

forms

TODO: Implement form for contact




components

breadcrumbs

projects