Mike's Notes
Resources
References
Repository
- Home > Ajabbi Research > Library >
-
Home > Handbook >
Last Updated
17/05/2025
Article
By: Mike Peters
On a Sandy Beach: 03/06/2024
Mike is the inventor and architect of Pipi and the founder of Ajabbi.
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.
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
Examples of Ajabbi Design System - design tokens
Ribbon Menu
-
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.
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.
