---
name: Buena Labs
tagline: Write. Build.
description: Apps, typefaces, and open-source tools for writers and developers.
url: https://buenalabs.io
brand_page: https://buenalabs.io/brand
brand_kit: https://buenalabs.io/downloads/buena-brand-kit.zip
typeface: Buena Mono
products:
  - { name: mrkdwn, url: https://mrkdwn.buenalabs.io }
  - { name: buena mono, url: https://buena-mono.buenalabs.io }
themes: [dark, light]
default_theme: dark
max_content_width: 1200px
base_radius: 0.375rem
voice: [precise, minimal, technical-but-human, calm, craft-forward, ownership-minded]
---

# Buena Labs — Design

Buena Labs is a creative studio building apps, typefaces, and open-source tools
for writers and developers. The tagline is **Write. Build.** — writers write,
developers build.

This document is the machine- and human-readable reference for the Buena Labs
brand and site design system. It is prescriptive and minimal — concrete values,
no marketing. For the interactive version and downloadable assets, see
[/brand](https://buenalabs.io/brand); for the writing voice, see the brand-voice
guide (`docs/BRAND-VOICE.md`).

## Overview

- **Where writing and code meet.** Products serve writers and developers alike;
  the design is editorial and technical at once.
- **Minimal.** Spare layouts, generous whitespace, one accent. Say it in fewer
  words and fewer elements.
- **Dark-first.** Ships a full dark and light theme; dark is the default.
  Near-monochrome with a single blue accent.
- **Ownership.** Local-first, plain files, no lock-in — the values show up in the
  language and the defaults.

## Brand

- **Name.** Always **Buena Labs** — two words, capitalized. Never "buena labs",
  "BuenaLabs", or "Buena" alone.
- **Products.** **mrkdwn** (lowercase), **buena mono** (lowercase, two words).
- **Logo.** A ring symbol + "buena" wordmark. The kit ships four marks — Icon
  (B lettermark), Logo (ring + wordmark), Symbol (ring monogram), Wordmark — each
  in Ivory / Slate / Black / White, SVG + PNG. Brand kit: `/downloads/buena-brand-kit.zip`.
- **Usage.** Keep clear space around the mark; use provided files at their
  original proportions. Don't recolor, distort, or place on busy backgrounds.

## Color

Design tokens (CSS custom properties `--c-*`). Dark is the default theme.

| Token | Dark | Light |
|-------|------|-------|
| `bg-primary` | `#0A0A0A` | `#FFFFFF` |
| `bg-surface` | `#111111` | `#FAFAFA` |
| `bg-elevated` | `#1F1F1F` | `#F2F2F2` |
| `text-primary` | `#EDEDED` | `#171717` |
| `text-secondary` | `#A1A1A1` | `#666666` |
| `text-tertiary` | `#757575` | `#8F8F8F` |
| `accent` | `#52A8FF` | `#0070F3` |
| `accent-hover` | `#83C3FF` | `#0761D1` |
| `border` | `#2E2E2E` | `#E2E2E2` |
| `separator` | `#1C1C1C` | `#EFEFEF` |
| `success` | `#62C073` | `#297A3B` |
| `warning` | `#F5A623` | `#A35200` |
| `error` | `#FF6166` | `#CB2A2F` |
| `info` | `#BF7AF0` | `#8E4EC6` |

One accent only. `accent` is the per-theme text/link blue; solid interactive
fills (buttons, selected chips) use `--primary: #0070F3` in both themes. Use
`success`/`warning`/`error`/`info` for status, never for decoration.

## Typography

- **Primary typeface: Buena Mono** — the studio's own monospace. Weight axis
  `wght` 100–800, slant axis `slnt` 0 to −10°. Everything is set in it.
- **Fallback stack:** `"Buena Mono", ui-monospace, monospace`.
- **Web:** self-host the variable webfont.

```css
@font-face {
  font-family: "Buena Mono";
  src: url("/fonts/BuenaMono-VF.woff2") format("woff2");
  font-weight: 100 800;
}
```

Full typeface spec: <https://buena-mono.buenalabs.io/design.md>.

## Layout

- **Max content width:** `1200px` (`--max-w-content`).
- **Radius scale:** base `--radius: 0.375rem` (6px); `sm` −4px, `md` −2px,
  `lg` base, `xl` +4px, `2xl` +8px, `3xl` +12px, `4xl` +16px. Larger surfaces
  (cards, previews) use `--radius-card` (12px) and `--radius-card-lg` (16px).
- Spare grids, wide gutters, one idea per section.

## Sound & haptics

Semantic event tokens shared by both channels — products reference the event,
not the file. Full specs: [/design/sound](https://buenalabs.io/design/sound.md)
and [/design/haptics](https://buenalabs.io/design/haptics.md).

- **Sound tokens** (WAV, 16-bit stereo, at `/sounds/<token>.wav`): `tap` (154 ms),
  `click` (125 ms), `open` (336 ms), `close` (336 ms), `error` (450 ms).
  Reserved, not yet recorded: `success`, `warning`, `notification`.
- **Haptics**: same vocabulary via each platform's semantic generator
  (UIFeedbackGenerator on iOS, VibrationEffect on Android, WKHapticType on
  watchOS, `navigator.vibrate` patterns on the web).
- Feedback is user-initiated only, accompanies visuals (never replaces),
  respects silent switches and reduced-motion, and ships one in-app toggle.
  Sound + haptic for the same event fire together.

## Voice

Attributes: **precise, minimal, technical-but-human, calm, craft-forward,
ownership-minded.** Prefer a concrete detail to an adjective; cut hype words
(revolutionary, seamless, game-changing…). Full guide with tone-by-context and
example copy: `docs/BRAND-VOICE.md`.

## Do & don't

- **Do** write "Buena Labs" as two words; keep one accent; lead with what a thing
  does; set everything in Buena Mono.
- **Don't** recolor or distort the logo; don't add a second accent; don't reach
  for superlatives — show it instead.