Embark set out with the goal of creating a unified framework that will help design and development teams flow, reducing friction and resulting in a more collaborative and efficient approach to digital prototyping and product development.
Embark is a front-end design system that consists of style-guides, UI kits and a Bootstrap compatible component library.
Our goal is to help design and development teams collaborate more easily. By establishing a common language for product development, the aim is to reduce friction between teams, speed up development cycles and create more time for teams to focus on work that matters.
Components are one of the key building blocks of the design system. Each component has been specifically designed and coded to solve a UI problem. All of the components in Embark have been designed to work collectively together.
Embark takes a modular approach that supports a range of expression. Components can be used in a variety of ways while designed to work seamlessly with each other to ensure smooth user experiences.
Designed to be as efficient as possible - enough breadth without being too overwhelming. Every element in the system has been carefully considered.
Provides consistent and connected UI elements, preventing incompatibilities and conflicts between UI elements.
Accessible design is good design and while we have baked-in as many accessibility standards as possible (eg. visual contrast), teams will need to ensure that they adhere to these as they utilise the system.
Embark has been tuned for the specific needs of Dock projects. The onboarding experience has been considered throughout and the system has been created to enable people to move fast, in both design and development.
Built on the well-established Bootstrap foundation, we align to the fundamentals that will ensure future builds can scale quickly and be easily maintained over time.
Baseline guides for Accenture software. Typography, color palettes, Icons, grids, margins, spacing system.
Shared styles, symbols, UI components & patterns UI component library in wireframe, light and dark themes. Standard design tools (Sketch + XD).
Dev components, mirroring UI kit. HTML/JS components, in Bootstrap based library & development framework.
Guidelines & examples for how to use Embark. Website with interactive components, guidelines and documentation. Downloads for all assets.
How we contribute to and evolve the system. Core team will support in training and roll-out for pilots. Teams channel to gather feedback and create backlog for future updates.
We created a shared language between fellow designers, as well as between designers and developers in the Dock - as well as connecting external Accenture design and development partners and built out some example themes to reflect this.
Embark reduces the effort in projects, speeding up development times and therefore allowing for more iteration and refinement. It allows to focus on what matters - solving many design decisions up front, whilst enabling teams to put their time and energy into problem solving and innovation.
A number of live projects using the Embark framework are currently in development.
A live documentation portal is available on an Accenture server as a support resource for design and development. Design guidelines for layout, colours, typography, icons, shadows and accessibility are included. Development code snippets and examples are available for all of the shared components. Designers and developers can get involved through the portal and examples of themes are available for reference and inspiration.
