Build

Components

The exact UI kit this site runs on — semantic design tokens + small typed components. Every preview below is the real component. Copy the code, swap the brand color, ship.

Design tokens first

Components stay sleek because colors are semantic (brand/navy/surface/line/status), not hardcoded. Change four hex values and the whole kit rebrands.

ts
// tailwind.config.ts — the token system everything above uses
colors: {
  brand:  { 50:"#f4fbe8", 100:"#e6f7c6", 400:"#a3e635", 500:"#84cc16", 600:"#4d7c0f", 700:"#3f6212" },
  navy:   { 300:"#9aa5b5", 400:"#6b7788", 500:"#44506a", 700:"#1f293d", 900:"#0a0f1a" },
  surface:{ DEFAULT:"#ffffff", subtle:"#f7f8f5" },
  line:   { DEFAULT:"#e6e8e2", strong:"#cfd3c8" },
  status: { pass:"#16a34a", warn:"#d97706", fail:"#dc2626", info:"#2563eb" },
},
borderRadius: { pill: "9999px" },
boxShadow: {
  card:  "0 1px 2px rgba(10,15,26,.04), 0 1px 3px rgba(10,15,26,.05)",
  hover: "0 6px 20px rgba(10,15,26,.09)",
  menu:  "0 12px 32px rgba(10,15,26,.14)",
}

Card

The base surface. Rounded, bordered, calm shadow — everything on this site sits in one.

Card title

Supporting description in muted navy.

Body content.

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

<Card>
  <CardHeader>
    <CardTitle>Card title</CardTitle>
    <CardDescription>Supporting description.</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
</Card>

// card.tsx core:
// <div className="rounded-xl border border-line bg-surface shadow-card" />

Button

Five variants via class-variance-authority. Primary = brand, navy for contrast CTAs.

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

<Button>Primary</Button>
<Button variant="navy">Navy</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

// variants: primary | navy | secondary | ghost | link
// sizes: sm | md | lg

Badge

Status chips with semantic variants — ring-inset keeps them crisp on any surface.

neutralbrandopenpendingdeadlineclosed
tsx
import { Badge } from "@/components/ui/badge";

<Badge>neutral</Badge>
<Badge variant="brand">brand</Badge>
<Badge variant="open">open</Badge>
<Badge variant="pending">pending</Badge>
<Badge variant="deadline">deadline</Badge>

ScoreRing

Pure-SVG circular gauge, zero client JS. Color shifts with the score band.

tsx
import { ScoreRing } from "@/components/ui/score-ring";

<ScoreRing value={92} label="Grade A" />
// SVG circle with strokeDasharray = circumference,
// strokeDashoffset = circumference * (1 - value/100)

Stat

KPI tile: uppercase label, big tabular number, optional hint.

Checks

95

Across 4 audit modes

Cost

$0

No accounts, no quotas

tsx
import { Stat } from "@/components/ui/stat";

<Stat label="Checks" value={95} hint="Across 4 audit modes" />

Progress

Accessible progress bar (role=progressbar) used for category scores.

tsx
import { Progress } from "@/components/ui/progress";

<Progress value={85} aria-label="Metadata score" />

Input

Form input with brand focus ring. Pair with a small bold label.

tsx
import { Input } from "@/components/ui/input";

<label className="mb-1 block text-xs font-medium text-navy-700">Website URL</label>
<Input placeholder="yoursite.com" />

Skeleton

Loading placeholder — animate-pulse on the subtle surface token.

tsx
import { Skeleton } from "@/components/ui/skeleton";

<Skeleton className="h-24 w-full" />
// = <div className="animate-pulse rounded-md bg-surface-subtle" />