Design System

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

The system lives in Figma at my 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.

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

Canyon

canyonVibe

#ED6E41

canyon50

#FFF7F5

canyon100

#F1E0DB

canyon200

#F5B7A3

canyon300

#E8977D

canyon400

#D67A5C

canyon500

#C35F3E

canyon600

#8F513D

canyon700

#664033

canyon800

#503830

canyon900

#2C2321

Gray

gray50

#FFFAF9

gray100

#FBF5F2

gray200

#F4EFED

gray300

#ECE2DF

gray400

#BFB4B0

gray500

#948681

gray600

#807370

gray700

#645C5A

gray800

#363231

gray900

#292422

gray950

#131212

Mud

mud50

#FFF6F1

mud100

#F4CAB2

mud200

#BA947E

mud500

#83543A

mud600

#663C25

Sunflower

sunflower50

#FFFDF5

sunflower100

#E8DFC0

sunflower200

#F8E08F

sunflower500

#FFC600

sunflower600

#C69A02

sunflower700

#8a7013

Loam

loam50

#FDFFF5

loam100

#C0C7A6

loam200

#737E46

loam500

#4C581C

loam600

#3B470B

Sky

sky50

#F9FBFF

sky100

#C7D5F0

sky200

#698DD8

sky500

#346AD9

sky600

#1850C3

sky700

#1041A4

Buttons

Primary

Medium

Large

Extra Large

Secondary

Medium