EverforthDesign System

Build consistent, accessible user interfaces across all Everforth brands. 29 components, comprehensive design tokens, and guidelines for enterprise-ready applications.

Get Started

Browse Components

Design Tokens

Systematic color palette, typography scale, spacing system, and shadows. Fully customizable via CSS variables and SCSS.

Explore tokens

29 Components

From buttons and forms to complex components like date pickers, command palettes, and tree views.

Browse components

JavaScript Library

Vanilla JS interactions for modals, accordions, tabs, dropdowns, tooltips, and more. No dependencies.

View documentation

Layout System

Flexible 12-column grid, container utilities, and responsive breakpoints for building any layout.

View layouts

Accessibility

WCAG 2.1 AA compliant. Proper ARIA attributes, keyboard navigation, and focus management built-in.

A11y guidelines

Dark Mode

Built-in dark mode with Everforth's signature deep teal aesthetic. Automatic system preference detection.

Theming guide

Brand Themes

The design system supports multiple brand themes within the Everforth family.

ECS

Government & Enterprise solutions with professional, clean design language.

class="df-ecs"

Everforth

Modern, dynamic branding with sophisticated serif headlines and vibrant accents.

Default theme

Quick Start

Get up and running in minutes:

bash

# Install via npm
npm install @everforth/design-system

html

<!-- Include CSS -->
<link rel="stylesheet" href="@everforth/design-system/dist/design-framework.css">

<!-- Use components -->
<button class="df-button df-button--primary">
  Get Started
</button>

Read the Documentation Explore Components