Live preview · real tokens, not a screenshot
When to pick it
Carbon's light twin, for products that are themselves light. The same no-overlap argument applies — this is the layout to pick when the answer and the page have to be read together.
How it is built
The left edge carries a 1px hairline plus a 24px shadow falloff, which separates panel from page without a scrim. A scrim would imply the page behind is disabled, and it is not.
Accessibility
14.7:1. Dismissable with Escape, and the launcher regains focus.
Every design in this gallery states that it is an AI assistant at the start of the conversation and honours prefers-reduced-motion. Neither is configurable, because both are obligations rather than preferences.
Good fit for
- SaaS dashboards
- Light web apps
- Help centres
Source code
Take Slate Panel anywhere.
You can deploy this design through ChatBrace on any plan, including the free trial — that never changes. A paid plan also gets you the standalone HTML, CSS and JavaScript for it, to drop into a project of your own with or without ChatBrace behind it.
Seven designs ship their source to everyone, no account needed.
Put it on your site
before you finish your coffee.
A hundred free messages, no card, and a playground to try it in before you touch a single line of your own markup.