Playground

Text

typography

Body text with size, variant, and weight control

Replaces Lead, Muted, Caption, Small, Large — use props instead

import { Text } from "@everydayos/ui";

Usage

All body text sizes from xl to caption

body-xl — 24px

Hero subheading text for introductions and large callouts.

body-l — 18px

Lead paragraph text, used for section introductions and emphasis.

body-m — 16px

Standard body text. This is the default reading size, optimized for comfortable long-form reading across devices.

body-s — 14px

Secondary body text for supporting details, captions, and UI labels.

caption — 12px

Fine print, timestamps, and metadata.

API

as

Default: p

pspandivolul

size

Default: m

xllmscaptioneditorial-xleditorial-leditorial-meditorial-s

defaultpreferredrare

variant

Default: default

defaultmutedlead

defaultpreferredrare

weight

regularmediumsemiboldbold

defaultpreferredrare

Prop	Type	Default
`className`	`string`	—
`children`*	`React.ReactNode`	—

Examples

Editorial Body (Figma scale)

Editorial intro (L): 22→16px fluid; M/S: 16→14 / 14→12px; line-height 1.16. Pair with Heading editorial-* sizes.

Default text — standard body copy.

Lead text — for introductions and emphasis.

Muted text — for supporting details.

Regular weight (400)

Medium weight (500)

Semibold weight (600)

Bold weight (700)

Text Variants

Default, lead, and muted variants. With Everyday Sans, prefer regular + medium; semibold/bold are rare.

Personal & Human

Each home system is custom tailored to your needs and thoughtfully designed to take full advantage of the natural light, views, layout, and functionality of your property. We carefully evaluate how air flows through your space, how rooms are used throughout the day, and how seasonal changes affect comfort.

It simplifies ownership, improves performance, and reduces environmental impact all at once. Healthy for people, effortless to adopt, and better for the planet.

Body Paragraph

Long-form body text with heading for readability check

<Stack spacing="md" className="w-full max-w-2xl">
  <Heading as="h2" size="l">Personal & Human</Heading>
  <Text>
    Each home system is custom tailored to your needs and thoughtfully
    designed to take full advantage of the natural light, views, layout,
    and functionality of your property.
  </Text>
  <Text variant="muted">
    It simplifies ownership, improves performance, and reduces
    environmental impact all at once.
  </Text>
</Stack>

Composition

Pairs well with

Heading

Stack

Surface

When to avoid

Need heading — use Heading instead