Elastic Design System
The Elastic UI (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics.
Visit Website
About Elastic Design System
The engine that drives the Elastic Stack
Elastic uses the Elastic UI framework (EUI) to create internal products that must adhere to our aesthetic standards. It disseminates static assets and UI React components for usage in creating web layouts.
Every person able to access
Uses color-blind-safe palettes with strong contrast and has been tested with the majority of assistive technologies.
Composable and adaptable
Adaptable enough to preserve brand and low-level consistency while accommodating a wide range of contexts' needs.
Accessibility
EUI offers a solid foundation for incorporating accessibility into your apps. The offered components make an effort to adhere to WCAG 2.1 standards for semantics, keyboard functionality, color contrast, and other factors. A lot depends on how these elements are put together in the overall page layout to achieve accessibility goals. To design accessible apps, headings, landmarks, page titles, focus management, and accessible names all come together.
As vital as good code, appealing design, and smooth performance are, include accessibility in your app is crucial. It's also crucial to test as you go. Three perspectives can be used to approach accessibility testing: automatic, manual, and empathic thinking. Use manual tests to address more complex cases, automated tests to swiftly cover as much territory as feasible, and empathy to fill in the gaps.
FAQ
What is Elastic UI framework (EUI)?
Elastic UI framework (EUI) is the engine that drives the Elastic Stack. It is a framework used to create internal products at Elastic that must adhere to their aesthetic standards.
How does Elastic ensure accessibility for their UI components?
Elastic ensures accessibility for their UI components by using color-blind-safe palettes with strong contrast and testing them with the majority of assistive technologies. Additionally, the components make an effort to adhere to WCAG 2.1 standards for semantics, keyboard functionality, color contrast, and other factors.
How adaptable is EUI for different contexts and needs?
EUI is composable and adaptable enough to preserve brand and low-level consistency while accommodating a wide range of contexts' needs.
Why is accessibility crucial for app development?
Accessibility is crucial for app development because it ensures that the app can be used by as many people as possible, regardless of their abilities or background. It's also a legal requirement in many countries.
What are the three perspectives used to approach accessibility testing?
The three perspectives used to approach accessibility testing are automatic, manual, and empathic thinking. Automated tests can cover as much territory as feasible, while manual tests are used to address more complex cases. Empathy helps fill in the gaps and ensures that the app is usable and accessible for everyone.
Blog Posts About Design System
Related Products View All
VTEX Design System
VTEX Styleguide is the design system for VTEX, serving as the home for all reusable patterns, components, and assets related to product design.
UI2 Figma's Design System
Figma's UI2 Design System is a comprehensive set of design guidelines and resources that help teams create consistent, high-quality user interfaces (UIs) across web, mobile, and other digital platforms.
Radius Design System
You may speed up your design system by using the opinionated collection of open-source tools and frameworks known as The Radius.
Primer Design System
Design, construct, and produce using the design system on GitHub
Paste Design System
At Twilio, the Paste design system is employed to create user interfaces that are intuitive, unified, and of the highest caliber. With tools and resources, Paste assists Product Designers and Engineers in creating consumer UIs in Figma and React.
Paradigm Design System
For Mail.ru products, Paradigm is a design system that enables us to preserve the integrity of the user experience while streamlining design and development resources.
Palmetto Design System
The goal of the Palmetto Design System is to make it easier and faster for us to produce applications with the Palmetto brand.
Pajamas Design System
These rules establish the requirements for maintaining a consistent brand image. The GitLab brand has developed into what it is today because to the cooperation of many contributors and iterative procedures, just like their product and business. It serves as a creative outlet for Gitlab's mission, vision, and core principles.
Orbit Design System
Open source design framework for your upcoming trip endeavor.
OSKRHQ Design System
A largely subjective but feasible method for creating adaptive digital interfaces with a shared anatomy.
