site-kit

Shared design system and component library for Suppers AI sites.

This repo provides one CSS file (dist/design-system.css) that any Suppers AI site can <link> to get the same fonts, colors, type scale, spacing, and base typography. Future PRs will add web components (<sa-header>, <sa-hero>, …) and HTML page templates; nothing in this initial cut requires JavaScript or a build tool on the consumer side.

Foundation v0.1.0 ships:

Use it

The kit is hosted on GitHub Pages — see the live showcase for every token and component rendered live.

<link rel="stylesheet" href="https://suppers-ai.github.io/site-kit/dist/design-system.css">

The CSS references font files via ../fonts/, so consumers vendoring the kit themselves must deploy dist/design-system.css alongside a sibling fonts/ directory. Linking the hosted URL above just works.

Components

Each web component is a single ES module under dist/components/. A page imports only the components it uses:

<script type="module" src="https://suppers-ai.github.io/site-kit/dist/components/sa-header.js"></script>
<script type="module" src="https://suppers-ai.github.io/site-kit/dist/components/sa-hero.js"></script>
<script type="module" src="https://suppers-ai.github.io/site-kit/dist/components/sa-feature-grid.js"></script>
<script type="module" src="https://suppers-ai.github.io/site-kit/dist/components/sa-feature.js"></script>
<script type="module" src="https://suppers-ai.github.io/site-kit/dist/components/sa-footer.js"></script>

<sa-header>
  <a slot="brand" href="/">acme.example</a>
  <nav slot="nav"><a href="/docs">Docs</a></nav>
  <a slot="actions" href="/login">Sign in</a>
</sa-header>

<sa-hero
  title="Compose your site from blocks"
  subtitle="One link, one accent override, every component themed."
  cta-href="/docs"
  cta-label="Read more">
</sa-hero>

<sa-feature-grid>
  <sa-feature title="Drop-in modules">
    <p>Each component is a single ES module — import only what you use.</p>
  </sa-feature>
  <sa-feature title="Themed once">
    <p>Override <code>--sa-accent</code> on <code>:root</code> and every component picks it up.</p>
  </sa-feature>
</sa-feature-grid>

<sa-footer>
  <strong slot="brand">acme.example</strong>
  <nav slot="links"><a href="/docs">Docs</a></nav>
  <span slot="copyright">© 2026 Acme.</span>
</sa-footer>

Components are styled via Shadow DOM and pick up --sa-accent automatically through CSS-custom-property inheritance — no extra wiring per component.

For chat-style app surfaces, <sa-chat> provides a two-region layout (scrollable messages, pinned composer) that keeps your messages and composer in light DOM so existing selectors like #messages and #user-input remain queryable from app code:

<script type="module" src="https://suppers-ai.github.io/site-kit/dist/components/sa-chat.js"></script>

<sa-chat>
  <div slot="messages" id="messages"></div>
  <form slot="composer" id="composer">
    <textarea id="user-input" placeholder="Ask anything…"></textarea>
    <button type="submit">Send</button>
  </form>
</sa-chat>

Tailwind preset

Tailwind v3 consumers can pick up --sa-* token values as utility classes (e.g. bg-sa-accent text-sa-muted px-sa-4 text-sa-lg) by extending the bundled preset:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require('@suppers-ai/site-kit/tailwind-preset')],
  content: ['./src/**/*.{html,ts,tsx,vue,svelte}'],
};

The preset’s tokens reference the CSS variables (var(--sa-accent) etc.), not concrete hex values, so per-site :root { --sa-accent: … } overrides keep working with no Tailwind-config rebuild. The kit’s design-system.css must still be loaded in the HTML — the preset only declares the utility-class API, not the variable values.

Override the accent

The default accent is #1e3a5f. Override with one declaration in your own stylesheet, loaded after design-system.css:

:root { --sa-accent: #fe6627; }   /* solobase  */
:root { --sa-accent: #FCC450; }   /* wafer     */
:root { --sa-accent: #f54e00; }   /* gizza-ai  */

Hover and focus states derive from --sa-accent automatically via color-mix(), so each site only declares the base.

Layout

Vendored fonts

Two font families ship with the kit. Both are SIL OFL — the full license text for each lives under fonts/LICENSES/.

The bundled woff2 files are subset (Itim split into latin and latin-ext; JetBrains Mono latin only). Consumers concerned about CLS on the Itim latin-ext swap can override that one @font-face block in their own CSS using font-display: optional.

Develop

./build.sh                    # rebuild dist/design-system.css
python3 -m http.server 9100   # then open http://localhost:9100/showcase/

build.sh is plain cat — no minification, no PostCSS. It runs a build-time assertion that the resulting dist/design-system.css declares :root (token variables) before any var(--sa-*) reference. A future reorder of the cat order would fail loudly.

Browser support

Modern only — Chrome 111+, Firefox 113+, Safari 16.2+. Required by color-mix() and modern CSS features; no polyfills.

License

This site is open source. Improve this page.