Styling

Match components to your site with Prosefly CSS tokens.

The components ship with fallback styles, but production documentation should set shared tokens in the site shell. This keeps callouts, cards, tabs, badges, and file trees aligned with the surrounding typography, colors, and radius.

Recommended Scope

Set tokens on :root for a full documentation site. Set them on a layout wrapper if only one section should use the Prosefly visual system.

:root {
  --pl-text-strong: #18181b;
  --pl-text: #3f3f46;
  --pl-text-muted: #71717a;
  --pl-background: #ffffff;
  --pl-surface: #fafafa;
  --pl-accent: #059669;
  --pl-accent-soft: #d1fae5;
  --pl-accent-contrast: #ffffff;
  --pl-info: #2563eb;
  --pl-info-soft: #dbeafe;
  --pl-info-ink: #1d4ed8;
  --pl-info-contrast: #ffffff;
  --pl-success: #059669;
  --pl-success-soft: #d1fae5;
  --pl-success-ink: #047857;
  --pl-success-contrast: #ffffff;
  --pl-warning: #d97706;
  --pl-warning-soft: #fef3c7;
  --pl-warning-ink: #92400e;
  --pl-warning-contrast: #1c1917;
  --pl-danger: #dc2626;
  --pl-danger-soft: #fee2e2;
  --pl-danger-ink: #b91c1c;
  --pl-danger-contrast: #ffffff;
  --pl-border-subtle: #e4e4e7;
  --pl-border-muted: #d4d4d8;
  --pl-font-sans: ui-sans-serif, system-ui, sans-serif;
  --pl-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --pl-radius-sm: 0.25rem;
  --pl-radius-md: 0.5rem;
  --pl-radius-lg: 0.75rem;
  --pl-radius-full: 999px;
}

Token Reference

Token	Used For
`--pl-text-strong`	Headings, card titles, active labels
`--pl-text`	Body text
`--pl-text-muted`	Supporting text, comments, inactive states
`--pl-background`	Page or article background
`--pl-surface`	Tabs, cards, and subtle grouped surfaces
`--pl-accent`	Focus rings, active states, accent icons
`--pl-accent-soft`	Soft accent backgrounds
`--pl-accent-contrast`	Text placed on solid accent backgrounds
`--pl-{info\|success\|warning\|danger}`	Shared semantic colors
`--pl-{info\|success\|warning\|danger}-soft`	Shared semantic soft backgrounds
`--pl-{info\|success\|warning\|danger}-ink`	Shared semantic icon and label text
`--pl-{info\|success\|warning\|danger}-contrast`	Text placed on solid semantic backgrounds
`--pl-callout-{note\|tip\|warning\|danger}-{color\|ink\|bg}`	Type-specific callout overrides
`--pl-border-subtle`	Component borders
`--pl-border-muted`	Active tabs and hover borders
`--pl-font-sans`	Prose and UI labels
`--pl-font-mono`	File trees and code-adjacent labels
`--pl-radius-sm`	Small controls
`--pl-radius-md`	Buttons, triggers, compact surfaces
`--pl-radius-lg`	Cards, callouts, tabs, file trees
`--pl-radius-full`	Pills and badges

Component Tokens

Use component tokens when a site needs layout-level tuning beyond the shared palette.

Token	Used For
`--pl-card-padding`	Card inner spacing
`--pl-card-layout-gap`	Space between card icon and body
`--pl-card-body-gap`	Space between card title and content
`--pl-card-icon-size`	Card icon container size
`--pl-card-icon-glyph-size`	Icon size inside card icon containers
`--pl-card-title-size`	Card title font size
`--pl-card-title-line-height`	Card title line height
`--pl-card-content-size`	Card body font size
`--pl-card-content-line-height`	Card body line height
`--pl-card-content-gap`	Space between multiple body children
`--pl-card-grid-gap`	Space between cards in a `CardGrid`
`--pl-card-grid-margin`	Vertical margin around a `CardGrid`
`--pl-file-tree-border`	File tree outer border
`--pl-file-tree-line`	File tree connector lines
`--pl-image-gallery-preview-width`	Visible preview width for the next gallery image
`--pl-image-gallery-ratio`	Fallback gallery item aspect ratio before images are measured
`--pl-steps-bullet-size`	Step marker size
`--pl-steps-bullet-margin`	Gap below a step marker before the connector line starts
`--pl-steps-line`	Step connector line color
`--pl-steps-marker-background`	Step marker background
`--pl-steps-marker-foreground`	Step marker text color
`--pl-steps-start`	Counter starting offset for step numbering

Themeable

Lotus Projects

Lotus maps its design system to the same component expectations. In a Lotus site, start with src/theme.config.ts for accent, gray, radius, and color mode choices. Use custom CSS only when you need lower-level control than the theme configuration provides.

Edit this page

Last updated Jul 18, 2026