ButterflyFX

Style Guide

Design tokens, components, and layout guidance for all ButterflyFX pages.

Colors & Tokens

Use gradient accents --accent-1 to --accent-2 for primary CTAs. Background and text tokens are available in :root.

Navigation

Top nav is informational and holds authentication controls. The side panel is the primary site navigation for Butterfly apps.

Login behavior

One login grants access to all Butterfly apps via the universal connector. Implement SSO/session tokens at the server layer; the UI shows/hides the side panel options after login.

Components

Card — use for concise content blocks.

Layout notes

  • Keep side panel narrow (240–280px) with compact links to apps.
  • Top nav must remain minimal and accessible on small screens.
  • Login modal should be centered with an overlay; use progressive disclosure for scopes and permissions.