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
Neutral Colors
We can use these colors to shade the neutral parts of our UI (eg. text, backgrounds, panels, form controls)
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 textComponents
Badge
Box
Button
Card
List
- List Item #1
- List Item #2
- List Item #3