caustica

v0.2.3

Published

19 days ago

Caustica — glass design system with semantic tokens, translucent UI, and typed React core.

Downloads

682

0High
0Medium
0Low

click-apply

caustica design-system css react tokens

Caustica Design System

Caustica takes its name from the bright patterns light makes when it shines through glass or water — like the shimmer on a pool floor, or the glow under a drinking glass.

The design system aims for that same feeling in UI: soft, see-through surfaces and gentle depth — not heavy, solid chrome. You get shared color tokens, glass-style components, typed React helpers, and docs, all on one CSS foundation.

Migration: @apply-agent/design-system is deprecated. Install caustica instead (same CSS/React surface; update import paths).

Install

npm install caustica

Peer dependencies for React: react and react-dom ≥ 18.

import 'caustica/css' // or 'caustica/css/foundation'
import { Button, useTheme } from 'caustica/core'

Wrap your app shell in .ca-root (recommended). Canvas glow and grain sit behind content either way.

<body>
  <div class="ca-root">…</div>
</body>

Glass performance: avoid nesting many blurred surfaces (navbar + panel grids + cards). For dense UIs, lower blur:

:root {
  --ca-blur-glass: 16px; /* default 32px */
  --glass-blur: var(--ca-blur-glass);
}

CSS-only via CDN (jsDelivr / unpkg):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/caustica/dist/index.css" />

React still needs a bundler — import from caustica/core. Set data-theme="light" | "dark" on <html> (or use useTheme / setTheme). Serve /icons/*.svg from this package’s public/icons or dist/icons.

Docs

Local: npm run docs:dev → http://127.0.0.1:5175/ (docs + examples at /examples/). npm run dev is the same stack on port 5174.

Guides: Tokens, Theming, Getting started. Component pages under site/components/. Examples-only server: npm run examples:dev.

What’s included

Tokens — DTCG JSON (tokens/) + 3-layer CSS (src/css/tokens/)
CSS — foundation or full stylesheet (caustica/css)
React — typed wrappers from caustica/core
Docs site — site/ (built to site-dist/ via npm run docs:build)

See DESIGN.md for principles. Full API surface is in the docs / src/core/.

License & notices

Code: dual MIT OR Apache-2.0 — Copyright (c) 2026 Ali Abolwafa (Apache-2.0 adds an express patent grant)
Disclaimer / liability: DISCLAIMER.md
Trademarks: TRADEMARKS.md (Caustica marks; third-party names are not endorsed)
Launch / domain checklist: LEGAL.md
Site legal pages: Privacy, Terms, Cookies, License (/license on the docs site; raw /LICENSE.txt + /LICENSE-APACHE.txt)
Third-party: NOTICE (IBM Plex Sans Arabic under SIL OFL 1.1; original icons)
Security: SECURITY.md
Contributing / DCO: CONTRIBUTING.md

This package ships no runtime npm dependencies (React is an optional peer). These docs are not legal advice.

Publishing

Requires npm login with rights to publish the caustica package.

npm run test:ci && npm publish --access public

publishConfig.access is already public. Do not publish without a green test:ci.

Scripts

| Script | Description | |--------|-------------| | npm run docs:dev | Docs + examples (port 5175) | | npm run dev | Same as docs:dev on port 5174 | | npm run examples:dev | Examples-only server | | npm run build | Bundle CSS + emit React core to dist/ | | npm run lint | CSS structure + token checks | | npm run typecheck | Typecheck src/core | | npm run test:ci | Golden rules, lint, typecheck, build, a11y audit, security |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme