Foundation order
Use the first viable source:
- Existing project tokens and components.
- Official platform or established product system required by the brief.
- Maintained primitives already installed.
- A minimal custom system.
Do not mix unrelated component systems. A visual imitation without the original interaction and accessibility behavior is not faithful system use.
Color
Define semantic roles before raw swatches: canvas, surface, elevated surface, text, muted text, border, action, focus, success, warning, and failure. Verify every foreground/background pair actually used. Do not communicate state by color alone.
Avoid a one-note palette. Neutral structure plus distinct semantic hues is usually clearer than tinting every surface in the brand accent. Gradients, glow, and transparency require a product or brand reason.
Choose the base palette, accent family, and surface material as one system. Use at most one intentional contrast or inversion band unless a color progression is the explicit concept. Do not infer black and fluorescent accents from technical subject matter, or cream and metallic accents from the word premium.
Typography
Assign roles for display, page title, section title, body, label, metadata, and code or numeric data. Use no more font families than the product needs. Choose fonts for language coverage, readability, tone, and loading constraints rather than fashion.
Prefer same-family weight, width, case, or italic contrast when it creates enough hierarchy. Add a second family only when the content needs another voice. Reserve monospace for code, data, or authentic technical metadata; decorative uppercase mono labels and numbered eyebrows should not become a pagewide identity by default.
Keep body measure readable, line height proportional, and letter spacing at zero unless the existing brand system explicitly says otherwise. Do not scale font size directly with viewport width. Use responsive steps or container-aware layout instead.
Treat line breaking as part of the type contract. Ordinary copy must not rely on hard <br> elements, narrow max-widths, or oversized padding that produces one- or two-word lines. Test the longest real heading, body copy, metadata, and action labels at every representative width and text zoom level.
Choose display size from both available width and available height. Declare the intended title line count, measure the complete entry stack at a representative short desktop and mobile height, and step the title down when it crowds out required copy, proof, or the primary action. Do not solve height pressure with viewport-width font scaling, compressed line height that causes glyph collisions, transform scaling, hidden overflow, or unreadably small supporting text.
Choose scale relationally: the entry has the strongest display role, section headings establish the next level, body copy is comfortable to read, and metadata remains legible. Test the actual font and copy inside the actual layout. Character counts and fixed pixel ceilings are not fit tests: equal-length titles can have different widths, line counts, and optical weight. Shorten self-authored copy only when meaning improves; do not rewrite supplied copy simply to meet a count.
Define alignment by role. In metric strips and repeated data cells, decide independently whether labels, values, units, and trends align left, center, baseline, or decimal. Do not let align-self, justify-content, or intrinsic width accidentally determine the visual rule; inspect the rendered bounding geometry when symmetry matters.
Typography direction
Choose type from the desired voice and content behavior before choosing a fashionable family:
- Editorial or literary: a readable serif or display face may carry selected headlines, quotations, or product names; examples include Playfair Display, Newsreader, Cormorant Garamond, Fraunces, and comparable project-appropriate families.
- Craft or hospitality: use a human serif, soft grotesk, or restrained italic contrast when it supports material warmth without turning every label into decoration.
- Technical or operational: prioritize compact, highly legible sans roles; reserve mono or narrow faces for authentic code, measurements, identifiers, or dense metadata.
- Expressive campaign: permit one unusual width, italic, display, or scale relationship while keeping navigation, body copy, and controls stable.
Treat these as voice examples, not category presets. Inspect language coverage, punctuation, numerals, available weights, italics, variable axes, and loading cost. Use an existing project font first. When adding a web font is allowed, load only required families and weights, provide a sensible fallback, and prevent invisible text.
Plan line choreography with the real copy. Decide which phrase deserves contrast, which words must remain together, and how the title recomposes on mobile. Preserve literal spaces, punctuation, semantic order, and an intact accessible name when decorative spans or animation split the phrase. Reject a font pairing that is attractive in isolation but produces weak body readability, awkward brand names, or brittle title wrapping.
Relational type trial
Before committing to an unfamiliar display face, render a small specimen with the real title, a subordinate section heading, a paragraph, price or date, and the longest action. Inspect it at the intended desktop and mobile measures, including a short window. A serif italic is useful when its voice and counters remain readable; it is neither mandatory nor an AI tell by itself.
Use the same content in the fallback and final font. Check before and after font loading, not just after document.fonts.ready. Reserve stable media geometry and recheck line count, action position, and glyph collisions when metrics change. For a custom web font, choose font-display deliberately and consider metric-compatible fallbacks; do not hide the page while waiting for fonts.
Include the actual supported languages in the trial: accented names, punctuation, currency, numerals, and long unbroken identifiers where relevant. At 200 percent text size, require reflow and reachable controls, not preservation of the original one-screen poster. Do not use transform scaling to fake fit. The visual lab includes role, long-copy, fallback-switch, and enlarged-text probes; it does not replace testing the selected production font.
Spacing and grid
Use a compact base scale with named layout gaps. Align repeated controls and data columns. Reserve stable dimensions for toolbars, boards, counters, tiles, and rows so state changes do not resize the interface.
Name spacing by relationship instead of reusing one padding value everywhere: page gutter, section gap, panel inset, stack gap, inline control gap, and compact seam. A container's outside margin does not replace its internal inset, and a child's padding does not create a reliable gap between siblings.
When a surface has a visible border, fill, radius, or elevation, verify that its content clears the edge on every side. When peers share a row, column, wrap, or grid, set both row and column gaps explicitly. Preserve some separation after responsive wrapping; do not let controls, cards, labels, or paragraphs stick together at a breakpoint.
Use container constraints, grid tracks, aspect ratios, and min/max sizes to prevent clipping and overlap. Avoid arbitrary values when a nearby token already expresses the relationship.
Model full-bleed paint separately from constrained content. A viewport-wide background should not force its text or controls outside the shared page grid, and a constrained panel should not inherit viewport gutters a second time.
Shape and elevation
Choose one radius family and a small elevation ladder. Operational interfaces usually benefit from restrained radii and borders. Shadows should communicate layering or interaction, not decorate every element.
Icons
Use the installed icon library when it contains the required symbol. Match stroke weight, optical size, and filled versus outline treatment. Icon-only buttons need accessible names, stable square targets, and tooltips when the symbol is unfamiliar.
Do not hand-draw SVG icons when a maintained library has the symbol. Do not use emoji as product controls.