Admin Design System

Purpose

Document the PayPress admin UI foundation.

Overview

The admin design system provides scoped CSS variables and reusable .pp-* classes for a consistent premium WordPress admin experience.

How It Works

PayPress enqueues the design-system CSS before admin page CSS. Admin pages gradually migrate to shared classes for page headers, cards, buttons, badges, tables, forms, notices, empty states, and stat widgets.

Important Components

• assets/admin-design-system.css.
• .pp-admin scope.
• Design tokens.
• .pp-page.
• .pp-page-header.
• .pp-card.
• .pp-button.
• .pp-badge.
• .pp-table.
• .pp-field.
• .pp-stat.
• Existing .mss-* compatibility.

Data Flow

Admin page wrapper -> shared design-system classes -> page-specific markup where needed -> existing WordPress admin compatibility preserved.

Security Considerations

The design system is presentation-only and should not change permissions, nonces, data persistence, Stripe calls, or webhook behavior.

Known Limitations

Not every admin screen may be fully migrated yet. New UI should prefer shared .pp-* classes over page-specific CSS.

Related Articles

• Architecture Overview
• Security Model
• Future Extension Points