Getting started.

Install

npm install @dario-loi/polytope

Then load the stylesheet once, in your layout or page head:

import "@dario-loi/polytope/css";

Without a build step, link the hosted files instead (see Using in plain HTML):

<link rel="stylesheet" href="https://dario-loi.github.io/polytope/kit/polytope.css">

What this is

The SBB design system describes a design system as two things. It is a construction kit you take the parts of an interface from, and it is the design language of a brand: how the name, color, type, and principles are used. Polytope follows that definition, at the scale of one researcher. A polytope is the family of shapes that simplices belong to: points, segments, triangles, and their higher-dimensional relatives. The kit is built from the same parts.

It contains:

• Tokens: every color, size, space, and timing decision, stored once in tokens/tokens.json and compiled for each target.
• A CSS core that works in any HTML page with no build step.
• Astro components built on that CSS.
• A Python theme for matplotlib, plotly, Gradio, and Streamlit, so the figures in a paper match the page that hosts it.
• Exports for Tailwind, Sass, LaTeX, Figma token plugins, and code editors.
• Guidelines: principles, writing rules, and accessibility commitments.

What it covers and what it leaves out

The kit covers the pages a researcher builds most: a personal academic site, a page per paper, and small interactive demos. It will not cover every need. When a project needs a component the kit lacks, build it in the project with the tokens. If a second project needs it too, it moves into the kit.

No content ships with it. The pattern pages use example content for a researcher called John Doe, labeled as such, to show how the parts fit.

Credits

Polytope is made by Dario Loi (Northeastern University) and released under the Apache License 2.0. The visual world is after the 1961 mathematics exhibition by Charles and Ray Eames. Type: Ultra by Astigmatic, Libre Franklin by Impallari Type, JetBrains Mono by JetBrains.

Where to go next

• Installation covers every way to add the kit, including Python.
• Foundations explains the color, type, space, and motion decisions.
• Components lists every part with live examples and code.
• Patterns shows a full homepage, paper page, demo page, and CV.