A style guide for the tokens and components in tokens.css and components.css, extracted from remexre.com.
Normally, text should not live outside of cards; however, it's here to make it clear what's what.
This is a .card — the generalized version of remexre.com's article panel. It can contain a nested .box:
This is a .box, a raised nested panel.
This is a
blockquote, styled the same as.box.
Host Grotesk — The quick brown fox jumps over the lazy dog.
Host Grotesk italic — The quick brown fox jumps over the lazy dog.
Berkeley Mono — the quick brown fox jumps over the lazy dog 0123456789
Noto Sans Math — ← ↑ → ∑ ∫ √
Nav icon buttons (see also the Nav section) — nav is page chrome, so it sits beside cards rather than inside one:
| Name | Value |
|---|---|
| --color-text | #09090b |
| --color-surface | #f4f4f5 |
| Name | Value |
| --color-text | #09090b |
| --color-surface | #f4f4f5 |
| ---------- | Example Section |
| 2026-08-10 | An example table-of-contents row with a very long title that is long enough to get truncated with an ellipsis instead of wrapping onto a second line |
Inline code: let x = 1;
Keyboard key: Ctrl + C
fn main() {
println!("hello, world");
}.alert shares .card's sizing and background, so it stands on its own rather than living inside another card.