Typography

New

Our type scale helps to enforce consistency and clarity.

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

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.

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

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>
);