Design system

One visual spine under a personal umbrella of side projects.

Gloss is the design system for Arbitrary Definitions — a personal umbrella for self-hosted, single-user tools, never a SaaS product. It is not a company's design system; it is one person's. Nothing in it is derived from a brief; every value was chosen once, named, and kept consistent since. Any project under the umbrella keeps its own accent color and typographic mood; Gloss is what they all share underneath.

Start with color Jump to components

3 Color ramps

17 Semantic aliases

16 Components

How it is put together

assets/css/tokens.css is one hand-maintained, hand-readable file of CSS custom properties — the palette ramps, the semantic aliases, the dark theme, and a prefers-reduced-motion override. The component stylesheets read var(--gl-*) and nothing else.

The tables and swatches on these pages are static too — transcribed once from the token values, not recomputed on every build. If a hex changes in tokens.css, the swatch and the button are updated by hand together, the same afternoon.

Foundations

Color, type, space, elevation, and motion — with contrast ratios computed from the tokens and checked by hand, not typed by guess.

Components

Sixteen components across core, forms, feedback, and navigation, each rendered live next to the exact markup that produced it.

Patterns

Loop and Archive — a task dashboard and a capture app — put every component family in one screen at once.

A taste of it

Everything on one card

Recommended Unassigned

Rename the caution color

Three people have called it "yellow" in review this month. There is no caution token in this system — only --gl-color-success and --gl-color-danger, fixed across every project.

Markup

<article class="card" data-elevated style="max-width: 26rem;">
  <div class="card-body">
    <div class="badge-set">
      <span class="badge" data-tone="accent">Recommended</span>
      <span class="badge">Unassigned</span>
    </div>
    <h3>Rename the caution color</h3>
    <p>
      Three people have called it "yellow" in review this month. There is no
      caution token in this system — only <code>--gl-color-success</code> and
      <code>--gl-color-danger</code>, fixed across every project.
    </p>
  </div>
  <div class="card-footer">
    <button data-variant="primary" data-size="sm">Approve</button>
    <button data-variant="ghost" data-size="sm">Dismiss</button>
  </div>
</article>

Voice

Plain, unhurried, never marketing copy. “Take a photo or pick a file to keep.” — not “Effortlessly supercharge your workflow!” These are tools for one person or household; copy never addresses “you” as a customer, and an empty state just states the fact: “Nothing tracked yet.”

Using it elsewhere

Everything the system needs is three stylesheets and, for most components, no JavaScript at all.

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="components.css">

See Using the CSS for the details, including how to retheme the whole thing by overriding a dozen custom properties.