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.
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.
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, eos illo velit sequi.
- Et aspernatur nisi temporibus qui alias quasi dignissimos harum minus asperiores dolor.
- Ad debitis reprehenderit animi expedita.
heading 4
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, eos illo velit sequi.
- Et aspernatur nisi temporibus qui alias quasi dignissimos harum minus asperiores dolor.
- 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
sizes
forms
TODO: Implement form for contact
header
Header used on the home page, has slightly different formatting than the header used on all subsequent pages.
Header used on non-home pages, will indicate page title and subheadings.
