// The page title below is the shared PageHeader rather than a Markdown "# " // heading. The h1 mapping in mdx-components.tsx renders the package's flat 38px // display scale, and this is the only docs page whose prose is authored in // Markdown - without this it would be the one page title that doesn't scale.
Design principles
Fuji UI draws on restraint, balance, quiet hierarchy, warm surfaces, clean spacing, and careful detail. The influence is expressed through the interface itself, not through decorative motifs, meaningless text, or cultural stereotypes.
Calm by default
The interface should feel quiet. Warm neutral surfaces (--fuji-background,
--fuji-surface, and --fuji-surface-strong) create hierarchy through tone and
elevation, not saturated accents.
Warm, not cold
The light and dark themes use warm off-whites and warm dark neutrals, and the glass material adds a soft beige and gray atmosphere behind them, instead of cold blue-gray neutrals.
Precise, restrained motion
Transitions run between 120 and 240ms with a restrained easing curve. Buttons press
to 0.98 scale, and dialogs fade and scale from 0.98. Motion is purposeful and
respects prefers-reduced-motion.
One consistent API
Applicable components share size, variant, and appearance types, along with
common disabled, loading, invalid, read-only, selected, and focus-visible states.
Learning one component makes the others familiar.
What to avoid
This system deliberately avoids:
- Cultural stereotypes or decorative references
- Strong enterprise-blue accents
- Bright, saturated colors
- Excessive pill shapes, thick borders, or dramatic shadows
- Cold gray-blue surfaces
- Motion without a functional purpose
- Low-contrast glass that sacrifices readability
Accessibility and usability always win over exact visual imitation of a reference image when the two conflict. See Accessibility.