EF
EF Design System

Colors

The complete color token reference for the design system. Click any swatch to copy its hex value to your clipboard.

Page Colors

Primary

Status Colors

Text Colors

Border Colors

Primary Gradient

linear-gradient(135deg, #1db954, #059669)

css
/* Color Tokens */
--color-page-bg: #fafafa;
--color-surface: #ffffff;
--color-alt-bg: #f5f5f5;
--color-hover-bg: #ebebeb;

--color-primary: #1db954;
--color-primary-blue: #2563eb;
--color-primary-light: #dcfce7;
--color-primary-gradient: linear-gradient(135deg, #1db954, #059669);

--color-success: #16a34a;
--color-success-light: #dcfce7;
--color-warning: #d97706;
--color-warning-light: #fef3c7;
--color-danger: #dc2626;
--color-danger-light: #fee2e2;
--color-info: #2563eb;
--color-info-light: #dbeafe;

--color-text-primary: #0a0a0a;
--color-text-secondary: #525252;
--color-text-tertiary: #a3a3a3;

--color-border: #e5e5e5;
--color-border-active: #d4d4d4;