Visual & style

"The empty space is a waste, fill it with something" is the most common request and the most dangerous. Whitespace is not leftover room — it is the tool that makes the important thing stand out. Screens short on it look cheap.

The first pair that trips up people without a design background. Remember it as "the box gets bigger → padding; the boxes move apart → margin". Say only "add some spacing" and the developer guesses wrong.

Web fonts affect file size and loading speed. Include five weights and it weighs five times as much. Pick only the weights actually used and pass those to development. Korean fonts are far larger files than Latin ones.

Make everything big because everything is important and nothing is. The rule is to pick "the single most important thing" per screen and make everything else weaker than it.

Without a scale, mockups come in with 15px, 16px and 17px mixed together, and the developer has to reproduce all of it. Limit it to six to eight steps and both design and development get much faster.

Korean body text reads comfortably at 1.5 to 1.7 times the font size, slightly looser than Latin text. Too tight feels cramped; too loose and lines scatter. Headings go the other way — tighter, 1.2 to 1.3.

The larger a Korean heading, the more slightly tighter tracking (about −2%) tidies it up. Conversely, very small text and Latin capitals need looser tracking to stay readable. Leave body tracking alone.

Colour has to be prepared in steps. Define only one primary and there is nothing for hover, disabled or backgrounds, so the developer invents brightness values. The norm is nine or ten steps per colour.

Semantic colours have to follow what people have learned to expect. Make a "success" message red because the brand is red and people will read it as a failure.

4.5:1 for body text, 3:1 for large text is the accessibility minimum (WCAG AA). Grey text may look refined, but too light and it is invisible outdoors in daylight. On public sector work this is a legal review item.

Never just invert the colours. Dark mode uses a slightly lifted grey rather than pure black (#000), and expresses layers through brightness differences rather than shadow. It amounts to a second palette, so put it in the schedule and the quote.

Shadows applied at random make a screen look messy. Define steps like 0/1/2/3 and manage them by rule — "cards are 1, modals are 3". In dark mode shadows barely register, so substitute borders or brightness.

Inconsistent values look sloppy. Set steps such as 4, 8, 12 and 999px (fully round). And when a box sits inside a box, the inner radius should be smaller than the outer one to look right.

Using opacity to lighten text breaks the contrast ratio. If you need grey text, do not lower the opacity — specify the grey as a colour. Save opacity for things like dimming over a background image.

Mixing sets is immediately visible. Icons with different stroke weights sitting side by side look sloppy. Pick one set at the start of the project and draw any missing icon to match it.

Always hand over logos and icons as SVG. Photos go as JPG, and images needing transparency as PNG. WebP is much smaller and now widely used for photos.

Without multiplied exports from the designer, a developer cannot do anything. An image displayed at 100×100 must be exported at 200×200 (@2x) to look sharp on a high-resolution screen. Put it on the handoff checklist.