Getting Started

Everything you need to install, configure, and start building with the Everforth Design System.

Installation

The Everforth Design System can be installed via npm or included directly from a CDN.

npm (Recommended)

bash

npm install @everforth/design-system

Or with yarn:

bash

yarn add @everforth/design-system

CDN

For quick prototyping, include the CSS directly:

html

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.everforth.com/design-system/latest/design-framework.css">

<!-- JavaScript (optional) -->
<script src="https://cdn.everforth.com/design-system/latest/design-framework.js"></script>

Quick Start

Here's a minimal example to get you up and running:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <link rel="stylesheet" href="path/to/design-framework.css">
</head>
<body>
  <div class="df-container">
    <h1>Welcome to My App</h1>

    <div class="df-alert df-alert--info">
      <strong>Getting started?</strong>
      Check out our documentation for more examples.
    </div>

    <button class="df-button df-button--primary">
      Get Started
    </button>
  </div>

  <script src="path/to/design-framework.js"></script>
</body>
</html>

Result

Getting started? Check out our documentation for more examples.

CSS Usage

Import Everything

The simplest approach is to import the entire compiled CSS file:

css

/* In your CSS or SCSS file */
@import '@everforth/design-system/dist/design-framework.css';

SCSS Modules (Recommended)

For more control and smaller bundles, import specific modules:

scss

// Import tokens (colors, typography, spacing)
@use '@everforth/design-system/src/scss/tokens';

// Import base styles (reset, typography)
@use '@everforth/design-system/src/scss/base';

// Import only the components you need
@use '@everforth/design-system/src/scss/components/button';
@use '@everforth/design-system/src/scss/components/card';
@use '@everforth/design-system/src/scss/components/alert';

// Import utilities
@use '@everforth/design-system/src/scss/utilities';

Pro tip

Using SCSS modules allows tree-shaking unused styles and customizing tokens before they're compiled.

JavaScript

The design system includes vanilla JavaScript for interactive components like modals, accordions, and tooltips.

Auto-initialization

Components automatically initialize when the DOM is ready:

html

<script src="path/to/design-framework.js"></script>
<!-- All components with data-df-* attributes auto-initialize -->

Manual Initialization

For dynamic content or more control:

// Initialize specific components
DF.Modal.init();
DF.Accordion.init();
DF.Tabs.init();
DF.Tooltip.init();
DF.Dropdown.init();

// Or initialize everything
DF.init();

Using Components Programmatically

// Show a toast notification
DF.Toast.success('Changes saved successfully!');
DF.Toast.error('Something went wrong.');
DF.Toast.info('New updates available.');

// Open a modal
const modal = document.querySelector('#my-modal');
DF.Modal.open(modal);

// Later, close it
DF.Modal.close(modal);

ES Modules

If using a bundler like Vite or webpack:

import { Modal, Toast, Tabs } from '@everforth/design-system';

// Use the components
Toast.success('Hello!');
Modal.init();

Customization

The design system is built with CSS custom properties, making it easy to customize for your brand.

CSS Variables

Override CSS variables in your own stylesheet:

css

:root {
  /* Brand colors */
  --df-color-primary: #C8102E;
  --df-color-secondary: #0D4F4F;
  --df-color-accent: #D4FF00;

  /* Typography */
  --df-font-family-sans: 'Work Sans', sans-serif;
  --df-font-family-serif: 'Source Serif Pro', serif;

  /* Spacing */
  --df-spacing-unit: 0.25rem;

  /* Border radius */
  --df-radius-md: 0.5rem;
  --df-radius-lg: 0.75rem;
}

SCSS Variables

When using SCSS, override variables before importing:

scss

// Override tokens before importing
$color-primary-500: #your-brand-color;
$color-secondary-500: #your-secondary-color;
$font-family-base: 'Your Font', sans-serif;

// Then import the framework
@use '@everforth/design-system/src/scss/main' with (
  $primary-color: $color-primary-500,
  $secondary-color: $color-secondary-500,
  $font-family-base: $font-family-base
);

Dark Mode

The design system includes a complete dark mode theme with Everforth's signature deep teal aesthetic.

Enabling Dark Mode

Add the data-theme="dark" attribute to your HTML element:

html

<html data-theme="dark">
  ...
</html>

Or use the df-dark class on any container:

html

<section class="df-dark">
  <!-- This section uses dark mode -->
</section>

System Preference Detection

Automatically respect the user's system preference:

// Check system preference and apply theme
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');

// Listen for changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
  document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
});

Toggle Button

Add a theme toggle with the built-in JavaScript:

html

<button data-df-theme-toggle aria-label="Toggle dark mode">
  Toggle Theme
</button>

Brand Themes

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

Theme	Class	Description
Everforth (default)	None	Modern, dynamic branding with serif headlines
ECS	`df-ecs`	Professional, clean design for government/enterprise

html

<!-- Apply ECS theme to a section -->
<div class="df-ecs">
  <button class="df-button df-button--primary">
    ECS Styled Button
  </button>
</div>

<!-- Or apply to the entire page -->
<body class="df-ecs">
  ...
</body>

Browser Support

The Everforth Design System supports all modern browsers:

Browser	Version
Chrome	Last 2 versions
Firefox	Last 2 versions
Safari	Last 2 versions
Edge	Last 2 versions

Internet Explorer

IE11 is not supported. The design system uses CSS custom properties and other modern features not available in IE.

Next Steps

Now that you've got the basics, explore the rest of the design system:

Foundations - Learn about design tokens, colors, typography, and spacing
Components - Browse all 29 UI components with examples and code
Accessibility - Build inclusive interfaces that work for everyone

Getting Started ​

Installation ​

npm (Recommended) ​

CDN ​

Quick Start ​

Result ​

CSS Usage ​

Import Everything ​

SCSS Modules (Recommended) ​

JavaScript ​

Auto-initialization ​

Manual Initialization ​

Using Components Programmatically ​

ES Modules ​

Customization ​

CSS Variables ​

SCSS Variables ​

Dark Mode ​

Enabling Dark Mode ​

System Preference Detection ​

Toggle Button ​

Brand Themes ​

Browser Support ​

Next Steps ​

Getting Started

Installation

npm (Recommended)

CDN

Quick Start

Result

CSS Usage

Import Everything

SCSS Modules (Recommended)

JavaScript

Auto-initialization

Manual Initialization

Using Components Programmatically

ES Modules

Customization

CSS Variables

SCSS Variables

Dark Mode

Enabling Dark Mode

System Preference Detection

Toggle Button

Brand Themes

Browser Support

Next Steps