Skip to main content

For engineers

The shape of the package​

Prism ships as a compiled component bundle plus a CSS token layer. You link one stylesheet and load one script; components attach to a single global namespace. There is no build step required to use it — the bundle is pre-compiled.

<link rel="stylesheet" href="/runtime/styles.css" />
<script src="/runtime/_ds_bundle.js"></script>

styles.css is an import manifest: fonts and tokens first, base reset last, component styles after. Loading it gives you every token as a CSS custom property and every component's class-based styles.

Using a component​

Components are exposed on the namespace and are plain React components:

const { Button, TextField } = window.PrismDesignSystem_39d121;

<Button variant="accent" onPress={save}>Save</Button>

Each component page in Components lists its full prop table — types, whether a prop is required, and what it does — generated directly from the component's type definitions, so it matches the code you are calling.

Theming​

Do not override component internals. To re-skin, set a product signature or remap the brand ramp on a container:

<div data-signature="commerce">…</div>

Everything inside re-skins. For dark mode, set data-theme="dark"; for density, data-density="compact|neutral|relaxed"; for the ten-foot tier, data-scale="cinema". These attributes cascade, so you can scope them to a subtree.

Accessibility you get for free​

Focus rings, keyboard interaction, ARIA roles and reduced-motion handling are built into the components. Your job is to not undo them: keep labels real, keep focus visible, and don't trap keyboard users.

If you want source and tokens as packages​

The packages/ workspace publishes the tokens (as CSS, a Tailwind v3 preset and a Tailwind v4 theme) and a shadcn-style component registry. See the packages README for versioning and publishing.