Style Guide

I kinda wanted to start from Tom Sachs’s COLOR Hex Codes but I like my colors a bit more exciting than his. Mostly because I work more in a digital medium where bright colors are more common.

Then I started pulling together other aspects of my site that I wanted to document. I’ve been working on this site for a while now and I’ve got a lot of customizations that I’ve made. I wanted to document them so that I could remember them and so that I could share them with others as a reference when I build new sites.

Colors

This is the default palette. Often, I’ll use these colors as a starting point and then adjust them to fit the requirements of the interface.

Color Reference Hex Image
Red ANSI Safety Red #bd2024 red
Orange ANSI safety orange #FF7900 orange
Yellow Kodak yellow (Golden Acrylic Diarylide yellow, #1147-6, series 6) #FFCC00 yellow
Green ISO 3864 safety green #237F52 green
Dark Green Olive Drab #7 #3C341F green
Blue Science blue #0969DA blue
Dark Blue police barricade blue #004B87 blue
Purple HTML standard mediumpurple #9370d8 purple
Josh Purple Brand purple #903465 purple
Black Benjamin Moore Impervex latex high gloss metal and wood enamel, black 309 80 #151515 black
White Benjamin Moore’s Decorator’s White #EBEDEA white

Typography

Fonts were originally explained here, but to repeat:

Buttons/Forms

Whenever possible, use the basic browser implementation of buttons, inputs, links, details, etc. This is because the browser has already done a lot of work to make these elements accessible and usable. If you need to customize these elements, do so with caution and with a lot of testing and justification.

Reference

Keyboard Shortcuts

Key Action
o Source
e Edit
i Insight
r Random
s or / Search
www.joshbeckman.org/style-guide/