AP Composition

A design system with 8 components, governed tokens, and Figma integration. Built for Astro.

Get Started See the system

Components

8 components from @ap/composition-ui. These are live renders, not mockups.

Button
Primary
Secondary
Ghost
Danger
import { Button } from '@ap/composition-ui'
Badge
Default
Success
Warning
Error
Info
import { Badge } from '@ap/composition-ui'
Card
Default card
Content container with border.
Elevated card
Content container with shadow.
import { Card } from '@ap/composition-ui'

Also available: Dialog, Panel, Table, Tabs, Toast. Full catalog →

Tokens

CSS custom properties from packages/ui/src/tokens/. Every value below is live.

Color — Primary

--color-primary-{100..900}

Color — Neutral

--color-neutral-{100..900}

Color — Semantic

--color-success / warning / error / info

Spacing

--space-2 (8px)
--space-4 (16px)
--space-8 (32px)
--space-16 (64px)

Typography

--text-xs (0.75rem) --text-sm (0.875rem) --text-base (1rem) --text-lg (1.125rem) --text-xl (1.25rem) --text-2xl (1.5rem)

Radii

sm
md
lg
xl
full

Full token reference →

Usage

Import tokens and components. That's it.

Astro page
---
import { Button } from '@ap/composition-ui';
import { Card } from '@ap/composition-ui';
---
<Card variant="elevated">
  <h3>Project status</h3>
  <p>3 tasks remaining</p>
  <Button variant="primary">View</Button>
</Card>
Renders as

Project status

3 tasks remaining

View

Figma

Design-to-code token flow. The Figma file is real and connected.

Figma file
AP Composition — 12 pages (Foundations, Tokens, Typography, Color, Components, Patterns, Review Boards, Handoff)
API access
Verified — file readable via Figma REST API
Token sync
python3 scripts/sync_design_tokens.py --source figma — executes and validates
Current limitation
Automated Variables pull requires Figma Enterprise. Manual token extraction works today.

Full Figma integration details →

Status

What's real, what's in progress, what's planned.

Proven

  • 8 React components (Button, Badge, Card, Dialog, Panel, Table, Tabs, Toast)
  • Design tokens (color, spacing, typography, radii, shadows)
  • Astro integration via @astrojs/react
  • Cloudflare Pages deployment
  • Figma API access (12-page file)
  • Token sync script

In progress

  • Automated Figma Variables sync
  • Dark mode token switching
  • Component interactive documentation
  • More component variants

Planned

  • WordPress adapter
  • Pipeline automation
  • Quality gate integration
  • npm package publishing

Get started with AP Composition.

Install the package, import tokens and components, build with a governed design system.

Get Started Developer Guide