Design System database

In early 2023, I built a database that could store multiple design systems. The goal was to give Pipi 9 users the ability to change any application's front-end web user interface (UI).

Last week, I finally got around to using it and making some changes to prepare it for production.

I imported the CSS style sheets used by the Pipi 4-generated " bush wiki" website to generate a design system for public web pages and documentation. It looks similar to Wikipedia.

Then, I created a design system for work interfaces based on Metro UI. It resembles Microsoft Windows and Microsoft Office.

The database stores the CSS, UI Components and Design Tokens, making it easy to make system-wide changes.

• https://docs.metroui.org.ua/

I used the guidance provided by Nathan Curtis on how to standardise the naming of design tokens. That means

"To be sufficiently descriptive, a tokenized language that incorporates both taxonomy and typology needs many levels. Enough levels, as it turns out, to organize them into groups:

• Base levels as a token’s backbone that combine category (for example, color), concept (action) and property (size).
• Modifier levels to refer to one or more of variant (primary), state (hover), scale (100), and mode (on-dark).
• Object levels to refer to a component (button), element within a component (left-icon), or component group (forms).
• Namespace levels combining any (or all, in extreme cases!) of system (esds), theme (ocean or subbrand), or domain (retail)."

- Nathan Curtis

• https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676

Examples of Ajabbi Design System - design tokens

Ribbon Menu

• ajabb-ui-ribbon

• ajabb-ui-ribbon-tab-holder

• ajabb-ui-ribbon-tab-content

<nav data-role="ajabb-ui-ribbon">
    <ul class="ajabb-ui-ribbon-tab-holder">
        <li class="static"><a href="#">Static</a></li>
        <li><a href="#section-one">One</a></li>
        <li><a href="#section-two">Two</a></li>
        <li><a href="#section-three">Three</a></li>
    </ul>
 
    <div class="ajabb-ui-ribbon-tab-content">
        <div class="ajabb-ui-ribbon-tab-section" id="section-one">
            <p class="p-4">Section one</p>
        </div>
        <div class="ajabb-ui-ribbon-tab-section" id="section-two">
            <p class="p-4">Section two</p>
        </div>
        <div class="ajabb-ui-ribbon-tab-section" id="section-three">
            <p class="p-4">Section three</p>
        </div>
    </div>
</nav>

Design System Documentation

Using the Design System database as a source, the Pipi 9 Render Engine should be able to batch render a complete HTML documentation set for the Design System, which can then be made publicly available and shared on GitHub.

Resources

• https://www.smashingmagazine.com/2023/11/designing-web-design-documentation/

• https://medium.com/eightshapes-llc/authoring-component-documentation-6f894b498b88

CSS

Any style sheets (CSS) will be editable via web forms. Again, the style sheets can then be batch-rendered.

CMS

The content management system uses the design system to fully automate the production of every web page. This setup suits huge websites with hundreds of templates and thousands of pages, such as newspapers, dictionaries, universities, museums, and large, complex workplaces.