Overview

The design system ships as a single, self-contained design-system/ folder that you place in the part of your project that is served as static assets. It contains the sources — tokens, fonts, component styles, scripts and icons. It intentionally does not ship a pre-compiled stylesheet; you build that yourself (see below).

What’s in the folder

• Directorydesign-system/

  • Directorystyle/

    • Directorybase/ the importable main.css + tokens, fonts & component styles

      • …
    • Directoryfonts/ Geist, Geist Mono, Noto Naskh Arabic

      • …
  • Directoryjs/

    • _defaults.js global config every component reads
    • runtime.js inline icons (window._icons) — not needed for JSP (see below)
    • theme.js format.js shell.js table.js … components
  • Directoryassets/

    • Directoryicons/ Tabler icon set (SVG)

      • …
    • Directorypreline/ preline.js — generated, copied from the preline package

      • …
    • Directorysection-icons/ control chrome (select / date)

      • …

Source of truth

This folder is the source of truth. You develop the design system here, then copy the folder into a consuming project. Changes flow out of the design system, never back from a specific app.

runtime.js and JSP

runtime.js provides window._icons for plain-HTML use. JSP projects don’t need it — they typically inject the icon SVGs server-side instead. Either way, window._icons just has to exist before the component scripts run.

Your stylesheet, your build

You don’t link a stylesheet from inside design-system/. Instead, your project owns its own stylesheet and pulls the design system in:

your-project.css

/* your own project styles… */

/* …and, when you want the design system, import its main entry: */
@import '.../design-system/style/base/main.css';
@source '../pages'; /* scan YOUR markup for classes */

Then compile that file with Tailwind. This way your project and the design system share one build, and you can add your own utilities and overrides alongside it.

• Consuming the design system = import main.css into your stylesheet and build it.
• Developing the design system = edit the sources under base/ and rebuild.

Preline is included

Preline (both its styles and the bundled assets/preline/preline.js) lives inside the design system. You don’t wire Preline into your own project — main.css already imports its variants and sources its runtime. Just keep the preline package installed so that import resolves at build time.

Pick your path

Vanilla setupPlain HTML. Hard-code the head once and you're done.

JSP / Gradle setupServer-rendered pages, with the build wired into Gradle.

Both paths use the identical design system — the JSP path only adds server-side conveniences (includes, an asset-version cache-buster, the Gradle build task).

InstallationDependencies, scripts and the preline copy step — start here.