Styleframe Logo
Composables

Body Element

Style the body element with configurable color, background, font family, font size, and line height using the useBodyElement composable.

Overview

The useBodyElement composable sets the foundational styles for the body element — text color, background color, font family, font size, and line height. It also enables font smoothing for crisp text rendering.

useBodyElement

function useBodyElement(
    s: Styleframe,
    options?: WithThemes<BodyElementConfig>
): BodyElementResult
styleframe.config.ts
import { styleframe } from 'styleframe';
import { useBodyElement } from '@styleframe/theme';

const s = styleframe();

const {
    bodyColor,
    bodyBackground,
    bodyFontFamily,
    bodyFontSize,
    bodyLineHeight,
} = useBodyElement(s);

export default s;

The composable also applies -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale for smoother text rendering. These are fixed and not configurable.

Default Values

OptionDefaultVariableExport
color"@color.text"--body--colorbodyColor
background"@color.background"--body--backgroundbodyBackground
fontFamily"@font-family"--body--font-familybodyFontFamily
fontSize"@font-size"--body--font-sizebodyFontSize
lineHeight"@line-height"--body--line-heightbodyLineHeight

The default configuration also includes a dark theme override that re-references @color.text and @color.background, allowing your design token dark theme to automatically propagate to the body.

Custom Values

styleframe.config.ts
import { styleframe } from 'styleframe';
import { useBodyElement } from '@styleframe/theme';

const s = styleframe();

const { bodyColor, bodyBackground } = useBodyElement(s, {
    color: '#333333',
    background: '#fafafa',
    fontFamily: '"Inter", sans-serif',
    fontSize: '16px',
    lineHeight: '1.6',
});

export default s;

Best Practices

  • Reference design tokens: Use @ references like @color.text and @font-family to keep body styles in sync with your design token system.
  • Use theme overrides for dark mode: Pass a themes option to customize body colors per-theme rather than hardcoding values.
  • Set font size with tokens: Use @font-size to inherit fluid or static font size values from your design token preset.
  • Keep line height readable: Use values between 1.4 and 1.6 for body text to maintain comfortable readability.

Address

Style address elements with configurable bottom margin using the useAddressElement composable.

Caption

Style table caption elements with configurable color, padding, and text alignment using the useCaptionElement composable.