Font stack

Default Lapaktoto UI:

@theme inline {
  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace;
  --font-heading: var(--font-sans);
}

Override dengan font lain via next/font:

app/layout.tsx

import { Inter, JetBrains_Mono } from "next/font/google"

const inter = Inter({ subsets: ["latin"], variable: "--font-sans" })
const jetbrains = JetBrains_Mono({ subsets: ["latin"], variable: "--font-mono" })

export default function Layout({ children }) {
  return (
    <html className={`${inter.variable} ${jetbrains.variable}`}>
      <body>{children}</body>
    </html>
  )
}

Hirarki heading

H1 — 36px / 600

The quick brown fox.

H2 — 28px / 600

The quick brown fox.

H3 — 20px / 600

The quick brown fox.

Body — 15px / 400

The quick brown fox jumps over the lazy dog. Lapaktoto UI dirancang agar default reading experience nyaman di density tinggi.

Mono — 13px

const greeting = "Halo, Indonesia"

Plugin prose

Untuk konten Markdown panjang, install plugin official:

bunx lapaktoto-ui add prose
# atau import langsung:
import "@/lib/prose.css"

Plugin prose ngasih default heading anchor, table style, callout box, dan footnote — semua pakai token theming yang sama.