WRAP’s official design system – serving as the primary resource for creating and improving our websites and applications.

🐛 Report a bug | Request a feature 🙏

🚀 Live documentation 🚀

Evergreen represents our commitment to creating cohesive, accessible, and user-friendly experiences across our entire digital ecosystem.

• Consistency: Ensures visual harmony, accessibility compliance, and recognizable brand identity across all touchpoints
• Clarity: Provides designers and developers with straightforward guidelines for creating and implementing components
• Efficiency: Reduces design and development time through reusable patterns and shared resources
• Quality: Maintains high standards as we scale our digital presence and collaborations

Who should use Evergreen

Evergreen serves as a resource for:

• WRAP's internal design and development teams
• Partner organizations collaborating on WRAP initiatives
• External suppliers and agencies contributing to WRAP projects
• Anyone building digital experiences within the WRAP ecosystem

How to get started

Evergreen provides tools for both designers and developers:

• Figma Resources: Design with our component library, design tokens, and templates to create experiences that align with WRAP's visual identity.
• Components: Build interfaces efficiently with our coded components, complete with documentation, usage guidelines, and examples.
• Brand Guidelines: Access WRAP's complete brand guidelines on Frontify, including logos, tone of voice, photography direction, and printed media.

By using these resources, you can create experiences that feel cohesive and authentic to the WRAP brand while saving time on your projects.

Website installation

Evergreen is distributed as an NPM package. The package contains exports for:

• Styles (@wrap.ngo/evergreen/styles) CSS to import global Evergreen styles
• Fonts (@wrap.ngo/evergreen/fonts) optional CSS to import Evergreen fonts
• Components (@wrap.ngo/evergreen/components) JS to register Evergreen components

No build tools route

Evergreen is packaged to be used directly in the browser, and doesn't require any build.

Here is a Codepen example which shows how a CDN like esm.sh can be used to load Evergreen.

Build tools route

First install the NPM package.

npm install --save @wrap.ngo/evergreen

Then, include the global CSS and JS in your main app file.

// Global styles
import '@wrap.ngo/evergreen/styles';
// Optional font import
import '@wrap.ngo/evergreen/fonts';
// Component registration
import '@wrap.ngo/evergreen/components'

Use the components anywhere.

<evg-button variant="primary">
  <button type="button">
    Button text
  </button>
</evg-button>

See the example directory (./example) for a working code example using Vite or head over to the page setup guide for information on setting up your first page.

Contributing

Please read through our contributing guidelines. Included are directions for local setup, coding standards, and notes on component development.

Versioning

Evergreen is maintained under the Semantic Versioning guidelines.

See the Releases section of our GitHub project for changelogs for each release version of Evergreen.