Color Palette
[Note: hover each color to see its name.]
Primary
Secondary
Neutral
Utility
Light
Dark
Light
Dark
Light
Dark
Light
Dark
Note: This palette matrix is an example of how not to do tabular data. Instead of a table, it is just nested divs. What is wrong with this method? Assistive technology (AT) can’t do anything with this mess of divs. A table could have column and row headings that AT could use.
Why did I do it this way, then? Because I was lazy and given that this is just color swatches, there is nothing that AT could do with it if it were a table.
So do as I say and not as I do.
Fonts
Headings use the Oswald font. This is a variable-weight font with weights of 200–700.
Body text uses the Lora font. This is a variable-weight font with weights of 400–700. I chose it mostly for the beautiful italics. Too many fonts have italics that seem like an afterthought.
Tables use the Inter font. This is a variable font with weights of 100–900 and variable slants. It supports OpenType features such as tabular numbers, making it a good choice for tables.
Code blocks use the Fira Code VF font. This is a monospaced, variable-weight font with weights of 300–700. It supports many programming ligatures, such as !=
displaying as ≠
.
Diagrams use the F25 Executive font. This is kind of a novelty font meant to look like a typewriter.
Font speciman sheets
Sample text to test font fallback
My fav hieroglyphs are 𓁅 𓅔𓀬 (I call that last one ⠚⠉⠧⠙), and my favorite cuneiforms 𒀼 𒄭 and 𒋲, and although I can’t decide whether I prefer the Chinese symbol for winter (冬), or a snowflake (❄️)… I can always cheat and pick a Mahjong tile that has them both: 🀩.
“The English word turtle translates to Schildkröte in German, żółw in Polish, черепаха in Russian, צָב in Hebrew, and ആമ in Malayalam. 😮”
Photo credit: front door of Jim Brown’s house, Riverside by Robert Bottomley