Design

Buena Labs Design System

The design language for building where writing and code meet. It provides the colors, typography, materials, and components behind Buena Labs products, and covers two brands: buena, the studio mark, and mrkdwn, the markdown editor.

Foundations

Colors

Near-monochrome with a single blue accent. Full dark and light themes; dark is the default.

Typography

Everything set in Buena Mono — variable weight 100–800, slant 0 to −10°.

Materials

Fills, strokes, and the radius scale. Depth without shadows.

Sound

Five recorded tokens mapped to semantic events: tap, click, open, close, error.

Haptics

The same events as touch — native generators per platform, vibration patterns on the web.

Brands

buena

The studio brand: ring symbol + lowercase wordmark. In prose, always “Buena Labs” — two words, capitalized.

mrkdwn

The markdown editor. Always lowercase, set in Buena Mono — even at the start of a sentence.

Components

114 building blocks, documented with live examples. Each page is also available as Markdown by appending .md.

Parity

The component set tracks three upstreams: Geist (73/73 matched), shadcn/ui (64/64), and etermax (60/60), plus 11 buena originals in none of them. Machine-readable checklist: /design/parity.yaml; per-variant depth audit: /design/parity-elements.yaml.

Geist checklist (73/73)

avatar geist/avatar
badge geist/badge
banner geist/banner
book geist/book
breadcrumbs geist/breadcrumbs
browser geist/browser
button geist/button
calendar geist/calendar
card geist/card
checkbox geist/checkbox
choicebox geist/choicebox
clearable-input geist/clearable-input
code geist/code
code-block geist/code-block
collapse geist/collapse
combobox geist/combobox
command-menu geist/command-menu
context-card geist/context-card
context-menu geist/context-menu
copy-button geist/copy-button
description geist/description
destructive-action-modal geist/destructive-action-modal
dots-menu geist/dots-menu
drawer geist/drawer
empty-state geist/empty-state
entity geist/entity
error geist/error
error-card geist/error-card
feedback geist/feedback
fieldset geist/fieldset
file-tree geist/file-tree
gauge geist/gauge
grid geist/grid
input geist/input
json-view geist/json-view
keyboard-input geist/keyboard-input
label geist/label
load-more-button geist/load-more-button
loading-dots geist/loading-dots
menu geist/menu
middletruncate geist/middletruncate
modal geist/modal
multi-select geist/multi-select
note geist/note
pagination geist/pagination
phone geist/phone
pill geist/pill
progress geist/progress
project-banner geist/project-banner
radio geist/radio
relative-time-card geist/relative-time-card
scroller geist/scroller
search-input geist/search-input
select geist/select
separator geist/separator
sheet geist/sheet
show-more geist/show-more
skeleton geist/skeleton
slider geist/slider
snippet geist/snippet
spinner geist/spinner
split-button geist/split-button
status-dot geist/status-dot
switch geist/switch
table geist/table
tabs geist/tabs
text-with-copy-button geist/text-with-copy-button
textarea geist/textarea
theme-switcher geist/theme-switcher
toast geist/toast
toggle geist/toggle
tooltip geist/tooltip
video geist/video

shadcn checklist (64/64)

collapse shadcn/accordion
note shadcn/alert
destructive-action-modal shadcn/alert-dialog
aspect-ratio shadcn/aspect-ratio
chat shadcn/attachment
avatar shadcn/avatar
badge shadcn/badge
breadcrumbs shadcn/breadcrumb
chat shadcn/bubble
button shadcn/button
button-group shadcn/button-group
calendar shadcn/calendar
card shadcn/card
carousel shadcn/carousel
chart shadcn/chart
checkbox shadcn/checkbox
show-more shadcn/collapsible
combobox shadcn/combobox
command-menu shadcn/command
context-menu shadcn/context-menu
data-table shadcn/data-table
date-picker shadcn/date-picker
modal shadcn/dialog
direction shadcn/direction
drawer shadcn/drawer
menu shadcn/dropdown-menu
empty-state shadcn/empty
field shadcn/field
context-card shadcn/hover-card
input shadcn/input
input-group shadcn/input-group
input-otp shadcn/input-otp
entity shadcn/item
keyboard-input shadcn/kbd
label shadcn/label
chat shadcn/marker
menubar shadcn/menubar
chat shadcn/message
chat shadcn/message-scroller
native-select shadcn/native-select
navigation-menu shadcn/navigation-menu
pagination shadcn/pagination
popover shadcn/popover
progress shadcn/progress
radio shadcn/radio-group
resizable shadcn/resizable
scroller shadcn/scroll-area
select shadcn/select
separator shadcn/separator
sheet shadcn/sheet
sidebar shadcn/sidebar
skeleton shadcn/skeleton
slider shadcn/slider
toast shadcn/sonner
spinner shadcn/spinner
switch shadcn/switch
table shadcn/table
tabs shadcn/tabs
textarea shadcn/textarea
toast shadcn/toast
toggle shadcn/toggle
toggle shadcn/toggle-group
tooltip shadcn/tooltip
typography shadcn/typography

etermax checklist (60/60)

text-gradient etermax/gradients
colors etermax/color-system
card etermax/cards
navbar etermax/navbar
sidebar etermax/sidebar-comp
fieldset etermax/fieldset
separator etermax/separator
scroller etermax/scroll-area
table etermax/table
badge etermax/badge
chip etermax/chip
avatar etermax/avatar
metric-card etermax/stat-card
code-block etermax/code-block
image etermax/image
keyboard-input etermax/kbd
timeline etermax/timeline
file-tree etermax/tree
file-tree etermax/dir-tree
context-card etermax/hover-card
chart etermax/chart
gauge etermax/circular-progress
number-ticker etermax/number-ticker
rating etermax/rating
input etermax/input
select etermax/select-controls
slider etermax/slider
input-otp etermax/otp
toggle etermax/toggle-group
stepper etermax/stepper
note etermax/alert
toast etermax/toast
progress etermax/progress-skeleton
spinner etermax/spinner-comp
empty-state etermax/empty-state
banner etermax/banner
status-dot etermax/status
tabs etermax/tabs
breadcrumbs etermax/breadcrumb
pagination etermax/pagination
menubar etermax/menubar
link etermax/link
modal etermax/dialog
sheet etermax/sheet
drawer etermax/drawer
menu etermax/dropdown
popover etermax/popover
tooltip etermax/tooltip
command-menu etermax/command
collapse etermax/accordion
show-more etermax/collapsible
marquee etermax/marquee
carousel etermax/carousel
button etermax/shd-buttons
toggle etermax/toggle
split-button etermax/split-button
app-download-card etermax/app-store
event-card etermax/event-cards
data-table etermax/analytics-table
description etermax/app-info

Domain-specific (not counted): tool-card, agent-card, skill-card, prompt-card, adapter-card, monitor, privacy, ratings-reviews.

buena originals: editorial-card, feature-card, form, hero-card, media-card, newsletter, stat-card, statusline, tag, terminal, type-tester

Markdown for agents

Every design page is available as Markdown: append .md to the URL (for example /design/colors.md). Machine-readable specifications: /design.md for the brand and site system, and buena-mono.buenalabs.io/design.md for the typeface.

Markdown for agents: /design/introduction.md · spec: /design.md