EON is a carefully curated color palette inspired by natural elements and timeless design principles for modern interface designs. It features 28 carefully selected colors organized into 7 semantic groups.
# npm
npm install @logstack/eon
import { EonColors, getEonColor } from '@logstack/eon';
// Direct access
const black = EonColors.black; // "#000000"
const teal = EonColors.teal; // "#2a9d8f"
// Function access with validation
const color = getEonColor('coral'); // "#e76f51"
const invalid = getEonColor('red'); // null
import { EonGroups, getEonGroup } from '@logstack/eon';
// Get entire color groups
const darkColors = EonGroups.deepAnchors;
// { black: "#000000", pitch: "#090909", night: "#121212", coal: "#2b2b2b" }
const accents = getEonGroup('vibrantAccents');
// { coral: "#e76f51", terra: "#d65a3a", mustard: "#ffde5c", teal: "#2a9d8f" }
import { injectEonColors, removeEonColors } from '@logstack/eon/inject';
// Inject CSS custom properties
injectEonColors();
// Creates :root { --eo-black: #000000; --eo-teal: #2a9d8f; ... }
// Custom configuration
injectEonColors({
styleId: 'my-colors', // Custom style element ID
replace: false // Don't replace existing styles
});
// React component example
function Button() {
return (
<button style={{
color: 'var(--eo-white)',
backgroundColor: 'var(--eo-coral)'
}}>
Click Me
</button>
);
}
// Remove injected styles
removeEonColors();
@import '@logstack/eon/css';
button {
background: var(--eo-sigil);
border: 2px solid var(--eo-coal);
}
/*
@mixin eon-colors($selector: ':root') {} // Generate CSS variables
@function eon-color($colorName) {} // Returns CSS styled variable, Eg: var(--eo-sigil)
@function eon-color-value($colorName) {} // Returns Hex value of color, Eg: #4D4153
@function eon-color-group($groupName) {} // Returns an array of colors values from specified group.
*/
@use 'sass:color';
@use '@logstack/eon/scss' as eon;
@include eon.eon-colors();
.button {
background: eon.eon-color('teal'); //? var(--eo-teal);
border: 2px solid eon.eon-color-value('coal'); //? #2B2B2B
&:hover {
background: color.scale(eon.eon-color-value('teal'), $green: 44%);
}
}
@use 'sass:map';
.tmp {
color: map.get($eon-color-palette, 'sigil');
}
import {
getAllColorNames,
getAllGroupNames,
getColorsByGroup,
isValidEonColor
} from '@logstack/eon';
const allColors = getAllColorNames();
// ['black', 'pitch', 'night', ...]
const groups = getAllGroupNames();
// ['deepAnchors', 'stoneNeutrals', ...]
const earthyColors = getColorsByGroup('earthyTones');
// ['olive', 'khaki', 'moss', 'taupe', 'latte']
const isEonColor = isValidEonColor('#2a9d8f'); // true
{
"version": "1.0.0",
"colors": {
"black": "#000000",
"pitch": "#090909",
// ...
},
"groups": {
"deepAnchors": {
"black": "#000000",
"pitch": "#090909",
// ...
}
// ...
}
}
π API Reference
// Core functions
getEonColor(colorName: string): string | null
getEonGroup(groupName: string): Record<string, string> | null
getAllColorNames(): string[]
getAllGroupNames(): string[]
getColorsByGroup(groupName: string): string[] | []
isValidEonColor(colorName: string): boolean
isEonColorsInjected(styleId: string): boolean
removeEonColors(styleId: string): boolean; // Removes CSS variables
injectEonColors(options: Record<string, string>): boolean; // Injects CSS variables
// Core objects
EonColors: Record<string, string>
EonGroups: Record<string, Record<string, string>>
Group | Colors | Usage Examples |
---|---|---|
Deep Anchors | black, pitch, night, coal | Text, dark backgrounds |
Stone Neutrals | graphite, storm, steel | Borders, disabled states |
Earthy Tones | olive, khaki, moss, taupe, latte | Natural UI elements |
Dusty Chromatics | plum, mauve | Secondary accents |
Soft Neutrals | cream, sand, smoke, powder, white | Backgrounds, light surfaces |
Ethereal Pastels | mint, petal, blush, candy, peach | Highlights, delicate accents |
Vibrant Accents | coral, terra, mustard, teal | CTAs, important elements |
MIT License Β© 2025 Logstack Labs. See LICENSE for details.
EON was made possible with help from:
"Colors are the smiles of nature." - Leigh Hunt