sprint/packages/frontend/src/pages/Font.tsx

const WEIGHTS = [
  200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 475, 500, 525, 550, 575, 600, 625, 650, 675, 700,
];

const SAMPLE_TEXT = "The quick brown fox jumps over the lazy dog 0123456789.";

export default function Font() {
  return (
    <main className="min-h-screen font-mono">
      <div className="mx-auto w-fit px-8 py-10">
        <h1 className="text-2xl font-500">Commit Mono</h1>
        <div className="mt-6 flex flex-col divide-y divide-foreground/30">
          {WEIGHTS.map((weight) => (
            <div key={weight} className="grid grid-cols-[42px_1fr] items-center gap-3 px-3 py-3">
              <span className="text-sm" style={{ fontWeight: weight }}>
                {weight}
              </span>
              <span style={{ fontWeight: weight }}>{SAMPLE_TEXT}</span>
            </div>
          ))}
        </div>
      </div>
    </main>
  );
}