Getting Started

Appearance

Configure color, theme mode, radius, and font tokens.

appearance controls the document attributes and design tokens used by Lotus layouts and Prosefly MDX components.

appearance: {
  accent: 'indigo',
  gray: 'neutral',
  defaultMode: 'system',
  radius: 'medium',
}

Accent

Gray

Radius

Default Mode

defaultMode controls the initial color mode.

defaultMode: 'system'

Supported values are light, dark, and system. The system mode follows prefers-color-scheme until the visitor chooses a mode in the theme switch.

<ThemeModeSegmentedControl />

The switch shape is a component override, not an appearance option. Use Theme Switch Variants to replace the default segmented control with a cycle button, select menu, or light/dark switch.

Accent

accent controls links, active navigation, focus rings, and primary UI.

Built-in accents are based on Tailwind color scales:

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Custom hex colors are also supported.

appearance: {
  accent: '#3b82f6',
}

Lotus converts custom colors into light and dark accent variables.

Gray

gray selects the neutral scale used for text, borders, surfaces, dividers, and code backgrounds.

gray: 'neutral'

Supported values are slate, zinc, neutral, and stone.

Lotus renders this as a document attribute such as data-gray="neutral" and maps semantic tokens like --lotus-text, --lotus-text-muted, --lotus-background, and --lotus-surface from that scale.

Background and Text

Background and text colors are not separate appearance fields. Lotus derives them from the selected gray scale and color mode, then exposes the result as CSS variables.

Use CSS variable overrides when a project needs brand-level background or text colors. The preset chooser below applies the generated variables to the current <body> while you preview a combination, but it does not store the selection:

Background presets

Choose a page tone

These presets are curated background and text pairs. Selecting one temporarily applies the generated <body> variables to this page.

Selected preset

Checking

Parchment documentation tone

The preset applies a coordinated set of background, surface, text, border, and code tokens so the page keeps its visual hierarchy.

#fffaf2#24313f0.00:1

Preset names are descriptive examples, not Lotus API values. Copy the generated CSS variables instead of depending on the preset labels.

The most important variables are:

Variable	Purpose
`--lotus-background`	Page and shell background.
`--lotus-surface`	Subtle panels, hover states, and soft UI.
`--lotus-code-background`	Inline code and plain code block background.
`--lotus-text-strong`	Headings, labels, and active text.
`--lotus-text`	Body copy and default foreground.
`--lotus-text-muted`	Secondary text, captions, and inactive navigation.
`--lotus-text-subtle`	Lower-emphasis helper text.
`--lotus-border-muted`	Normal control and panel borders.
`--lotus-border-subtle`	Low-emphasis dividers and separators.
`--lotus-border-hover`	Stronger borders for hover and focus-adjacent states.

Override these tokens together. Changing only --lotus-background or only --lotus-text usually creates contrast, hover, border, or code-block issues.

Radius

radius controls the shared shape language.

radius: 'medium'

Supported values are none, small, medium, large, and full.

Most compact controls follow the selected radius. Large surfaces such as code blocks and dropdown panels cap their radius so full does not produce pill-like containers.

Fonts

Lotus does not load web fonts by default. It exposes font tokens that can be overridden by project CSS.

:root {
  --lotus-font-sans: "Inter", var(--lotus-system-sans);
  --lotus-font-mono: "JetBrains Mono", var(--lotus-system-mono);
}

The default stacks are system sans and system mono.

Edit this page

Last updated Jul 18, 2026