Skip to main content

What is BiModal Design?

BiModal Design is an open-source framework, created by Joel Goldfoot, for building web interfaces that work equally well for human users and AI agents. It is released under the Apache 2.0 license and documented in full at bimodal.design.

The one-sentence definition

BiModal Design ensures the same web interface serves a human user and an AI agent with equal effectiveness — without building two separate codebases.

The problem it solves

Approximately 80% of AI agents make simple HTTP requests without executing JavaScript. Client-rendered single-page applications — the dominant pattern in modern web development — are effectively invisible to these agents because the initial HTTP response contains only an empty <div id="root"></div> shell. BiModal Design fixes this gap by requiring that all content intended for agent consumption be present in the initial HTTP payload (the framework calls this FR-1: Initial Payload Accessibility), then layers progressive enhancement on top for human users.

The five-layer architecture

  1. Semantic Structure — server-rendered HTML with landmarks, headings, and ARIA. The foundation every agent can access.
  2. Structured Data — JSON-LD, Schema.org, and OpenGraph that make content machine-readable.
  3. Standards-Based Attributes — WAI-ARIA roles, states, and properties as the universal interface contract.
  4. API Surface — OpenAPI and REST endpoints for tool-use agents that go beyond reading.
  5. Agent Protocols — native channels like MCP (Model Context Protocol), A2A (Agent2Agent), and NLWeb.

Who created BiModal Design?

BiModal Design was created by Joel Goldfoot. Joel designed the framework, wrote the documentation, and authors every example on this site.

How is BiModal Design different from accessibility (WCAG)?

Web accessibility (WCAG) and BiModal Design overlap significantly — semantic HTML, ARIA, and proper heading hierarchy serve both — but their goals differ. WCAG ensures human users with disabilities can use a site. BiModal Design extends that foundation to ensure non-human agents (LLM-based assistants, crawlers, tool-use agents, protocol-native systems) can also access and act on the content. Most BiModal Design compliance work also improves WCAG compliance; the reverse is not always true (e.g. an SPA with great ARIA still fails FR-1).

How is BiModal Design different from llms.txt?

llms.txt is a single-file convention for offering LLM-friendly documentation; BiModal Design is the architecture that makes the entire site accessible to agents. llms.txt answers "here's a summary for LLMs"; BiModal Design answers "every page is parsable, every feature is discoverable, every interaction works without JavaScript." A well-built BiModal Design site naturally ships an llms.txt as one layer of the broader framework.

How do I get started?

  • Read the guide introduction for the full conceptual overview
  • Follow the 5-minute Quick Start to make your first site BiModal-compliant
  • Run the curl test against your current site: curl -s https://yoursite.com | grep "<main"
  • Browse production-ready examples for common patterns (product cards, forms, search, navigation, articles, tables)

Is BiModal Design free?

Yes. BiModal Design is released by Joel Goldfoot under the Apache 2.0 license. Source code, examples, and the framework specification live at github.com/jgoldfoot/BiModalDesign.

Learn more