HTML pages: the design floor

HTML pages: the design floor

Most HTML files have a template already. Start there:

This page is for everything else — a landing page, a calculator, a client-branded one-pager, a form — and it is the floor under all of the above: when you change one of them, these rules still hold.

Decide the treatment before the first line

Match the effort to the ask. A checklist, a one-off calculator or an internal note gets a plain, careful page: real hierarchy, real spacing, one accent, nothing else. A landing page, a client's pitch or a page that will be shown to customers earns a visual identity of its own. When unsure, plain and well-made always works; an over-designed internal tool does not.

Use what already exists, in this order: what the person asked for, then the client's own brand (their logo colours, their site, their existing pages in this space), then Plank's house tokens. Never invent a brand for a client who has one.

Use the real content. Real names, real numbers in their real units (₸, кг, дни), the client's own terms. Never lorem ipsum, never "Company Name". If you do not have a value, leave a visible gap the person will fill — not a plausible fake.

What the viewer lets a page load

A page opened in Plank runs in a locked frame. It can use: inline <style> and <script>, fonts from Google Fonts (<link> to fonts.googleapis.com), images and files beside it by a relative path (img/cover.png), and data: URIs. It cannot load: a script or stylesheet from any CDN (no Tailwind, no Chart.js, no icon fonts), a remote image, or an iframe of another site. A blocked resource fails silently — the page just looks wrong for the reader.

So: write the CSS and JS into the file, draw charts as inline SVG (Charts), print icons inline (Icons), and give every font a system fallback (font-family: Inter, system-ui, sans-serif).

Theme: three states, tokens only

The Plank app tells the viewer whether it is in light or dark, and the viewer passes that to any page that uses the data-theme convention. Outside Plank the OS setting decides. So define every colour as a token, light on :root, dark twice:

:root{ --bg:#fafaf7; --surface:#ffffff; --ink:#0a0a0f; --ink-2:#3a3a42; --muted:#72706b; --line:#e5e2dc; --accent:#4f6df5; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0a0a0f; --surface:#16161d; --ink:#fafaf7; --ink-2:#d6d3cc; --muted:#918e87; --line:#2a2a35; --accent:#6f88ff; color-scheme:dark; } }
:root[data-theme="dark"]{ --bg:#0a0a0f; --surface:#16161d; --ink:#fafaf7; --ink-2:#d6d3cc; --muted:#918e87; --line:#2a2a35; --accent:#6f88ff; color-scheme:dark; }
body{ background:var(--bg); color:var(--ink); }

• Every token gets its first value on bare :root. A colour defined only inside a dark block does not exist in light mode.
• Components use tokens, never a literal colour — a hex that reads in one theme is usually invisible in the other.
• body sets its own background. A transparent page shows whatever is behind the viewer.
• Design the dark theme, do not invert it: keep the accent readable on both grounds and check contrast in both.

Layout that survives a phone

• Side gutter of at least 16px at every width; at 390px wide nothing scrolls sideways. Put the gutter on body or one outer wrapper.
• Lay out groups with flex or grid and gap, not per-element margins. Rows wrap or stack to one column when narrow.
• A flex or grid child holding text, a table or code gets min-width:0, so long content wraps inside it instead of widening the page.
• Only tables, diagrams and code blocks may be wider than the screen, each inside its own overflow-x:auto box.
• Images and any aspect-ratio box: max-width:100%.

Type

• One family is enough (Inter); a second only for figures (JetBrains Mono) or a deliberate display face from Google Fonts. Check Cyrillic and Kazakh letters (ә, ғ, қ, ң, ө, ұ, ү, һ, і) in whatever you choose.
• A fixed scale, used everywhere — e.g. 12 / 14 / 16 / 20 / 28 / 40px. Body 15–16px, line-height 1.5–1.65, about 65 characters per line.
• Headings: weight 600–700, slightly tight tracking, text-wrap: balance. Uppercase labels get a little letter-spacing.
• Numbers that line up in columns: font-variant-numeric: tabular-nums. Russian number format: 12 450,50 ₸.

Colour

• Neutrals chosen, not inherited: a grey with a slight warm or accent tint reads as intentional; a pure mid-grey reads as a default.
• One accent, used for the one thing to act on or notice. Not on every heading.
• Text contrast at least 4.5:1 (3:1 for large text and for lines and icons a reader must see).
• Status colours mean status — green/amber/red only for good/warning/bad, always with a word and an icon.
• The validated palette and validate_palette.py are for chart series and status only. Art direction is free: an accent background on a slide, a warm palette for illustrations, the client's brand colour — within the contrast rule above.
• Icons are small symbols beside a label; the picture that carries the idea is an illustration you draw as inline SVG with fills and colour (Icons). A big outline icon is not one.

The signs of a page nobody designed

If the page has any of these, fix it before delivering:

• a gradient "glow" or blob behind the hero; purple-to-blue gradients on buttons or headings;
• cards with a thick coloured left border; every section in an identical rounded card;
• emoji as icons or bullets;
• a giant hero with a tagline on an internal tool;
• three feature cards with an icon, a bold word and a vague sentence each;
• everything centred; every element with a shadow;
• "Lorem ipsum", "John Doe", "Company Name", invented testimonials;
• grey text on a coloured background; a font size of 10px for anything a reader needs;
• a page that is right in light mode and broken in dark.

Check it, then deliver

Render it in both themes and at phone width and look at the pictures — the commands are in Charts → Render it and look. For a document, also run the typography and diagram check from Diagrams → Check it.