Components
The reusable building blocks and their conventions — cards, links, buttons, colored panels, and meta labels. Every example below is the real markup, not a mockup.
Cards & panels
The base surface for everything: rounded-xl +
shadow-md +
bg-zmoki-surface. Compose them into a bento grid with
grid + gap-4.
Card
Single panel of content on the page background.
Wide card
Spans two columns — the bento pattern is just cards of different
col-span widths in one grid.
<div class="rounded-xl bg-zmoki-surface p-6 shadow-md">…</div>Links
Links carry a 4px dotted bottom border and a color that signals their destination. In prose,
the data-* attributes are added automatically by the rehype
pipeline.
- Internal link azure · default
- External link flame · [data-external]
- Resource link jade · [data-resource]
- Anchor link ink · [data-anchor] · dashed 2px
Buttons
The single action button: jade fill, white mono uppercase label, subtle hover fade. Used for form submits (BrevoForm) and the code-block copy button.
class="rounded-sm bg-zmoki-jade-500 px-4 py-2 font-mono font-medium uppercase tracking-normal text-white hover:bg-zmoki-jade-500/80"Colored sidebar panels
The left-column sidebars. Each role owns a background color; text is
slate-50, headings are
text-3xl font-medium, and inner links keep the dotted
border in currentColor.
Meta labels
Mono, uppercase, tracking-normal — used for dates, Previous
/ Next nav, section eyebrows, and the footer. Usually dimmed with
opacity-60–70.
Published on 20 Jun 2026
Previous
Section eyebrow
View →
Conventions
- rounded-xl + shadow-md + bg-zmoki-surface — every card and panel
- border-b-4 border-dotted border-current — links (anchors use dashed b-2)
- bg-zmoki-jade-500 … uppercase text-white — action buttons
- font-mono uppercase tracking-normal — all meta labels