Design System
Last updated
Last updated
A design system is a collection of reusable components, guidelines, and standards that are used to design and develop cohesive and consistent user interfaces (UIs) across products or platforms. It serves as a single source of truth for design and development teams, ensuring a unified and seamless user experience.
Also knows as design principles or standards, are a set of rules, recommendations, and best practices that inform the design and development process. They serve as a reference for designers, developers, and other stakeholders to ensure consistency, coherence, and usability across digital products or services. Design guidelines encompass various aspects of design, including visual aesthetics, interaction patterns, accessibility considerations, and branding elements. They help maintain a cohesive user experience and reinforce the desired brand identity.
Examples:
Logo
Brand Colors
Imagery Style
Color Palette
Brand Colors
Accent Colors
Fonts
Sizes
Weights
Styles
Typography
Inputs / Form
Navigation
Feedback
Overlay
Utils
UI templates typically include placeholders for common UI elements such as navigation bars, headers, content sections, buttons, forms, and other interactive components. They may also specify grid systems, spacing guidelines, typography styles, color schemes, and other design considerations to maintain visual consistency and usability across different screens and devices.
Light, Dark, User/Brand Specific, etc.
Design tokens — or tokens, for short — are design decisions, translated into data. They’re ultimately a communication tool: a shared language between design and engineering for communicating detailed information about how to build user interfaces.
Tokens consist of values needed to construct and maintain a design system, such as spacing, color, typography, object styles, animation, and more. They can represent anything that has a design definition, like a color as a RGB value, an opacity as a number, or an animation ease as Bezier coordinates. We use tokens instead of hard-coded values so Spectrum can scale and support the complex ways that Adobe products need to intersect as a cohesive ecosystem.
The needs that web accessibility aims to address include:
Figma
Sketch
Adobe
Storybook
Visual: including , various common types of and poor eyesight, various types of ;
Motor/mobility: e.g. difficulty or inability to use the hands, including tremors, muscle slowness, loss of fine muscle control, etc., due to conditions such as , , , ;
Auditory: or , including individuals who are hard of hearing;
Seizures: Photo epileptic caused by visual strobe or flashing effects.
Cognitive and intellectual: , (, , etc.), and (, ) of various origins, affecting memory, attention, developmental "maturity", problem-solving and logic skills, etc.
