UI Library
Component Library
Every primitive,
fully typed.
Customize tokens in globals.css and every component updates automatically. No component edits needed.
02 · Primitives
Badge
VARIANTS
InkFeaturedParchmentGhost
IN CONTEXT
EssayFeaturedJournalDraftPhilosophyNew
<Badge variant="red">Featured</Badge>
03 · Primitives
Text
Body
Typography-first layout with clear hierarchy. Inter at 300 weight, 14px, line-height 1.75.
bodyCaption
Published March 2026 · 3 min read · Philosophy
captionLabel
Section Label
labelCode
src/app/globals.css
code<Text variant="body">Your paragraph copy here.</Text>
04 · Primitives
Card
Essay
The fewer words,
the truer the work.
A study in editorial restraint and the discipline of removing what is not essential.
Statistics
4,812
Monthly readers
Up 12% from last monthConfig
Cards compose with CardHeader, CardBody, and CardFooter. Border and background inherit from design tokens.
<Card>
<CardHeader><Text variant="label">Essay</Text></CardHeader>
<CardBody>Content here.</CardBody>
<CardFooter><Badge variant="red">Featured</Badge></CardFooter>
</Card>
05 · Motifs
Seal
VARIANTS
neutral
red
no label
large
<Seal kanji="心" label="heart" size={80} variant="red" />
06 · Editorial
Pullquote
“What is there is for you. What is not is the design.”
Kenya Hara, Muji creative director
“The fewer words, the truer the work.”
<Pullquote
quote="What is there is for you. What is not is the design."
attribution="Kenya Hara, Muji creative director"
/>
07 · Theme System
Color Tokens
paper
#F3EFE7
paper-2
#EDE8DC
paper-3
#E5DFD0
ink
#1A1918
ink-2
#4A4540
ink-3
#8A847A
red
#BE3030
border
#CEC8BA
border-soft
#E0DAD0
All tokens live in src/app/globals.css under @theme. Change any value and every component updates automatically.