Typography in Context

Lead Paragraph

A modal dialog that interrupts the user with important content and expects a response. The design system provides multiple severity levels so intent is never ambiguous.

<Text size="lg" color="muted" className="leading-relaxed">
  A modal dialog that interrupts the user with important content
  and expects a response.
</Text>

Body Paragraph

The king thought long and hard, and finally decreed that all jokes shall be taxed. The court jester, in a fit of irony, announced the new law by performing his best routine — and was immediately taxed for it.

People of the kingdom were not amused. They packed their belongings, and with heavy hearts (and lighter purses), began to seek lands where wit was still free.

<Text as="p" size="md" className="leading-7">
  The king thought long and hard, and finally decreed that
  all jokes shall be taxed...
</Text>

Large Text

Are you absolutely sure?

This action cannot be undone. This will permanently delete your account and remove your data from our servers.

<Text size="lg" weight="semibold">Are you absolutely sure?</Text>
<Text size="md" color="muted" className="mt-1 leading-relaxed">
  This action cannot be undone...
</Text>

Small Text

Email address

jordan@example.com

Full name

Jordan Rivera

<Text size="sm" weight="medium" className="leading-none block mb-1">
  Email address
</Text>

Muted Text

Create an account

Enter your email below to create your account. By continuing, you agree to our Terms of Service and Privacy Policy.

<Text size="sm" color="subtle" className="leading-relaxed">
  Enter your email below to create your account...
</Text>

Blockquote

Shavin keeps every recurring bill, subscription, and renewal in one place — so nothing quietly lapses while you are busy living your life.

<Blockquote cite="https://example.com">
  Shavin keeps every recurring bill, subscription, and renewal
  in one place — so nothing quietly lapses.
</Blockquote>

Inline Code in Text

Use the Text primitive for all body copy. Pass size, weight, and color props to customize.

<Text as="p" size="md" className="leading-7">
  Use the <code>Text</code> primitive for all body copy.
  Pass <code>size</code>, <code>weight</code>, and
  <code>color</code> props to customize.
</Text>

Unordered List

Automatic renewal tracking across all subscriptions
Smart reminders sent three days before each bill
Category grouping with monthly spend summaries

<ul className="my-6 ml-6 list-disc [&>li]:mt-2 text-sm text-fg">
  <li>Automatic renewal tracking across all subscriptions</li>
  <li>Smart reminders sent three days before each bill</li>
  <li>Category grouping with monthly spend summaries</li>
</ul>

Table

Subscription	Renewal	Amount
Netflix Premium	Mar 15, 2025	$22.99
Spotify Family	Mar 18, 2025	$16.99
Adobe Creative Cloud	Apr 2, 2025	$59.99

<Table>
  <TableHeader className="bg-surface-hover/50">
    <TableRow>
      <TableColumnHeaderCell className="text-left font-semibold text-fg">Subscription</TableColumnHeaderCell>
      <TableColumnHeaderCell className="text-right font-semibold text-fg">Amount</TableColumnHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="text-fg">Netflix Premium</TableCell>
      <TableCell className="text-right font-mono text-fg">$22.99</TableCell>
    </TableRow>
  </TableBody>
</Table>

Em & Strong in Context

Set the reminder to the day before it is due, not the day of. Missing a payment can result in late fees that are often avoidable with a little planning.

As the saying goes, a stitch in time saves nine. Our system ensures you never miss a renewal again.

import { Text, Em, Strong, Quote } from "@shavin/ui";

<Text as="p" size="md" className="leading-7">
  Set the reminder to <Em>the day before</Em> it is due,
  not <Strong>the day of</Strong>.
</Text>