Halo Brand System

Guidance set

Motion

must

When reduced motion is requested, render the final state immediately and preserve all meaning.

Motion must teach without becoming required for comprehension.

Examples

Use

The complete diagram appears without the connector animation.

Avoid

Critical state remains hidden because its reveal animation is disabled.

halo.accessibility.motion-reduction

must-not

Do not animate large blur filters on mobile.

Imported from the Working rules section of the Halo guidance.

halo.visual.motion.do-not-animate-large-blur-filters-on-mobile

must-not

Do not use the signature as pagination dots, typing indicators, an ellipsis, an overflow menu, generic bullets, or background texture.

Imported from the Working rules section of the Halo guidance.

halo.visual.motion.do-not-use-the-signature-as-pagination-dots-typing-indicators-an-ellipsi

must

Durations: 160–520ms interface response, 900–1600ms editorial narrative, and up to 3600ms for one deliberate teaching sequence; protected VSI owns its internal timeline.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.motion.durations-160-520ms-interface-response-900-1600ms-editorial-narrative-an

must

Easings: cubic-bezier(0.2, 0, 0, 1) standard, cubic-bezier(0.16, 1, 0.3, 1) emphasized, and cubic-bezier(0.32, 0, 0.18, 1) for teaching sequences.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.motion.easings-cubic-bezier-0-2-0-0-1-standard-cubic-bezier-0-16-1-0-3-1-emphas

should

Entrance motion is optional, measured, non-looping, and supported by a static label or accessible name.

Imported from the Working rules section of the Halo guidance.

halo.visual.motion.entrance-motion-is-optional-measured-non-looping-and-supported-by-a-stat

must-not

No scroll-jacking, parallax nausea, perpetual ambient movement, or motion-only meaning.

Imported from the Working rules section of the Halo guidance.

halo.visual.motion.no-scroll-jacking-parallax-nausea-perpetual-ambient-movement-or-motion-o

should

One teaching animation per viewport.

Imported from the Working rules section of the Halo guidance.

halo.visual.motion.one-teaching-animation-per-viewport

must

Page transitions are optional and never block navigation.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.motion.page-transitions-are-optional-and-never-block-navigation

should

Reduced motion renders final states immediately.

Imported from the Working rules section of the Halo guidance.

halo.visual.motion.reduced-motion-renders-final-states-immediately

must

Scroll reveal is opacity plus max 16px movement.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.motion.scroll-reveal-is-opacity-plus-max-16px-movement

should

The complete Motion Signature is used only for movement, progression, confidence, workflow, capture, or completion.

Imported from the Working rules section of the Halo guidance.

halo.visual.motion.the-complete-motion-signature-is-used-only-for-movement-progression-conf

must

The Halo Motion Signature is the official secondary brand asset and always reads Target -> Align -> Capture.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.motion.the-halo-motion-signature-is-the-official-secondary-brand-asset-and-alwa

should

The Halo Target may be used alone for a true destination, guidance point, or capture waypoint.

Imported from the Working rules section of the Halo guidance.

halo.visual.motion.the-halo-target-may-be-used-alone-for-a-true-destination-guidance-point-

must

The progression remains recognizable without colour and never reverses.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.motion.the-progression-remains-recognizable-without-colour-and-never-reverses

must

The signature uses 8px Target, 12px Align, 16px Capture, 16px spacing, a 1.25px target ring, and a 3px centre dot at the reference scale.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.motion.the-signature-uses-8px-target-12px-align-16px-capture-16px-spacing-a-1-2

Guidance set

Accessibility

must

Meet WCAG 2.2 AA and verify keyboard, screen reader, zoom, touch, motion preference, and text alternatives.

Halo must remain understandable and operable across access modes.

Examples

Use

A diagram has equivalent DOM text and a logical reading order.

Avoid

Essential annotation meaning exists only on hover.

halo.accessibility.wcag-target

must

Diagrams and media have equivalent text.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.accessibility.diagrams-and-media-have-equivalent-text

must-not

Do not trap focus outside a modal.

Imported from the Working rules section of the Halo guidance.

halo.visual.accessibility.do-not-trap-focus-outside-a-modal

should

Errors identify field, cause, and recovery.

Imported from the Working rules section of the Halo guidance.

halo.visual.accessibility.errors-identify-field-cause-and-recovery

must-not

No essential hover-only content.

Imported from the Working rules section of the Halo guidance.

halo.visual.accessibility.no-essential-hover-only-content

must

Semantic landmarks and one descriptive H1 per route.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.accessibility.semantic-landmarks-and-one-descriptive-h1-per-route

must

Touch targets at least 44×44 CSS pixels.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.accessibility.touch-targets-at-least-44-44-css-pixels

should

Use native controls before custom widgets.

Imported from the Working rules section of the Halo guidance.

halo.visual.accessibility.use-native-controls-before-custom-widgets

must

Visible focus using semantic tokens.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.accessibility.visible-focus-using-semantic-tokens

must

WCAG 2.2 AA target.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.accessibility.wcag-2-2-aa-target

Guidance set

Colour

must

Active magenta #F13AAD; verified green #2EA77B.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.colour.active-magenta-f13aad-verified-green-2ea77b

must

Canvas #F6F5F2; raised white #FFFFFF; quiet field #EBE9E3.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.colour.canvas-f6f5f2-raised-white-ffffff-quiet-field-ebe9e3

should

Capture, Mobile and Prism colours may be used only inside their named product contexts and do not redefine the Halo brand palette.

Imported from the Working rules section of the Halo guidance.

halo.visual.colour.capture-mobile-and-prism-colours-may-be-used-only-inside-their-named-pro

should

Green only means verified/success.

Imported from the Working rules section of the Halo guidance.

halo.visual.colour.green-only-means-verified-success

must

Ink #111316; graphite #16181D; deep black #08090B.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.colour.ink-111316-graphite-16181d-deep-black-08090b

should

Magenta marks brand signature, focus, guidance, or active state.

Imported from the Working rules section of the Halo guidance.

halo.visual.colour.magenta-marks-brand-signature-focus-guidance-or-active-state

must-not

Never communicate state by colour alone.

Imported from the Working rules section of the Halo guidance.

halo.visual.colour.never-communicate-state-by-colour-alone

should

Reconcile values against current tokens and contrast tests.

Imported from the Working rules section of the Halo guidance.

halo.visual.colour.reconcile-values-against-current-tokens-and-contrast-tests

must

The permanent brand palette and channel-specific product palettes remain separate token layers.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.colour.the-permanent-brand-palette-and-channel-specific-product-palettes-remain

should

Use semantic roles such as surface, text, action and state in implementation; do not bind components directly to a primitive hex value.

Imported from the Working rules section of the Halo guidance.

halo.visual.colour.use-semantic-roles-such-as-surface-text-action-and-state-in-implementati

must

Warnings and errors remain distinct from brand accent.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.colour.warnings-and-errors-remain-distinct-from-brand-accent

must

Use Halo magenta only for brand signature, guidance, focus, or active state.

The accent must retain operational meaning.

Examples

Use

The next capture position is marked in magenta.

Avoid

Magenta used to indicate an error or warning.

halo.visual.state.magenta

must

Reserve green for verified or successful state and pair it with text, shape, or icon.

State must be semantically consistent and must not rely on colour alone.

Examples

Use

A green check plus the text Verified.

Avoid

A green logo or an unlabeled green dot.

halo.visual.state.verified-green

Guidance set

Diagram Language

must

All diagrams start with a concise prose summary.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.diagram-language.all-diagrams-start-with-a-concise-prose-summary

must

Connectors have verbs.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.diagram-language.connectors-have-verbs

must

Current, next, and future use text labels plus line styles.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.diagram-language.current-next-and-future-use-text-labels-plus-line-styles

should

Maximum seven primary nodes per viewport.

Imported from the Working rules section of the Halo guidance.

halo.visual.diagram-language.maximum-seven-primary-nodes-per-viewport

should

Mobile becomes an ordered vertical sequence.

Imported from the Working rules section of the Halo guidance.

halo.visual.diagram-language.mobile-becomes-an-ordered-vertical-sequence

must-not

No 3D isometric infrastructure.

Imported from the Working rules section of the Halo guidance.

halo.visual.diagram-language.no-3d-isometric-infrastructure

must-not

No vendor-logo constellations.

Imported from the Working rules section of the Halo guidance.

halo.visual.diagram-language.no-vendor-logo-constellations

must

Use nodes only for real objects or actors.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.diagram-language.use-nodes-only-for-real-objects-or-actors