swisskit

A drop-in CSS and JS design kit in the Swiss, or International Typographic, style. White, ink, one red. Hairline rules, sharp corners, a strict left grid. Light by default with a dark toggle, and a set of components built for explainers, docs, and working notes.

Sibling of jawnpaper. Where jawnpaper is marker on cream paper, swisskit is ink on a grid. Both are namespaced so they coexist on the same page.

stylesheet

script, no build

themes: light + dark

dependencies

Design kit · Joe Amditis · part of jawnpaper

Overview

swisskit is the system behind the autonomy explainer, packaged so any page can use it. Drop in two files, put class="swiss" on the body, and the look holds across hero, sections, diagrams, cards, tables, and callouts.

Everything is namespaced with sk- classes and --sk- tokens. The JS wires its behaviors only when the matching markup is present, so loading it on a page with no diagrams or toggles costs nothing.

What it is built for

Long-form explainers, technical docs, working notes, and single-page writeups that need clear hierarchy and a few diagrams. Pages with strong type and a single accent, not marketing pages with hero gradients.

Foundations

Color, type, and spacing live as --sk-* custom properties on :root. Override any of them in your own stylesheet to retheme. The dark variant flips the same tokens.

Color tokens

--sk-bg

--sk-surface-2

--sk-ink

--sk-accent

--sk-neutral

Type scale — Archivo for text, IBM Plex Mono for labels and code

Display 800

Heading 700

Body 400 — the quick brown fox jumps over the lazy dog.

Mono label 500

Layout and navigation

The page is a two-column grid: a sticky sidebar table of contents and an 820px content column. On narrow screens the sidebar collapses to a hamburger menu, and the script handles open, close, outside-tap, and Escape. The sidebar links you see on the left are live: they highlight as you scroll.

.sk-wrap — the grid wrapper.
.sk-toc — sidebar that becomes a hamburger menu under 1000px.
.sk-theme-toggle — the fixed light/dark button, bottom right.

Diagrams

The kit does not bundle Mermaid, but it ships the theme variables and the container behaviors. Wrap a <pre class="sk-mermaid"> in a .sk-mermaid-wrap and the diagram zooms, pans, opens full size, and re-renders when the theme flips. The diagram below is live.

Fig. 1 — a live Mermaid flowchart · Ctrl/Cmd + scroll to zoom · drag to pan · ⛶ full size

flowchart TD
    a["Write the source"]
    b["Drop in swisskit"]
    c{"Light or dark?"}
    d["Ship the page"]
    a --> b --> c
    c -->|toggle| c
    c -->|done| d
    class d done
    classDef done fill:#e4002b,stroke:#e4002b,color:#ffffff

a step

the result

Fig. 2 — lanes, a CSS diagram with no Mermaid

lane A

first step

↓

second step

↓

result

lane B

first step

↓

second step

↓

result

two lanes side by side · no collisions

Fig. 3 — a horizontal step pipeline

step 1

DraftWrite the content first.

step 2

StyleAdd component classes.

step 3

ReviewCheck both themes.

step 4

ShipPublish the page.

Fig. 4 — a zoned gauge with a marker

marker label

startmiddlelaterend

zone one

zone two

zone three

Cards and callouts

Cards group into a bordered grid that collapses on mobile. Callouts come in three variants, differentiated by tint and title color rather than an edge stripe.

Card grid

label

A card carries a small uppercase label and a short body. Four across on desktop, one across on mobile.

label

Borders are shared between cells, so the grid reads as one ruled block instead of separate boxes.

label

Use them for roles, options, or a short feature set.

Warn callout

The warn variant tints the background with the accent and colors the title red. Use it for the one thing on the page a reader must not miss.

Ok callout

The ok variant is quiet, with a bright title and a plain surface. Use it for a resolved note or a worked example.

Info callout

The info variant colors the title red on a plain surface. Use it for asides and supporting detail.

Tables and samples

A ruled data table with uppercase mono headers, plus inline tags. The sample card reproduces a chat or message, with a redaction chip for names and projects you keep out of the source.

Component	Class	Use
Card	`.sk-card`	grouping
Callout	`.sk-callout`	emphasis
Pipeline	`.sk-pipeline`	process

Sample card, with names redacted

Messages sample

A handoff message (reproduced)

Reproduce a chat or notification here. Real names and projects stay out of the source — use a redaction chip like a project or a colleague so nothing private ships in the HTML.

footer line · mono, dim

Prompts and quotes

A prompt card has a copy button wired by the script: it writes the body to the clipboard, and if the clipboard is blocked it selects the text instead so the reader can copy it by hand. The pull quote scales type for emphasis without an edge stripe.

01 a copyable block

This text is copyable. Click the button and it lands on your clipboard. Use prompt cards for anything a reader will want to lift verbatim — a command, a prompt, a config snippet.

A pull quote earns attention through scale and whitespace, not a colored bar down its side.

A collapsible section

Native <details> styled to match. The marker swaps between plus and minus.

Use it for supporting detail that not every reader needs.
Keeps the main column short and scannable.

Install

Two ways. Copy the files, or load from the CDN.

CDN paste into your <head>

Then build from STARTER.html, or copy any component above. Full docs are in the README.

swisskit. Sibling of jawnpaper. White, ink, one red.