# Universal (No Code) Themes

> *Notice* This document is proprietary and confidential to DashKite, Inc., (c) 2021-2022, all rights reserved worldwide. Do not disclose or distribute the contents of this document without express permission from DashKite, Inc. Thank you!

The ideal No Code platform will empower creators to independently vary the design and semantics of applications. In the context of a specific application, this feature is often referred to as _theming_ or simply _themes_. However, we want themes that will work with _any_ application, or at least any application we can build with the platform. We refer to such themes as _universal themes_.

Modern CSS and Web Components together provide a foundation for building universal themes. Front-end libraries like [Bootstrap][], [Semantic UI][], and [Shoelace][] increasingly demonstrate their potential. They aim to be comprehensive in scope, encompassing everything from button styles to typography to button styles. However, these tools are aimed at developers and designers, not creators, and thus their objective is to facilitate the creation or adaptation of design systems. We are effectively extending this approach to universal themes.

## Inflection Point

The modern Web today provides the necessary primitives to far surpass any previous HX framework. In particular, CSS custom properties—and, soon, layers—make it possible to create families of design systems, while Web Components provide a means to extend markup wherever necessary. Given the ubiquity of Web browsers, this means that we now have, for the first time, an opportunity to develop universal themes based on open standards.

## Approach

We do this by:

1. Focusing on creators, not designers nor developers.
2. Codifying design best practices wherever possible.
3. Taking full advantage of semantic markup.
4. Using _semantic design_ instead of utility classes.
5. Extensively parameterizing the resulting CSS.
6. Allowing themes to be easily adapted.

### Creator-Focused

We want to emulate the experience of a creator working with their favorite design team. “This is what I want,” they say, presenting a rough line drawing, or perhaps even just some notes.

“Something like this?” responds the design team, offering their first approximation.

“Kinda, but more like this,” says the creator.

“How about?” asks the design team, offering another rendition.

“Closer, but get rid of that.”

“How about now? Perfect.”

The creator typically has an idea of what they want, but lack the time or skills to realize it. Universal themes allow them to express these ideas in natural way, presenting design choices, much as a designer would, and iteralively refine those choices until the creator is satisfied. If a given theme lacks the capability to mee their needs, the creator may still elect to bring in a specialist to fill in the gap.

### Play

The concept of _dopaminergic play_ is central to our conception of universal themes. Instagram famously did this with their photo filters. Many popular games employ a similar approach to help new players reach proficiency. We want to encourage experimentation by constraining the design space to ensure rewarding outcomes for creators.

For a professional designer, practicing their craft, these constraints would be frustrating because they necessarily exclude parts of the design space that their skills would enable to them to explore constructively. For creators—including designers playing a creator role—we can make the available design space sufficiently rich while minimizing or, ideally, eliminating the risk of frustration with the results.

### Best Practices

A great deal of both HTML and CSS are essential boilerplate, encoding best practices for things like typography, color, and spacing. These best practices offer us a base layer for universal themes, things that creators typically assume are taken care of by the design system.

[Every Layout][] make the argument that there are only a dozen or so layout patterns, such as the Stack, the Sidebar, the Grid, and so on. Within these patterns, spacing can be parameterized, just as we can parameterize colors or fonts. Significantly, this also minimize or even eliminates the need for breakpoints:

> Employing algorithmic layout design means doing away with `@media` breakpoints, “[magic numbers](https://css-tricks.com/magic-numbers-in-css/)”, and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable…

### Semantic Markup

The use of semantic markup within universal themes provides context we can use to provide another layer of design decisions. Markup takes on the role that the CSS shorthand does in CSS frameworks. For example, we might attribute particular styles to `article` or `h1` elements. Combinations of these elements, supported by CSS combinators, are used to provide specialized styles, such as `article h1` for a heading inside an article element.

### Semantic Design

We use semantic CSS to reflect the creators' intent into the description of the design itself. In contrast, existing frameworks rely on utility classes, in which the intent behind the design is lost. For example, we define classes like `narrow` or `round`, rather than, say, `quarter-width` or `small-border-radius`. Preserving intent gives us additional context we can use in combination with semantic markup. For example, if we say a `footer` element is large, we mean relative to other elements within the `footer` elements, not to other elements on the page. Whereas if we say an element within the `main` section of the document is large, we expect to be larger than the other elements on the page, unless we've explicitly said otherwise.

### Parameterization

We make extensive use of CSS Custom Properties, which share the cascade algorithm of the built-in CSS properties, and are thus extremely powerful. In combination with the features of modern CSS, such as flex and grid layout modes, which make it possible to control virtually every aspect of a design system via CSS properties, we can take full advantage of semantic markup and design while making themes flexible and extensible.

With the coming [CSS color functions][], we can even extend parameterization to allow us to reliably generate entire color schemes from a few “seed” colors.

The new LCH color space will allow us to define relative colors. This yields more predictable results, since it maps to human perception of concepts like _lightness_, which map to creator intent. There’s another fun function called `color-contrast` that will be really useful as well, since it allows for selecting the best contrast from a range of options.

### Adaptability

Universal themes are still just CSS, and can thus be tailored by a professional designer. [CSS Scopes][] will offer further extensibility. Creators can engage a designer or developer to introduce highly-targeted CSS where universal themes fall short.

## Plan

Our initial development of universal themes is limited in scope to Web sites. Web sites already encompass a wide variety of design patterns, including:

- Blog posts, with optional bylines, timestamps, tags, and so forth.
- Cards for things like link previews, blog summaries, or products.
- Navigational controls, tab controls, and splitters.

We can extend themes incrementally to support an increasingly wide variety of content-focused scenarios. From there, we can begin supporting interaction scenarios, such as chat rooms or discussion forums.

## Notes

Shoelace presents [a really nice argument](https://shoelace.style/?id=new-to-web-components) for using Web Components.

[Halfmoon][] provides an [extensive set of variables](https://www.gethalfmoon.com/docs/customize/), although some of them are byproducts of the shorthand approach and aren’t relevant to a universal theme.

They also have [a nice argument](https://www.gethalfmoon.com/docs/customize/#advantages-over-preprocessors) in favor CSS variables over using preprocessors.

## Catalog

We summarize below a taxonomy distilled from various different design systems, CSS frameworks, and component libraries.

### Parameters

| Category | Parameters |
| ------------- | ---------------------------------------------------------- |
| Color | Primary, secondary, accent, success, warning, danger |
| Fonts | Body, heading, copy, accent (tables, captions, etc.), code |
| Spacing | Extra small, small, medium, large, extra-large maximize |
| Depth | Shadow, z-index |
| Miscellaneous | Border radius, animation speed |

### Application Level Patterns

| Category | Patterns |
| -------- | ------------------------------------------------------------ |
| Blog | Title, subtitle, featured media, banner media, byline, author, published, updated, location |
| Feed | Title, subtitle, featured media, byline (author, published, updatd, location) |
| Chat | Title, transcript, message, message editor |
| Message | Media, system |
| Media | Image, video, audio, link |

### Presentational Patterns

| Category | Patterns |
| ------------- | ------------------------------------------------------------ |
| Layout | Stacked, centered, grid, flow (flex), sidebar, carousel, mosaic |
| Article | Heading, copy, paragraph, aside, figure, media, caption, list, footnote |
| List | Bulleted, numbered, nested |
| Table | Minimal, data, sortable |
| Link | Text, block, button-like |
| Date and Time | Date, time, relative date/time, duration |
| Indicators | Icon, tag, badge |
| Notices | Information, update, warning, danger |
| Informational | Notice, card, detail, dialog, tabs, drawer |
| Tabs | Tab, tabs, panel |
| Button | Button, group, with icon, with badge |
| Miscellaneous | Avatar, breadcrumb, spinner, splitter |

### Form Patterns

| Category | Patterns |
| ------------- | ------------------------------------------------------------ |
| Form | Inline, tabular, stacked |
| Group | Section, page, with label |
| Text | Small, medium, large, long, email, password, URL, telephone, number, search |
| Choice | Toggle, one (radio buttons), many (checkboxes, dropdown) |
| Date and Time | Date, time, duration |
| Other | Range, rating, color, file |

[Bootstrap]: https://getbootstrap.com/docs/5.1/getting-started/introduction/
[Semantic UI]: https://semantic-ui.com/introduction/getting-started.html
[Shoelace]: https://shoelace.style/
[CSS color functions]: https://drafts.csswg.org/css-color-5/
[CSS Scopes]: https://css.oddbird.net/scope/explainer/#the-nearest-ancestor-proximity-problem
[Every Layout]: https://every-layout.dev/
[Halfmoon]: https://www.gethalfmoon.com/docs/introduction/