The Reflectal brand, built for the product

Use

• Use the supplied master files. The wordmark is always lowercase with the full stop: reflectal.
• Navy logo on light backgrounds; white logo on navy or dark photography.
• The re icon is the avatar and app icon, for square and rounded tiles, favicons and social.
• Keep clear space around the logo equal to the height of the icon's underline on all sides.
• Minimum width: about 90px on screen for the wordmark, 24px for the icon.

Do not

• Retype or re-set the wordmark in another font.
• Recolour the logo outside navy, white or lime.
• Place the navy logo on a dark background, or the white logo on a light one.
• Stretch, condense, rotate, outline or add shadows.
• Put lime on a light background (see the colour rule).

The lime rule

Electric lime #C3FF0B is never used on light or white backgrounds, in any context: text, icons, fills, charts, borders or tints. It appears only on navy or near-black, where it reaches 12.4:1. On light surfaces use teal for accents and the success green for positive emphasis. As text, lime needs a dark backing; teal needs white or a light backing (teal on navy is only 2.8:1).

Beyond contrast

• Never use colour alone to convey meaning. Pair status colours with an icon or label.
• Visible focus on every interactive element: 3px teal outline, 2px offset.
• Body text 16px+; respect user zoom to 200% without loss of content.
• Hit targets at least 24x24px (AA); aim for 44x44px.
• Honour prefers-reduced-motion; no essential info in motion alone.

Roles

• Trebuchet MS: page titles, section and card headings, display numbers.
• Arial: body copy, buttons, form fields, labels, eyebrows, captions, data.
• Fallback stacks: 'Trebuchet MS', Verdana, Arial, sans-serif and Arial, 'Helvetica Neue', sans-serif.
• Body line-height 1.5 to 1.6; headings 1.2. Body weight 400, headings 700.
• For the highest-legibility frontline contexts, Verdana is an approved alternative for body.

Eyebrow / label

Uppercase Arial bold, letter-spacing about 0.14em, in teal. Used above headings to orient the reader.

Safety made productive

Paragraphs and body

• Body line-height 1.5 to 1.6.
• One clear gap between paragraphs, about 0.8em. No double blank lines, no first-line indent.
• Left-aligned, never justified. Line length about 60 to 75 characters.

Headings and lists

• Heading line-height 1.15, held even when a heading wraps to two lines. Do not add extra leading.
• More space above a heading than below it, so it groups with the text it introduces.
• Lists sit tighter than paragraphs: line-height about 1.45, roughly 0.2em between items.
• Keep bullets short, a few lines at most. If one runs long, split it or move the detail into a sentence.

Links

Inline links use teal with an underline. Underline is not optional: colour alone must not signal a link. Focus shows a 3px teal outline.

Focus indicator

Every interactive element shows a visible focus ring. Tab through this page to see it. Do not remove :focus-visible outlines.

Form fields

Illustration leads the UI

Onboarding, empty states, explainers and everyday screens use illustration. It is consistent, inclusive, fast to load and easy to localise per audience.

Photography proves it

Authentic, un-staged photography of real essential workers is reserved for testimonials, case studies and evidence. Real settings, consent and dignity first. Avoid glossy stock.

Do

• Pair every icon and status colour with a label
• Show privacy and anonymity plainly
• Celebrate progress in small, honest ways
• Co-design and test visuals with each audience

Do not

• Use fear, pressure or dark patterns to drive action
• Let "fun" trivialise sensitive content
• Rely on colour or motion alone to carry meaning
• Lock a single illustration style across every cohort

Always reference

• Any statistic, figure or prevalence claim
• Research findings, studies or evidence claims
• Frameworks, models or standards (for example a hierarchy of controls)
• Direct quotes and paraphrased ideas from a source
• Legislation, codes of practice and regulator guidance

No reference needed

• Common knowledge and widely accepted facts
• Reflectal's own product features or first-party data (label as ours)
• General observations not tied to a specific source

Comment thread

• One shared component on every widget: thread, post box, dated record entries and @ tagging all come from the shared module and behave identically everywhere.
• The tag picker appears only after an @ is typed. It never opens on focus, never automatically, and is never rebuilt inside a new widget. A tagging pop-up appearing where it should not is a defect, however it got there.
• Tags notify the tagged person once, through the bell. Record entries (who changed what, when) sit in the same thread as a light box with dark ink, on light and dark panels alike.
• You can edit and delete your own comments. An edited comment says so; a deleted one goes, rather than leaving a tombstone.
• Any comment can be replied to, and the reply sits indented under the comment it answers, so context is kept instead of the thread running in one flat order.
• The thread scrolls inside its own window and never grows the page. New comments scroll into view.
• A comment box on a dark panel takes the panel's dark surface. A light wrapper carrying light text is the fault that made a thread unreadable on 26 July; contrast is checked in every context a widget renders, not just on white.

Action list and My actions

• Every action has an owner picked from the team list (so it lands in the right My actions view) and a due date; start dates and a timeline toggle where the tool plans over time.
• Links and documents attach as labelled chips. Checklists carry assignees.
• Done actions grey and collapse but stay expandable. Reassignment and date changes log themselves as records.

Meetings widget

• One shared module on Overview, Platform and RPHA; internal meetings hidden from gated partner accounts.
• Owns every visual property of its own markup; host pages cannot restyle it.
• Meeting actions follow the action rules above and land in My actions.

Discussion card

• Raised questions with status, who raised, who is assigned, due date and what it relates to.
• Priority is a single marker with a written meaning; open items count on the dashboard.
• Notes anywhere can be raised to a discussion with one control, carrying their context.

Progress bar and tiles

• One segmented bar per summary: green (done), amber, red inside, with the count beside it (6/6 done, 2/6). Never a bar plus chips repeating the same story.
• Roll-up colour is proportional: green when more than two thirds green, red when at least half red, amber between.
• Tiles click through to their detail, always.
• A summary card whose subject is done (Complete or Continuous improvement) leaves its row, so the live cards spread across the full width. One quiet "Show done" control under the row brings them back, minimised, at the end of the row; selecting a minimised card expands it, faded. The word in these controls is "done", never "finished".

Data panel (statistics and results)

• The collapsed line carries the actual numbers; expanding shows the full table and history over time with improvement and decline marked.
• Numbers carry their date and source; anything the source does not state reads as open, never guessed. Research marking is mirrored verbatim.
• A plain-language guide ("What these numbers mean") sits beside any statistical display.

Pop-up (modal)

• One standard pop-up: centred card, title, fields, its own Save and Cancel. It closes only from its own controls, never by itself.
• Never a native browser pop-up (alert, confirm, prompt): confirmation and errors use the standard pop-up and toast.
• On a phone the pop-up caps to the screen and field grids collapse to one column.

Toast and errors

• One toast style suite-wide. A failed save or delete names the real error; nothing fails silently.
• Lists never show items that do not really exist in the shared database.

Notes panel and links list

• Open notes with a Save button and a quiet "Saved" confirmation; notes can be raised to a discussion.
• Research papers and links are label plus URL rows, shown as chips where referenced.

Guide line

• Every widget carries a short guide line (what it is, what you do with it, what it feeds) unless truly self-evident.
• Defaults live in the page; Yhana and Trent reword them in place via the pencil and the edit saves centrally for everyone.

Filter toolbar

• Filters sit in one toolbar at the top of the page (stage, category, collapse all), never scattered per card.
• Filter labels use the same vocabulary as the pills they filter.

Tables and lists in cards

• Widget lists scroll inside their card rather than growing the page.
• Wide tables scroll sideways inside the card on small screens; the card never breaks the page layout.

Always

• Every colour comes from reflectal.brand.js. If no suitable colour exists, raise it and add one to this guide first.
• Status colour fills the whole element (row, header, tile) using the standard tint pair, with the written label alongside. Colour is never the only signal.
• Colour marks attention only: red means act, amber means watch. Healthy and finished items stay plain, and done states fade (muted stage pills, greyed collapsed cards).
• Open and selected surfaces are teal depth 4 #E0EDF1 with a teal edge, on every tool.
• Contrast is verified numerically (AA) in every context the element renders: white cards, dark navy panels, tinted rows.

Never

• No thin edge stripes, no hand-blended pale variants, no colour that is technically on brand but indistinguishable from white.
• Green never means anything but good, in any state, including hover, open and selected.
• No walls of colour: if most of a list is highlighted, the coding has failed. A loud pill repeated on ninety rows is noise, not a signal.
• No duplicated signals: one element tells one story. A flag icon beside a red row says the same thing twice; keep the colour, drop the flag.
• Never re-derive marking that represents someone's judgment. A researcher's red or a system status is copied from the source exactly, not recalculated from a rule of our own.