import { Meta } from '@storybook/addon-docs/blocks'; import WelcomeImage from './assets/adminx-screenshot.png'; import BlocksIcon from './assets/blocks.svg'; import CircleMenu from './assets/circle-menu.svg'; import AppsIcon from './assets/apps.svg';

AdminX Design System

<p className='excerpt'>Here you can find our design guidelines, component documentation, and resources for building apps in Ghost Admin.</p>

What's inside

The AdminX Design System is a collection of React UI building blocks for designers and developers to create apps for Ghost Admin. Its main purpose is to provide a library of available components and maintain consistency across the whole product.

    <h4>Foundations</h4>
    <p>Basic global design patterns like colors and icons</p>
    [Read more &rarr;](/docs/foundations-colors--docs)
</div>
<div>
    
    <h4>Global components</h4>
    <p>UI building blocks to be used across all apps in Ghost Admin</p>
    [Browse &rarr;](/docs/global-form-checkbox--docs)
</div>
<div>
    
    <h4>App specific</h4>
    <p>Reusable components of individual React apps in Ghost Admin</p>
    [Example &rarr;](/docs/settings-setting-section--docs)
</div>

</section>

The system uses Storybook — if you're new to it, we recommend reading about what it is and how to use it, on storybook.js.org.

</div>