← zmoki.xyz brand

Typography

Two type systems: a sans/mono pairing for the interface, and a tuned .prose layer for written content. Every specimen below renders with its real utility classes.

Part 1 · Design typography

Interface · font-sans

Noto Sans

Headings, body, buttons. Weights in use: 400, 500, 600.

AaBbCc 0123 — æ ß ç

Meta · font-mono

Noto Sans Mono

Eyebrows, dates, Previous/Next, buttons — always uppercase, tracked normal.

AaBbCc 0123 — æ ß ç

Type scale

Hero

Post titles (PostLayout h1)

A digital garden

text-4xl font-semibold xl:text-6xl

Lede

Post descriptions (PostLayout)

Ideas, art, and research, kept in the open.

text-2xl xl:text-3xl

Section heading

Sidebar panels & author bio (h2)

Resources

text-3xl font-medium md:text-4xl

Card title

PostCard (h3)

On keeping a garden

text-2xl font-semibold leading-normal xl:text-3xl

Body

Global body (BaseLayout)

The base reading size — Noto Sans, set tight.

text-lg xl:text-xl

Mono labels

Eyebrow / meta

Dates, eyebrows (PostCard, PostLayout)

20 Jun 2026

font-mono text-xs uppercase tracking-normal

Previous / Next

Post navigation (PostLayout)

Previous

font-mono text-sm uppercase tracking-normal

Button text

Copy / action buttons

Copy

font-mono text-xs font-medium uppercase tracking-normal

Tracking

  • tracking-tight

    Default for sans headings & body

    Global body (BaseLayout)

  • tracking-tighter

    Colored & dark panels, logo scrim

    Author / Resources / Contact sidebars

  • tracking-normal

    All mono labels — eyebrows, meta, buttons

    Dates, Previous/Next, copy button

Leading

  • leading-tight

    Body copy & headings

    Global body (BaseLayout)

  • leading-normal

    Multi-line titles

    PostCard, prev/next titles

Part 2 · Prose typography

.prose configuration

MDX content renders inside prose prose-xl (stepping up to 2xl:prose-2xl). Overrides live in tailwind.config.mjs via typography().

In-prose links

Link color is driven by data attributes added by the rehypeExternalLinks plugin. Each renders with its real token.

Base link

a

zmoki-azure-500 · dotted 4px

External

[data-external]

zmoki-flame-500 · dotted 4px

Resource

[data-resource]

zmoki-jade-500 · dotted 4px

Anchor

[data-anchor]

zmoki-ink · dashed 2px

Live specimen

The shape of a sentence

Prose body is set in Noto Sans at prose-xl, inheriting ink-colored bold and headings. This is a base internal link, an external link, a resource link, and an anchor link.

Lists

  • Unordered items use the prose default marker.
  • Inline code picks up the mono face.
  1. Ordered items count up.
  2. Then carry on.

A blockquote sets quoted material apart with a left rule and italic body.

Definition list

Digital garden
A living, always-tended collection of notes and work in progress.
Now page
A snapshot of current focus, updated as things change.

Code block

Fenced blocks are highlighted with Shiki (catppuccin-latte) and get a copy button at build time. Hand-written here, they fall back to prose code styling:

const garden = ["posts", "resources", "now"];
garden.forEach((bed) => tend(bed));