@protolabsai/design

@protolabsai/design

The protoLabs.studio brand, as code. One canonical token set → CSS custom properties, a Tailwind preset, and the brand assets. Every studio site consumes this so the brand can't drift across surfaces.

Source of truth for the values; docs/reference/visual-identity.md is the source of truth for the rules (when to use what, what we don't do).

Install

pnpm add @protolabsai/design

(Workspace-internal today; published to GitHub Packages when a non-monorepo site needs it.)

Use it

Plain CSS (the marketing site, any framework) — import the bundle once at the root. It sets the --pl-* custom properties and base element styles:

@import "@protolabsai/design/css";

Then reference tokens anywhere:

.card {
  background: var(--pl-color-bg-raised);
  border: var(--pl-border-width) solid var(--pl-color-border);
  border-radius: var(--pl-radius);
}

Tailwind — add the preset; utilities like bg-bg, text-fg-muted, rounded, font-mono, shadow-glow, bg-brand-gradient resolve to the locked values:

// tailwind.config.js
module.exports = { presets: [require("@protolabsai/design/tailwind")] };

Tokens in JS/TS — for anywhere you need the raw values (OG images, canvas, emails):

import { tokens } from "@protolabsai/design/tokens";
tokens.color.brand.violet; // "#7c3aed"

Assets — logos, icon treatments, banner, favicon:

@protolabsai/design/assets/protolabs-icon-outline.svg
@protolabsai/design/assets/readme-banner.png

Fonts — Geist + Geist Mono (self-host or):

<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet" />

What's in the box

Path	What
src/tokens.js	The source of truth. Edit here.
dist/tokens.css	Generated --pl-* custom properties.
dist/tokens.json	Generated token tree (preset + tooling read this).
css/base.css	Reset + element defaults built on the tokens.
css/index.css	The bundle (tokens.css + base.css).
tailwind/preset.cjs	Tailwind theme mapping.
assets/	Logos, icon treatments, banner, favicon.

Changing a token

Edit src/tokens.js, then regenerate — never hand-edit dist/:

pnpm --filter @protolabsai/design build

The generated CSS + JSON are committed so consumers don't need a build step. Keeping dist/ generated (not authored) is the anti-drift guarantee: the CSS the sites use and the values the preset reads come from the same object.

Locked values (2026-05-29)

Where the spec (visual-identity.md) and the shipped site (styles.css) disagreed, the shipped site won: 4px radius, #0a0a0c ground, #ededed foreground, bordered (not filled) primary buttons. Status colors are low-chroma OKLCH. Dark-first; the gradient swaps to a saturated variant under prefers-color-scheme: light. Full rationale in visual-identity.md and foundation.md §13.

When in doubt: make it grayer and smaller.