Digital products
Full guidance
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.
Asked about digital products
- ColourCan I put an orange button on a petrol background?No. On petrol, the primary action turns white, with petrol text.
- ColourCan the page be white?No. The page is always sand — sand-100 where people read, sand-50 where they work — and white sections and cards sit on top of it.
- ColourHow many orange buttons can a screen have?One. Other actions are secondary buttons or text links.
- IconsCan I use an icon that isn't on the allowlist, like a back arrow or a payment icon?Yes. Any Font Awesome Pro icon may be used, except weapons, logos and trademarks, religious symbols and anything aggressive or alarmist.
- IconsCan an icon use a gradient?Yes, the petrol gradient, on white, sand and light petrol grounds, and never on light orange or petrol; no other gradient is used on icons.
- LogoCan the browser-tab icon be the symbol on its own, without the wordmark?Yes: in a browser tab, an app icon or a profile image the symbol stands alone, in sand on petrol.
- VoiceCan a message or notification be sent from our unit or our app, or is the sender always Aleris?The sender is always Aleris, including the sender name on a notification, and never a unit, an app or a sub-brand.
- VoiceCan I use an exclamation mark?No. Leave them out; the warmth in an Aleris text comes from having thought through what the reader needs.
- VoiceDo we write du or ni to patients?Du, the singular "you", and never "patienten", the patient.
- ImageryWhich image rule applies to a screen patients use to get something done, like a weekly check-in?The screen is a working surface, so an image may sit inside a component that needs one, but it never takes the hero position at the top of the screen.
- ImageryWhat kind of image shows a patient how to do something, like giving an injection?An instructional image, which the imagery rules do not govern: it is decided case by case together with marketing.
- Reader stateWhich mode applies to a screen people return to every week, where nothing is pending?Balanced: the person is partway through a service and wants it to go smoothly, so give a clear purpose, feedback and managed expectations, and friction only where it earns its place.
- Reader stateWhen should a product be warm and when should it be efficient?The voice is warm everywhere; what changes is the surface. Where Aleris tells, guides or welcomes, the surface is communicative, with generous spacing and cards on sand-100. Where the person works, books or monitors, it is instrumental, tighter, on sand-50.
- Digital productsIs 44px the minimum touch target everywhere, or can a dense desktop table go smaller?A dense desktop tool used with a mouse or trackpad can go down to 24×24px; anything a patient touches, or anything that could be used on a touchscreen, keeps 44px.
- Digital productsHow do I get the Aleris tokens into my project?Fetch aleris-tokens.css into the project, link the hosted font stylesheet rather than copying the font files, and reference the semantic tokens in your code instead of typing hex or pixel values.
- StoryWhat may I change for my channel, and what has to stay the same?Keep the character, the palette, the typeface and the hard rules the same. Adapt the register, the order of information, the colour distribution and the level of detail to the channel and the reader.
- Digital productsWhy does Museo Sans fall back to Arial when our app is deployed?The fonts are served only to pages on aleris.ai, aleris.se, aleris.no or aleris.dk and their subdomains, and to localhost, so an app on a platform's default hostname gets Arial with no error; serve it from an Aleris domain.
Check before you ship
Where this comes from
Full guidance Accepted
This route draws on these concept pages, and each holds the full rules and their reasons.