A glossary of common user interface terms used throughout the Acorn documentation.
There is also a Mozilla specific glossary with additional terms and ideas used at Mozilla.
Component
Reusable building blocks for creating user interfaces that can be documented in Figma or code (e.g. button).
Line of Trust
The line separating the chrome from in-content material, which helps identify trustworthy content that comes from the browser (web content cannot cross into the chrome). See Browser anatomy.
Note that this line is more generally known in our industry as the ‘line of death’ but Acorn has opted for a more friendly term.
Pattern
A pattern, much like a component, is a reusable design solution for a common problem. A component can be considered a pattern, but so can a group of components put together, such as form patterns.
Slot
For designers, a slot is a Figma component that allows designers to insert their own compositions within. See Spotlight Modal as an example.
Token
A token is a named alias for a single value design decision. e.g. color-blue-50 = #0060DF “color-blue-50” is the token, and “#0060DF” is the value.