Components

Components

Reusable building blocks with hierarchy, states, and calm motion as a contract.

Planned

This chapter is on the roadmap. For MVP use Guidelines, Motion, Human Adaptive, and the Interface Library.

Introduction

Components are reusable building blocks of Layered Interface Method. Each component carries hierarchy, states, accessibility, and calm motion as a contract — not as optional decoration.

Principles

  • One clear job per component.
  • Visible focus and 44×44 touch targets.
  • Light and dark themes without rewriting structure.
  • State changes explained with short motion.
  • HTML, CSS, and vanilla JavaScript only.

Composition

Compose components into patterns. Prefer semantic landmarks, one dominant action, and spacing rhythm from Foundations.