Lesli brand

The Lesli brand combines its wordmark, compact icon, and Lesli Blue. These elements identify Lesli itself; product state and business grouping use the separate semantic, categorical, and Collection color layers.

Logo

Use the standard wordmark on light backgrounds and the negative wordmark on dark or saturated backgrounds.

Standard wordmark

Negative wordmark

Compact icon

Use the compact icon when horizontal space is limited, including application navigation, favicons, and other square placements.

Standard icon

Negative icon

Lesli Blue

Lesli Blue is the official brand color. Its canonical token is primary-500 (#276AD6). Use Primary for Lesli identity, primary actions, links, focus states, and selected navigation.

Primary is not a synonym for Info, and it is separate from the Sky and Indigo categorical families.

Palette guidance

• Use 50–100 for subtle backgrounds.
• Use 200–300 for borders, selected surfaces, and quiet focus treatments.
• Use 500 for the canonical Lesli identity and primary actions.
• Use 600–700 for hover, active, and strong accent states.
• Use 800–900 for pressed states and dark surfaces.

For normal-sized text, use a sufficiently dark foreground on Primary 50–400 and white on Primary 500–900. Primary 400 does not provide enough contrast with white.

See the color system documentation for CSS variables, Sass functions, Tailwind utilities, and runtime application themes.

Packaged assets

LesliAssets exposes the default artwork under the lesli_assets/brand logical asset namespace.

Use Rails asset helpers so the generated URL works with the configured asset pipeline:

<%= image_tag("lesli_assets/brand/app-logo.svg", alt: "Lesli") %>

The Lesli customization helper selects the default application logo and can return either its URL or an image tag:

<%= customization_instance_logo_tag(
    logo: "app-logo",
    options: { alt: "Application logo", width: 180 }
) %>

Brand guidance

• Use the wordmark where enough horizontal space is available.
• Use the icon in compact navigation and square placements.
• Preserve the artwork's aspect ratio and clear space.
• Do not recolor, rotate, distort, outline, or apply decorative effects to the artwork.
• Choose the standard or negative asset appropriate for its background.
• Provide meaningful alternative text unless the image is purely decorative.

The current customization helper resolves these packaged defaults. Automatic per-account logo replacement is not enabled in the current implementation. Do not edit LesliAssets from a consuming application, because an upgrade can replace those changes.