# UI details that make a product look considered: spacing, type, colour and motion

Source: https://sarang.pro/ui-details-that-look-considered/
Author: Sarang | Published: 24 October 2026

When an interface looks amateur, the cause is rarely a lack of talent. It is inconsistency: twelve slightly different gaps, five font sizes that almost match, a new accent colour on every card. Fixing that needs rules, not genius.

## Spacing: consistency beats guesswork

Pick a spacing scale built on 4 or 8 pixels, such as 4, 8, 12, 16, 24, 32 and 48, and use only those values. Two cards with identical content look completely different when one uses random gaps and the other follows a scale. The second looks designed; the first looks assembled.

## Typography: give every style a purpose

Mixing several fonts, sizes and styles on one screen creates visual noise. Define a small set of text styles once, for headings, body text and captions, and reuse them everywhere. A clear hierarchy tells people what to read first without them having to think about it.

## Colour: less colour, more clarity

Build on neutral backgrounds and text, add one primary colour for the main actions, and keep a few semantic colours for meaning: green for success, amber for warning, red for danger. When every element has its own accent, nothing stands out. Ready-made palettes help; this site, for example, uses a midnight navy base with teal for actions, violet for depth and gold for highlights.

## Loading: show the shape of what is coming

Skeleton screens, grey blocks in the shape of the coming content, divide designers. Used well, they make waiting feel shorter because people can see the layout before the content arrives. Used everywhere, they can feel like decoration. Reserve them for content that takes a moment.

## Danger deserves a system

Deleting, cancelling and overwriting should never look like everyday actions. Treat them as a system: a distinct colour, a plain description of what will be lost, a confirmation step and, where possible, an undo.

## Motion that explains

Good motion answers a question: where did that panel come from, what changed, did my click register? Keep most transitions short, under about 300 milliseconds, and let one or two moments per page be more expressive. AI tools can now produce motion and polished components quickly, which makes restraint more important, not less.

## Dashboards: one question per view

A sales pipeline dashboard works when it answers one question at a glance, such as ‘where are deals getting stuck?’, and lets people drill down from there. Put the most important number top left, group related figures, and use colour only where it carries meaning.