Web pages

Fixed and yours to adapt

Fixed

1. 1

   The page background is sand-100, and a white or coloured section is a layer on top of it, even when it fills the screen

2. 2

   One primary action per screen, in interactive orange, and never two orange buttons in the same view

3. 3

   One h1 per page, and it sits in the hero

4. 4

   Museo Sans, or Arial as the fallback, in sentence case throughout: headings, buttons, navigation and labels

5. 5

   Contrast meets WCAG AA, 4.5:1 for normal text and 3.0:1 for large text and interface components, and no text is below 14px

6. 6

   The sender is Aleris: the full logo in a corner, most often top left, with no unit or specialist-area name added

7. 7

   Anything a visitor can tap is at least 44px, because anything a patient touches keeps that size

Yours to adapt

• Whether the hero has an image. A hero without one is the default, and an image adds value when it is relevant and well produced

• Whether the hero has a lead, which is optional on short pages, and whether it carries secondary actions beside the one primary

• Which section colours the page uses: white, light petrol, light orange, and petrol for the one strong section on the page

• How much the page explains. The visitor could be anyone, so a web page explains in full what a text message says in one sentence

• The register of the images: patient pages lead with reassurance and human contact, and partner pages can show more of the work and the competence behind it

• The environments and faces in the images, which reflect the clinic a patient will meet in their own country

Voice

• Do

  A hero that reads "Meet a specialist who has time to listen", with one button, "Book an appointment"

  It goes straight to the point, and there is one action to take.

• Don't

  A hero that reads "Sweden's leading private care provider", with "Read more" and "Book an appointment" as equal buttons

  Words of pride say nothing about what the reader gets, and two equal actions leave no clear next step.

More on voice

Reader state

• Do

  A page about a cardiac assessment that opens with what happens, step by step, and closes with a way to reach a person

  Predictability eases uncertainty, and the reader knows a human is available.

• Don't

  A health check-up page that leads with risks

  Risk messaging undermines the sense of agency this reader came with.

More on reader state

Imagery

• Do

  A Care image as the hero on a page about a cardiac assessment, with a portrait of the person the patient will meet further down

  Competence and a real person answer the patient's uncertainty.

• Don't

  A Care image as the hero on a health check-up page

  It could signal to the reader that something is wrong.

More on imagery

Colour

• Do

  A white button with petrol text on a petrol section

  On petrol the primary action inverts, which keeps its contrast.

• Don't

  An orange button on a petrol section

  Orange on petrol reads 2.27:1, below the 3:1 a component needs against the surface behind it.

More on colour

Asked about web pages

• 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.
• ColourCan I use gradients?Yes, sparingly: petrol or orange, two steps at most, on backgrounds and visual elements, never in charts. Only the petrol gradient may fill text, in h1 and h2, and only the petrol gradient may colour an icon, on white, sand or light petrol.
• 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.
• VoiceDo we write du or ni to patients?Du, the singular "you", and never "patienten", the patient.
• ImageryWhat do we need before we publish a photo of a patient or a colleague?Consent and rights follow the Aleris Group Image Guidelines. Two things the brand pages add: in Denmark written consent is required for all social media use, and location, camera and time data are stripped from the photo before it is published.
• 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.
• 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.

Check before you publish

• Take the five-second testA visitor should understand within five seconds what the page is about and what they can do next.
• Count the orange buttonsThere is one primary button on the surface, and other options are secondary buttons or text links.
• Read every buttonEach one is a verb phrase that says what happens when it is clicked, such as "Boka tid".
• Check the heading levelsThe page has one h1, in the hero, and every heading below it is h2 or deeper.
• Read the alt textIt describes what the image shows on this page, such as a patient with a doctor.
• Strip photo metadataLocation, camera and time data come off before publishing, because a photo taken at a clinic can carry GPS coordinates.
• Check the contrastText meets 4.5:1 against its background, and buttons and large text meet 3.0:1.

Where this comes from