Lesli colors

The Lesli identity is built around a primary blue inspired by Ruby Blue, supported by neutral mineral tones, restrained semantic colors, and a set of collection colors that extend the system without breaking consistency.

Lesli brand colors

Collection colors

Notification colors

Semantic colors

Collections

Primary brand color

This is the core visual color of Lesli. It should represent the platform globally and remain the main interactive brand color across the product.

Primary scale

Recommended use

• Primary 50–100: soft informational backgrounds
• Primary 200–300: borders, subtle surfaces, selected states
• Primary 500: primary buttons, links, active states, highlights
• Primary 700: hover state
• Primary 800: active/pressed state
• Primary 900: text on light blue backgrounds

Accessibility guidance

• Use white text on Primary 500 and darker.
• Use dark text on Primary 50 to Primary 300.
• Avoid placing small body text on Primary 400 or Primary 500 unless contrast has been tested.

Semantic colors

Semantic colors follow the same visual philosophy as the Lesli primary blue: restrained, mineral, and product-oriented.

Neutral palette

The neutral system supports the interface and should feel lightly mineral and subtly blue-gray rather than generic grayscale.

Recommended use

• Neutral 50: application background
• Neutral 100: subtle sections and muted cards
• Neutral 200: default borders and dividers
• Neutral 300: stronger borders and input outlines
• Neutral 700: secondary text
• Neutral 900: primary text

Text hierarchy

• Primary text: Neutral 900
• Secondary text: Neutral 700
• Muted text: Neutral 600
• Disabled text: Neutral 500

Info palette

Typical uses include informational alerts, help panels, onboarding hints, documentation callouts, and non-critical status indicators.

The info palette communicates neutral guidance, system messages, and contextual information without implying success, warning, or failure.

Usage guidelines

Use the info palette for neutral messages, contextual guidance, helper content, and informative UI states.

• Use 50–100 for soft backgrounds in banners, callouts, and informational surfaces.
• Use 200–400 for borders, subtle accents, and supporting visual elements.
• Use 500–600 as the default range for icons, links, badges, and emphasis.
• Use 700–900 for high-contrast text, strong highlights, or darker themed surfaces.

Success palette

The success palette signals confirmation, positive outcomes, and completed actions with a calm and trustworthy green range.

Typical uses include success alerts, completed states, confirmation messages, approved statuses, and positive validation feedback.

Usage guidelines

Use the success palette to confirm completed actions, positive outcomes, valid states, and healthy system feedback.

• Use 50–100 for soft success backgrounds in alerts, notices, and passive confirmations.
• Use 200–400 for borders, supporting accents, and lighter positive indicators.
• Use 500–600 as the default range for success badges, icons, confirmations, and active positive feedback.
• Use 700–900 for high-contrast text, strong emphasis, or darker success surfaces.

Warning palette

Typical uses include warning alerts, incomplete forms, pending verifications, temporary issues, and states that require user review.

The warning palette highlights caution, pending issues, and states that need attention without escalating to error severity.

Usage guidelines

Use the warning palette for cautionary states, pending risks, incomplete flows, and situations that need attention but are not critical failures.

• Use 50–100 for soft warning backgrounds in alerts, notices, and highlighted sections.
• Use 200–400 for borders, subtle emphasis, and secondary caution indicators.
• Use 500–600 as the default range for warning badges, icons, notices, and attention-grabbing UI states.
• Use 700–900 for strong text contrast, emphasis, or darker warning surfaces.

Danger palette

Typical uses include error alerts, failed validations, destructive actions, blocked flows, and critical system states.

The danger palette is reserved for destructive actions, critical errors, and states that require immediate attention.

Usage guidelines

Use the danger palette for destructive actions, critical problems, failed operations, and states that require immediate attention.

• Use 50–100 for soft danger backgrounds in error banners, destructive confirmations, and critical notices.
• Use 200–400 for borders, supporting accents, and secondary error indicators.
• Use 500–600 as the default range for destructive buttons, critical badges, icons, and primary error states.
• Use 700–900 for strong emphasis, high-contrast text, or dark critical surfaces.

Collections palette

Collections give color identity to product areas, modules, or content groups without replacing the global primary color.

Collection color usage rules

• Do not use collection colors as the global product primary.
• Use collections for module identity, category badges, section headers, charts, avatars, tabs, and accents.
• Prefer 100 for background, 500 for accent, and 700 for text or strong iconography.

Ruby palette

Ember palette

Maize palette

Agave palette

Jade palette

Cenote palette

Quetzal palette

Bugambilia palette

Cacao palette

Obsidian palette

Color customization

Inside our initialization file, you'll find a dedicated section for customizing the color scheme. Simply edit the color values for various elements such as the primary color, sidebar, header, footer, background, and hover effects.

See the example below

Lesli.configure do |config|

    # Main color palette for Lesli
    config.theme = {
        color_primary: "#193d8d",
        color_sidebar: "#ffffff",
        color_header: "transparent",
        color_footer: "transparent",
        color_background: "#eef2f6",
        color_sidebar_hover: "#dee7ec"
    }
end

This is going to modify the corresponding SASS variables in the Lesli core:

$primary (bulma) -> color_primary 
$lesli-color-primary -> color_primary 
$lesli-header-color -> color_header 
$lesli-footer-color -> color_footer 
$lesli-sidebar-color -> color_sidebar 
$lesli-sidebar-hover -> color_sidebar_hover 
$lesli-color-background -> color_background 

Lesli provide the same color palette as CSS variables:

:root {
    --lesli-color-primary: var(--lesli-theme-color-primary, #{$lesli-color-primary});    
    --lesli-header-color: var(--lesli-theme-header-color, #{$lesli-header-color});
    --lesli-navbar-color: var(--lesli-theme-header-color, #{$lesli-navbar-color});    
    --lesli-footer-color: var(--lesli-theme-footer-color, #{$lesli-footer-color});
    --lesli-sidebar-color: var(--lesli-theme-sidebar-color, #{$lesli-sidebar-color});
    --lesli-logo-color: var(--lesli-theme-logo-color, #{$lesli-logo-color});
    --lesli-font-color: var(--lesli-theme-font-color, #{$lesli-font-color});
}

You can modify the CSS variables at runtime, so your users can modify the theme.

Bulma customization

You can customize bulma changing the value of the variables, see: https://bulma.io/documentation/customize/variables/

Work in progress...

Take me home