@ibis-design/css

Styles and runtimes of the IBIS design system 3.x: a Tailwind CSS v4 entry with Skeleton v5 and the ibis / alchemy themes, a precompiled bundle for apps without Tailwind, the theme runtime, nav helpers, the toast API and the class recipes shared by @ibis-design/svelte and @ibis-design/react.

npm install @ibis-design/css

Tailwind v4 apps

@import "tailwindcss";
@plugin "@tailwindcss/forms";
@import "@ibis-design/css";

<html data-theme="ibis" data-mode="light">

Brings Inter, Montserrat and Istok Web, Skeleton v5 (utilities and component classes), both brand themes, the dark: variant on data-mode, rounded-surface-lg / shadow-elevation-{sm,md,lg} and every class the components use. It must go through Tailwind (Tailwind v3 is not supported).

Apps without Tailwind

<link rel="stylesheet" href="/node_modules/@ibis-design/css/dist/ibis.css" />

Precompiled: themes, fonts (./fonts/), Skeleton component classes, recipe classes and the semantic variables (--color-surface-page, --color-text-primary, --spacing-4, …). For variables only, use themes/<brand>.css + semantic.css.

Exports

| Import | Contents | |---|---| | @ibis-design/css | Tailwind v4 entry | | @ibis-design/css/ibis.css | Precompiled bundle | | @ibis-design/css/semantic.css | Semantic CSS variables (brand- and mode-aware) | | @ibis-design/css/fonts.css | Inter, Montserrat and Istok Web @font-face (woff2, OFL) | | @ibis-design/css/themes/ibis.css, /themes/alchemy.css | Skeleton v5 themes | | @ibis-design/css/theme | setTheme, getTheme, toggleColorMode, initTheme, themeInitScript, themeHtmlAttributes, … | | @ibis-design/css/nav | isNavActive, isNavItemActive, isSectionRoot, filterNavByRoles, hasAnyRole, splitMobileNav | | @ibis-design/css/clipboard | copyText (Clipboard API with a selection fallback) | | @ibis-design/css/toast | Framework-neutral toast API types and createToastApi (apps use toast from the component package) | | @ibis-design/css/recipes | Class recipes (buttonClasses, cardClasses, …), TONES, MUTED_TEXT, icons |

The 2.x /v2 aliases are removed in 3.0: migration guide.

import { setTheme } from "@ibis-design/css/theme";
setTheme({ brand: "ibis", mode: "system" }); // mode: "light" | "dark" | "system"

Fonts

Inter, Montserrat and Istok Web (the Alchemy heading font) are included. Metrisch, the IBIS heading font, is licensed and not included: apps that hold a licence declare their own @font-face for "Metrisch"; otherwise headings fall back to Avenir, then Montserrat.

Brands

ibis (default) and alchemy. Both share body type, spacing and radius; they differ in colours and heading font (Metrisch for ibis, Istok Web for alchemy).

AI coding agents

This package ships llms.txt, patterns.md and component-manifest.json for coding agents. The @ibis-design/svelte and @ibis-design/react READMEs have a ready-made block for the app's CLAUDE.md or AGENTS.md.

Docs

Getting started · Theme system · Tokens and build · Migrating from 2.x · from 1.x