Working draft · 17 September 2026

Style guide

Colour, type and usage for VivaLynx. Built for an audience of older adults and their families, which sets a higher accessibility bar than a normal brand system.

Status Typeface and warm secondary are selected but not yet signed off. Out for review with Tim Flynn and Amy Kemmerer. Everything else here is settled.

Colour

Blue and purple are taken from the logo file, logo.svg, which is the canonical source. Where the 2024 style guide printed different values, the logo wins.

Brand

Blue#1474BB4.95:1 · fills, large text

Blue dark#105C947.05:1 AAA · headings, body

Purple#9D499C5.43:1 · primary buttons

Purple dark#833D827.11:1 AAA · text, links

Warm secondary

Amber#C98A1Efills, illustration

Amber border#B27A1A3.43:1 on tint · UI edges

Amber dark#78510D7.04:1 AAA · text, icons

Amber tint#FDF6E8callouts, panels

Neutrals

Ink#1A161317.98:1 · headings on light

Body#2E282314.54:1 · body copy

Muted#60574F7.06:1 AAA · secondary

Panel#FAF7F4section backgrounds

Line#E8E1DAborders, rules

White#FFFFFFpage background

Body text is a warm near-black rather than pure #000000. It still measures 17.98:1, far above AAA, and is easier on the eye over long reading. The greys carry the same warmth, replacing the cool #F5F5F5 and #696969 from the old guide.

States

Success#1E7A4D5.32:1

Warning#B4531A5.01:1

Error#B3261E6.54:1

Info#105C947.05:1 · reuses blue dark

Warning and brand amber sit close together Amber is a brand colour here, so warning orange no longer carries meaning on its own. Every state must be signalled by an icon and a text label, never colour alone. That is a WCAG 1.4.1 requirement regardless, and it is what keeps the two readable side by side.

Type

Literata for headings, Source Sans 3 for body. Both open source under the SIL Open Font License, self-hostable, free for commercial use.

Scale

Role	Face	Size	Weight	Colour
Display	Literata	46px / 1.12	700	Blue dark
H2	Literata	32px / 1.2	600	Blue dark
H3	Literata	24px / 1.25	600	Ink
H4	Source Sans 3	18px / 1.4	600	Ink
Body	Source Sans 3	18px / 1.7	400	Body
Body small	Source Sans 3	16px / 1.65	400	Body
Meta	Source Sans 3	14px / 1.5	400	Muted
Eyebrow	Source Sans 3	12px, .12em tracking, caps	700	Amber dark
Button	Source Sans 3	17px	600	White on purple
Nav	Source Sans 3	17px	600	White on blue

Two changes from the 2024 guide Headings are sentence case, not ALL CAPS. Capitals remove the word shapes readers rely on, which costs the most for exactly this audience. Caps survive only on the eyebrow label, where the string is two or three words and functions as a tag rather than as reading.

Body is 18px, not 16px. A small change that materially helps older readers, and it costs nothing.

Documents

For Word, Google Docs and PDFs, the same two faces:

Role	Face	Size
Title	Literata Bold	22pt
Heading 1	Literata Semibold	16pt
Heading 2	Literata Semibold	13pt
Body	Source Sans 3 Regular	11pt
Caption	Source Sans 3 Regular	9pt

Literata carries an optical size axis that compensates automatically at small sizes. Browsers apply it; Word and Google Docs generally do not, so documents get the default instance. Still readable at 11pt, just not the optimised cut. Word needs the fonts installed on every machine that opens the file. See document sizes.

Usage

Purple carries the primary action. Buttons, the main call to action, the thing you want clicked.

Amber is never a white-text button. White on amber measures 2.94:1 and fails. Amber does tints, borders, icons, illustration and outline buttons.

Blue dark carries headings and long text. The lighter blue is for fills and large display only.

Never signal with colour alone. Every state needs an icon and a label as well.

Target AAA for body text. AA is the legal floor. For this audience the floor is not the goal.

Do not reintroduce all-caps headings. They were in the old guide and they are the single biggest readability cost in it.

Tokens

Copy these into the help centre, the website, or anywhere else. One source of truth.

:root {
  /* brand, from logo.svg */
  --vlx-blue:         #1474BB;
  --vlx-blue-dark:    #105C94;   /* AAA text */
  --vlx-purple:       #9D499C;   /* primary button */
  --vlx-purple-dark:  #833D82;   /* AAA text */

  /* warm secondary */
  --vlx-amber:        #C98A1E;
  --vlx-amber-border: #B27A1A;
  --vlx-amber-dark:   #78510D;   /* AAA text */
  --vlx-amber-tint:   #FDF6E8;

  /* neutrals */
  --vlx-ink:          #1A1613;
  --vlx-body:         #2E2823;
  --vlx-muted:        #60574F;
  --vlx-panel:        #FAF7F4;
  --vlx-line:         #E8E1DA;
  --vlx-white:        #FFFFFF;

  /* states, always paired with an icon and a label */
  --vlx-success:      #1E7A4D;
  --vlx-warning:      #B4531A;
  --vlx-error:        #B3261E;
  --vlx-info:         #105C94;

  /* type */
  --vlx-serif:        Literata, Georgia, serif;
  --vlx-sans:         'Source Sans 3', Arial, sans-serif;
  --vlx-body-size:    18px;
  --vlx-body-leading: 1.7;
}

Contrast ratios are measured against white unless stated otherwise. AA requires 4.5:1 for body text and 3:1 for large text and UI boundaries; AAA requires 7:1. Logo colours read directly from logo.svg on vivalynx.ai.