Skip to main content

Typography

layered-ui-rails applies base typography styles to standard HTML elements via @layer base, so they can be overridden by the host application. Headings use the Manrope font and body text uses Inter.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

Paragraphs

This is a standard paragraph. Body text uses the Inter font at a small size with relaxed line height and muted foreground color.

Paragraphs can contain inline links which are styled with an underline and use the foreground color.

<p>This is a standard paragraph.</p>
<p>Paragraphs can contain <a href="#">inline links</a>.</p>

Horizontal rule

Use a horizontal rule to separate related blocks of content without adding a heading.

Account settings

Notification preferences

<p>Account settings</p>
<hr class="l-ui-hr">
<p>Notification preferences</p>

Lists

  • Unordered list item one
  • Unordered list item two
  • Unordered list item three
  1. Ordered list item one
  2. Ordered list item two
  3. Ordered list item three

With l-ui-list

  • Spaced list item one
  • Spaced list item two
  • Spaced list item three
<ul>
  <li>Unordered list item</li>
</ul>

<ol>
  <li>Ordered list item</li>
</ol>

<ul class="l-ui-list">
  <li>Spaced list item with bullet</li>
</ul>

Fonts

Font family tokens
Token Font stack Usage
font-manrope Manrope, ui-sans-serif, system-ui, sans-serif Headings and labels
font-inter Inter, ui-sans-serif, system-ui, sans-serif Body text and form fields

CSS reference

Typography CSS classes
Element / class Description
h1 Manrope bold, text-xl
h2 Manrope bold, text-lg
h3 Manrope bold, base size
h4 Manrope bold, text-sm
p Muted foreground, text-sm, relaxed line height
p a Foreground color with bottom border underline
ul, ol, li Muted foreground, text-sm
l-ui-list Disc bullets, inside position, vertical spacing
l-ui-hr Horizontal rule with theme border and vertical spacing
code Muted foreground, text-sm