The foundational design system for the Renku platform — brand identity, design tokens (colour, typography, spacing, opacity, radius, elevation) and base components (buttons, badges, accordion, alerts, tooltips, cards, pagination, modal).
Every value is a semantic CSS custom property, declared once in
styles/tokens.css and consumed everywhere.
Live site: https://.github.io//
| Path | What's in it |
|---|---|
index.html |
The whole UI kit page — brand identity, tokens, components |
styles/tokens.css |
Semantic design tokens (light + dark) |
styles/kit.css |
Layout and component styles for the page |
src/main.ts |
TypeScript: theme toggle, click-to-copy, data-driven sections |
dist/main.js |
Compiled output (committed so the site works with no build) |
assets/ |
Logo, favicon, key visuals |
renku-design-skill.md |
Portable agent skill — use the system with any AI |
renku_design.md |
Long-form token documentation |
No dependencies needed to view it — it's a static page:
npm start # serves on http://localhost:5173To work on the TypeScript:
npm install
npm run build # or: npm run watchdist/ is intentionally committed so the page works on any static host
without a build step.
The repo ships a workflow at .github/workflows/deploy.yml that builds and
publishes on every push to main.
- Push the repo to GitHub.
- Settings → Pages → Build and deployment → Source: GitHub Actions.
- Push to
main. The site appears athttps://<your-user>.github.io/<repo-name>/.
Custom domain: add it under Settings → Pages → Custom domain and point a
CNAME record at <your-user>.github.io.
Notes:
.nojekyllis present so paths beginning with_are served correctly.- All asset paths are relative, so the site works from a subpath.
Prefer no Actions? Set Pages → Source: Deploy from a branch → main /
root — the committed dist/ makes that work too.
renku-design-skill.md is a portable brief — paste it into Claude, Gemini,
ChatGPT, Copilot or any other assistant and ask it to follow the Renku
Design System. It contains the golden rules, every token, colour and logo
usage rules, and recipes for each component.
The page also offers it as a download ("Download agent skill").
- Reference tokens by name (
--color-primary,--space-4), never raw values. - One primary action per view; everything else outline or secondary.
- The logo is never modified — see the "Incorrect usage" rules on the page.
- Light and dark themes are both first-class (
data-themeon<html>).
MIT