A glossary of common terms used in the Acorn documentation to help bridge understanding gaps.
There is also a Mozilla specific glossary with additional terms and ideas used at Mozilla.
Component
Component means different things in different contexts. This can be confusing, and overwhelming. But, generally speaking, a component is a good thing, it will help us work faster, build better, and stay more consistent regardless of context.
In Acorn: a component is any design element made up of more than 1 design decision, it may correspond 1:1 to a Figma or Code component as well, but doesn't have to.
In Figma: a component is the named feature that allows designers to create reusable DRY elements to reduce redundancy and increase work flow, speed, and consistency across their projects.
In Code: a component typically refers to a self-contained, or bundled object that can be reused over and over without needing additional code. Like in Figma this creates a way to keep your code DRY, reducing redundancy and increasing work flows, speed, and consistency across projects.
DRY
Industry acronym for Don't Repeat Yourself.
It's a friendly reminder to people building for digital to try to create maintainable, reusable, and understandable pieces to build with. Components help a lot with this.
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
Pattern
A pattern is any set of components that when grouped together create either new complex components or specific work or user flows. Patterns can also be branded versions of components, like Spotlight modal, or guidelines on more amorphous concepts like loading indicators.
Slot
A slot is a Figma component placeholder that acts as a way to quickly alter the content of the otherwise inflexible Figma component model.
Allowing a designer to quickly change the content of a component without detaching it. This gives them more flexibility, without sacrificing the consistency and ease of use of Figma components
Token
At the top level a token is a named alias for a single value design decision.
e.g. blue-50 = #0060DF "blue-50" is the token, and #0060DF is the value
Tokens can also be nested, creating new complex tokens that contain multiple design decisions within a single named alias.
e.g. shadow = space-004 space-004 0 0 black-30 "shadow" is a complex token containing other tokens (space-004, and black-30), and raw values (0).