Foundations
styles.css
Colors, type, spacing, radii, shadows, focus rings, fonts. One import.
guidelines/
WCAG 2.2 AA
4.5:1 text floor, visible focus rings, native inputs in every control, landmarks and skip links, reduced motion. Details in the guide's Accessibility section.
Components
Registered as <Apz*> by vue/arpezia-vue.js, or import the SFCs from components/. Props, slots and events are documented in each component's .prompt.md.
Controls and surfaces
Button, IconButton, Input, Select, Checkbox, Radio, Switch, Card, Badge, Tag, Tabs, Dialog, Toast, Tooltip
Library · 7Catalog pieces
LevelBadge, AttributePill, ProgressRow, FacetGroup, ContinueCard, GoalTile, SimpleViewToggle
App shell · 8Page structure
PageHeader, ShelfHeader, ModeToggle, NotificationPill, SessionBar, MetricCard, Heatmap, DataTable
import { createApp } from 'vue';
import { ArpeziaUI } from './Design System/vue/arpezia-vue.js';
createApp(App).use(ArpeziaUI).mount('#app');
<apz-button>Resume</apz-button>
<apz-level-badge level="Intermediate"></apz-level-badge>Product
Communications
For AI assistants
Design System/SKILL.md is a short rules file that lets Claude or any coding agent build in-brand: colors, type, radii, voice, and accessibility floor. Load it before generating UI or copy.