1.9.29 • Public • Published

    GumGum Design System

    🚧 Under Construction 🚧

    Future home of GumGum Design System 2.0 [aka Concrete] 🚧

    GitHub package.json version (branch)

    As part of the GumGum 2020 rebranding, this design system will be begin to be updated to match the new brand styles. Concrete is inspired by the GumGum Santa Monica office with crisp architectural lines and modern exposed concrete.

    Upcoming Changes

    • Design System will become open source
    • Simplified UI inventory & build process
    • Fonts no longer hosted
    • Better documentation, examples, and templates

    What to expect

    We are updating from our original system to 2.0. Updates to this design system will be rolled out into small stages to help reduce breaking UI on our existing platforms. Each release will included expectations on breaking changes along with solutions. Our goal is to fit these simple changes into each teams sprint release.

    The existing design system will continue to be maintained to stable, but will soon be phased out.

    For now there will be no CDN available to this design system since most of our applications are running off React and using node-sass. As well we have removed our compressed CSS version.


    npm i gumgum-design
    yarn add gumgum-design

    For current usage of this design system we recommend using the scss/sass files with node-sass. ⚠️ Warning: node-sass has been deprecated 😭 but can continue to be used. We are working to support sass aka Dart Sass (09/04/2020)

    npm i node-sass
    yarn add node-sass

    Create a root .scss file, if you don’t already have one.

    touch index.scss

    Import the Design System Package to your root style file (index.scss)

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

    Style Overrides

    Design token overrides need to come before the @import. We recommend using an override file at root or you can write it above.

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


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

    Running Repo Locally

    npm i

    Run StoryBook

    npm run start

    Run Test/Temp Page We use this to test the impact of changes on existing systems

    npm run start:temp

    It will run on http://localhost:8000/ and you can use the css in another repo to see the changes http://localhost:8000/index.css

    i.e. In a different repo comment or remove the existing CSS and replace with this: <link rel="stylesheet" href="http://localhost:8000/index.css" /> This will require a page refresh when there is a change since there is no task water to see that the CSS has updated.

    Testing Locally

    In the root folder run

    npm link

    Create a react test folder & link the package within it

    npx create-react-app tester
    cd tester
    npm link gumgum-design


    We use git flow


    Note: CSS complier disabled currently. Only use React w/ node-sass or Storybook at this time.


    npm i gumgum-design

    DownloadsWeekly Downloads






    Unpacked Size

    989 kB

    Total Files


    Last publish


    • garrettbear