# Web pages A web page greets the visitor by going straight to what they came for and pointing to a clear next step. ## Fixed and yours to adapt ### Fixed - 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. - One primary action per screen, in interactive orange, and never two orange buttons in the same view. - One h1 per page, and it sits in the hero. - Museo Sans, or Arial as the fallback, in sentence case throughout: headings, buttons, navigation and labels. - 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. - The sender is Aleris: the full logo in a corner, most often top left, with no unit or specialist-area name added. - 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 The heading says what the page is about, in active language from the visitor's point of view. The lead makes the offer concrete with a time, a format or a person. Leave out slogans and words of pride, and say what the reader gets. - **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. ## Reader state Decide what the page leads with from the state the visitor is in. Someone facing an assessment or a procedure needs predictability, control and human contact, and someone who has chosen a health check-up needs a focus on the outcome, signs of quality and low friction. - **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. ## Imagery When a page has a hero image, the reader's state decides which kind it is: a Care image for a page about an assessment or procedure, and a Life image for a service the reader has chosen. All images in one view share an aspect ratio, set by the component: 16:9 for the hero, 3:2 for content images and 1:1 for profile photos. - **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. ## Colour A landing page for patients uses sand generously, petrol as the text colour and orange as an occasional accent, which keeps it calm and accessible. - **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. ## Check before you publish - **Take the five-second test.** A visitor should understand within five seconds what the page is about and what they can do next. - **Count the orange buttons.** There is one primary button on the surface, and other options are secondary buttons or text links. - **Read every button.** Each one is a verb phrase that says what happens when it is clicked, such as "Boka tid". - **Check the heading levels.** The page has one h1, in the hero, and every heading below it is h2 or deeper. - **Read the alt text.** It describes what the image shows on this page, such as a patient with a doctor. - **Strip photo metadata.** Location, camera and time data come off before publishing, because a photo taken at a clinic can carry GPS coordinates. - **Check the contrast.** Text meets 4.5:1 against its background, and buttons and large text meet 3.0:1.