Brand Guidelines

Brand Color System

A single source of truth for LYSTO brand colors, UI tokens, and logo usage across light and dark themes. Use SVG components for brand marks and PNGs for platform app icons.

Brand

Core Brand Colors

These tokens define the primary brand identity. Keep logo marks in brand purple on neutral surfaces whenever possible.

Brand
Brand Dark
Gradient Logo

Brand UI Tokens

These tokens power the application surfaces, borders, and call-to-action buttons. Reference the CSS variables directly to stay theme-safe.

Background
Surface
Card
Border
Divider
Action
Action Hover

Text Tokens

Use these text colors for hierarchy and readability. They are designed to work on brand surfaces in both themes.

Text Primary
Text Secondary
Text Tertiary

Light and Dark Theme Preview

Each preview renders the same components under different theme scopes. This makes it easy to confirm tokens behave correctly in both modes.

Light Mode
Tokens rendered within a light mode container.
Primary Action
Secondary Action
Brand Logo System

Prefer SVG components for logos and icons, and use PNGs for app icons.

Dark Mode
Tokens rendered within a dark mode container.
Primary Action
Secondary Action
Brand Logo System

Prefer SVG components for logos and icons, and use PNGs for app icons.

Logo Assets

SVG is preferred for logos, icons, and wordmarks. Use PNGs for app icons and platform-specific assets.

SVG Components
These map to files in public/brand/SVG and are colorable via currentColor.
Icon
Wordmark
Lockup
Brand Surface
Light Surface
Dark Surface
App Icon (PNG)
Use the PNG app icon for platform requirements and store listings.
LYSTO app icon
Source: public/brand/App_Icon/lysto-icon.png