Typography

Name	Size	Line Height	Example
.text-xs	0.75rem12px	1rem16px	Aa
.text-sm	0.875rem14px	1.25rem20px	Aa
.text-base	1rem16px	1.5rem24px	Aa
.text-lg	1.125rem18px	1.75rem28px	Aa
.text-xl	1.25rem20px	1.75rem28px	Aa
.text-2xl	1.5rem24px	2rem32px	Aa
.text-3xl	1.875rem30px	2.25rem36px	Aa
.text-4xl	2.25rem36px	2.5rem40px	Aa
.text-5xl	3rem48px	3rem48px	Aa

You may not need to use typography tokens directly

For most cases, you should default to using the Text and Heading components, which offer more intentional defaults for line-height and character spacing.

Usage in Figma

Typography tokens in Figma are published from Stylus Design System and should be available by default in Figma files within the Scribe workspace.

Usage in code

Typography in Stylus is built on Tailwind CSS utilities. You can apply typography styles by using the appropriate classes on your elements.

Font Families

Stylus uses Public Sans as its primary font.

This text uses Public Sans

export default () => <p className="font-sans">This text uses Public Sans</p>;

Font Weights

Use font weight utilities to emphasize text and create hierarchy. We do not use weights 100–300 or 800–900.

Normal (400)

Medium (500)

Semibold (600)

Bold (700)

export default () => (
  <div>
    <p className="font-normal">Normal (400)</p>
    <p className="font-medium">Medium (500)</p>
    <p className="font-semibold">Semibold (600)</p>
    <p className="font-bold">Bold (700)</p>
  </div>
);

Line Heights

Scribe lets you instantly capture and share your team's knowledge with smarter documentation.

Scribe lets you instantly capture and share your team's knowledge with smarter documentation.

Scribe lets you instantly capture and share your team's knowledge with smarter documentation.

export default () => (
  <div className="max-w-64 space-y-4">
    <p className="leading-tight">
      Scribe lets you instantly capture and share your team's knowledge with
      smarter documentation.
    </p>
    <p className="leading-normal">
      Scribe lets you instantly capture and share your team's knowledge with
      smarter documentation.
    </p>
    <p className="leading-relaxed">
      Scribe lets you instantly capture and share your team's knowledge with
      smarter documentation.
    </p>
  </div>
);

Letter Spacing

To aid legibility, smaller text should have wider spacing, while larger text can handle tighter spacing.

Scribe

Scribe

Scribe

Scribe

export default () => (
  <div className="text-lg">
    <p className="tracking-tight">Scribe</p>
    <p className="tracking-normal">Scribe</p>
    <p className="tracking-wide">Scribe</p>
    <p className="tracking-wider">Scribe</p>
  </div>
);

Text Colors

Use the text- prefix with any color from the palette.

Primary text

Secondary text

Error text

export default () => (
  <div>
    <p className="text-slate-900 dark:text-slate-100">Primary text</p>
    <p className="text-slate-600 dark:text-slate-400">Secondary text</p>
    <p className="text-red-600 dark:text-red-500">Error text</p>
  </div>
);