<!-- Generated by ExtractVibe — https://extractvibe.com/brand/alzheimers.org.uk -->
<!-- Extracted: 2026-05-08T10:21:26.848Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Alzheimer's Society"
description: "The Alzheimer's Society projects a serious, accessible, and authoritative presence, reflecting its critical mission. Its visual and verbal communication aims to be clear and direct, fostering trust and encouraging engagement for a vital cause."
colors:
  primary: "#ffc800"
  secondary: "#ffffff"
  tertiary: "#2d5eb5"
  neutral: "#002877"
  surface: "#ffffff"
  on-surface: "#000000"
  on-surface-secondary: "#002877"
  link: "#002877"
typography:
  headline-lg:
    fontFamily: "ASTTCommons"
    fontSize: "47.5px"
    fontWeight: "800"
    lineHeight: "53.4375px"
    letterSpacing: "0.1px"
  headline-md:
    fontFamily: "ASTTCommons"
    fontSize: "16px"
    fontWeight: "700"
    lineHeight: "20.8px"
  headline-sm:
    fontFamily: "ASTTCommons"
    fontSize: "14px"
    fontWeight: "600"
    lineHeight: "21px"
  body-md:
    fontFamily: "ASTTCommons"
    fontSize: "19px"
    fontWeight: "600"
    lineHeight: "23.75px"
    letterSpacing: "0.1px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#ffc800"
    textColor: "#002877"
    rounded: "0px"
    padding: "14.25px 38px"
    fontSize: "19px"
    fontWeight: "800"
    borderColor: "#ffffff"
    borderWidth: "1px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#207eef"
    rounded: "0px"
    padding: "14.25px 28.5px"
    fontSize: "28.5px"
    fontWeight: "800"
    borderColor: "#207eef"
  button-ghost:
    textColor: "#000000"
    rounded: "0px"
    padding: "0px"
    fontSize: "19px"
    fontWeight: "600"
    borderColor: "#000000"
---

# Alzheimer's Society — Design System

## Overview

The Alzheimer's Society design system embodies the archetypes of The Caregiver and The Sage. It projects a serious, accessible, and authoritative presence, akin to established charitable organizations like Cancer Research UK, British Heart Foundation, NSPCC, and Macmillan Cancer Support. This design language prioritizes clarity and directness, fostering trust and encouraging engagement for its vital mission. Every visual and verbal element serves to communicate reliability and support, ensuring users feel understood and empowered.

The design explicitly avoids frivolous or overly decorative elements. It is not playful, experimental, or trend-driven. Instead, it maintains a steadfast focus on utility, legibility, and emotional resonance appropriate for a sensitive and critical cause. The aesthetic is clean, purposeful, and reassuring, designed to minimize cognitive load and maximize the impact of its core message of support and information. This approach guarantees that the brand's serious and trustworthy nature is consistently communicated across all touchpoints.

**Key characteristics:**

- Vibe — serious, accessible, authoritative, supportive, direct, trustworthy
- Archetypes — The Caregiver, The Sage
- Comparable to — Cancer Research UK, British Heart Foundation, NSPCC, Macmillan Cancer Support
- Design era — functional-contemporary
- Emotional tone — serious-supportive
- Target audience — Individuals affected by dementia, their caregivers, healthcare professionals, researchers, and the general public interested in supporting the cause.
- Visual energy — 6/10 (moderate)

## Colors

The color palette is anchored by a single primary color, #ffc800. This bright, yet not overwhelming, hue signifies hope and visibility, cutting through visual noise without being ostentatious. The dominant use of #ffffff as a surface color reinforces clarity, accessibility, and a sense of cleanliness. This stark contrast ensures high legibility and a professional, uncluttered aesthetic, aligning with the brand's direct and trustworthy character. The limited palette prevents visual distraction, focusing user attention on critical information.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#ffc800` | Amber |
| secondary | `#ffffff` | White |
| accent / tertiary | `#2d5eb5` | Steel Blue |
| background | `#ffffff` | White |
| text | `#000000` | Black |
| secondary text | `#002877` | Midnight Blue |
| link | `#002877` | Midnight Blue |
| muted | `#002877` | Midnight Blue |

## Typography

The typography system utilizes ASTTCommons and fontello. ASTTCommons provides a robust, legible, and professional base, ensuring clarity and readability for all textual content. Its serious yet accessible nature supports the brand's authoritative and trustworthy voice. Fontello is reserved for iconography, providing clear, universally understood visual cues that enhance navigation and information recall without adding visual clutter. The hierarchy is direct and functional, prioritizing immediate comprehension and guiding users through content with minimal effort, reflecting the brand's commitment to accessibility and direct communication.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| ASTTCommons | body | self-hosted | 400, 600, 800 |
| ASTTCommons | heading | self-hosted | 600, 700, 800 |
| fontello | body | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Heading 2 | ASTTCommons | 47.5px | 800 | 53.4375px | 0.1px |
| Heading 3 | ASTTCommons | 16px | 700 | 20.8px | — |
| Heading 4 | ASTTCommons | 14px | 600 | 21px | — |
| Body | ASTTCommons | 19px | 600 | 23.75px | 0.1px |

### Conventions

- Heading case — title-case
- Body line-height — 23.75px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| navigation | `rgba(0, 0, 0, 0.3) 0px 16.0001px 16.0001px -16.0001px` |

### Gradients

- `linear-gradient(91.99deg, rgba(0, 0, 0, 0.5) 62.14%, rgba(0, 0, 0, 0) 98.25%)`

## Components

### Buttons

**Primary**

- Background — `#ffc800`
- Text — `#002877`
- Radius — `0px`
- Padding — `14.25px 38px`
- Font size — `19px`
- Font weight — `800`
- Border — `1px solid #ffffff`
- Sample copy — "Skip to main content"

**Secondary**

- Background — `#ffffff`
- Text — `#207eef`
- Radius — `0px`
- Padding — `14.25px 28.5px`
- Font size — `28.5px`
- Font weight — `800`
- Border — ` solid #207eef`
- Sample copy — "See menu"

**Ghost**

- Text — `#000000`
- Radius — `0px`
- Padding — `0px`
- Font size — `19px`
- Font weight — `600`
- Border — ` solid #000000`
- Sample copy — "Open submenu (
              About dementia
              
                
    "

## Do's and Don'ts

### Do

- Utilize ASTTCommons for all body text at weights 400, 600, or 800, ensuring a line-height of 23.75px for readability.
- Apply ASTTCommons for all headings, specifically using weights 600, 700, or 800, and always render them in title-case.
- Primary call-to-action buttons must use a background of `#ffc800` with text color `#002877`, featuring a `0px` border-radius and padding of `14.25px 38px`.
- Secondary buttons should have a `#ffffff` background, `#207eef` text, a `0px` border-radius, and a `#207eef` border, with padding of `14.25px 28.5px`.
- Ghost buttons should have `#000000` text, no background, `0px` border-radius, and no padding, used for less prominent actions or navigation.
- Employ the primary brand color `#ffc800` for key highlights and interactive elements, while `#2d5eb5` serves as an accent for specific visual emphasis.
- Apply a subtle shadow effect `rgba(0, 0, 0, 0.3) 0px 16.0001px 16.0001px -16.0001px` specifically for navigation elements to provide depth.
- Incorporate linear gradients with the pattern `linear-gradient(91.99deg, rgba(0, 0, 0, 0.5) 62.14%, rgba(0, 0, 0, 0) 98.25%)` for background overlays or visual interest where appropriate.

### Don't

- Avoid using emojis in any brand copy; the brand maintains a serious and direct communication style.
- Do not use exclamations frequently; they are rare and should be reserved for exceptional circumstances to maintain a serious tone.
- Do not apply rounded corners to buttons or other interactive elements; all buttons and key UI elements feature a `0px` border-radius, indicating sharp, defined edges.
- Do not use highly technical jargon without clear explanation; the brand prioritizes accessibility in its language.
- Avoid playful or overly casual language; the brand's tone is serious and focused on its mission.
- Do not introduce additional shadow styles beyond the specified navigation shadow; maintain a clean and functional aesthetic.
- Do not deviate from the established color palette of `#ffc800`, `#ffffff`, `#2d5eb5`, `#000000` for primary UI elements.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 3/10 | formal |
| Playful ↔ Serious | 9/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 1/10 | respectful |
| Technical ↔ Accessible | 9/10 | accessible |

### Copywriting style

- Avg. sentence length — 8 words
- Vocabulary — moderate
- Jargon — some
- CTA style — action-oriented imperative verbs and direct calls for support/engagement

### Sample copy

> Alzheimer’s Society is the UK’s leading dementia charity.

> We give vital support to those who need it, fund groundbreaking research, and campaign to improve experiences.

> It will take a society to beat dementia.

> Join the Forget Me Not Appeal today

> Get dementia support

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | color | png | [link](https://extractvibe.com/api/assets/brands/alzheimers.org.uk/logo-4.png) | 80% |
| primary | — | jpg | [link](https://extractvibe.com/api/assets/brands/alzheimers.org.uk/logo-7.jpg) | 80% |
| primary | color | png | [link](https://extractvibe.com/api/assets/brands/alzheimers.org.uk/logo-5.png) | 80% |
| secondary | — | png | [link](https://extractvibe.com/api/assets/brands/alzheimers.org.uk/logo-6.png) | 80% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/alzheimers.org.uk/logo-2.png) | 78% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/alzheimers.org.uk/logo-1.png) | 62% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/alzheimers.org.uk/logo-0.png) | 62% |
| favicon | — | ico | [link](https://extractvibe.com/api/assets/brands/alzheimers.org.uk/logo-3.ico) | 62% |

## Sources

- Official brand guidelines — https://www.alzheimers.org.uk/get-support/publications-and-factsheets/dementia-together/stronger-brand-help-hope-more-people-dementia?page
- Live brand page — https://extractvibe.com/brand/alzheimers.org.uk
- Raw JSON — https://extractvibe.com/api/brand/alzheimers.org.uk
- DESIGN.md (this file) — https://extractvibe.com/api/brand/alzheimers.org.uk/design.md
- Extracted — 2026-05-08T10:21:26.848Z
- Generator — ExtractVibe vv1
- Quality score — 100/100