Michael Papacz-Capik

Design System

Table of Contents

Typography

Headings:

H0
This is a Header
H1

This is a Header

H2

This is a Header

H3

This is a Header

H4

This is a Header

Paragraphs:

P - Lead Paragraph (lead-p)

I'm baby salvia viral fam DIY cloud bread, subway tile master cleanse artisan synth vinyl keffiyeh shaman man braid austin glossier. Marxism austin ugh, hot chicken franzen artisan letterpress same hexagon fashion axe venmo. You probably haven't heard of them swag raw denim helvetica XOXO echo park. Fingerstache edison bulb glossier sriracha tbh authentic live-edge. Glossier gochujang chicharrones truffaut iPhone fixie shoreditch twee cronut. Hexagon lomo pabst sustainable prism viral.

P - Paragraph

I'm baby salvia viral fam DIY cloud bread, subway tile master cleanse artisan synth vinyl keffiyeh shaman man braid austin glossier. Marxism austin ugh, hot chicken franzen artisan letterpress same hexagon fashion axe venmo. You probably haven't heard of them swag raw denim helvetica XOXO echo park. Fingerstache edison bulb glossier sriracha tbh authentic live-edge. Glossier gochujang chicharrones truffaut iPhone fixie shoreditch twee cronut. Hexagon lomo pabst sustainable prism viral.

P - Quote Paragraph (quote-p)

I'm baby salvia viral fam DIY cloud bread, subway tile master cleanse artisan synth vinyl keffiyeh shaman man braid austin glossier. Marxism austin ugh, hot chicken franzen artisan letterpress same hexagon fashion axe venmo. You probably haven't heard of them swag raw denim helvetica XOXO echo park. Fingerstache edison bulb glossier sriracha tbh authentic live-edge. Glossier gochujang chicharrones truffaut iPhone fixie shoreditch twee cronut. Hexagon lomo pabst sustainable prism viral.

- Someone famous

P - Small Paragraph (small-p)

I'm baby salvia viral fam DIY cloud bread, subway tile master cleanse artisan synth vinyl keffiyeh shaman man braid austin glossier. Marxism austin ugh, hot chicken franzen artisan letterpress same hexagon fashion axe venmo. You probably haven't heard of them swag raw denim helvetica XOXO echo park. Fingerstache edison bulb glossier sriracha tbh authentic live-edge. Glossier gochujang chicharrones truffaut iPhone fixie shoreditch twee cronut. Hexagon lomo pabst sustainable prism viral.

Lists:

OL - Ordered List
  1. Alpha
  2. Beta
  3. Gamma
UL - Unordered List
  • Apples
  • Oranges
  • Maracuja

Colors

Primary:

#9AABB1 cloud-700
#88999F cloud-600
#77878E cloud-500
#66757D cloud-400
#56646C cloud-300
#46545C cloud-200
#37444C cloud-100

Secondary:

#FFFFFF
white

Accent:

#CF6958 accent-700
#E7755E accent-600
#FF8164 accent-500
#FFBA83 accent-400
#FFC497 accent-300
#FFCEAB accent-200
#FFD8BF accent-100

Effects

Containers

bg-container-standard
bg-container-no-shadow
bg-container-standard (with bg-container-standard-animation)

Icons

FontAwesome - Version 6:

address-card-solid
arrow-left-solid
book-bookmark-solid
book-open-solid
book-solid
camera-retro-solid
chart-column-solid
chart-pie-solid
cloud-arrow-down-solid
code-solid
css3-alt
cube-solid
flag-regular
flag-solid
folder-open-solid
github
golang
graduation-cap-solid
html5
hugo-color
hugo-no-color
layer-group-solid
linkedin
paper-plane-solid
pen-solid
terminal-solid

Components

Buttons:

Primary
Send
Low Opacity
Send
Grey Cancel
Primary - Large
Send
Low Opacity - Large
Send
Grey - Large Cancel

Lines:

Default
Default - Thin
White - Normal
White - Thin

Gallery of Portfolios:

Gallery Item

Programming

Gallery Grid

Programming

UX/UI

Entrepreneurship

Blog

Tutorials

Portfolios:

Portfolio Item

Test Title

I'm baby salvia viral fam DIY cloud bread, subway tile master cleanse artisan synth vinyl keffiyeh shaman man braid austin …

Portfolio Grid

Test Title 1

I'm baby salvia viral fam DIY cloud bread, subway tile master cleanse artisan synth vinyl keffiyeh shaman man braid austin …

Test Title 2

I'm baby salvia viral fam DIY cloud bread, subway tile master cleanse artisan synth vinyl keffiyeh shaman man braid austin …

Test Title 3

I'm baby salvia viral fam DIY cloud bread, subway tile master cleanse artisan synth vinyl keffiyeh shaman man braid austin …

Portfolio Page:

Test

I'm baby salvia viral fam DIY cloud bread, subway tile master cleanse artisan synth vinyl keffiyeh shaman man braid austin glossier. Marxism austin ugh, hot chicken franzen artisan letterpress same hexagon fashion axe venmo. You probably haven't heard of them swag raw denim helvetica XOXO echo park. Fingerstache edison bulb glossier sriracha tbh authentic live-edge. Glossier gochujang chicharrones truffaut iPhone fixie shoreditch twee cronut. Hexagon lomo pabst sustainable prism viral.

Send