| Token | Light | Dark |
|---|---|---|
| background | #F6EFE1 |
#0A0A0A |
| foreground | #1E1512 |
#F2E8DE |
| primary | #380C12 |
#B0293A |
| secondary | #6B5B52 |
#C9BAAE |
| tertiary | #EAE0D8 |
#241813 |
| success | #146860 |
#5FCBB8 |
| info | #380C12 |
#B0293A |
| warning | #A8721C |
#F0BC5C |
| danger | #A8283A |
#D25668 |
Example Vignette
Typography
H3
H4
Paragraph text should use the brand base font. Inline code should use the brand monospace: const x = 42.
text block should use the brand monospace.
abcdefghijklmnopqrstuvwxyz 0123456789- Headings: Valley Sans
- Body: Alegreya
- Code: CommitMono
Theme colors (semantic)
Read straight out of _brand.yml, the same file that styles this site.
Palette (named colors)
These are the single-value entries under color.palette.
| Name | Value |
|---|---|
| cream | #F6EFE1 |
| blackish | #0A0A0A |
| espresso | #1E1512 |
| shell | #F2E8DE |
| oxblood | #380C12 |
| oxblood-light | #B0293A |
| taupe | #6B5B52 |
| taupe-light | #C9BAAE |
| blush | #EAE0D8 |
| sable | #241813 |
| teal | #146860 |
| teal-light | #5FCBB8 |
| ochre | #A8721C |
| ochre-light | #F0BC5C |
| carmine | #A8283A |
| carmine-light | #D25668 |
| code-bg-light | #F0E6DC |
| code-bg-dark | #1D1512 |
Components
Note
Info callout.
Warning
Warning callout.
Important
Danger callout.
Tip
Tip callout.
Caution
Caution callout.
Blockquote example. This should remain readable in both light and dark modes.
Table
| Item | Example |
|---|---|
| Link | https://www.visruth.com |
| Inline code | printf("hello") |
| Emphasis | italic, bold, and both |