Design System

This is the design system for my website, based on what I discovered during the Approachable Design workshop.

My current system lives in Figma in this Figma file

My legacy design lives in Figma at this Approachable Design Workshop Design Kit.

Voice and Tone

  • Bold but not flashy.
  • Rugged but not rough.
  • Curious but not dogged.

Typography

Headings


4xl

All good things are wild & free.

3xl

All good things are wild & free.

2xl

All good things are wild & free.

xl

All good things are wild & free.

lg
All good things are wild & free.

Body Text


You can create anything that makes you happy. Get tough with it, get strong. I started painting as a hobby when I was little. I didn't know I had any talent. I believe talent is just a pursued interest. Anybody can do what I do. We have no limits to our world. We're only limited by our imagination. Every day I learn.

Let's do that again. It's a super day, so why not make a beautiful sky? Now, we're going to fluff this cloud. It is a lot of fun.

- Generated at A Happy Lorem Ipsum: Bob Ross quotes generator

Quote


It is a lot of fun. Didn't you know you had that much power? You can move mountains. You can do anything. You don't have to be crazy to do this but it does help. I like to beat the brush. Zip. That easy.

Colors

Curious Yellow


curiousYellow50
#F9F8F2
curiousYellow100
#F9F6E5
curiousYellow150
#F9F4D4
curiousYellow200
#F9F1BB
curiousYellow250
#F9E770
curiousYellow300
#F9E24B
curiousYellow400
#F9DD25
curiousYellow500
#F9D802
curiousYellow600
#E0C302
curiousYellow650
#C7AD02
curiousYellow700
#AD9601
curiousYellow750
#948001
curiousYellow800
#615401
curiousYellow850
#473E01
curiousYellow900
#141200

Curious Grayscale


curiousGrayscale50
#F9F8F2
curiousGrayscale100
#E0DFD9
curiousGrayscale200
#C7C6C1
curiousGrayscale300
#ADADA8
curiousGrayscale400
#94938F
curiousGrayscale500
#7A7A76
curiousGrayscale600
#61615E
curiousGrayscale700
#474745
curiousGrayscale800
#2E2E2C
curiousGrayscale900
#141414

Buttons

Primary

Secondary

Callouts

info

This is an info callout.

caution

This is a caution callout.

tip

This is a tip callout.

success

This is a success callout.