What is a design system
A design system is a set of guidelines, standards, assets, and processes to help organizations design, build, and deploy products rapidly and consistently.
Design systems are often equated with a UI kit or component library. In reality, an effective design system spans the entire lifecycle of a product, from ideation to iteration and everything in between.
What is i80
i80 is the design system built by the i80 Design Systems Team. It’s commonly referred to as I80.
i80 is available to every i80 product team. It is a stylesheet and a set of custom elements, so it needs no framework: it works in plain HTML, in server-rendered templates, and alongside React, Vue or anything else that renders HTML. Teams that would rather build their own components can use the tokens and the guidance here.
Using i80 ensures the different product lines share a common design language. We work closely with these teams on integration and implementation while collecting feedback to understand consumer needs and inform our roadmap.
For more information on how to use the design system, visit our getting started guides for designers and for engineers or visit our Gitea repository.
When to use i80
Customer-facing products
i80 was specifically created for customer-facing products.
All i80 product teams have adopted i80 as the single source of truth for the foundations, components, and patterns used to build the UIs of their consumer-facing products.
Internal products
i80 is not meant to be used as a general-purpose UI library.
If you intend to use i80 for internal products or tools, contact the Design Systems Team before starting so we can discuss if i80 is a good fit for your team.
External products
i80 is not meant to be used outside of i80.
If you’re not a i80 employee, you’re more than welcome to use the i80 Design System as a reference, but we don’t provide support if you use it to build your product or UIs. At any moment, we may introduce changes to our assets or components that could potentially break your product or UIs.
Benefits of using i80
i80 increases the visual and functional consistency of i80 products. Other benefits include:
- Increased velocity in the design and development of new products and features
- Dismantling silos between teams that adopt and use the system
- More time spent on solving complex problems, less time spent on duplicative work rebuilding small atoms and molecules
- Components, foundations, and usage guidelines published by the the i80 Design System meet or exceed WCAG 2.2 AA conformance out of the box in accordance with our accessibility statement
i80 architecture
While the scale of a design system largely depends on the needs of those consuming it, the fundamental structure and architecture remain largely the same across systems.
In i80, we offer the following:
- Foundations: colors, typography, icons, content strategy
- Components: component design, component development, tokens, development standards
- Patterns: repetitive combinations of components and foundational styles that yield more complex functions and features
- Documentation: education, issue tracking, contribution, content management, processes
We structure our components, icons, and design tokens in a monorepo using pnpm workspaces.
Resources
Design system inspiration
These design systems inspire us and have paved the way for the greater design system community.