Design Library
Nitrozen Design System
The Nitrozgn design System offers design patterns and guidance for building extensions in the Fynd Platform. Nitrozen Design system is the place for shared design patterns, such as colors, text styles, assets, and Components that assists teams in building quality extension, and maintain consistency in terms of style and pattern.
The Fynd Platform is the back office where sellers manage their business. Extensions are embedded within the Fynd Platform to seamlessly integrate into sellers' workflows. The Fynd platform provides a surface, which is an iframe on the web and a WebView in the Fynd Platform mobile app, for embedded extensions to render their UI. Use of Nitrozen design system ensures a familiar and consistent user experience for sellers.
Nitrozen includes the following features:
- Design guidance: Guidance on accessibility, colors, typography, spacing, naming, and actionable language to help you create experiences that feel like the rest of the Fynd Platform seller panel.
- Components: Reusable building blocks made of interface elements and styles, packaged through code.
- Tokens: Named CSS values that represent design decisions for elements like color, spacing, and typography. Apply them to extension designs to help unify seller experiences.
- Icons: Carefully designed icons that are focused on commerce and entrepreneurship. Use them as visual aids to help sellers complete tasks.
- Patterns: Repeatable solutions to common UX problems in a specific seller situation. Using the right pattern in the right context makes the admin familiar and easy to use.
The Nitrozen Design Library is available in react (@gofynd/nitrozen-react) and vue (@gofynd/nitrozen-vue)
For installing @gofynd/nitrozen-react or @gofynd/nitrozen-vue in your project and its usage, refer to the following story books: