Be Partner DS

Definitions, not implementations. Built for agents and humans alike.

Start with your AI agent

Give your agent this prompt to start building with BPL DS immediately:

Fetch https://ds.bepartnerlabs.com/AGENTS.md and use it as your implementation contract.
Follow the token contract rules and canonical component patterns documented there.

What is Be Partner DS?

BPL DS is a production-grade design system built on one principle: the definition is the implementation.

Every component is a single HTML + CSS contract. Tokens define the visual language. Agents and humans implement against those definitions — not against frameworks, not against build pipelines.

Definition-first — each component has one canonical HTML shape and a public CSS API. No props, no wrappers, no adapters.
Agent-ready — the contract is mechanically verifiable. An agent implementing a button and an agent reviewing that button work against the same source of truth.
Framework-agnostic — the same HTML works in React, Vue, Svelte, Astro, Rails, or a static file. The definition does not change.

Architecture

Tokens  →  visual language (color, space, type, motion)
Components  →  HTML + CSS contracts (BEM structure, ARIA state, public CSS API)
Agent  →  reads definitions, generates conforming HTML + CSS
Human  →  reviews, steers, decides when ambiguity exists

No translation layer between design and code. The token is the code. The documented HTML is the API.

Stack

Astro + Starlight for documentation
Pure CSS with @layer, @property, @starting-style, and @view-transition
Cloudflare Pages for deployment

Standing on shoulders

BPL DS builds directly on ideas from the CSS community:

Lea Verou — the --_ private variable pattern originates in her 2021 post Custom properties with defaults: 3+1 strategies. Every component in this DS uses it.
Giorgio Saud — extended and documented the --_ pattern as a CSS component constructor in Custom properties with defaults, combining it with @layer, @property, and clamp() into the architecture BPL DS adopts.
Kevin Powell — the Content Grid’s Full-Bleed Layout technique is his. The named-line grid replacing container wrappers comes directly from his CodePen demo.

Ver Inspiración para el detalle completo.