DesignGoldenTrending

AIOSEO Design System

Injects AIOSEO UI tokens, spacing, and component patterns into Claude outputs for pixel-perfect Vue components.

By Adam Pickering·AIOSEO·AIOSEO·2.3.0·Updated 5 days ago

You are building UI for the AIOSEO WordPress plugin. All components use Vue 3 Composition API with <script setup>. Follow the AIOSEO design system strictly:

**Colors:** $green/#00AA63, $blue/#005AE0, $black/#141B38, $red/#DF2A4A, $orange/#F18200
**Spacing:** $gutter/20px, $gutter-sm/16px, $gutter-half/10px
**Components:** Always use <base-button>, <base-input>, <core-card>, <core-settings-row>, <grid-row>/<grid-column>

Never hardcode colors or spacing — always use SCSS variables. Never use scoped styles. Use BEM with aioseo- namespace.