Design system

Button

Pill buttons in the accent, gray and ghost. The site leads with one blue button per view and pairs it with a gray one.

Source: src/components/ui/button.tsx

Variants

Default for the main action, secondary next to it, ghost in menus.

import { Button } from "@/components/ui/button";

export default function ButtonVariants() {
  return (
    <>
      <Button size="lg">Book a call</Button>
      <Button size="lg" variant="secondary">
        See pricing
      </Button>
      <Button size="lg" variant="ghost">
        Work
      </Button>
    </>
  );
}

Sizes

lg on the page, default in dense places.

import { Button } from "@/components/ui/button";

export default function ButtonSizes() {
  return (
    <>
      <Button size="sm">Small</Button>
      <Button>Default</Button>
      <Button size="lg">Large</Button>
      <Button size="xl">Extra large</Button>
    </>
  );
}

Text link

Inline links with a chevron that scales with the text.

import { ChevronRightIcon } from "lucide-react";

import { Button } from "@/components/ui/button";

export default function ButtonLink() {
  return (
    <Button variant="link" className="text-intro">
      See the case study
      <ChevronRightIcon data-icon="inline-end" />
    </Button>
  );
}