CSS Framework
The @ebrains/assets package provides two ready-to-use CSS files that give you access to the entire EBRAINS visual system — without needing to install the component library or set up Tailwind.
Installation
Via NPM
Then import in your project:
Via CDN (unpkg)
Which file should I use?
| File | Size | Use when… |
|---|---|---|
output.css | ~252KB | You want the full utility class framework (colors, typography, layout, spacing, effects) |
vars.css | ~8KB | You only need CSS variables and font declarations to use in your own styles |
What’s in vars.css
The lightweight file contains only CSS custom properties and @font-face declarations. No utility classes, no resets — just the raw design tokens as CSS variables.
Font Faces
Brand Colors
Extended Color Scales
Nine color scales with shades from 100 to 900: --grey-*, --green-*, --blue-*, --red-*, --yellow-*, --orange-*, --purple-*, --cyan-*.
Typography Variables
Every heading, body, UI, display, caption, and code style is defined as a set of variables:
Usage example:
Responsive Breakpoints
Typography and spacing variables update automatically at each breakpoint:
| Breakpoint | Min-width | Example change |
|---|---|---|
| sm | 0 | --f-heading-01-fontSize: 42px |
| md | 750px | --f-heading-01-fontSize: 48px |
| lg | 900px | --f-heading-01-fontSize: 72px |
| xl | 1024px | --f-heading-01-fontSize: 83px |
Layout Variables
Spacing Tokens
What’s in output.css
The full framework includes everything from vars.css plus a complete set of utility classes built with Tailwind CSS from the EBRAINS design tokens.
Background Colors
Text Colors
Typography Classes
Apply a full type style with a single class:
Layout & Grid
Spacing
Padding and margin utilities from 0 to 196px:
Available values: 0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 96, 128, 160, 196
Flexbox & Display
Border Radius
Shadows
Effects & Transitions
Responsive Prefixes
Utility classes can be prefixed with breakpoint names:
| Prefix | Min-width |
|---|---|
sm: | 0 (default) |
md: | 750px |
lg: | 900px |
xl: | 1024px |
xxl: | 1280px |
Aspect Ratios
Font Files
The package includes self-hosted font files at @ebrains/assets/fonts/:
| Font | Weight | File |
|---|---|---|
| Inter | Light 300 | Inter-Light.woff2 |
| IBM Plex Sans | Regular 400 | IBMPlexSans-Regular.woff2 |
| IBM Plex Sans | SemiBold 600 | IBMPlexSans-SemiBold.woff2 |
| IBM Plex Mono | Regular 400 | IBMPlexMono-Regular.woff2 |
Both output.css and vars.css include @font-face declarations that reference these files. If serving from a CDN, the fonts load automatically from unpkg.