EBRAINS Design System
The EBRAINS Design System is a collection of design standards, components, and tools that enable a consistent and cohesive user experience across all of our digital products. It will streamline the design and development process, ensuring that our applications are accessible, user-friendly, and visually appealing.
Getting Started with the Design System
For Learners (Hands-on Tutorial)
Add the EBRAINS Design System to Your App
Step-by-step tutorial that teaches you to transform a basic app into a polished EBRAINS application. Includes concrete examples with buttons, cards, forms, and design tokens.
Time: 30-40 minutes | Prerequisites: Basic React app
For Developers (Quick Reference)
How to Integrate the Design System
Comprehensive integration guide covering all frameworks (React, Vue, Angular, vanilla JS). Includes installation instructions, component reference, design tokens, and troubleshooting.
Use when: You need framework-specific integration steps or configuration examples
For Contributors
How to Develop Stencil Components
Learn to build and contribute new components to the EBRAINS Design System using Stencil.js.
Its main features include:
| Element | Description |
|---|---|
| Style Guide | Defines visual design elements like colors, typography, spacing, and grids. |
| Design Tokens | Variables for colors, fonts, and spacing used to ensure consistency. |
| Component Library | Predefined UI components (e.g., buttons, forms) built with consistent styles and behaviors. |
| Documentation | Guidelines for using components, accessibility, and branding. |
Resources
Extended Documentation: is hosted under https://design.ebrains.eu, with guides on how to implement and customize UI components, and more.
Interactive Components
Storybook: is hosted under https://storybook.design.ebrains.eu , allowing teams to preview, demo, and experiment with components before development to streamline workflows and reduce errors.
NPM Packages
Several open-source
NPM packages are already published under the @ebrains namespace, enabling easy integration of the design system’s assets across projects.