wave-kit

This design system is inspired by the work of Kazumasa Nagai, a Japanese graphic designer, and other poster art from the '60s onward. Clean, abstract forms reminiscent of HAL 9000, but in a benevolent manner.

Waves are the recurring generative gesture across jay.ai. A simple cellular field carries energy outward from a point, turning the same cool-to-warm palette into motion.

The system has four color anchors, not fourteen independent colors. Signal blue, heat red, energy orange, and light yellow carry the identity. The other values are associated shades used to give waves depth and intensity. Product UI stays neutral and usually uses only one anchor at a time.

The stack is native system sans for speed and familiarity, with the platform monospace stack for tokens and small technical labels. Tight headlines meet relaxed body copy.

Back controls preserve in-app history when it exists and fall back to a known route for direct visits. Primary tabs use a simple two-pixel underline without filled pills or heavy chrome.

Reserve the final aspect ratio up front, paint a tiny inline placeholder immediately, then fade in a responsive WebP. The full image is lazy-loaded and asynchronously decoded, so the reading experience never waits on it.

Treat diagrams as academic figures: use crisp SVG geometry, label every stage, axis, and series, and keep the composition minimal. Color must encode a stated meaning rather than act as decoration. Click either figure to inspect the original SVG.

Quiet rules divide long-form sections without turning every idea into a card.

Simplicity is an editing discipline. Every visual element should improve meaning, navigation, or reading rhythm.

Install the package, import the global stylesheet once, then compose the real components. These examples are complete enough for an agent to copy into a React or Next.js project and adapt without recreating the design system.

@import "tailwindcss";
@import "@jayhack/wave-kit/styles.css";

import { NavigationIndex, WaveField } from "@jayhack/wave-kit";

const sections = [
  ["overview", "Overview"],
  ["details", "Details"],
] as const;

export function ProjectPage() {
  return (
    <main className="min-h-screen bg-wave-ink text-neutral-300">
      <aside className="fixed left-8 top-12">
        <NavigationIndex items={sections} />
      </aside>
      <section id="overview">
        <div className="relative aspect-[16/7] overflow-hidden rounded-lg">
          <WaveField className="absolute inset-0 h-full w-full" />
        </div>
      </section>
    </main>
  );
}

"use client";

import { useState } from "react";
import { Lightbox, ProgressiveImage } from "@jayhack/wave-kit";

const images = [
  { src: "/project-full.png", alt: "Project system diagram" },
];

export function ProjectImage() {
  const [open, setOpen] = useState(false);
  const [previewSrc, setPreviewSrc] = useState<string>();

  return (
    <>
      <button onClick={() => setOpen(true)} type="button">
        <ProgressiveImage
          alt={images[0].alt}
          height={900}
          onLoad={(event) => setPreviewSrc(event.currentTarget.currentSrc)}
          src="/project-1024.webp"
          srcSet="/project-672.webp 672w, /project-1024.webp 1024w"
          width={1024}
        />
      </button>
      {open ? (
        <Lightbox
          items={[{ ...images[0], previewSrc }]}
          onClose={() => setOpen(false)}
          startIndex={0}
        />
      ) : null}
    </>
  );
}

<div className="border border-wave-blue-vivid bg-wave-ink text-wave-paper">
  <span className="text-wave-amber">High energy</span>
</div>

import { CodeBlock } from "@jayhack/wave-kit";

<CodeBlock
  code={'const energy = "wave-orange";'}
  label="Theme token"
  language="tsx"
/>

Wave Kit is designed for a focused application stack: Next.js for the React framework, Vercel for deployment, Tailwind CSS for named design tokens and composition, and shadcn/ui for accessible primitives when a project needs controls beyond the core kit.

Install the public package from npm. Use the GitHub checkout when contributing to Wave Kit itself.

npm install @jayhack/wave-kit tailwindcss

git clone https://github.com/jayhack/wave-kit.git
npm install ./wave-kit/packages/wave-kit tailwindcss

@import "tailwindcss";
@import "@jayhack/wave-kit/styles.css";