AP Composition for Developers

Component API, token usage, and integration patterns.

Architecture

AP Composition is a layered design system:

  • Tokens — CSS custom properties for color, spacing, typography, radii, shadows
  • Components — Production React/Astro components that consume tokens
  • Patterns — Composed arrangements of components (hero, CTA, card grid)
  • Layouts — Page-level templates

Token usage

.my-component {
  color: var(--color-primary-600);
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-base);
  border-radius: var(--radius-md);
}

Component API

import { Button } from '@ap/composition-ui';

<Button variant="primary" size="md">Save</Button>

Figma-to-code mapping

Every Figma component maps to code via code_ref metadata. Token values in Figma map 1:1 to CSS custom properties. See the Figma integration guide.

Resources