Porcelain
Bright white, hairline borders, almost no shadow.
Live preview · real tokens, not a screenshot
When to pick it
Clinical in the good sense. Nearly all structure comes from 1px borders rather than elevation, which suits dense product UIs where a floating card would look out of place among flat panels.
How it is built
A single 1px border and no shadow beyond a 1px hairline. When every other element on your page is flat, a drop shadow is what looks wrong.
Accessibility
16.1:1 — the highest contrast in the gallery.
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
- Admin panels
- Dashboards
- Internal tools
- Medical
Source code
Take Porcelain 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.