Echelon Foundry / Interface system

Forma

A zero-runtime design system for interfaces where state, meaning, and accessibility need to remain explicit. Forma supplies semantic HTML contracts, design tokens, and CSS. Applications retain authority over behavior and domain state.

Implemented patterns29
Runtime JavaScript0 bytes by contract
Rendered examples87+
Operating principles

Native first. Explicit boundaries.

Forma standardizes presentation without becoming a second application runtime.

01

Semantic HTML first

Native controls keep browser behavior, forms, keyboard interaction, and assistive-technology semantics visible.

02

CSS owns presentation

Tokens, layout, state styling, responsive behavior, motion, and forced-color support live in the design system.

03

Applications own authority

Limen/application code supplies non-native behavior. Ordo/domain state decides what transitions are legal.

Component catalog

One contract at a time.

Every implemented pattern has a dedicated page with default, representative-state, and constrained-layout examples.

Assessment & decision

Allocation

Distribute a bounded amount across multiple choices while preserving direct numeric entry.

Best–Worst

Capture distinct strongest and weakest choices without hiding the two-selection constraint.

Binary choice

A two-option radio-backed answer that preserves Unanswered as distinct from false.

Single-choice matrix

Repeated single-choice scales arranged as a matrix while retaining per-row radio semantics.

Ordinal scale

One radio-backed contract for ordered Likert, agreement, confidence, frequency, and similar scales.

Pairwise choice

A focused two-alternative comparison using ordinary choice semantics.

Question shell

A stable prompt, help, selector, and validation structure for assessment questions.

Ranking

Ordered-choice presentation with non-drag movement controls and visible positions.

Special choice

Unknown, not-applicable, and other non-scale answers visually separated from the primary continuum.

Symbol rating

Ordinal rating presented with symbols while retaining accessible textual labels.

Selection

Choice group

Semantic single-choice options with primary and supporting text.

Hierarchical choice

Nested disclosure and choice structure for hierarchy without assigning parent-child domain meaning.

Image choice

Choice cards that pair media with visible text while keeping the input semantic.

Multi-choice

Checkbox-backed selection with explicit guidance for minimum, maximum, or exclusive choices.

Segmented control

Radio-backed compact selection with visible selected and focus states.

Overlay & disclosure

Dialog

Modal presentation built on the platform dialog element and declarative commands.

Disclosure

Expandable content built on details and summary with no runtime behavior layer.

Popover

Top-layer supplemental content built on the Popover API.

Input

Numeric stepper

Bounded numeric entry using the native number input and explicit constraints.

Range entry

Direct lower/upper endpoint entry; graphical dual-thumb behavior is an optional application enhancement.

Slider

Single-value range input with accessible bounds and direct keyboard/pointer control.

Switch

A checkbox-backed on/off preference control with role=switch and a visible track/thumb treatment.

State & feedback

Obligation panel

Present unresolved work, evidence needs, and blocking status without making the design system authoritative.

Survey progress

Determinate progress using the native progress element plus explicit current/total text.

Validation message

Question-level recovery guidance with icon, text, and non-color signaling.

Validation summary

Focusable page-level error summary with links back to affected controls.

Advanced input

Rule builder

Field/operator/value clauses for typed rule editing while the application owns expression semantics.

For agents

Use the pattern before inventing one.

Read the agent contract