Components

The system deliberately has a small, controlled library. Every component must solve a real user need and carry the same safety and access responsibilities wherever it appears.

Version: 4.0
Status: Public standard

The first release contains the twelve essential components below. Header and safety controls are global; the remaining components create calm, recognisable content paths without a card-heavy dashboard.

Private guided pathway

Status: Reference implementation — project approved

Component record

Purpose: Help someone move from an uncertain situation to a small, prioritised set of safer routes without asking for their story or identity.
When to use: When a visitor recognises that something may be wrong but does not yet know which issue, right, guide or support route fits.
When not to use: Do not collect names, contact details, locations, narrative text, uploads or unnecessary identifying details. Do not diagnose, score danger or promise an outcome.
Anatomy: Immediate-help interruption before questions
Six short, broad-choice steps
Visible progress with back and edit controls
Prioritised first step, safety notes and existing site routes
Clear state, print warning and no answer-specific prefetch
Variants: Self, another adult, child, older woman, institution and unsure; immediate danger interrupts the normal sequence.
Content rules: Use recognition language, not interrogation. Every result preserves agency, says the harm is not the person's fault and distinguishes general information from case-specific legal advice.
Example: I am supporting a child → danger is not immediate → unsafe touch and online contact → understand what this is → child help, safe adult support and relevant guidance first.
Child considerations: Show child help before disclosure prompts. Never require a child to write or retell what happened.
Older-user considerations: Prioritise phone and in-person support, financial agency, disability access and the older woman's own decisions.
Accessibility behaviour: Use native radio buttons and checkboxes, semantic fieldsets, step-heading focus, inline errors, keyboard-operable editing, 44px targets and a useful no-JavaScript route.
Safety risks: Keep answers only in current React memory; never place them in storage, cookies, analytics, URLs, network requests or server logs. Reset on quick exit, page leave and browser-history restoration.
Responsive behaviour: One reading column and full-width choices on small screens; no horizontal step rail, fixed-height panel or sticky action bar.
Code: pathways/guided-situation-pathway, lib/pathways/guided and the pure guided-engine. Safety precedence is immediate danger, monitored-device safety, child safeguarding, older-woman access, supporter guidance, then the visitor's first goal. Age safeguards enter each section before result caps. Result links disable prefetch because destinations can reveal inferred choices; the engine has a complete goal, precedence, privacy-state and child-overlay test matrix
Figma component
Research evidence: Test comprehension, perceived privacy, keyboard and screen-reader order, child safeguarding, older-woman access and whether first steps feel achievable.
Change history: v1.1 — private in-memory pathway added to the canonical situations page, with a deterministic tested ranking engine and protected child and older-woman overlays.

Private Safety Plan Studio

Status: Reference implementation — project approved

Component record

Purpose: Turn a few broad, private choices into a short safety sequence that respects agency, changes with risk and remains useful when money, housing, children, health or device access are constrained.
When to use: When someone wants to prepare for harm, reduce immediate exposure, coordinate practical essentials or support another person without writing a personal account.
When not to use: Do not use the Studio as a danger score, risk prediction, diagnosis, police report, legal advice service or substitute for emergency help. The separate safety planning guide is for reading; the Studio is for building a prioritised sequence.
Anatomy: Immediate-danger and urgent-health interruption
Role, risk, situation, access, needs and barriers
One prioritised first action
Now, today, prepare and ongoing action groups
Barrier adjustments, words to use and matched services
Review triggers, cautious print route and complete reset
Variants: Self, young person, another adult, child or unsure; immediate danger, urgent medical need and child danger override ordinary ranking before monitored-device and access safeguards.
Content rules: Use concrete actions with a reason and any material caution. Keep choices broad, never ask who caused harm, and distinguish emergency action, practical preparation, service contact and deeper reading.
Example: Device may be monitored → child may be at risk → needs transport and documents → child help and safer-device action first, then a backup journey and safe copies without delaying immediate safety.
Child considerations: Child danger always enters before planning detail. Do not ask a child to describe abuse; give 1098, a safer adult route and disclosure guidance without repeated questioning.
Older-user considerations: Treat the older woman as the decision-maker. Include care dependence, medicine, mobility, hearing, housing, property and phone or in-person alternatives without assuming incapacity.
Accessibility behaviour: Use native fieldsets, radios and checkboxes; announce progress and errors; move focus to each step heading; preserve keyboard editing; meet 44px targets; honour reduced motion; and keep print output in reading order.
Safety risks: Answers live only in current-page memory: no account, storage, cookie, analytics event, URL parameter, network request or server log. Reset on Quick exit, page leave and history restoration. Disable answer-specific link prefetch and warn before print or saving.
Responsive behaviour: Use one calm reading column on phones, a compact vertical progress list and full-width choices. Results stay in editorial rows; never use a wide dashboard, horizontal comparison table or fixed action bar.
Code: safety-plan/private-safety-plan-studio, safety-plan/safety-plan-studio-page and lib/safety-plan. A pure deterministic engine applies urgent-safety precedence, ranks relevant actions and services, caps each timeframe and returns fresh data. English and Hindi must keep exact structural ID parity and the engine requires precedence, reachability, cap, immutability and all-valid-state tests
Figma component
Research evidence: Test whether the first action is feasible under surveillance, disability, language, poverty, rural transport, care dependence and child-safeguarding conditions; test perceived privacy before public release.
Change history: v1.0 — dedicated bilingual private studio added alongside, but clearly distinct from, the long-form safety planning guide.

Body safety lesson builder

Status: Reference implementation — project approved

Component record

Purpose: Turn one safeguarding standard into a practical, age-appropriate lesson for a family, school or college without collecting a learner's story.
When to use: For planned body-safety, consent, online-grooming and help-seeking education from early childhood through college, with an immediate response route before teaching content.
When not to use: Do not ask for a real disclosure, use frightening tests, make a child demonstrate resistance, imply that ‘no, go, tell’ prevents abuse, or use the builder instead of responding to an active concern.
Anatomy: Immediate child-safety interruption
Age, setting and duration choices
Timed five-part session sequence
Teaching language and low-pressure practice
Preparation, disclosure response, follow-up and print route
Variants: Ages 3–5, 6–9, 10–13, 14–17 and 18+; family, school and college settings; 10-, 30- and 60-minute plans. Only developmentally suitable setting choices appear.
Content rules: Teach safe, unsafe and confusing behaviour—not ‘bad touch’ alone. Include familiar and powerful people, necessary care, secrets, gifts, peer conduct, consent, digital pressure, grooming and more than one route to help. Put prevention responsibility on adults and institutions.
Example: Ages 10–13 · School · 30 minutes → calm opening, three teaching ideas, fictional practice, a three-place help map, closing reassurance and a prepared disclosure route.
Child considerations: Never require public participation or a personal account. A child may listen, pass, communicate another way or leave with a safe adult. A disclosure stops the lesson sequence and starts the safeguarding response.
Older-user considerations: Adults and older relatives may use the family plan as facilitators; instructions remain direct, readable and printable, with no specialist teaching jargon required.
Accessibility behaviour: Use native radio buttons and fieldsets, a live plan summary, reading-order updates, full keyboard operation, visible focus, 44px targets, reduced-motion support and a linear print layout.
Safety risks: Keep choices only in current React memory and clear them on quick exit, page leave and history restoration. Never request names, accounts, locations, narratives or evidence. Show 112, 1098 and the disclosure guide before the builder.
Responsive behaviour: Choices form one readable column on small screens and three independent ruled columns on wide screens. The generated plan stays linear; there is no horizontal carousel, comparison table, fixed-height region or sticky action bar.
Code: body-safety/body-safety-lesson-builder, lib/body-safety/content and the pure lesson-engine. The engine normalises invalid age-setting combinations, calculates every five-phase timetable, returns fresh data and is tested across both languages and every valid configuration
Figma component
Research evidence: Test facilitator comprehension, child comfort, non-verbal participation, Hindi-first delivery, disability access, institutional escalation and whether printed plans can be stored safely.
Change history: v1.0 — bilingual, in-memory lesson system with five age bands, three settings, three durations, deterministic tests, disclosure interruption and source record.

Site header

Status: Test with priority audiences

Component record

Purpose: Give every visitor an immediate, calm route to the main areas without pushing content below an oversized masthead.
When to use: At the top of every page.
When not to use: Campaign slogans, stacked calls to action or emergency styling on ordinary pages.
Anatomy: Locale-specific Equal Threshold logo lockup
Home plus five primary areas, with an Understand subnavigation
Search, language, explicit 18 / 20 / 22 text sizes and Get help
Contextual Emergency 112 and Quick exit
Variants: 64px masthead plus 48px wide-screen navigation; one compact row on ordinary mobile pages and one additional safety row only when risk warrants it.
Content rules: Use full language labels where space allows; retain clear accessible names at the smallest width.
Example: Home · Understand · Rights and law · Safer action · Support someone · Change institutions
Child considerations: Do not make children identify a legal category to find help.
Older-user considerations: Keep controls visible, named and at least 44px tall.
Accessibility behaviour: Landmark navigation, visible focus, 44px targets, Escape support, focus containment, scroll locking and focus restoration in the mobile sheet.
Safety risks: Get help remains prominent. Emergency 112 and Quick exit appear only on privacy-sensitive routes, stay visible outside the collapsed menu, and state that exit cannot erase history.
Responsive behaviour: Collapse primary links into a labelled menu; show its visible word label where width permits and retain an explicit accessible name at the smallest width.
Code: site shell plus central privacy-sensitive route policy
Figma component: global/header component.
Research evidence: Test navigation comprehension with Hindi-first and low-digital-literacy users.
Change history: v4.1 — Equal Threshold identity, an explicit Home route and preserved compact, route-aware navigation.

Contextual safety controls

Status: Test with priority audiences

Component record

Purpose: Make urgent help and an appropriate quick exit reachable without creating alarm or extra header height everywhere.
When to use: Only on routes where the browsing intent may itself create privacy or retaliation risk.
When not to use: Home, positive campaigns, indexes and ordinary learning pages without a researched need.
Anatomy: Emergency 112 route
Quick exit
Honest history limitation
Variants: Integrated into the desktop masthead; a compact 44px row below the mobile masthead.
Content rules: Name the action, neutral destination and inability to erase history honestly.
Example: Emergency 112 · Quick exit · History is not erased
Child considerations: Child help must be shown before any disclosure request.
Older-user considerations: Write phone numbers clearly and show text on every call control.
Accessibility behaviour: Controls meet 44×44px, use literal labels and retain working hrefs without JavaScript.
Safety risks: Quick exit uses same-tab replacement to a neutral non-personalised page and never promises to erase history.
Responsive behaviour: Keep Emergency 112, Get help and Quick exit visible outside the collapsed navigation on sensitive mobile routes.
Code: site shell plus privacy-sensitive route policy
Figma component: global/contextual-safety-controls.
Research evidence: Validate route policy and placement with survivors and assistive-technology users.
Change history: v4.0 — integrated desktop controls, honest history language and a risk-based mobile row.

Quick exit

Status: Test with priority audiences

Component record

Purpose: Replace a sensitive page rapidly with a neutral destination in the same tab.
When to use: On pages where discovery may create danger.
When not to use: As a dramatic brand feature or a claim of complete digital safety.
Anatomy: Visible action label
Neutral destination
Honest limitation notice
Variants: Visible control plus documented keyboard and non-JavaScript route.
Content rules: Say “Quick exit”, not “erase evidence” or “be invisible”.
Example: Quick exit — opens a neutral page. It cannot erase browser history.
Child considerations: Never imply that a child must hide a disclosure from every adult.
Older-user considerations: Use a literal label and do not rely on Escape alone.
Accessibility behaviour: Accessible name, visible focus and an equivalent non-JavaScript route.
Safety risks: Do not retain sensitive form data after activation.
Responsive behaviour: Stays discoverable while scrolling on risk pages.
Code: safety/quick-exit
Figma component: safety/quick-exit.
Research evidence: Adapt a researched exit pattern; test behaviour, not just appearance.
Change history: v1.0 — no confirmation dialog.

Page introduction

Status: Reference implementation — validation pending

Component record

Purpose: Name the subject, orient the visitor and offer no more than two immediate actions.
When to use: At the beginning of every content page.
When not to use: Full-screen slogans, decorative labels or lengthy background before help.
Anatomy: Breadcrumb
Direct H1
Two-sentence summary
Up to two actions
Variants: Care, learning and movement temperature.
Content rules: Use subject titles such as “Domestic violence and control”, not campaign copy.
Example: Domestic violence and control. Understand what this can look like and consider safer next steps.
Child considerations: Lead with reassurance and one clear idea.
Older-user considerations: Use a readable title and direct phone or print action where relevant.
Accessibility behaviour: One H1, ordered headings and descriptive action names.
Safety risks: Urgent help appears before long explanation when risk is present.
Responsive behaviour: Never force the title or actions below an unnecessary hero image.
Code: content/page-introduction
Figma component: content/page-introduction.
Research evidence: Test whether visitors can state the page purpose after one scan.
Change history: v1.0 — full viewport treatment prohibited.

On-this-page navigation

Status: Test with priority audiences

Component record

Purpose: Make a long, important page scannable and show genuine reading position without concealing its structure.
When to use: Issue, legal, guide and directory pages with several sections.
When not to use: Short pages, a static overflow scrollbar presented as progress, or replacing the page structure with an accordion.
Anatomy: Native section links in document order
Current-section underline and accessible location state
A separate vertical-reading progress line
Measured clearance for both sticky headers
Variants: Sticky scroll-aware rail on wide screens; an ordinary vertical disclosure list on smaller screens.
Content rules: Use the actual section titles and preserve their order.
Example: What this can look like · Safer next steps · Get help
Child considerations: Keep the list short and use simple names.
Older-user considerations: Show every link, maintain large targets and never depend on hover.
Accessibility behaviour: Keep native fragment links, keyboard access, visible focus, current-location semantics and reduced-motion behaviour; progress changes are visual rather than repeatedly announced.
Safety risks: Place urgent help first when the page carries immediate risk.
Responsive behaviour: Do not expose a horizontal scrollbar as page progress. Keep the active label in view automatically on wide screens and use a vertical list on smaller screens.
Code: site/section-progress-nav with shared section-anchor offsets
Figma component: navigation/on-this-page.
Research evidence: Check whether people can identify their current section and reach help under stress, with enlarged text and in both languages.
Change history: v2.0 — real reading progress, scroll-spy state, active-link auto-panning and measured two-header offsets.

Editorial link row

Status: Test with priority audiences

Component record

Purpose: Make a title-and-summary destination recognisably interactive without turning calm editorial content into a card or repeated call to action.
When to use: Issue, guide, life-stage, search, situation and related-resource libraries across the site.
When not to use: Display-title underlines, repeated ‘Open page’ text, thick hover stripes, hidden arrows or a global underline on every anchor.
Anatomy: Semantic title and optional summary
Quiet rule or flat tile surface
One permanently visible trailing arrow
Variants: Standard, compact, numbered, flat tile and inverse dark-surface rows.
Content rules: The title names the destination. Do not repeat generic action copy inside a row whose entire surface is already one link.
Example: Online grooming and digital violence →
Child considerations: Use direct, familiar titles; the arrow supplements the link semantics and never replaces words.
Older-user considerations: The arrow is visible without hover, the full row is a target and the global focus outline remains strong.
Accessibility behaviour: Use one native link, preserve heading order, hide decorative arrows from assistive technology, retain 44px targets and never rely on colour or hover alone.
Safety risks: Visited destinations intentionally look the same as unvisited ones so sensitive reading history is not exposed by the interface.
Responsive behaviour: Use minmax(0,1fr), keep the arrow beside the title on narrow screens, and allow English and Hindi to wrap without clipping or horizontal scroll.
Code: site/primitives EditorialLink and RuledLink; search, situation, guided-resource and tile rows follow the same state grammar. Tailwind only
Figma component
Research evidence: Test scanning and destination recognition with Hindi-first, low-digital-literacy, keyboard and large-text users.
Change history: v1.0 — one quiet persistent cue plus one interactive response across every content library.

Situation list

Status: Reference implementation — validation pending

Component record

Purpose: Help a person recognise a concrete situation before they need to know a category.
When to use: Search pathways, issue hubs and help triage.
When not to use: A grid of equal large cards or vague labels such as “Empowerment”.
Anatomy: Situation in plain language
One-line description
Persistent directional cue
Variants: General, child, older-woman and institution routes.
Content rules: Start with “Someone controls my phone and salary”, not a statute name.
Example: Someone is threatening to share my photographs
Child considerations: Allow “bad touch” and other familiar language without shame.
Older-user considerations: Include pension theft, forced signatures and caregiver abuse as visible entries.
Accessibility behaviour: Every row is a large text link with a persistent cue and explicit destination.
Safety risks: Do not request a disclosure before guidance appears.
Responsive behaviour: A single vertical list at every size.
Code: content/situation-list
Figma component: content/situation-list.
Research evidence: Test language against regional, Hindi and Romanised-Hindi search terms.
Change history: v1.1 — uses the shared subtle editorial-link grammar.

Status explanation

Status: Reference implementation — validation pending

Component record

Purpose: Explain possible harm, legal relevance and support without overclaiming.
When to use: After a situation is recognised, before a route is chosen.
When not to use: Colour-only badges or a declaration that every act is a crime.
Anatomy: Calm bordered panel
Written status labels
Careful qualification
Variants: Harm, possible offence, protective remedy, workplace remedy.
Content rules: Use “may involve” and explain jurisdictional limits.
Example: This may involve controlling behaviour and a protective remedy.
Child considerations: Never make a child determine whether conduct is legally reportable.
Older-user considerations: Name financial, housing and care-related remedies clearly.
Accessibility behaviour: Meaning remains clear in text, high contrast and screen-reader order.
Safety risks: Avoid legal certainty where facts or jurisdiction are unknown.
Responsive behaviour: Panel expands vertically; labels never truncate.
Code: content/status-explanation
Figma component: content/status-explanation.
Research evidence: Project-team review is the release gate; seek specialist review for material high-risk changes.
Change history: v1.0 — text labels required.

Safer-step sequence

Status: Test with priority audiences

Component record

Purpose: Offer reversible, proportionate options in an order that reduces immediate risk.
When to use: When order genuinely matters in a safety or reporting path.
When not to use: Every list of advice or a directive to confront, report or collect evidence.
Anatomy: Number only when order matters
Action and reason
Alternative route
Variants: Safety planning, online abuse, child disclosure and reporting.
Content rules: Say “You may consider”, not “You must”.
Example: 1. Move to a safer place if you can. 2. Contact someone you trust.
Child considerations: Use one action per step and include “keep telling until someone helps”.
Older-user considerations: Show phone and in-person alternatives before long digital steps.
Accessibility behaviour: Ordered list semantics when numbered; do not convey sequence by colour.
Safety risks: Evidence advice is optional and threat-modelled.
Responsive behaviour: Keep every step in one readable column.
Code: content/safer-step-sequence
Figma component: content/safer-step-sequence.
Research evidence: Validate with survivor-support and safeguarding professionals.
Change history: v1.0 — numbering is functional, not decorative.

Words you can use

Status: Test with priority audiences

Component record

Purpose: Make it easier to ask for help, set a boundary or support another person.
When to use: After guidance where a conversation may be a safer next step.
When not to use: Scripts that put a visitor at greater risk or assume they can safely confront someone.
Anatomy: Context label
Short first-person wording
Alternative or opt-out
Variants: Ask for help, support someone, school, workplace and service call.
Content rules: Use natural spoken language, not legal jargon.
Example: I do not feel safe going home today. Can you help me think about where I can go?
Child considerations: Include words for telling a trusted adult without requiring a full account.
Older-user considerations: Avoid digital jargon and provide a phone-friendly version.
Accessibility behaviour: Use selectable text; never place the script only in an image.
Safety risks: Offer a safer alternative if saying it aloud could increase danger.
Responsive behaviour: Short blocks with a copy or print option where safe.
Code: content/words-you-can-use
Figma component: content/words-you-can-use.
Research evidence: Review phrases with speakers of the intended language and context.
Change history: v1.0 — scripts are optional, never instructions.

Support-someone panel

Status: Reference implementation — validation pending

Component record

Purpose: Help supporters listen, respect choices and offer practical, non-controlling help.
When to use: Issue pages and any route likely to be used by friends, family or colleagues.
When not to use: Telling supporters to take over, investigate or pressure a report.
Anatomy: Listen without blame
Ask what she wants
Offer concrete support
Variants: Friend/family, colleague, adult supporting a child.
Content rules: Avoid “be brave” and “why didn’t you leave?”.
Example: I believe you. What would feel helpful right now?
Child considerations: For a child, listen calmly, believe them and follow safeguarding duties.
Older-user considerations: Respect legal and financial agency; do not speak over her.
Accessibility behaviour: Plain headings and printable guidance.
Safety risks: Explain confidentiality limits and avoid contacting an alleged abuser.
Responsive behaviour: Use a bordered reading panel, not an interactive card.
Code: content/support-someone-panel
Figma component: content/support-someone-panel.
Research evidence: Review with survivor-support organisations.
Change history: v1.0 — choice-respecting language required.

Help route

Status: Test with priority audiences

Component record

Purpose: Connect a need to one verified next route with relevant access details.
When to use: Get help, issue pages and safety plans.
When not to use: A directory of equal acronym-led cards.
Anatomy: Need-led title
Service name and route
Hours, language, eligibility and verification date
Variants: Immediate danger, child, violence, online, workplace, legal and mental-health support.
Content rules: Start with the need, then name the organisation.
Example: Report online abuse — National Cyber Crime Reporting Portal
Child considerations: Show child help immediately and do not require a public form.
Older-user considerations: Put phone and in-person alternatives before a digital process.
Accessibility behaviour: Phone links are labelled; verification details are readable text.
Safety risks: Never show unverified service data or imply guaranteed outcomes.
Responsive behaviour: One prioritised route per row, with no horizontal comparison table.
Code: help/help-route
Figma component: help/help-route.
Research evidence: Service owner verifies every route and fallback.
Change history: v1.0 — last-verified date required.

Source and review block

Status: Reference implementation — validation pending

Component record

Purpose: Make legal, service and safety content inspectable and correctable.
When to use: At the end of every legal, service, safety or evidence-led page.
When not to use: Hidden footnotes, undated sources or a generic “expert reviewed” claim.
Anatomy: Sources and publication record
Reviewer role
Last reviewed date
Correction route
Variants: Legal, service, safeguarding and editorial review record.
Content rules: Name roles, dates and limits; never expose personal reviewer details without consent.
Example: Reviewed 29 August 2026 · Legal reviewer · Suggest a correction
Child considerations: Record safeguarding review for child-facing material.
Older-user considerations: Use direct, readable labels rather than abbreviations.
Accessibility behaviour: Sources are normal links with descriptive labels and dates.
Safety risks: Correct urgent errors promptly and preserve a visible correction history.
Responsive behaviour: Stacks as a simple list on mobile.
Code: content/source-and-review
Figma component: content/source-and-review.
Research evidence: Reviewers and community advisors define useful transparency.
Change history: v1.0 — correction route required.