antoaenono Anton... I No Know

Style

An index of the design elements used in this site.

This page shows every element involved in the design of the site.
It is generated when the site is built so that it's always up to date.

Font

Atkinson Hyperlegible Next, from the Braille Institute.

Choosing a font is an impossible task? I don't know how you designers do it.
I tried a handful. Each time once I saw it on the site I hated it.

Eventually I settled on this one because I didn't hate it.
Actually, it feels quite nice.

Il1 O0 rn m 5S 8B

Extra light 200 Light 300 Regular 400 Medium 500 Semibold 600 Bold 700 Extra bold 800

Italics have their own drawing rather than a slanted roman.

Code is set in Atkinson Hyperlegible Mono: Il1 O0 rn m.
It has no box-drawing characters, so those come from JetBrains Mono, scaled to the same grid: ┌─┬─┐.

Family Weights File
Atkinson Hyperlegible Next 200-800 AtkinsonHyperlegibleNext-Roman.woff2
Atkinson Hyperlegible Next, italic 200-800 AtkinsonHyperlegibleNext-Italic.woff2
Atkinson Hyperlegible Mono 200-800 AtkinsonHyperlegibleMono-Roman.woff2
Atkinson Hyperlegible Mono   JetBrainsMono-BoxDrawing.woff2, only U+2500-257F

Headings

The page title is the only first-level heading.
Every heading links to its own section, and on long outlined pages, like the dotfiles, headings also get an underline that fades in and ends in a leaf.

Third level

Large headings stand out by size.

Fourth level

Smaller headings get more weight to keep their place.

Fifth level

Below this level, headings on most pages become list items.

  • Sixth level

    The last level

Text

Looks like Written as
Bold *Bold*
Italic /Italic/
Underlined _Underlined_
Struck through +Struck through+
code ~code~
verbatim =verbatim=
C-x C-s !!C-x C-s!!

Underlines are drawn as a hypha, the thread a fungus grows through soil, so they aren't mistaken for links.
Key caps are for keys you press.

Footnotes and references

Notes

A footnote opens in place, beside the text it belongs to. 1
The same notes are also collected at the bottom of the page.

Citations

A citation backed by my reference notes becomes a key: press it once for the note, again for its quotes [1].

Without a quote, a citation stays a link to its entry in the bibliography [1].
The bibliography is added to the end of any page that cites something.

Glossary

Terms from my glossary, such as Artificial Intelligence (AI), link to their definition.

Lists

Unordered lists

  • A plain list
    • can nest
    • as deep as needed
  • and come back out

Numbered lists

  1. Numbered lists
  2. count up

Quotes

A quotation sits against a rule on the left, in italics.

Code

Emacs Lisp(defun site--greet (name)
  "Say hello to NAME."
  (message "Hello, %s" name))
CSS.underline {
    padding-bottom: 0.42em;
}
ExampleAn example block keeps its text exactly as written.

Math

Inline math sits in the line, like eiπ+1=0e^{i\pi} + 1 = 0.
Display math gets its own line:

∫01x2 dx=13 \int_0^1 x^2 \, dx = \frac{1}{3}

Tables

Kingdom Example Spreads by
Plants Bamboo Rhizomes
Fungi Mushroom Hyphae

Colors

The palette is a few primitives, mostly derived from the paper and ink colors.

--palette-paper
oklch(var(--paper-lightness) var(--paper-chroma) var(--paper-hue))
--palette-paper-translucent
oklch(var(--paper-lightness) var(--paper-chroma) var(--paper-hue) / 94%)
--palette-paper-surface
oklch(calc(var(--paper-lightness) - 2.5%) var(--paper-chroma) var(--paper-hue))
--palette-paper-surface-alt
oklch(calc(var(--paper-lightness) - 5.5%) var(--paper-chroma) var(--paper-hue))
--palette-paper-code-surface
#fff
--palette-key-cap-top
oklch(96% 0.02 92)
--palette-key-cap
oklch(90% 0.03 88)
--palette-key-side
oklch(72% 0.035 80)
--palette-key-skirt
oklch(60% 0.035 75)
--palette-key-legend
oklch(30% 0.01 80)
--palette-paper-border
oklch(calc(var(--paper-lightness) - 14%) calc(var(--paper-chroma) - 0.01) var(--paper-hue))
--palette-paper-border-accent
oklch(calc(var(--paper-lightness) - 20%) calc(var(--paper-chroma) - 0.005) var(--paper-hue))
--palette-ink
oklch(var(--ink-lightness) var(--ink-chroma) var(--ink-hue))
--palette-ink-secondary
oklch(calc(var(--ink-lightness) + 7%) calc(var(--ink-chroma) - 0.005) var(--ink-hue))
--palette-ink-muted
oklch(calc(var(--ink-lightness) + 12%) calc(var(--ink-chroma) - 0.008) var(--ink-hue))
--palette-ink-tertiary
oklch(calc(var(--ink-lightness) + 17%) calc(var(--ink-chroma) - 0.011) var(--ink-hue))
--palette-forest
oklch(calc(var(--ink-lightness) + 15%) calc(var(--ink-chroma) + 0.06) calc(var(--ink-hue) - 5))
--palette-forest-hover
oklch(calc(var(--ink-lightness) + 18.5%) calc(var(--ink-chroma) + 0.075) calc(var(--ink-hue) - 5))
--palette-autumn
oklch(43% 0.095 55)

Components use these semantic names, each pointing at a primitive.

--color-bg
var(--palette-paper)
--color-bg-translucent
var(--palette-paper-translucent)
--color-text
var(--palette-ink)
--color-secondary
var(--palette-ink-secondary)
--color-tertiary
var(--palette-ink-tertiary)
--color-muted
var(--palette-ink-muted)
--color-border
var(--palette-paper-border)
--color-border-accent
var(--palette-paper-border-accent)
--color-surface
var(--palette-paper-surface)
--color-surface-alt
var(--palette-paper-surface-alt)
--color-code-surface
var(--palette-paper-code-surface)
--color-key-cap-top
var(--palette-key-cap-top)
--color-key-cap
var(--palette-key-cap)
--color-key-side
var(--palette-key-side)
--color-key-skirt
var(--palette-key-skirt)
--color-key-legend
var(--palette-key-legend)
--color-control-background
var(--color-surface)
--color-link
var(--palette-forest)
--color-link-hover
var(--palette-forest-hover)
--color-link-visited
var(--palette-autumn)
--color-backdrop
rgb(0 0 0 / 35%)

References

[1]
Y. Leviathan, M. Kalman, and Y. Matias, “Prompt repetition improves non-reasoning llms,” Arxiv preprint arxiv:2512.14982, 2025, doi: 10.48550/arXiv.2512.14982.

Acronyms

AI Artificial Intelligence 1

Notes
1

Like this one. Click or tap anywhere in it to close it.

Site settings

Reading progress