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.
This is style guidance (colors, typography, buttons, forms, etc.). For a demonstration of these styles in action, see the test post/page.
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 Monofor 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.