Design Principles

The visual and structural rules that make DevDocs.dev feel polished, useful, and product-ready.

The goal of the docs shell is to make DevDocs.dev feel intentional from the first page. The site should read like a real developer product, not a thin collection of placeholder docs.

Keep the stock rhythm

  • preserve the section selector, page tree spacing, and sticky right rail
  • avoid custom wrappers unless behavior actually needs to change
  • let content depth drive the layout instead of trying to fake richness with decoration alone

Use brand color carefully

Purple should mostly live in selection states, section icons, and small highlights. The background, borders, and page chrome should stay close to the neutral defaults so the site still feels like a documentation surface.

Add depth through content

The best way to make the shell feel alive is to give it real product structure:

  • nested folders and separators in the sidebar
  • multiple heading levels so the TOC has something to follow
  • a mix of cards, callouts, tabs, and long-form prose
  • API, SDK, CLI, and sandbox concepts that feel connected instead of bolted on

See it in context

On this page