Design System

<h1 className="font-league-spartan font-bold text-h1 text-primary-10">Heading</h1>
<p className="font-aileron text-b7 text-primary-20">Body copy</p>

<div className="bg-primary-80 text-primary-10">Primary surface</div>
<div className="bg-tertiary-50 text-primary-90">Accent surface</div>

<div className="text-xl font-bold">
  Brand<span className="text-primary">.</span>
</div>

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

// Primary Button
<Button variant="primary">
	<LucideBiohazard />
	Primary
	<LucideBiohazard />
</Button>

<Button variant="primary" disabled>
	<LucideBiohazard />
	Disabled
	<LucideBiohazard />
</Button>


// Secondary Button
<Button variant="secondary">
	<LucideBiohazard />
	Secondary
	<LucideBiohazard />
</Button>

<Button variant="secondary" disabled>
	<LucideBiohazard />
	Disabled
	<LucideBiohazard />
</Button>


// Tertiary Button
<Button variant="tertiary">
	<LucideBiohazard />
	Tertiary
	<LucideBiohazard />
</Button>

<Button variant="tertiary" disabled>
	<LucideBiohazard />
	Disabled
	<LucideBiohazard />
</Button>


// Ghost Button
<Button variant="ghost">
	<LucideBiohazard />
	Ghost
	<LucideBiohazard />
</Button>

<Button variant="ghost" disabled>
	<LucideBiohazard />
	Disabled
	<LucideBiohazard />
</Button>

import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertIcon,
  AlertTitle,
} from "~/components/ui/alert";

<Alert variant="info">
  <AlertIcon />
  <AlertTitle>Info</AlertTitle>
  <AlertDescription>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </AlertDescription>
  <AlertAction />
</Alert>

<Alert variant="error">
  <AlertIcon />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </AlertDescription>
  <AlertAction />
</Alert>

<Alert variant="success">
  <AlertIcon />
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </AlertDescription>
  <AlertAction />
</Alert>

<Alert variant="warning">
  <AlertIcon />
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </AlertDescription>
  <AlertAction />
</Alert>

import { useState } from "react";
import { Chip } from "~/components/ui/chip";

export function ChipExample() {
  const [active, setActive] = useState(false);

  return (
    <>
      {/* Regular */}
      <Chip>Chips</Chip>

      {/* Starts selected on first render */}
      <Chip defaultSelected>Chips</Chip>

      {/* Controlled */}
      <Chip selected={active} onSelectedChange={setActive}>
        Chips
      </Chip>
    </>
  );
}

import { toast } from "~/components/ui/toast";

<Button onClick={() => toast.error("Error message")}>Error</Button>
<Button onClick={() => toast.loading("Loading")}>Loading</Button>
<Button onClick={() => toast.success("Success message")}>Success</Button>
<Button onClick={() => toast.warning("Warning message")}>Warning</Button>

import { Tooltip } from "~/components/ui/tooltip";

<Tooltip title="Tooltip Title" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." direction="top">
  <button>Hover me</button>
</Tooltip>

import { Checkbox } from "~/components/ui/checkbox";

<Checkbox type="outline" color="primary" defaultChecked />
<Checkbox type="solid" color="secondary-light" defaultChecked />
<Checkbox type="circle" color="tertiary" defaultChecked />
<Checkbox type="solid" color="orange" />

import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";

<RadioGroup defaultValue="primary">
  <RadioGroupItem color="primary" value="primary" />
  <RadioGroupItem color="secondary-light" value="secondary-light" />
  <RadioGroupItem color="orange" value="orange" />
</RadioGroup>

import { Input } from "~/components/ui/input";

<Input type="email" variant="email" placeholder="Email" leftSection={<Mail />} rightSection={<Mail />} />

// Left and right sections are optional, and can be any icons. If not provided, the default left and right sections for the variant will be used.
// Types and variants can be different, it is only for semantics.

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "~/components/ui/accordion";

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
</Accordion>

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";

<DropdownMenu variant="primary">
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Profile</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
  </CardHeader>
  <CardContent>...</CardContent>
</Card>

import { CircleAlert } from "lucide-react";
import {
  Modal,
  ModalContent,
  ModalHeader,
  ModalTitle,
  ModalDescription,
  ModalFooter,
  ModalTrigger,
  ModalClose,
  ModalAction,
} from "~/components/ui/modal";

<Modal>
  <ModalTrigger>Open</ModalTrigger>
  <ModalContent
    alignment="center"
    icon={<CircleAlert strokeWidth={2.5} />}
    iconClassName="size-12 text-red-200"
    showCloseButton
    showIcon
  >
    <ModalHeader>
      <ModalTitle>Heading</ModalTitle>
      <ModalDescription>Description</ModalDescription>
    </ModalHeader>
    <ModalFooter>
      <ModalClose asChild>
        <ModalAction variant="primary">Confirm</ModalAction>
      </ModalClose>
    </ModalFooter>
  </ModalContent>
</Modal>

import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";

<Tabs defaultValue="account" orientation="vertical">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
  </TabsList>
  <TabsContent value="account">...</TabsContent>
</Tabs>

import { FileInput } from "~/components/ui/file-input";
import { Button } from "~/components/ui/button";

<FileInput
  trigger={(open) => (
    <Button
      className="w-fit rounded-lg bg-secondary-50 px-8 py-3 font-bold text-neutral-100!"
      onClick={open}
      type="button"
    >
      Upload Document
    </Button>
  )}
/>

import ContactPerson from "~/components/elements/ContactPerson";

<ContactPerson
  firstContactUrl="https://wa.me/6289504139150"
  secondContactUrl="https://wa.me/6289504139150"
/>

import { DatePicker } from "~/components/ui/date-picker";

export function MyDatePicker() {
  return (
    <DatePicker
      minDate={new Date(2025, 2, 1)}   // Mar 1, 2025
      maxDate={new Date(2027, 8, 30)}  // Sep 30, 2027
      onChange={(date) => console.log(date)}
    />
  );
}

// Placeholder for Testimonials component usage

import Countdown from "~/components/elements/Countdown"
<Countdown targetDate={new Date('2026-06-25T23:59:59+07:00')}/>