i80 is designed in Penpot. The i80 library holds the foundations (colors, typography, spacing and radius as design tokens), the components and the icons, so designs use the same building blocks as the code.
Connecting the i80 library
- Open your file on penpot.i80.dk.
- Open the Assets tab in the left sidebar and click Libraries.
- Find i80 Design System under shared libraries and click Connect.
The library's components, colors and typographies then appear in the Assets tab, and its tokens in the Tokens tab.
Foundations
Colors, typography, spacing and radius are published as design tokens. Apply tokens instead of typing values, so a design follows along when a foundation changes.
Products such as zPlan use a theme on top of the i80 tokens. Activate the product's theme in the Tokens tab to see the design in that product's colors and type.
To learn more about the foundations themselves, visit the Foundations section.
Icons
Icons are components in the library. Drag them from the Assets tab, and swap icon, size and color on the copy in the right sidebar.
Components
A component placed from the library is a copy of the library's main component. Copies stay linked to the main component and receive its updates when the library changes.
Adding components
- Open the Assets tab and expand the i80 Design System library.
- Search or browse for the component.
- Drag it into your board and adjust its variant and properties in the right sidebar.
Detaching components
The components mirror their code counterparts. Avoid detaching a copy: a detached copy no longer receives updates, and the design and the product drift apart.
If a component doesn't cover what you need, open an issue instead.
Overriding component styles
Changing a component's color or font size in a design looks small, but it forces custom CSS in the product and pulls it away from the rest of i80. Discuss overrides in an issue before using them.
Resizing components
i80 components don't decide their own layout: unless the documentation says otherwise, a component fills its parent container. Use Flex layout on boards and set components to Fill to get the same behavior as in the browser. A fixed width in a design is a fixed width in code, so reserve it for cases where the component really must not resize.
Designing product components
Components that only one product needs, such as a zPlan calendar view, belong in that product's own library file, built from i80 components and tokens. Keeping them in a separate library gives everyone on the product the same source, and shows what could later move into i80.
Support
Questions and requests go to the DesignSystem issues on Gitea.