I'm a big fan of design systems and wanted to take a small shot at something similar on a very small scale and tbh I know this is not a design system, it's a style guide w some components. Every font, color and design pattern has an intention and purpose
"Nothing without intention. Do nothing without intention". - Goddess Lula Belle
hex: #323667
class name: color400
hex: #404585
class name: color800
hex: #4F55A3
class name: color200
hex: #F4F4F5
class name: color100
hex: #333547
class name: grey800
hex: #70728F
class name: grey200
hex: #E2E3E9
class name: grey100
hex: #FCFCFC
class name: white100
Font-family: DM Serif Display - Font-size: 64px - Font-weight: Regular - Line-height: 88px - Color: #323667 - color400
Font-family: DM Serif Display - Font-size: 48px - Font-weight: Regular Line-height: 66px - Color: #404585 - color800
Font-family: DM Serif Display - Font-size: 36px - Font-weight: Regular - Line-height: 48px - Color: #4F55A3 - color200
Font-family: DM Serif Display - Font-size: 27px - Font-weight: Regular - Line-height: 37px - Color: #5D64C1 - color100
Subtitle text with description elements
Font-family: Lato - Font-size: 16px - Font-weight: Regular - Line-height: 20px - Color: #70728F - grey200
"A nice lil block quote from user or my face quote". - Silvia F.
Font-family: Lato - Font-size: 1.8rem - Font-weight: Regular - Line-height: 20px - BG-Color: #F4F4F6 - grey50 - Border-Color: #E2E3E9 - grey100
Regular paragraph text — "The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the alphabet. It is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.
Font-family: Lato - Font-size: 16px - Font-weight: Regular Line-height: 24px - Color: #333547 - grey800
Bolded text that is like important standout information of a case studyFont-family: Lato - Font-size: 16px - Font-weight: Bold 700 - Line-height: 125% - Color: #404585 - color800
Link Text — The quick brown fox jumps over the lazy dogFont-family: Lato - Font-size: 16px - Font-weight: Regular Underline Line-height: 24px - Color: #5D64C1 - color100
Product Design, User Research, User Testing / Fall 2018
Helping international music fans learn a new language with a built in lyric translating feature
View Case StudyProduct Design, User Research, User Testing / Fall 2018
Helping international music fans learn a new language with a built in lyric translating feature
View Case Study