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.

Text

About Text

The text sizing classes: .h1, .h2, .h3, .h4, .h5, .h6, .body1, .body2, .caption, they change the font-size, font-weight, line-height, margin, and letter-spacing of their contents.
Nothing is important, so everything can be overridden.
We set .body1 as the default text styling for div, p, and span. We set the .h1 as the default styling for h1, ...(other heading elements), ans .caption as the default styling for small.

Heading 1 (h1, .h1)

Heading 2 (h2, .h2)

Heading 3 (h3, .h3)

Heading 4 (h4, .h4)

Heading 5 (h5, .h5)

Heading 6 (h6, .h6)

Body 1 (p, span, div, .body1)

Body 2 (.body2)

This is some caption text. (.caption, small)

Text Weight and Decoration

Here is some thin text. (.fw-thin)

Here is some normal text. (.fw-normal, .norm-text)

Here is some text that has font weight slightly bolder than the normal font-weight of 400. (.fw-regular)

Here is some bold text. (.bold)

Here is some bold text. (b, .bold)

Note: The bold (b) element should be used for things like keywords in a summary, product names in a review, or other spans of text that would typically be boldfaced.

Here is some bolder text. (strong, .bolder)

Note: The strong (strong) element should be used to indicated that its contents have special importance.

Here is some underlined text.(u, .underline)

Note: The u element should not be used for presentation purposes or to denote titles of books. Valid use cases include: annotating spelling errors, applying a proper name mark to denote proper names in Chinese text, and other forms of annotation.

Here is some italic text. (em, i, .italic)

The "i" element represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, and taxonomical designations, among others.

The "em" element Marks text that has stress emphasis. The `em` element can be nested, with each nesting level indicating a greater degree of emphasis.

~~Here is some text that is strikethrough-ed. (s, .strikethrough)~~

Use the 's' element to represent things that are no longer relevant or no longer accurate.

~~Here is some underlined and strikedthrough text. (u>s,s>u .underline-strikethrough)~~

Here is an example of subscript (sub, .sub): H₂0.

Here is an example of superscript (sup, .sup): x² + y² = z².
Note: You might want to use superscript for citations in articles.

Highlighted Text

Below, you see examples of the mark element being used. The mark element represents text which is marked or highlighted for reference or notation purposes due to the marked passage's relevance in the enclosing context.
The classes below set the background color of only a mark element.

Here is some regular highlighted text. (mark)

Here is some primary highlighted text. (mark.primary)

Here is some secondary highlighted text. (mark.secondary)

Here is some error highlighted text. (mark.error)

Here is some success highlighted text. (mark.success)

Here is some warning highlighted text. (mark.warning)

Here is some info highlighted text (mark.info)

Text Colors

The classes below edit the color css property and mark the set value as important.

Here is some normal text.

Here is some primary text. (.t-primary)

Here is some secondary text. (.t-secondary)

Here is some error text. (.t-error)

Here is some success text. (.t-success)

Here is some warning text. (.t-warning)

Here is some info text. (.t-info)

Here is some text-secondary text. (.t-tsecondary)

Here is some disabled text. (.t-disabled)

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