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.

Tagline

Three making-verbs — Write. Build. Play. English is the canonical signature; it greets each reader in their own language, and set in Buena Mono it doubles as a multiscript specimen.

English: Write. Build. Play.
Español: Escribe. Construye. Juega.
Português: Escreva. Construa. Jogue.
Français: Écris. Construis. Joue.
Deutsch: Schreib. Bau. Spiel.
Italiano: Scrivi. Costruisci. Gioca.
日本語: 書く。作る。遊ぶ。
中文: 书写。构建。玩耍。

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.

Design Engineering

The role, the no-handoff workflow, and the principles behind everything we ship.

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 two upstreams: Geist (73/73 matched) and shadcn/ui (64/64), plus 24 buena originals in neither. 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

buena originals: app-download-card, chip, editorial-card, event-card, feature-card, form, hero-card, image, link, media-card, marquee, metric-card, navbar, newsletter, number-ticker, rating, stat-card, stepper, statusline, tag, terminal, text-gradient, timeline, 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