Introduction
Install packages, configure tokens, and start building with Vroxal Design quickly.
For designers
Designers can access the official Vroxal Design on Figma. This file includes foundations, components, and usage guidelines that stay in sync with the development packages.
- Design tokens (colors, typography, spacing)
- Ready-to-use components
- Usage guidelines and best practices
Use the Figma file as the single source of truth while designing new features or iterating on existing ones.
For developers
The Vroxal Design is distributed as npm packages. Install the required packages and start using the components directly in your Angular project.
Install required packages
To use the design system, you need to install the following packages:
terminal
Copy code
Import styles
Add the design system styles to your angular.json file so that tokens, icons, and components are available globally.
angular.json
Copy code
Import components
Import the required components from the Angular components package
example.component.ts
Copy code
Use components
Use the imported components directly in your templates.
example.component.html
Copy code
Agentic AI Instructions
Governance content for AI instructions
Copy this into your agent instruction file (for example, AGENTS.md) in the consuming project.
AGENTS.md
Copy code