Aspyn

Typography

Type scale, prose, and data-display conventions.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens
// No imports — typography is Tailwind utilities on token-backed styles.

Type scale

Geist (or your product font) via --as-font-sans; sizes are plain Tailwind utilities.

Intelligent pest control

Why choose Aspyn

Proactive protection

We analyze millions of pest data points across neighborhoods, migration activity, and weather shifts to help you stay ahead of pests.

Predictions are estimates based on customer reports and historical patterns.

Inline snake_case code and links.

<h1 className="text-4xl font-bold tracking-tight">Page title</h1>
<h2 className="text-2xl font-semibold tracking-tight">Section</h2>
<h3 className="text-xl font-semibold">Subsection</h3>
<p className="text-base leading-7">Body copy.</p>
<p className="text-sm text-muted-foreground">Supporting text.</p>
<code className="font-mono text-sm">inline_code()</code>

Lists and quotes

  • Tokens are the contract
  • Compose, don't configure
  • Accessible by default
"The best design system is the one your developers don't have to think about."
<ul className="my-4 ml-6 list-disc [&>li]:mt-2">…</ul>
<blockquote className="mt-4 border-l-2 pl-4 italic text-muted-foreground">…</blockquote>

Notes

  • Docs use Geist via next/font mapped to --as-font-sans; products can map any font the same way.
  • Numeric/data displays: use font-mono + tabular-nums (see dashboard stat cards).