Introduction

Stance is the official design system of Binds. It is the single source of truth for the visual language, design tokens, components, accessibility standards and interaction patterns shared across Binds products, including binds.si and eSignify.

What is in the box

• @bindshq/stance-tokens: colour, typography, spacing, radius, elevation, motion, z-index and breakpoint tokens, delivered as CSS custom properties, typed JavaScript, JSON, a Tailwind v3 preset and a Tailwind v4 theme.
• @bindshq/stance-react: accessible React components with zero runtime dependencies, plain CSS styling and support for React 18 and 19.
• Three appearance modes: light, dark and high contrast, all built from the two official Binds colours, with system preference detection and no flash on load.

One system, distinct products

Stance standardises the foundations (tokens, primitives and interaction behaviour) without imposing a layout. Binds and eSignify keep their own navigation, information architecture and page compositions while sharing the same underlying design language. Stance ships no universal dashboard template on purpose.

Principles in brief

1. Brand-true. Ivory #FCF6EB and indigo #140C2E are the only brand colours. Every neutral is derived from them.
2. Accessible by default. WCAG 2.2 AA is the floor, verified by automated contrast and axe tests.
3. Own the stack. No runtime dependencies: focus management, positioning, date maths and virtualisation are implemented in Stance.
4. Compose, don’t configure. Small parts that combine, instead of components with hundreds of props.

Continue with Installation, or browse the component library.