Design System

Intent

One vocabulary across surfaces. The tokens that paint build-on-ai.com are the same tokens that paint the desktop apps. The Button on this page is the same Button in Notes, Vox, Inbox, and Document Processor. Light and dark are first-class — flipping the theme on this site flips it in every app that links the package.

Below: every token and every component currently in production on this site, ready to be packaged.

Typography

Inter for body, JetBrains Mono for code and monospace labels. Sizes scale fluidly with viewport.

Buttons

Two variants. Primary for the single most important action; secondary for everything else. No tertiary.

<a href="#" class="cta-primary">Quickstart →</a>
<a href="#" class="cta-secondary">View on GitHub</a>

Cards

The base .card sets padding, border, and elevation. Variants like .product-card add header rows or footer CTAs.

<a href="#" class="card product-card">
  <div class="header">
    <h3 class="name">Card title</h3>
    <span class="pill">v1.0</span>
  </div>
  <p class="tagline">Single-line tagline describing what this card represents.</p>
  <div class="footer-row">
    <span class="cta-text">Read more →</span>
  </div>
</a>

Callouts

Boxed notes for non-blocking information. Three states; never used for emotional disclaimers.

<div class="callout">
  <p><strong>Note:</strong> a normal callout.</p>
</div>

<div class="callout callout--warn">
  <p><strong>Warning:</strong> use sparingly for non-blocking caveats.</p>
</div>

<div class="callout callout--danger">
  <p><strong>Danger:</strong> destructive or irreversible actions.</p>
</div>

Tabs

Inline tab strip for switching panels within a page. Click a tab to swap the panel below.

<div class="ds-tabs" role="tablist">
  <button role="tab" aria-selected="true">Overview</button>
  <button role="tab">Install</button>
  <button role="tab">Status</button>
</div>
<div class="ds-tab-panel" role="tabpanel">…</div>

Modal

Built on the native HTML <dialog> element — backdrop, focus trap, Esc-to-close are handled by the browser. No external library.

<button class="cta-secondary" onclick="document.querySelector('#demo-dialog').showModal()">
  Open dialog
</button>

<dialog id="demo-dialog" class="ds-modal">
  <h3 class="h3">Confirm action</h3>
  <p>This will rebuild the index. Existing search results will be invalidated.</p>
  <form method="dialog" class="ds-modal__actions">
    <button class="cta-secondary">Cancel</button>
    <button class="cta-primary">Rebuild</button>
  </form>
</dialog>

Command palette

Press Ctrl K (or ⌘ K) on this page. Single overlay for navigation, actions, recent items, settings — fuzzy-searchable, keyboard-first. Same pattern in Linear, Vercel, Notion, GitHub, Slack, Stripe; same idea as Ulauncher / Spotlight, scoped to the app.

In @buildonai/ui this ships as a Svelte component:

<script>
  import { CommandPalette } from "@buildonai/ui";

  const actions = [
    { group: "Navigate", name: "Products",      run: () => goto("/products") },
    { group: "Navigate", name: "Documentation", run: () => goto("/docs") },
    { group: "Actions",  name: "Toggle theme",  run: () => toggleTheme(),  shortcut: "⌘D" },
    { group: "Actions",  name: "New note",      run: () => createNote(),   shortcut: "⌘N" },
  ];
</script>

<CommandPalette {actions} hotkey="ctrl+k" />

Code blocks

Syntax for inline code (above) and full code blocks. Code blocks stay dark in both themes — readers don't get whiplash flipping the theme on a long page of snippets.

# Install
npm install @buildonai/ui

# Use
import { Button, Card } from "@buildonai/ui";

@buildonai/ui

The package this preview becomes:

• Tokens — every --bg-*, --text-*, --accent*, --radius-*, --border* exported as a single CSS file.
• Svelte 5 components — Button, Card, Pill, Callout, Input, Textarea, CodeBlock, SectionLabel, ThemeToggle.
• Theme primitive — a data-theme="dark" handler matching the website's pattern, persisted to localStorage.
• Shipped to — Document Processor, Vox (voice-assistant), Notes, Inbox once it's on the unified stack.

Repo: github.com/build-on-ai/ui. Licence: AGPL-3.0-only + Commercial, matching the rest of the ecosystem.

Toggle the theme in the nav above and watch every block on this page flip — that is the same toggle that will live in every desktop app.