# Digital products Every Aleris interface sits on one of two surface modes: communicative, where Aleris tells and guides, or instrumental, where the person works, books or monitors. ## Fixed and yours to adapt ### Fixed - **The page is sand.** sand-100 on communicative surfaces and sand-50 on instrumental ones, with white cards and sections layered on top. - **Every value comes from the token file.** No hex colours, no pixel values for spacing and no raw Tailwind colour classes in product code. - **One primary action per screen, in interactive orange.** The brand orange is for accent, decoration and print, because white text on it fails AA. - **Contrast meets WCAG AA, and no text is below 14px.** That is 4.5:1 for normal text and 3.0:1 for large text and interface components. - **Museo Sans at 500 or 700.** The typeface has no 400 weight, so the browser synthesises one. - **Size animates only when the user caused it.** One contained element at a time, within the moderate duration, and the reduced-motion setting turns all animation off. - **Touch targets of at least 44px on anything a patient touches.** The same goes for anything that could be used on a touchscreen. - **The app icon is the symbol in sand on petrol.** The same holds for a browser tab or a profile image where the symbol stands for Aleris, and the smallest sizes use a variant generated from the mark, not one drawn by hand. ### Yours to adapt - **Spacing, cards and columns, by mode.** Communicative surfaces get generous spacing, cards for content and one reading column; instrumental surfaces get tighter spacing, optional cards and up to all twelve columns. - **The framework.** The tokens are plain CSS custom properties, so any framework can sit on top of them as a bridge. - **Values Baseline does not carry.** Put them in a second stylesheet that loads after the Aleris file, so that re-vendoring stays a file replacement instead of a merge. - **Target size on a dense desktop tool.** A work table or admin toolbar used with a mouse or trackpad can go down to 24px. - **Table density.** Compact, default or comfortable, and on work tables a density the user chooses and keeps is what to build toward. - **Transition length.** A little longer and more expressive on communicative surfaces, and fast by default on instrumental ones. ## Digital products Choose the surface mode from what the person is doing on the screen, not from who they are, and keep it from the first step of a flow to the last. If a product mixes audiences, such as a clinician dashboard with a patient-facing report view, pick the dominant surface and treat the other view as a known divergence with a note. - **Do · A "Continue" button that, when clicked, says what is still missing.** On patient-facing screens, explaining on click tells the person what the step needs. - **Don't · A greyed-out "Continue" button.** A disabled button dissolves into the page and gives no reason why it is unavailable. - **Do · "Your details are saved" shown inline, under the form.** Inline feedback gives the same information without taking control away from the person. - **Don't · A modal that opens to confirm the save.** A modal interrupts the flow and can make the person wonder whether they did something wrong. ## Colour Interactive orange is for light surfaces. On a petrol section the primary action turns into a white button with petrol text, and on the warm section an action takes the secondary form, because orange-600 measures 2.82:1 against orange-300. - **Do · A "Mark as done" action as a petrol button with a check icon.** The check icon and the verb carry the completion. - **Don't · A green "Mark as done" button.** Confirm green marks completion as a dot, badge or chip, and white text on it is 4.23:1, below the floor. - **Do · A form error with an icon and a line of text.** The icon and the words carry the meaning when colour is removed. - **Don't · A field that turns red and says nothing.** Red and green are the pair that collapses under red–green colour vision deficiency. ## Typography Set type with the typography tokens rather than pixel sizes, in regular (500) or bold (700), and use the lead style once per section, straight after the heading. - **Do · A dense dashboard in the same type sizes as the rest of the product.** Density comes from how the layout is used and from the information hierarchy. - **Don't · Smaller type to fit more onto an admin screen.** Surface temperature does not change type size, which is the reader's to set. - **Do · A column of numbers aligned right.** Museo Sans has no tabular figures, so right-alignment is what lines the digits up. - **Don't · Tabular figures switched on for Museo Sans.** The setting changes nothing, and nothing tells you so. ## Voice Length follows the situation: two to four words for a button or label, one or two sentences for an error message, and one sentence for a confirmation. A product and its chat inform, navigate and refer. They explain processes, timelines and logistics, and they do not diagnose, recommend treatment or interpret test results. - **Do · "Booked. You will get a confirmation by email."** It says what happened and nothing more. - **Don't · "Thank you, your booking has been registered in our system."** It thanks the person and repeats what they already know they did. - **Do · "You have no messages right now. Messages from your care team appear here when they send them."** It says why the screen is empty and what happens next. - **Don't · "No messages."** It states that the screen is empty and stops there. ## Check before you ship - **Every value traces to a token.** No hex colour, pixel spacing or raw Tailwind colour class is left in the product code. - **One orange button per view.** Interactive orange marks the one primary action on the screen. - **Keyboard focus shows on every ground.** Buttons draw a dual ring, so one of the two rings contrasts wherever the button sits. - **Text at 200% on a 320px screen causes no horizontal scroll.** Button labels wrap to a second line, and rows of buttons wrap too. - **Error and success can be told apart with colour removed.** Each carries its meaning in an icon and in words. - **Reduced motion turns every animation off.** The reduced-motion setting disables all of it. - **The fonts load from an Aleris domain.** An app on a platform's default hostname gets Arial, with no error to tell you.