Palette Documentation
The design wrapper
A Section wraps any component to control spacing, background, borders and layout — so every other component stays focused on its own content. Each block below is a Section demonstrating one group of design options.
Solid background colour
Pick any CSS colour with the inline colour picker. Here the section paints a soft brand tint #ede8fa behind its content.
Background gradient
Set two colours, an angle and linear/radial to paint a gradient behind the content — a 135° blend from #e7f0ff to #f6e4f1 in this example.
Bordered card
Border width per edge (drawn on the DOM box), style, colour and corner radius turn a plain section into a card — a 2px brand border with a 24px radius here.
Spacing band
Margins and paddings are set per edge on a visual DOM box — generous top/bottom padding turns a section into a calm, roomy band.
Fast
Enable the grid and set columns and rows — each component drops into its own grid cell.
Flexible
Up to a 6×6 grid, with column and row gaps, auto-flow and item alignment.
Visual
No layout code — the same Section wrapper that handles spacing and backgrounds also does the grid.