Base

Body Element

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

Part of the Global Preset:useBodyElement is included in the Global Preset (useGlobalPreset) and you can configure it through the preset's body option. For most projects, applying it via the preset is the recommended approach.

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;

styleframe/index.css

:root {
    --body--color: var(--color--text);
    --body--background: var(--color--background);
    --body--font-family: var(--font-family);
    --body--font-size: var(--font-size);
    --body--line-height: var(--line-height);
}

body {
    font-family: var(--body--font-family);
    font-size: var(--body--font-size);
    line-height: var(--body--line-height);
    color: var(--body--color);
    background: var(--body--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

Option	Default	Variable	Export
`color`	`"@color.text"`	`--body--color`	`bodyColor`
`background`	`"@color.background"`	`--body--background`	`bodyBackground`
`fontFamily`	`"@font-family"`	`--body--font-family`	`bodyFontFamily`
`fontSize`	`"@font-size"`	`--body--font-size`	`bodyFontSize`
`lineHeight`	`"@line-height"`	`--body--line-height`	`bodyLineHeight`

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;

styleframe.config.ts

import { styleframe } from 'styleframe';
import { useGlobalPreset } from '@styleframe/theme';

const s = styleframe();

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

export default s;

styleframe/index.css

:root {
    --body--color: #333333;
    --body--background: #fafafa;
    --body--font-family: "Inter", sans-serif;
    --body--font-size: 16px;
    --body--line-height: 1.6;
}

body {
    font-family: var(--body--font-family);
    font-size: var(--body--font-size);
    line-height: var(--body--line-height);
    color: var(--body--color);
    background: var(--body--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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.

Edit this pageorReport an issue

Preset

Apply all HTML element base styles in a single call with useGlobalPreset, including body, headings, links, lists, code, focus, and selection.

Headings

Style heading elements h1 through h6 with configurable font family, weight, line height, color, and per-level sizes using the useHeadingElement composable.