Typography

import { Column, Text } from '@envsemble/envui';

<Column gap={4}>
  <Text render={<h1 />} variant="headline">
    Project overview
  </Text>
  <Text render={<h2 />} variant="title">
    Project details
  </Text>
  <Text>Shared context for your team.</Text>
  <Text emphasis="muted">Updated today</Text>
</Column>;

Text styles

At the default 16 px root, in the comfortable scale, as its Sizes in each scale lists them; compact takes each a step smaller. Display, headline and title are medium (500), the rest regular (400).

emphasis replaces a variant's color: default is --env-color-fg-default, and muted and subtle are both --env-color-fg-muted today.

The words of the figures

• Body: variant="body", the default.
• Text follows the reader: nothing to do; type is in rem and follows the scale.
• Space belongs to the layout: Text has no margins; set gap on the Column or Row around it.

• Choose the element for the document's structure and the variant for its look, apart: a section's h2 may be a title.
• One display text per view at most, for a page's hero; it scales from 1.75 to 2.75 rem and balances its lines.
• Geist at regular (400) and medium (500, a touch lighter in dark, 460, where light text on a dark ground reads heavier), from --env-font-weight-*; semibold (600) for bold in running text, such as Markdown's, and otherwise only for the strongest emphasis in a small space, such as today in a calendar.
• Text adds no outer spacing: a Column, a Row or the component around it owns the gaps.
• Vary the text by its role rather than setting everything as body: open with what matters in the default color, and set supporting text, such as a description under a title, details and hints, emphasis="muted" or body-sm.
• Keep running text to a readable measure, about 60–75 characters a line: give paragraphs and Markdown a max-inline-size of about 53ch, since Text and Markdown fill their container. Write short paragraphs, one point each, a few lines long.

Lists

Formatted text, which Markdown, RichText and RichTextEditor render in the env-prose class, sets its lists apart from the text around them.

• A bullet is a small spark, four points with curved sides, in the text color, on the middle of the item's first line; one level in, a smaller spark in the muted color.
• An ordered item's number is plain, in tabular figures in the muted text color.
• Items stand a full step apart.
• A nested list steps down quietly, with closer items and a small muted ring, or a letter for an ordered item.
• Task lists keep their checkboxes.

Type takes the --env-type-* and --env-font-* tokens, such as --env-type-body and --env-font-weight-medium, which follow the theme's scale and the reader's text size.

TypeScript declarations provide the complete public API.