Style Guide 🎨

Design documentation on the design tokens, components, utilities, and layouts that are used across my portfolio.

As a documentation nerd, I thought it would not only be fun to showcase the assets that help make this portfolio possible, but also be helpful to do a design inventory and build more efficient design patterns.

Color

Color can help bring a design to life. Color is versatile; it's used to express emotion and tone, as well as place emphasis and create associations. Color should always be used in meaningful and intentional ways in order to create patterns and visual cues.

Primary/State Colors

We can use these colors to express state, accent, or emphasis

Primary
Primary Transparent
Primary Dark
Secondary
Secondary Transparent
Secondary Dark
Tertiary
Tertiary Transparent
Tertiary Dark
Neutral Colors

We can use these colors to shade the neutral parts of our UI (eg. text, backgrounds, panels, form controls)

Grey 900
Grey 800
Grey 700
Grey 600
Grey 500
Grey 400
Grey 300
Grey 200
Grey 100
Grey 0

Typography

Typography is used to establish a balanced and intuitive interface. Scale, weight, and organization should be carefully considered when building UI.

Font

The typography in this portfolio is set in Inter, an awesome open-source typeface specifically designed for digital mediums. Read more about Inter!

Elements

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

This is a lead paragraph - often used as the first paragraph in a body of text and provide a bit more emphasis than a traditional paragraph.

This is a normal paragraph and is the default for multi-line text.

This is small text

Components

Badge
Badge
Box
Box
Button
Card
Card
List
  • List Item #1
  • List Item #2
  • List Item #3
Pill
This is a Pill
Randomizer (fun facts)
fan of sweet treats 🍭