Design Tokens with PandaCSS

PandaCSS is a modern CSS-in-JS library that provides type-safe styling with zero runtime overhead.

Why Design Tokens?

Design tokens are the visual design atoms of your design system:

• Colors
• Typography
• Spacing
• Shadows
• Border radius

Setting Up PandaCSS

Install PandaCSS in your HonoX project:

npm install -D @pandacss/dev

Creating Design Tokens

Define your tokens in panda.config.ts:

export default defineConfig({
  theme: {
    tokens: {
      colors: {
        primary: { value: "#3b82f6" },
        secondary: { value: "#8b5cf6" },
      },
      spacing: {
        sm: { value: "0.5rem" },
        md: { value: "1rem" },
        lg: { value: "1.5rem" },
      },
    },
  },
});

Using Tokens

import { css } from "design-system/css";

function Button() {
  return (
    <button
      class={css({
        bg: "primary",
        color: "white",
        px: "md",
        py: "sm",
        borderRadius: "lg",
      })}
    >
      Click me
    </button>
  );
}

Conclusion

Design tokens with PandaCSS create a consistent, maintainable design system that scales with your project.