GumGum Concrete Design System

Concrete is inspired by the modern design of GumGum’s Santa Monica office featuring white walls and exposed concrete.

Breaking Changes: 2.0 has recently been released due to an upcoming deprecation of how scss calculates math. This breaking change requires using sass package and no longer supports node-sass. 2.1.0 also contains breaking changes to remove deprecated components. See CHANGELOG.md for details.

Table of Contents

• Usage
• Local Setup
• Roadmap
• About Concrete

Usage

At GumGum we build our web applications with React and built this design system to support most React applications. It works with create-react-app out of the box, but some applications may require additional webpack configurations.

Install Design & Sass Packages

// Design system is built-in SCSS, so sass package is required for the build process.
$ yarn add sass gumgum-design

• GumGum NPM Package
• Sass NPM Package

Concrete Design System has only two dependencies:

• FontSource Public Sans ( font )
• FontAwesome ( icon font)

Import Design Styles

// In the main SCSS file (e.g. index.scss)
@import '~gumgum-design/styles/scss/index';

Overriding Design Styles

There are two simple ways to override design styles such as color variables. Override styles can be put into a different file or they can be placed above the import.

@import './override';
@import '~gumgum-design/styles/scss/index';

// or

$primaryColor: #bada55;
@import '~gumgum-design/styles/scss/index';

Running Design System Locally

The design system documentation is built using Next.js and is simple to get running.

// Install packages
$ yarn install

// Run locally
$ yarn dev

Roadmap

• Main Docs
• node-sass to sass
• Main internal web app integrations
• Font Awesome 6 Upgrade
• Detailed Doc Examples
• Deprecate Components/Sizes/Colors
• Centralized Design Token System
• Mobile/Browser Fixes
• Figma Design File Update
• Synchronized Design Tokens (Figma ⟵⟶ Design System)
• Theme Modes
• Improved Version Control
• Animations
• Unit Testing and Optimization
• CSS Only Build
• Simplified UI inventory & build process
• Documentation Search and templates
• Light & Dark Theme Mode
• Improved Accessibility
• Unit Testing
• Improved Release Notes

License

Apache 2.0

Important Note: This project does not redistribute third-party libraries but identifies their availability. The libraries called by this project are subject to their creator licenses. Remember to consult and comply with all licenses in your uses.