Design System
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.
Design Guidelines
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:
Components
Brand Assets
Logo
Brand Colors
Imagery Style
Colors
Color Palette
Brand Colors
Accent Colors
Typography
Fonts
Sizes
Weights
Styles
Iconography
UI Components
Typography
Inputs / Form
Navigation
Feedback
Overlay
Utils
UI Templates
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.
Animations / Interactions
Themes
Light, Dark, User/Brand Specific, etc.
Design Tokens
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.
Token's Management Tools
UI Libraries
UI LibrariesAccessibility
The needs that web accessibility aims to address include:
Visual: Visual impairments including blindness, various common types of low vision and poor eyesight, various types of color blindness;
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 Parkinson's disease, muscular dystrophy, cerebral palsy, stroke;
Auditory: Deafness or hearing impairments, including individuals who are hard of hearing;
Seizures: Photo epileptic seizures caused by visual strobe or flashing effects.
Cognitive and intellectual: Developmental disabilities, learning difficulties (dyslexia, dyscalculia, etc.), and cognitive disabilities (PTSD, Alzheimer's) of various origins, affecting memory, attention, developmental "maturity", problem-solving and logic skills, etc.[2]
Tooling
Figma
Sketch
Adobe
Storybook
References
Last updated