---
title: "Buena Labs Design System"
description: "The colors, typography, and layout behind the buena and mrkdwn brands."
url: https://buenalabs.io/design/introduction
---

# 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. See https://buenalabs.io/design/colors.
- **Typography** — Everything set in Buena Mono — variable weight 100–800, slant 0 to −10°. See https://buenalabs.io/design/typography.
- **Materials** — Fills, strokes, and the radius scale. Depth without shadows. See https://buenalabs.io/design/materials.
- **Sound** — Five recorded tokens mapped to semantic events: tap, click, open, close, error. See https://buenalabs.io/design/sound.
- **Haptics** — The same event vocabulary as touch, mapped per platform. See https://buenalabs.io/design/haptics.

## Brands

- **buena** — The studio brand: ring symbol + lowercase wordmark. In prose, always "Buena Labs" — two words, capitalized. See https://buenalabs.io/design/brands#buena.
- **mrkdwn** — The markdown editor. Always lowercase, set in Buena Mono — even at the start of a sentence. See https://buenalabs.io/design/brands#mrkdwn.

## Components

- [App Download Card](https://buenalabs.io/design/app-download-card.md): Store cards for getting the apps: App Store and Google Play.
- [Aspect Ratio](https://buenalabs.io/design/aspect-ratio.md): Constrains media to a fixed ratio while it scales.
- [Avatar](https://buenalabs.io/design/avatar.md): A visual identifier for a user or team: image with initials fallback.
- [Badge](https://buenalabs.io/design/badge.md): A small label for statuses, counts, and categories.
- [Banner](https://buenalabs.io/design/banner.md): A full-width message pinned to the top of a page or section.
- [Book](https://buenalabs.io/design/book.md): A stylized book cover for docs, guides, and long-form content.
- [Breadcrumbs](https://buenalabs.io/design/breadcrumbs.md): The path to the current page, one link per level.
- [Browser](https://buenalabs.io/design/browser.md): A browser chrome frame for presenting web UI in context.
- [Button](https://buenalabs.io/design/button.md): Triggers an action. One primary action per view.
- [Button Group](https://buenalabs.io/design/button-group.md): Segmented controls: related options fused into one bordered strip.
- [Calendar](https://buenalabs.io/design/calendar.md): Date selection — single days or ranges.
- [Card](https://buenalabs.io/design/card.md): A bordered surface that groups related content and actions.
- [Carousel](https://buenalabs.io/design/carousel.md): A swipeable row of slides with previous/next controls.
- [Chart](https://buenalabs.io/design/chart.md): Recharts wrapped in the shadcn chart container — series colors from theme tokens.
- [Chat](https://buenalabs.io/design/chat.md): Conversation primitives: message scroller, messages, bubbles, attachments, and markers.
- [Checkbox](https://buenalabs.io/design/checkbox.md): A binary choice that can be listed and combined.
- [Chip](https://buenalabs.io/design/chip.md): Rounded interactive tokens for filtering and selection; dismissible when they represent applied state.
- [Choicebox](https://buenalabs.io/design/choicebox.md): Radio or checkbox choices presented as selectable cards.
- [Clearable Input](https://buenalabs.io/design/clearable-input.md): A text input with a one-tap way to clear it.
- [Code](https://buenalabs.io/design/code.md): Inline code, set in Buena Mono like everything else — marked by surface, not typeface.
- [Code Block](https://buenalabs.io/design/code-block.md): Multi-line code with a header and optional filename.
- [Collapse](https://buenalabs.io/design/collapse.md): Expandable sections that show one answer at a time.
- [Combobox](https://buenalabs.io/design/combobox.md): A searchable select for long option lists.
- [Command Menu](https://buenalabs.io/design/command-menu.md): A keyboard-first palette for jumping anywhere and doing anything.
- [Context Card](https://buenalabs.io/design/context-card.md): A card of details revealed on hover, without navigating away.
- [Context Menu](https://buenalabs.io/design/context-menu.md): Actions on right-click, scoped to what was clicked.
- [Copy Button](https://buenalabs.io/design/copy-button.md): Copies a value to the clipboard and confirms it did.
- [Data Table](https://buenalabs.io/design/data-table.md): TanStack Table drives the model; the Table component renders it. Sorting built in.
- [Direction](https://buenalabs.io/design/direction.md): Bidirectional text support: the same components flipped for RTL locales.
- [Date Picker](https://buenalabs.io/design/date-picker.md): A calendar in a popover, bound to an input-style trigger.
- [Description](https://buenalabs.io/design/description.md): Label–value pairs for metadata and detail views.
- [Destructive Action Modal](https://buenalabs.io/design/destructive-action-modal.md): A confirmation gate before irreversible actions.
- [Dots Menu](https://buenalabs.io/design/dots-menu.md): Overflow actions behind an ellipsis trigger.
- [Drawer](https://buenalabs.io/design/drawer.md): A panel that slides in from the edge for secondary flows.
- [Editorial Card](https://buenalabs.io/design/editorial-card.md): A full-width, text-led card for storytelling moments.
- [Empty State](https://buenalabs.io/design/empty-state.md): What a screen says before there is any data: explain, then offer the first action.
- [Entity](https://buenalabs.io/design/entity.md): A row representing a thing — avatar, name, metadata, action.
- [Error](https://buenalabs.io/design/error.md): Inline error messages tied to the field or action that failed.
- [Error Card](https://buenalabs.io/design/error-card.md): A bounded error surface with the cause and a way out.
- [Event Card](https://buenalabs.io/design/event-card.md): Cards for launches, meetups, and conferences — showcase grid and list rows.
- [Feature Card](https://buenalabs.io/design/feature-card.md): A tall promo card with a gradient headline and one supporting line.
- [Feedback](https://buenalabs.io/design/feedback.md): A lightweight prompt for collecting a reaction and a note.
- [Field](https://buenalabs.io/design/field.md): The canonical form layout: FieldGroup + Field with labels, descriptions, and errors.
- [Fieldset](https://buenalabs.io/design/fieldset.md): A bordered group of related fields with a footer for actions.
- [File Tree](https://buenalabs.io/design/file-tree.md): Nested files and folders, expandable per level.
- [Form](https://buenalabs.io/design/form.md): Validated fields with labels, descriptions, and inline errors.
- [Gauge](https://buenalabs.io/design/gauge.md): A circular meter for a value within a known range.
- [Grid](https://buenalabs.io/design/grid.md): The layout grid: 1200px max width, spare columns, wide gutters.
- [Hero Card](https://buenalabs.io/design/hero-card.md): A full-width statement card: eyebrow, display headline, one call to action.
- [Image](https://buenalabs.io/design/image.md): Framed media: radii, captions, aspect ratios, and a graceful fallback.
- [Input](https://buenalabs.io/design/input.md): Single-line text entry, with sizes and states.
- [Input Group](https://buenalabs.io/design/input-group.md): Inputs with prefix/suffix addons: icons, text, keys, buttons.
- [Input OTP](https://buenalabs.io/design/input-otp.md): Segmented one-time-code entry with keyboard navigation.
- [JSON View](https://buenalabs.io/design/json-view.md): Structured data rendered readable, keys from values.
- [Keyboard Input](https://buenalabs.io/design/keyboard-input.md): Keys and shortcuts, rendered as keycaps.
- [Label](https://buenalabs.io/design/label.md): Names a control. Every field gets one.
- [Link](https://buenalabs.io/design/link.md): Inline and standalone links: accent, muted, and external variants.
- [Load More Button](https://buenalabs.io/design/load-more-button.md): Explicit pagination: fetch the next page on demand.
- [Loading Dots](https://buenalabs.io/design/loading-dots.md): A minimal three-dot pulse for inline waiting.
- [Media Card](https://buenalabs.io/design/media-card.md): Image-led content cards: media area on top, text below; grid or compact list row.
- [Marquee](https://buenalabs.io/design/marquee.md): An auto-scrolling strip that pauses on hover and honors reduced motion.
- [Menu](https://buenalabs.io/design/menu.md): A list of actions opened from a trigger.
- [Menubar](https://buenalabs.io/design/menubar.md): A horizontal strip of application menus.
- [Metric Card](https://buenalabs.io/design/metric-card.md): Compact label / value / detail tiles for facts and figures.
- [Middle Truncate](https://buenalabs.io/design/middletruncate.md): Truncates the middle of long strings so both ends stay readable.
- [Modal](https://buenalabs.io/design/modal.md): A focused dialog over the page for short, blocking tasks.
- [Multi Select](https://buenalabs.io/design/multi-select.md): Pick several options; selections render as removable tokens.
- [Navigation Menu](https://buenalabs.io/design/navigation-menu.md): Top-level site navigation with expandable panels.
- [Native Select](https://buenalabs.io/design/native-select.md): The platform select element, styled to the system — for forms that want zero JS.
- [Navbar](https://buenalabs.io/design/navbar.md): The site header pattern: wordmark, links, search, and theme toggle.
- [Newsletter](https://buenalabs.io/design/newsletter.md): The subscribe card: one field, one button, no noise.
- [Note](https://buenalabs.io/design/note.md): Callouts for context: info, success, warning, error.
- [Number Ticker](https://buenalabs.io/design/number-ticker.md): A count-up number for stats that deserve a beat of motion.
- [Pagination](https://buenalabs.io/design/pagination.md): Numbered navigation through pages of results.
- [Phone](https://buenalabs.io/design/phone.md): A device frame for presenting mobile UI in context.
- [Pill](https://buenalabs.io/design/pill.md): Fully rounded labels for tags and filters.
- [Popover](https://buenalabs.io/design/popover.md): A small floating panel anchored to its trigger.
- [Progress](https://buenalabs.io/design/progress.md): How much of a task is done, as a bar.
- [Project Banner](https://buenalabs.io/design/project-banner.md): A project-scoped notice with identity and actions.
- [Radio](https://buenalabs.io/design/radio.md): One choice from a short, visible set.
- [Rating](https://buenalabs.io/design/rating.md): Star ratings: display, distribution, and input.
- [Relative Time Card](https://buenalabs.io/design/relative-time-card.md): Relative timestamps with the absolute time on hover.
- [Resizable](https://buenalabs.io/design/resizable.md): Draggable-handle panel groups, horizontal or vertical.
- [Scroller](https://buenalabs.io/design/scroller.md): A bounded scroll region with a styled scrollbar.
- [Search Input](https://buenalabs.io/design/search-input.md): A text input purpose-built for search, with shortcut hint.
- [Select](https://buenalabs.io/design/select.md): One choice from a list, in a compact control.
- [Separator](https://buenalabs.io/design/separator.md): A hairline that divides content, horizontal or vertical.
- [Sidebar](https://buenalabs.io/design/sidebar.md): A persistent navigation rail with groups, active states, and a collapsible mobile mode.
- [Sheet](https://buenalabs.io/design/sheet.md): A side panel for detail views and secondary editing.
- [Show More](https://buenalabs.io/design/show-more.md): Clamps long content behind an explicit expand.
- [Skeleton](https://buenalabs.io/design/skeleton.md): Placeholder shapes while real content loads.
- [Slider](https://buenalabs.io/design/slider.md): Pick a value or range by dragging.
- [Snippet](https://buenalabs.io/design/snippet.md): A copyable terminal command.
- [Spinner](https://buenalabs.io/design/spinner.md): An indeterminate loading indicator.
- [Split Button](https://buenalabs.io/design/split-button.md): A primary action with related alternatives attached.
- [Stat Card](https://buenalabs.io/design/stat-card.md): A big-type card that states one fact and stops.
- [Stepper](https://buenalabs.io/design/stepper.md): Multi-step progress: numbered steps with done, current, and upcoming states.
- [Status Dot](https://buenalabs.io/design/status-dot.md): A small colored dot naming a state.
- [Statusline](https://buenalabs.io/design/statusline.md): Terminal statusline rows: block-glyph meters, git state, agent activity — on one fixed grid.
- [Switch](https://buenalabs.io/design/switch.md): An immediate on/off toggle.
- [Table](https://buenalabs.io/design/table.md): Rows and columns for structured data.
- [Tabs](https://buenalabs.io/design/tabs.md): Parallel views, one visible at a time.
- [Tag](https://buenalabs.io/design/tag.md): Non-interactive labels for categories and statuses — neutral, colored, or with icons.
- [Terminal](https://buenalabs.io/design/terminal.md): A macOS-style window chrome — traffic lights, optional title — wrapping code or terminal output.
- [Text Gradient](https://buenalabs.io/design/text-gradient.md): Four gradient classes for emphasizing headlines — on the key phrase, never the whole block.
- [Text With Copy Button](https://buenalabs.io/design/text-with-copy-button.md): A value displayed with its copy affordance inline.
- [Textarea](https://buenalabs.io/design/textarea.md): Multi-line text entry.
- [Theme Switcher](https://buenalabs.io/design/theme-switcher.md): System, light, or dark — the site's segmented theme control.
- [Timeline](https://buenalabs.io/design/timeline.md): A horizontal, scroll-snapped timeline: year markers on a dashed line, one entry per stop.
- [Toast](https://buenalabs.io/design/toast.md): A transient confirmation that doesn't interrupt.
- [Toggle](https://buenalabs.io/design/toggle.md): A pressed/unpressed button for modes and formatting.
- [Tooltip](https://buenalabs.io/design/tooltip.md): A short label on hover or focus. Never hide essentials in one.
- [Type Tester](https://buenalabs.io/design/type-tester.md): The interactive specimen control: weight and size sliders over editable sample text.
- [Video](https://buenalabs.io/design/video.md): An embedded player surface with poster and controls.

## Parity

The component set tracks three upstreams — Vercel's Geist, shadcn/ui, and etermax (mcp.etermax.com/components). Machine-readable checklist (upstream slug ↔ buena slug, status derived from the registry, plus gap and buena-originals lists): https://buenalabs.io/design/parity.yaml.

## Markdown for agents

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