Components
Book
A stylized book cover for docs, guides, and long-form content.
Covers
the mrkdwn field guide Buena Labs
buena mono type specimen Buena Labs
notes on encrypted publishing Buena Labs
<div class="flex aspect-[3/4] w-32 flex-col justify-between rounded-r-lg border-l-4 border-accent bg-bg-elevated p-4">
<span class="font-mono text-sm text-text-primary">the mrkdwn field guide</span>
<span class="font-mono text-[10px] uppercase tracking-widest text-text-tertiary">Buena Labs</span>
</div>Variants
the mrkdwn field guide Buena Labs
simple the mrkdwn field guide Buena Labs
stripe notes on encrypted publishing Buena Labs
textured variant="simple" / "stripe";
textured adds a surface pattern — best kept for hero sections, not repeated UI.
Width, custom icon & illustration
buena mono Labs
width 150 buena mono Labs
width 200 custom icon
custom icon custom cover
custom illustration width={200} sets the pixel width;
width={{ sm: 150, md: 300 }} makes it responsive
across breakpoints. Custom icon and custom illustration
accept JSX for the cover mark or full artwork.
Markdown for agents: /design/book.md · spec: /design.md