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.

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

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

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


Large


Extra Large


Callout

Callout - Canyon

All good things are wild & free.

Callout - Gray (accent)

All good things are wild & free.

Callout - Gray (medium)

All good things are wild & free.

Callout - Loam

All good things are wild & free.

Callout - Mud

All good things are wild & free.

Callout - Sky

All good things are wild & free.

Callout - Sunflower

All good things are wild & free.
graphic I made of the colorado flag's C
Made with curiosity in Colorado