Start here: install the package, load CSS (and React or Vue if you want), wrap your app in
.ca-root, then wander
the product overview,
components, and
examples when you’re ready to feel the glass.
A caustic is the bright shape light makes when it passes through glass or water — like the shimmer on a pool floor, or the glow under a drinking glass.
We chose the name because that is the feeling we want on screen —
where light becomes texture — and the future of design we are shaping: open and layered,
not heavy and boxed-in — thin borders, quiet highlights, and motion that stays out of
the way. The npm package is caustica-design so it stays distinct from
unrelated Blender / 3D tools that also use “caustica.”
Reach for it when you want that quiet shimmer — glassmorphism from OKLCH design tokens and CSS, with React, Vue, or Angular components when you need typed behavior. A hand in what interfaces feel like next.
Like light through glass — not chrome
Screens breathe. See-through surfaces, thin borders, and soft highlights — closer to the shimmer on a pool floor than a wall of solid boxes.
Color that stays calm in light and dark
Color, space, and type live in OKLCH custom properties. Themes swap semantic aliases only — the look shifts without a color engine or runtime theme scripts.
CSS owns the look; React is optional
caustica-design/css class names define the look in any stack. Add
caustica-design/core (React),
caustica-design/vue, or
caustica-design/angular custom elements when you want typed props,
portals, and keyboard behavior.
npm install caustica-design
Pin a release with npm install caustica-design@0.2.4 if you want an exact version.
Peer dependencies: React wrappers need react and react-dom ≥ 18;
Vue wrappers need vue ≥ 3.4. Angular uses custom elements (no Angular peer).
Prefer the foundation entry when you only need fonts, tokens, and body chrome. Use the
full stylesheet for component classes (.btn, .panel, …).
import 'caustica-design/css/foundation'import 'caustica-design/css'Or link the built file from node_modules:
<link rel="stylesheet" href="node_modules/caustica-design/dist/index.css" />
For stylesheets without a bundler, use jsDelivr or unpkg. React components still need a
bundler via caustica-design/core.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/caustica-design@0.2.4/dist/index.css" /><!-- unpkg equivalent -->
<link rel="stylesheet" href="https://unpkg.com/caustica-design@0.2.4/dist/index.css" />
Importing only token CSS is not enough — without base.css / foundation you
lose body font, canvas glow, and grain.
Wrap the page in .ca-root. Glow and grain sit behind content either way; the
class is the recommended single stacking root for host apps.
<body>
<div class="ca-root">…</div>
</body>
Avoid nesting many blurred surfaces (sticky navbar + panel grids + cards). For dense UIs,
lower --ca-blur-glass / --glass-blur (default
32px), or scale --ca-glass-fill /
--ca-glass-edge (default 1). Hosts without
backdrop-filter get stronger opaque glass tokens automatically.
:root {
--ca-blur-glass: 16px;
--ca-glass-fill: 0.8;
--glass-blur: var(--ca-blur-glass);
}Typed wrappers over the same glass classes. Full guide: React components.
import 'caustica-design/css'
import { Button } from 'caustica-design/core'
export function Example() {
return <Button variant="primary">Continue</Button>
}Same component names as React. Full guide: Vue components.
import 'caustica-design/css'
import { Button } from 'caustica-design/vue'<Button variant="primary">Continue</Button>Custom elements with the same classes React and Vue use. Full guide: Angular components.
import 'caustica-design/css'
import { provideCaustica } from 'caustica-design/angular'
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
provideCaustica()<ca-button variant="primary">Continue</ca-button>
Dark is the default. Set data-theme on <html> to switch
light/dark — the same contract as the
living style guide.
<html lang="en" data-theme="dark">document.documentElement.setAttribute('data-theme', 'light')
// or from React: import { setTheme, useTheme } from 'caustica-design/core'
If you persist theme across full page loads, restore it with a blocking
<head> script before CSS paints — see
Avoid a theme flash. Recolor the system with
brand palette knobs after the CSS import.
Shift the glass toward your brand without rewriting tokens. After Caustica CSS loads,
set --ca-hue (OKLCH degrees, default 254) and optionally
--ca-chroma (intensity multiplier, default 1;
0 is Ink, a grayscale brand) in a host stylesheet. Import that file
after the package so your knobs win.
import 'caustica-design/css'
import './brand.css'/* brand.css */
:root {
--ca-hue: 192;
--ca-chroma: 1;
}
Status starts on the shipped ok, warn, danger, and info hues. Chroma does not follow the
brand knob, so Ink still warns. Optional --ca-hue-ok,
--ca-hue-warn, --ca-hue-danger, or
--ca-hue-info retune those tones. At runtime:
document.documentElement.style.setProperty('--ca-hue', '192')Tune a live palette in the examples color studio (Copy CSS), then read the full contract on Theming → Palette hue and single-token remaps on Tokens → Override semantic aliases.
Frost, fill, and edge are the same kind of host knobs as hue. After Caustica CSS
loads, set --ca-blur-glass (default 32px),
--ca-glass-fill (surface alpha multiplier, default 1), and
--ca-glass-edge (rim / highlight multiplier, default 1).
Import that file after the package so your knobs win.
/* brand.css — after caustica-design/css */
:root {
--ca-blur-glass: 24px;
--ca-glass-fill: 0.8;
--ca-glass-edge: 1.1;
}Tune them live in the examples glass studio (Copy CSS), then read the contract on Theming → Glass knobs.
Mask icons resolve from /icons/*.svg. Serve this package’s
public/icons (or dist/icons) from your app’s public root so
classes like .ui-icon--send resolve.