How to get started

Clone the repository, install the dependencies, and start the Next.js development server.

git clone <repository-url>
cd design-system-use-case
npm install
npm run dev

The documentation opens at http://localhost:3000. Use the component pages to inspect the live examples and their implementation tabs.

Import the component and its inner parts from the source folders. The current project uses the @/* alias for src/*.

import { Button } from "@/components/buttons/Button";
import { Card, CardBody } from "@/components/cards/Card";
import { semanticTokens } from "@/data/tokens";

export function ProjectActions() {
  return (
    <Card>
      <CardBody>
        <Button variant="primary">Create project</Button>
      </CardBody>
    </Card>
  );
}

Build component styles from semantic intent instead of hard-coded palette values. This lets the visual theme evolve without changing component APIs.

/* Prefer semantic roles in component styles. */
.component {
  color: var(--color-content-primary);
  background: var(--color-surface-subtle);
  border-color: var(--color-border-default);
}