color swatches
| Color | Hex code |
|---|---|
| Cloud | #f9f5f3 |
| Oat | #e5d9d4 |
| Chai | #c8b8b2 |
| Tea | #382a26 |
| Puff | #f09292 |
| Beam | #ec937c |
| Starlight | #edd495 |
| Matcha | #82b78b |
| Comfy | #89c4bf |
| Joycon | #8b8fc3 |
fonts
Artifex
Used for most body text. Emphasized text is italicized & uses the comfy color. All other text uses the tea color.
argent pixel
used sparingly, mostly for page headers & blog post titles. only lowercase.
DEPARTURE MONO
used for code, most headers, some navigation links, and extra flavor. always either lowercase or UPPERCASE. has to be sized down.
misc notes
I would like to make & document some more thorough rules to follow here, but this is the best I’ve got for now. So here are some extra bits and pieces that I want to make a note of:
- I use a
6pxborder radius for everything - Headers and nav links are lowercase; body copy is sentence-case
- Exception: Old blog posts & the changelog are mostly lowercase
- Links are underlined!!!
- I don’t really like to put Argent Pixel & Departure Mono too close to each other if I can avoid it
- No periods in bullet-pointed items unless they all have periods (other punctuation for emphasis is okay)
- I wish I could explain my stance on when to use ampersands but it’s kinda just a vibe
header rules
h1uses Argent Pixel; everything else uses Departure Monoh2gets thebackground-color: var(--oat);treatment- Headers are always lowercase
things to fix
- I’m not super happy with how
h3and below look - Code needs a more readable font & actual syntax highlighting
- I do not have a good system for font sizes at all
- I want to actually write down rules for which colors are used for what (some of them aren’t even used for anything at all right now!)