/
Dark Light
System
Default LBBW Jira Confluence Source Code
Share
Playground

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
53 Components
3 Frameworks
100% TypeScript
WCAG Accessible
Framework Agnostic

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.

Future-Proof

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.

Fast Development

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.

Fully Themeable

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.

Accessibility First

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.

TypeScript Native

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.

Open-Source Stack

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.

Browser Support

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.

Chrome Edge Firefox Opera Safari
esc
Share
Create a link with a predefined theme that is automatically applied when the generated link is opened. Default LBBW Presentation Mode
Abort Copy Link