Spacing, shadows, and borders in a UI theme system

A theme is more than its colors

Two interfaces can share the same palette and feel unrelated because one is dense and square while the other is spacious, soft, and elevated. Spacing, radius, borders, and shadows carry as much personality as hue.

Treat them as related systems. The free Nodlume theme generator lets you tune these decisions beside typography and color while a complete interface preview updates live.

Build one spacing scale

Choose a base unit, commonly four pixels, and derive a short progression rather than inventing a number for every component. The goal is not mathematical purity; it is recognizable rhythm.

A practical system needs values for:

• icon-to-label and inline gaps;
• compact control padding;
• field and list spacing;
• card padding;
• grid gaps;
• section spacing;
• page gutters.

Name tokens by intent where possible. space-control-x explains why a value exists better than space-3. Primitive steps remain useful underneath, but components should consume stable decisions.

Density should reflect the task. A dashboard used for hours each day can be compact; a marketing page benefits from more breathing room. Do not mix density accidentally inside the same workflow. Test the system with long labels, validation messages, and narrow screens—not only ideal specimen copy.

Make radius a hierarchy

Pick a small radius scale and assign it consistently. Inputs and buttons may share one control radius, cards a container radius, and dialogs a slightly larger overlay radius.

Nested corners should make geometric sense. A card with a large outer radius cannot safely contain an image or panel with the same radius and a tiny inset; the curves will compete. Inner radii generally need to account for the surrounding padding.

Pills communicate a special shape. Reserve them for tags, segmented controls, compact status badges, or deliberately rounded actions. If every rectangle is a pill, the shape stops carrying meaning.

Use borders for structure

Borders describe boundaries and grouping. They work well around inputs, cards on similar-colored backgrounds, dividers, and selected regions.

Keep ordinary borders quiet. A structural border should be visible without becoming the first thing a person notices. Strong color belongs to focus, validation, and selection states where the boundary is communicating an event.

Do not rely on border color alone for focus. A visible focus ring needs enough contrast against both the control and the surrounding surface, and it should remain distinct from hover and error styles.

Use shadows to explain elevation

Every shadow should answer why one surface appears above another. A dropdown floats over the page, a dialog floats over both, and an ordinary card may not need elevation at all when a border already establishes its edge.

Create a short elevation ladder instead of unrelated shadows:

1. A subtle shadow for cards or sticky chrome.
2. A medium shadow for menus and popovers.
3. A stronger, broader shadow for dialogs.

Modern interface shadows usually combine a small contact shadow with a softer ambient layer. Test them on dark backgrounds: black shadows often disappear there, so elevation may need lighter surface steps or restrained highlights rather than a more aggressive blur.

Large blurred shadows can also affect rendering performance when repeated across moving elements. Elevation should clarify the interface, not turn every component into a glowing layer.

Review the system together

Check common component families side by side: buttons, inputs, cards, menus, dialogs, tables, and navigation. Ask whether elements with the same role share padding and radius, whether elevation levels are predictable, and whether dense and comfortable areas transition deliberately.

Once the system is coherent, export the decisions as tokens. The theme generator produces a Tailwind v4 theme from the same spacing, radius, shadow, typography, and semantic-color document shown in its preview.