Build your apps with speed and consistency
Eco Components reduce the complexity involved in building web applications by providing pre-designed, high-level components that get your application off the ground and in customers hands more quickly.
Eco is the DTN open source internal design system.
Created for DTN developers by DTN developers.
Contribute to Eco
Eco, as a platform, is constantly evolving as business and application needs change. Perhaps you identify a bug or an opportunity to enhance a feature, submit a PR and improve the DTN toolkit for yourself and your colleagues. Learn more about what can be contributed to Eco and the process to do so on our Contributing page.
WHAT IS THE ECO TEAM?
We are developers that have been tasked with creating the foundation on which all DTN apps are to be built. We don't build apps; we provide the framework and components that dev teams need to build and customize apps. Having all DTN teams use Eco layouts and components ensures that clients receive a similar look, feel, and experience when moving between different DTN products. Teams can customize apps, but the core elements of the app should feel similar to other DTN apps.
WHERE DOES THE ECO TEAM FIT INTO THE DEV PROCESS?
That's a great question! The Eco Dev team works closely with the UI/UX team and product owners during the initial design process. We also provide the Eco Starter Kit and all of the components needed to create an app. We don't build apps for teams, we supply the tools. We are here to help though, so if you notice that any of our offerings could use some work or you need additional help, just let us know!
HOW DO I WORK WITH ECO?
Everything you need is housed on this website. This is where you can...
- - Download the Eco Starter Kit
- - Check out all of the currently available Components
- - See Examples of components in action
- - Find out how to Contribute to the Eco system
UX front and center
The Eco Component Library has UX design baked in. Each and every component is built to meet the needs of the end user, ensuring their experience is free from common pain points. These UX-based design decisions follow these key principals.
Consistency
Follow standard conventions so that users don’t have to wonder what different actions, words, or situations mean.
Efficient
Provide multiple ways to accomplish tasks and allow users to tailor their actions and outcomes.
Relevant
Showcase only relevant and needed information, ensuring that nothing gets in the user’s way.
Clear
Express error messages in plain language with direct and meaningful instructions to get the user back on track.
Prevention
Help users avoid error-prone actions by ensuring the proper confirmations and paths are presented before an action is committed.
Freedom
Give users control over the path that they are taking in your app, providing a sense of confidence and minimizing frustration.
Visibility
Keep users informed about what is happening in the app through timely and appropriate feedback.
Familiar
Tailor the designs to the user’s so that they feel welcome and engaged in the process.