Design system and accessibility

Helm combines quiet operational controls with editorial answers. Use the existing application tokens and UI primitives rather than introducing a separate visual language for each feature.

Color and typography

Light mode uses paper, white surfaces and restrained jade. Dark mode uses charcoal with a violet cast and jade accents. Geist supports controls and reading; Newsreader gives the answer hierarchy its editorial character.

Use semantic status colors with text. A positive or negative amount needs its meaning and currency, not color alone. Financial figures use tabular alignment where comparison matters.

Context belongs beside the number

Include currency, date or period, and what the result represents. Missing history or conversion evidence should remain near the answer. Do not make an unsupported combined number look complete by hiding its note.

Input and focus

Give fields visible labels and actionable errors. Pending actions need clear status and protection against duplicate submission. Provide visible keyboard focus and maintain the dialog’s focus scope.

Nonmodal guidance should be labelled as a region, with an available End or Skip action. It must not cover or intercept the actual control it describes.

Responsive and motion behavior

Allow code and tables to scroll within their content rather than widening the page. Keep small-screen controls usable with safe areas. Use brief coordinated transitions; reduced-motion preferences remove movement and smooth scrolling.

Privacy during transitions

All private components, including portals and animated coaches, obey auth concealment and history restoration. See provider lifecycle and test real mounted states before calling the interaction complete.