aFP Design System
Framework-agnostic Web Components for the adesso Financial Platform — works seamlessly with Angular, React, Vue, and any tech stack.
npm install @afp-design-system/core
The same components work seamlessly across Angular, React, Vue, and any other tech stack — or no framework at all. Built on native Web Component standards, they integrate without wrappers, adapters, or compatibility shims. Your team can adopt them incrementally, mix them with existing code, and never worry about lock-in.
Built on browser standards that don't change with framework trends. As Angular, React, or Vue release major versions, aFP components stay stable — no breaking changes cascading through your UI layer. Your investment in the design system holds its value regardless of what the JavaScript ecosystem does next.
Professionally designed, fully tested components ready to drop into any project. Skip the boilerplate for inputs, modals, tables, and navigation — they ship production-ready. Your team focuses on product logic and business value instead of rebuilding solved UI problems from scratch on every project.
Every visual detail is exposed as a CSS custom property. Switch between themes in a single attribute change, adapt colors and typography to any brand, or build entirely custom themes — all without touching component internals. Light and dark schemes are included out of the box and fully customizable.
WCAG 2.1 compliance is not an afterthought — it's the baseline every component is built to. Proper ARIA roles, live regions, focus management, and full keyboard navigation are included by default. Teams can ship accessible interfaces without specialist knowledge or dedicated accessibility audit cycles.
Complete type definitions ship with every component. Strongly typed APIs, exhaustive IDE auto-complete, and inline documentation make integration fast and safe. There are no separate @types packages to maintain, and refactoring across your codebase catches type errors at compile time.
Components are built on Lit — a lightweight library for reactive web components based on web standards. Documentation is powered by Eleventy, component metadata generated via Custom Elements Manifest, icons provided by Bootstrap Icons, and floating elements handled by Floating UI.
Tested and fully supported in the latest two major versions of all modern browsers. Critical bug fixes for older versions are addressed based on severity.