UI Kits
Documentation

Design System.

Foundations, themes, spacing, component guidance, accessibility, and production handoff.

Foundation

Design-system overview

AblePro UI Kits provides reusable component code, shared CSS, design tokens, responsive previews, page templates, QA guidance, and implementation notes.

84components
10categories
9collections
6page templates
Themes

Color systems

AblePro
#0647b8
Slate
#334155
Forest
#166534
Berry
#9d174d
Spacing & shape

Scale options

Spacing

Compact.75×
Standard1×
Comfortable1.2×

Radius

Square2px
Soft8px
Rounded14px
Pill999px
Handoff

Implementation workflow

  1. Choose a component, collection, or complete page template.
  2. Preview responsive, dark, theme, variant, and state options.
  3. Review usage, accessibility, and QA guidance.
  4. Copy HTML/JSX/CSS or export design tokens.
  5. Use UI Builder for complete page composition and handoff.
Theme StudioToken ExportAccessibility CenterUI Builder