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 |
|
Orange | ANSI safety orange | #FF7900 |
|
Yellow | Kodak yellow (Golden Acrylic Diarylide yellow, #1147-6, series 6) | #FFCC00 |
|
Green | ISO 3864 safety green | #237F52 |
|
Dark Green | Olive Drab #7 | #3C341F |
|
Blue | Science blue | #0969DA |
|
Dark Blue | police barricade blue | #004B87 |
|
Purple | HTML standard mediumpurple | #9370d8 |
|
Josh Purple | Brand purple | #903465 |
|
Black | Benjamin Moore Impervex latex high gloss metal and wood enamel, black 309 80 | #151515 |
|
White | Benjamin Moore’s Decorator’s White | #EBEDEA |
Typography
Fonts were originally explained here, but to repeat:
- IBM Plex Sans for body text
Berkeley Mono
for monospace/source-code text
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.