NewsThe Basemode plugin is now on Figma Community
Docs

Shared docs pages

One searchable, always-current page for everyone.

Every design system can have a public, read-only docs page: one link for designers, engineers, product managers and anyone else who builds with it. See the example.

What the page shows

  • Every token, searchable by name, value or CSS variable, in any mode. Click a token for its CSS variable, value in each mode and alias chain; the copy button copies its variable.
  • Contrast checks for every text color on every surface.
  • Guidelines with do and don't examples, written in Basemode.
  • Components with their status and how to import them.
  • Your Storybook, framed beside the tokens.
  • Recent changes from every publish.
  • Downloads in any format, using your team's color, unit and prefix settings.

It updates the moment a designer publishes, so it can't fall out of date.

Turn it on

Press Share at the top of your design system. Anyone with the link can see the page; turning sharing off closes it at once. The page also closes if the organization's plan ends.

Your brand

Set an accent color and a logo in the design system's Guide, and the page uses them in place of Basemode's.

Your own domain

On the Team plan and above, the page can live at your own address, such as docs.acme.com:

  1. In the design system's Guide, under Custom domain, enter the hostname and press Add domain.
  2. At your DNS provider, add the CNAME record Basemode shows. If your DNS is on Cloudflare, set it to DNS only.
  3. Basemode's certificate provider checks the hostname and issues a certificate, usually within minutes. The panel turns to Live on its own.

Use a subdomain: a bare domain such as acme.com can't point a CNAME. The optional TXT record verifies the hostname before you move the CNAME, for an address that's already in use elsewhere. Removing the domain, turning sharing off, or a plan without custom domains takes the page off the address at once.

Embed it

Frame the page in your wiki, docs site or Storybook:

<iframe src="https://basemode.io/embed/<link>?only=colors,typography" width="100%" height="900"></iframe>

only picks sections: guidelines, colors, typography, spacing, radii, shadows, accessibility, components, storybook and changes. tokens means every token section.

PreviousMCP for coding agentsNextMoving to Basemode