My Design System

Why I Created a Design System

I was using Material UI for a project, and the bundle size, combined with the css-in-js approach to styling, resulted in an application that was difficult to render on the server and that had a pretty poor initial load time. I wanted to create a design system that was similar to Material UI / Flutter but that emphasized semantic HTML and a small bundle size.

Also, when creating a Rich Text Editor with Lexical, I found that it was best to not use highly abstracted components, so I tried to create a library of simple components that can be easily rendered on the server and that doesn't use too much CSS and JavaScript.

In summary, the goal of the design system is to create a look that is comparable to other popular design libraries used today while minimizing load time, bundle size, and complexity.

Assumptions

NOTE: This design system uses CSS and JavaScript that are tied together - i.e., some classes are required for components' JavaScript to work correctly. The design system bundles and transpiles client-side JavaScript using webpack, which is why you might want to download the JavaScript and CSS files from the resources section and tweak them / re-transpile them for your own use. If you make changes to the CSS, I recommend you use PostCSS so your changes will appear the same across all browsers.

The design system assumes that:

you want to use HTMX to create a SPA (Single Page Application),
you want to use semantic html, but that you want to style components primarily with CSS classes and inline styling,
your Content Security Policy allows for inline styling,
you want to use Floating UI for tooltips, menus, dropdowns, and the like,
you want to have slightly different layouts for desktop and mobile,
you want to prioritize mobile devices (you want the application that you show the user to always be similar to the mobile device view),
you do not want to listen to resize events on mobile

Explore the Design System

If you are looking for information about specific components or utility classes, use the links in the list below to find more information about those aspects of the system. Each aspect of the design system should describe the styling, accessability, and JavaScript concerns that go along with it.

If you are looking to learn more about the design system and the decisions made, continue reading below or navigate to the 'General' page for the design system.

If you want the code, navigate to the resources section.

Note that I am still working on documenting the design system. I got tired of writing the documentation and wanted to move onto other things. I will come back and finish / improve the documentation eventually.

Components and Utility Classes

NOTE: Popovers includes tooltips, dropdowns, dialogs, and menus - basically everything that is shown on mouseover or focus or everything that is in the top-layer. Media includes images, video, and audio. Surfaces includes cards, quotes, and asides. Other Inputs includes toggle buttons. Tabs includes tabs, steppers, and mobile steppers. Fixed Content includes the navbar, footer, sidebars, drawers, and Floating Action Buttons.

Surfaces

About Surfaces

Surfaces are cards, colored backgrounds, quotes, block quotes, and asides - basically anything that deviates from the normal background color.
Cards Cards can be either a normal element, like a <div>, or they can be a <button>. There are three different elevations for cards: .el1 .el2 .el3 , which have a slightly different box-shadow and background color. Colored Backgrounds They change the color of the background and the text within the colored background. Here are the options:

.bg-trans{background-color: transparent!important;}
.bg-primary{background-color: var(--primary)!important;color: var(--button-contrast-text)!important;}
.bg-secondary{background-color: var(--secondary)!important;color: var(--button-contrast-text)!important;}
.bg-error{background-color: var(--error)!important;color: var(--button-contrast-text)!important;}
.bg-warning{background-color: var(--warning)!important;color: var(--button-contrast-text)!important;}
.bg-info{background-color: var(--info)!important;color: var(--button-contrast-text)!important;}
.bg-success{background-color: var(--success)!important;color: var(--button-contrast-text)!important;}
.bg-tsecondary{background-color: var(--text-secondary)!important;color: var(--button-contrast-text)!important;}
.bg-disabled {background-color: var(--disabled)!important;color: var(--text-disabled)!important;}
.bg-card {background-color: var(--secondary-background)!important;}

Quotes For quotes, there are inline quotes, which are implemented by utilizing the

<q>

element or by using the class

.quote

, and there are block quotes, which are implemented by using the .blockquote class or the <blockquote> element. The blockquote takes up its own line(s), and the quote is an inline element. Asides Asides are surfaces which should be the direct child of a block element and that only take up a portion of the width of the screen. Asides are implemented by using the <aside> element, and they only take up a certain percentage of the width of their parent block element. Aside elements can have a .left or .right class which controls which way they float.

Block elements that contain an aside need a <span> element width either a .left or .right class and a .clear class to be their last element child for their formatting to work correctly.

Cards

Cards .el1

Div .el-1 Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor possimus delectus, cupiditate tempora sunt corrupti totam. Alias, ex sapiente. Eveniet fugiat odio unde tenetur qui rem, quia dolores consectetur nesciunt!

Here is a card footer

Cards .el2

Div .el-2 Card Title

Here is a card footer

Cards .el3

Div .el-3 Card Title

Here is a card footer

NOTE: The border radii of the cards and the absence / presence of borders can be explained by the .rounded .outlined and .main classes for the cards.

Colored Backgrounds

Enforced Transparent Background:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem accusantium consectetur totam est similique, quasi, voluptates mollitia ullam dignissimos omnis enim eum ipsum inventore tempore voluptate pariatur cum. Fugit, labore.

Primary Background:

Secondary Background:

Error Background:

Warning Background:

Info Background:

Success Background:

Secondary Text Background:

Disabled Background:

Card Background:

Quotes

Quote-Like Surface:

Here is a quopte like surface that I saw somewhere - I included it because I thought it looked cool.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione consectetur ea sit similique earum repellendus fuga ullam doloremque consequatur. Vitae itaque facilis nihil magni ipsa ad ea nostrum mollitia architecto.

Inline Quote:

Walt Disney once said that the way to get started is to quit talking and begin doing

Block Quote:

Do you wish to rise? Begin by descending. You plan a tower that will pierce the clouds? Lay first the foundation of humility.
St Augustine

Asides

Left Aside:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint nulla eius similique, error facilis et deserunt inventore architecto quae sunt, nam,

exercitationem fugiat fuga autem iusto facere tenetur ad quidem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, ducimus quidem nihil consectetur hic tenetur dicta eveniet, maxime sint minima assumenda deserunt aliquid ea, quos veritatis eligendi iste tempore molestias!

Right Aside:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint nulla eius similique, error facilis et deserunt inventore architecto quae sunt, nam,

Search Icons

About Icon Search

Resources

Click on the individual buttons to download separate files, or click on the All Files button to download a ZIP file of all the code. The code is sent pre-transpiled for readability.
Click on the VSCode Snippet button to download a copy of the html.json file that will make implementing this design system simpler.

All Files

Shared CSS

Desktop CSS Mobile CSS

Shared JavaScript

Desktop JavaScript Mobile JavaScript

VSCode Snippet