Security News
The Changelog Podcast: Practical Steps to Stay Safe on npm
Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.
By Sarah Gooding -  Oct 31, 2025
🚀 DAY 5 OF LAUNCH WEEK: Introducing Socket Firewall Enterprise.Learn more →
@substrate/design-system
Advanced tools
Substrate Design System
Tech stack
Building components
- đź“š Storybook for UI component development and auto-generated docs
- đź’… Tachyons for component-scoped styling
- ⚛️ React declarative component-centric UI
Maintaining the system
- 📦 NPM for packaging and distribution
- âś… Chromatic to prevent UI bugs in components (by Storybook maintainers)
- 🚥 CircleCI Continuous integration
Install
npm install --save @substrate/design-system
Global Styles
Components within the design system assume that a set of global styles have been configured. Depending upon the needs of the application, this can be done several ways:
Option 1: Render the GlobalStyle component
Useful when you don't need any custom body styling in the application, typically this would be placed in a layout component that wraps all pages, or a top-level App component.
import { global } from '@storybook/design-system';
const { GlobalStyle } = global;
/* Render the global styles once per page */
<GlobalStyle />
Option 2: Use the bodyStyles to apply styling
Useful when you want build upon the shared global styling.
import { createGlobalStyle } from 'styled-components';
import { global } from '@storybook/design-system';
const { bodyStyles } = global;
const CustomGlobalStyle = createGlobalStyle`
body {
${bodyStyles}
// Custom body styling for the app
}
`;
/* Render the global styles once per page */
<CustomGlobalStyle />
Font Loading
Rather than @import fonts in the GlobalStyle component, the design system's font URL is exported with the intention of using it in a <link> tag as the href. Different frameworks and environments handle component re-renders in their own way (a re-render would cause the font to be re-fetched), so this approach allows the design system consumers to choose the font loading method that is most appropriate for their environment.
Option 1: Build the link tag manually
import { global } from '@storybook/design-system';
const fontLink = document.createElement('link');
fontLink.href = global.fontUrl;
fontLink.rel = 'stylesheet';
document.head.appendChild(fontLink);
Option 2: Render the link tag in a component
import React from 'react';
import { global } from '@storybook/design-system';
const Layout = ({ children }) => (
<html>
<head>
<link href={global.fontUrl} rel="stylesheet" />
</head>
<body>{children}</body>
</html>
);
export default Layout;
Development Scripts
yarn release
Bump the version
Push a release to GitHub and npm
Push a changelog to GitHub
Notes:
- Requires authentication with
npm adduser autois used to generate a changelog and push it to GitHub. In order for this to work correctly, an environment variable calledGH_TOKENis needed that references a GitHub personal access token with the appropriate permissions to update the repo.
FAQs
Substrate design system
We found that @substrate/design-system demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Package last updated on 09 Mar 2020
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Security Community Slams MIT-linked Report Claiming AI Powers 80% of Ransomware
Experts push back on new claims about AI-driven ransomware, warning that hype and sponsored research are distorting how the threat is understood.
By Sarah Gooding -  Oct 30, 2025
Security News
Ruby Core Team Assumes Stewardship of RubyGems and Bundler, Former Maintainers Offer to Transfer All Rights to Matz
Ruby's creator Matz assumes control of RubyGems and Bundler repositories while former maintainers agree to step back and transfer all rights to end the dispute.
By Sarah Gooding -  Oct 29, 2025