Specific screen widths at which website content responds to the user’s device width to provide the best possible layout for viewing page content and design.
A combination of reusable elements and related system constructs arranged to function in accordance with specific user interactions or for specific content containment. Examples include accordions, carousels, CTA blocks, and video players.
The method by with both internal and external designers, page owners, and development teams use to evolve and add design elements to the Beacon Design System to meet specific user needs.
Visual attributes associated with pages, including features that are styled using CSS attributes, imagery, or other visual items that do not change or redefine the underlying functionality of the component.
A defined approach to creating digital properties that prioritizes experience, coherency, and design integrity. It’s the modular, digital expression of the brand’s components, interactions, specifications, and guidelines used for building standardized digital experiences. The system includes the visual foundation, principles, tools, and guidelines for designers, developers, and marketers.
The smallest items in the design process. Well-defined, reusable pieces of content that make up larger components. Examples include buttons, links, and form elements.
The foundation for the structure and alignment of web page patterns including how pages will respond at various screen sizes. The grid system starts with a 12-column desktop structure that responsively scales down for smaller screens with breakpoints for common screen sizes (typically desktop, tablet, phone).
Standardized interface patterns and messaging revealed in response to user behavior with inputs, controls, and other UI elements aimed at providing a unified digital experience.
Self-contained and reusable component combinations that represent interface or functionality to address a specific user need. Patterns are typically represented with a collection of states or interactions that are required to maintain their integrity. These are created and replicated across properties to allow the user ability to learn and quickly navigate site content. Examples include Meganav, Footer, Form-validation alerts and Pinned Nav.
An organized set of related or nested, reusable modular components, often containing code examples, design guidelines, and use cases.
Methodology that defines how content is represented across a variety of screen sizes and how it renders on a variety of platforms, devices, and orientations.
Visual attributes assigned by business units and entities to provide their distinct brand experience. This provides the ability to change the look of pages and components at a site level. These sub brands are reviewed and approved on a case-by case basis. Examples include CSIM, About Schwab, Schwab Bank, and Schwab Charitable. See the brand identity guidelines for business units.
Pre-defined attributes or elements of the component that can be altered or turned on or off. Examples include toggling functionality (appearance of certain elements on and off), and changing visual attributes, such as color.