Skip to main content

UI / UX

How Clustersco interfaces behave. The Design System owns the look; this owns interaction, navigation, motion, and accessibility.

Layout & navigation​

  • One idea per view. For long documents, show one section at a time driven by a table of contents, with a no-JS fallback that reveals every section (progressive enhancement).
  • Hash-based routing for sections so views are linkable and the back button works; reflect the active item with aria-current and move focus to the shown heading.
  • Responsive: relative units, flex/grid, max-width:100% on media. Wide content scrolls inside its own overflow-x:auto container — the page body must never scroll sideways.

Motion & interactive demos​

  • Reveal in discrete steps (a .on class + CSS transitions) with play / pause / step / restart controls and progress dots — never an uninterruptible autoplay.
  • Draw-on, don't pop — pathLength for line-drawing, short cubic-bezier ease for nodes.
  • Autoplay is opt-in — start only on scroll-into-view, and skip autoplay entirely under prefers-reduced-motion (still allow manual stepping).

Accessibility (WCAG AA — required)​

  • Contrast ≥ 4.5:1 for text in both themes; verify by rasterizing rendered text over its real background (a naive getComputedStyle().color can serialize color-mix as color(srgb …) and mislead). Don't ship a color you didn't measure.
  • Keyboard: every control reachable and operable; visible :focus-visible ring. Scope key handlers to a focusable widget itself (e.target === e.currentTarget) so Space/Arrows don't hijack a focused button inside it.
  • ARIA that matches reality: role / aria-pressed / aria-selected reflect state; a control's aria-label tracks its current action (Play → Pause → Replay). Mark decorative glyphs aria-hidden; announce dynamic text with a polite live region.
  • Reduced motion: gate animation on the media query but keep the per-step reveal — it snaps instead of animating; never force-reveal everything.

Voice & microcopy​

Plain, direct, enterprise-calm — say the thing, then the caveat. Prefer a recommendation over a survey of options. Keep destructive/irreversible actions behind a confirm. Spelling: "Clustersco".