Elona CRM Design System

A comprehensive guide to the visual language of Elona CRM documentation.

Colors

Our color palette is designed to be professional, accessible, and visually appealing.

Primary Colors

The primary navy blue represents trust, professionalism, and reliability.

#233168

Primary--ifm-color-primary

#1e2a59

Primary Dark--ifm-color-primary-dark

#1a2550

Primary Darker--ifm-color-primary-darker

#151d3f

Primary Darkest--ifm-color-primary-darkest

#283877

Primary Light--ifm-color-primary-light

#2d3f86

Primary Lighter--ifm-color-primary-lighter

#3a4fa3

Primary Lightest--ifm-color-primary-lightest

Accent Colors

The gold accent adds warmth and highlights important elements.

#CEA216

Accent--elona-accent

#b8910f

Accent Dark--elona-accent-dark

#dbb32e

Accent Light--elona-accent-light

Dark Mode Colors

Adjusted colors for optimal readability in dark mode.

#7a8ed4

Primary (Dark Mode)

#94a1dd

Primary Light (Dark Mode)

#dbb32e

Accent (Dark Mode)

Typography

Our typography system uses two Google Fonts families for a modern, readable experience.

Baloo 2

Used for headings and display text. Friendly yet professional.

The quick brown fox jumps over the lazy dog400

The quick brown fox jumps over the lazy dog500

The quick brown fox jumps over the lazy dog600

The quick brown fox jumps over the lazy dog700

The quick brown fox jumps over the lazy dog800

Outfit

Used for body text and UI elements. Clean and highly readable.

The quick brown fox jumps over the lazy dog300

The quick brown fox jumps over the lazy dog400

The quick brown fox jumps over the lazy dog500

The quick brown fox jumps over the lazy dog600

The quick brown fox jumps over the lazy dog700

Typography Scale

Heading 1

h1

Heading 2

h2

Heading 3

h3

Heading 4

h4

Heading 5

h5

Body Text - 16px base size

p / body

Small Text - 14px

small

Buttons

Button styles for various actions and states.

.button--primary

.button--secondary

.button--outline

Spacing

Consistent spacing creates visual harmony throughout the documentation.

4px

8px

12px

16px

24px

32px

48px

64px

Usage Guidelines

Do

Use the primary navy blue for main navigation and important elements
Apply the gold accent sparingly for calls-to-action and highlights
Maintain consistent typography hierarchy
Ensure sufficient color contrast for accessibility

Don't

Overuse the accent color - it loses impact
Mix font families within the same context
Use colors outside the defined palette
Ignore dark mode compatibility

CSS Variables Reference

Use these CSS custom properties in your styles:

:root {
  /* Primary Colors */
  --ifm-color-primary: #233168;
  --ifm-color-primary-dark: #1e2a59;
  --ifm-color-primary-light: #283877;
  
  /* Accent Colors */
  --elona-accent: #CEA216;
  --elona-accent-dark: #b8910f;
  --elona-accent-light: #dbb32e;
  
  /* Typography */
  --ifm-font-family-base: 'Outfit', sans-serif;
  --ifm-heading-font-family: 'Baloo 2', cursive;
}