Design Tokens - EcoKit

Colors

Color tokens define the visual identity and semantic meaning throughout the design system. Use brand colors for primary actions, neutrals for text and backgrounds, and feedback colors to communicate status.

Brand Colors

Brand Blue

#1A6F8A

--brand-blue-600

Primary brand color for actions and highlights

Brand Green

#138A4F

--brand-green-600

Secondary brand color for sustainability themes

Brand Gradient

Gradient

--gradient-brand

Linear gradient from blue to green

Neutral Colors

Neutral colors provide the foundation for text, backgrounds, and borders. The scale ranges from darkest (900) to lightest (100).

Neutral 900

#0F1A1C

--neutral-900

Primary text color

Neutral 700

#415355

--neutral-700

Secondary text, headings

Neutral 500

#7A8C8E

--neutral-500

Placeholder text, disabled states

Neutral 300

#D5DFE1

--neutral-300

Borders, dividers

Neutral 100

#F3F6F7

--neutral-100

Backgrounds, subtle highlights

Feedback Colors

Feedback colors communicate status, success, warnings, and errors to users.

Success

#0F9D58

--success-500

Success messages, positive actions

Warning

#F4B400

--warning-500

Warnings, caution states

Error

#DB4437

--error-500

Errors, destructive actions

/* Usage Example */
.button-primary {
  background: var(--brand-blue-600);
  color: white;
}

.text-primary {
  color: var(--neutral-900);
}

.alert-success {
  background: var(--success-500);
  color: white;
}
                

Typography

Typography tokens define font families, sizes, weights, and line heights for consistent text styling across the design system.

Font Families

Sans Serif

The quick brown fox

--font-sans

Inter, system-ui, sans-serif

Monospace

code.example()

--font-mono

IBM Plex Mono, monospace

Font Sizes

XS

Extra Small Text

--text-xs

0.75rem (12px)

SM

Small Text

--text-sm

0.875rem (14px)

MD

Medium Text

--text-md

1rem (16px)

LG

Large Text

--text-lg

1.25rem (20px)

XL

Extra Large Text

--text-xl

1.5rem (24px)

2XL

2X Large Text

--text-2xl

2rem (32px)

Font Weights

Regular

Regular Weight

--font-weight-regular

400

Medium

Medium Weight

--font-weight-medium

500

Bold

Bold Weight

--font-weight-bold

600

Spacing

Spacing tokens create consistent rhythm and hierarchy. The scale follows a 4px base unit, providing predictable spacing throughout the interface.

Space 1 - --space-1 (4px)

Space 2 - --space-2 (8px)

Space 3 - --space-3 (12px)

Space 4 - --space-4 (16px)

Space 5 - --space-5 (20px)

Space 6 - --space-6 (24px)

Space 8 - --space-8 (32px)

Space 10 - --space-10 (40px)

Space 12 - --space-12 (48px)

Space 16 - --space-16 (64px)

Space 20 - --space-20 (80px)

Space 24 - --space-24 (96px)

Border Radius

Radius tokens define the roundness of corners, creating visual consistency across components.

None

--radius-none

--radius-sm

4px

--radius-md

8px

--radius-lg

12px

--radius-xl

16px

Full

--radius-full

9999px

Shadows & Elevation

Shadow and elevation tokens create depth and hierarchy, helping users understand the relationship between interface elements.

Shadows

Small

Shadow SM

--shadow-sm

Medium

Shadow MD

--shadow-md

Large

Shadow LG

--shadow-lg

Extra Large

Shadow XL

--shadow-xl

Inner

Shadow Inner

--shadow-inner

Elevation

Elevation tokens provide a systematic approach to layering interface elements.

Elevation 0

No Shadow

--elevation-0

Elevation 1

Level 1

--elevation-1

Elevation 2

Level 2

--elevation-2

Elevation 3

Level 3

--elevation-3

Elevation 4

Level 4

--elevation-4

Elevation 5

Level 5

--elevation-5

Motion

Motion tokens define timing and easing functions for animations and transitions, creating smooth and consistent interactions.

Duration

Fast

--duration-fast

150ms - Quick interactions

Normal

--duration-normal

250ms - Standard transitions

Slow

--duration-slow

350ms - Deliberate animations

Easing

Linear

--easing-linear

Constant speed

Ease In

--easing-ease-in

Accelerates

Ease Out

--easing-ease-out

Decelerates

Ease In Out

--easing-ease-in-out

Accelerates then decelerates

Z-Index

Z-index tokens define the stacking order of elements, ensuring proper layering of overlays, modals, and tooltips.

Base --z-base 0
Dropdown --z-dropdown 1000
Sticky --z-sticky 1020
Fixed --z-fixed 1030
Modal Backdrop --z-modal-backdrop 1040
Modal --z-modal 1050
Popover --z-popover 1060
Tooltip --z-tooltip 1070

Usage Guidelines

Best Practices

Always use tokens: Never hardcode values. Use design tokens for all spacing, colors, typography, and other design properties.
Maintain consistency: Stick to the predefined scale. If you need a value that doesn't exist, consider if it should be added to the token system.
Semantic naming: Use tokens that match the semantic meaning (e.g., --success-500 for success states, not just any green).
Responsive design: Tokens work across all screen sizes. Use them consistently for responsive layouts.
Accessibility: Color tokens are designed with contrast ratios in mind. Always test accessibility when combining colors.