Design System

breakpoints.json

{
    "dialog-breakpoints": {
        "desktop": "'min-width: 701px'",
        "mobile": "'max-width: 700px'"
    }
}

colors.json

{
    "colors": {
        "brand": "#62a8e0",
        "branddark": "#3790d8",
        "brandlight": "#90e9ff",
        "night": "#2a2a2a",
        "steel": "#797979",
        "tomb": "#9B9B9B",
        "rock": "#C5C5C5",
        "silver": "#D8D8D8",
        "dove": "#F1F1F1",
        "rain": "#ECEEF4",
        "glitter": "#ECF1F5",
        "snowflake": "#fff",
        "tomato": "#EE4036",
        "ripe-tomato": "#EE4036",
        "pumpkin": "#FF7B16",
        "pumpkin-soup": "#FF7B16",
        "salad": "#95D459",
        "old-salad": "#95D459",
        "transparent": "rgba(255,255,255,0)"
    },
    "palettes": {
        "brand": {
            "default": "brand",
            "highlight": "brandlight",
            "shade": "branddark"
        },
        "interaction": {
            "default": "brand--default",
            "default-hover": "brand--shade",
            "active": "brand--shade",
            "button": "interaction--default",
            "button-contrast": "interaction--inverted",
            "button-neutral": "transparent",
            "button-negative": "shade--none",
            "button-caution": "notification--error-fill",
            "hover-background": "shade--lighter",
            "inverted": "shade--none",
            "focus": "brand--highlight",
            "disabled": "text--weak"
        },
        "shade": {
            "none": "snowflake",
            "lighter": "dove",
            "light": "silver",
            "half": "rock",
            "dark": "tomb",
            "darker": "steel",
            "full": "night"
        },
        "notification": {
            "error-fill": "tomato",
            "error-text": "ripe-tomato",
            "warning-fill": "pumpkin",
            "warning-text": "pumpkin-soup",
            "success-fill": "salad",
            "success-text": "old-tomato",
            "neutral-fill": "shade--dark",
            "contrast-text": "text--inverted"
        },
        "text": {
            "default": "shade--full",
            "weak": "shade--dark",
            "inverted": "shade--none"
        },
        "icon": {
            "default": "shade--half",
            "default-over": "interaction--default",
            "inverted": "shade--none"
        },
        "layout": {
            "background": "glitter",
            "card": "shade--none",
            "card-appendix": "shade--lighter",
            "line": "shade--light",
            "navigation": "brand--default",
            "navigation-active": "brand--shade",
            "tooltip-fill": "brand--default",
            "shadow": "shade--dark"
        }
    }
}

design.scss

//   ___   ____  __   _   __    _
//  | | \ | |_  ( (` | | / /`_ | |\ |
//  |_|_/ |_|__ _)_) |_| \_\_/ |_| \|
//   __   _     __  _____  ____  _
//  ( (` \ \_/ ( (`  | |  | |_  | |\/|
//  _)_)  |_|  _)_)  |_|  |_|__ |_|  |
//-----------------------------------------------------------------------------\
//
// Everything related to the design-system must happen in this file.
// All design rules and settings are set within the /design/ folder and are
// meant to be maintained only in those .json files to guarantee that there is
// a single source of truth regarding all the design rules.
//
// The API between code and visual design is called "design-taxonomy".
// Taxonomy is the practice and science of classification of things or concepts,
// including the principles that underlie such classification.
// We create a common language that is understood by the project team.

// The design system consists of 4 components: breakpoints, colors, sizes and
// typography. They all come with helper functions and/or mixins.

// breakpoints:
// .someselector {
//      display: inline;
//      @include bp(mobile) {
//          display: block;
//      }
// }

// colors:
// .someselector {
//      color: c('text--default')
//      background-color: c(layout--background);
//      border: 1px solid c(layout--line);
// }

// sizes:
// .someselector {
//     margin-top: size(grid);
// }

// typography:
// .someselector {
//      @include typo(title);
//      // includes all properties needed for this element
//      // including breakpoints
// }


//  ___   ___   ____   __    _     ___   ___   _   _     _____  __
// | |_) | |_) | |_   / /\  | |_/ | |_) / / \ | | | |\ |  | |  ( (`
// |_|_) |_| \ |_|__ /_/--\ |_| \ |_|   \_\_/ |_| |_| \|  |_|  _)_)
//-----------------------------------------------------------------------------\
// setting up basic breakpoints for the project

// import breakpoints from the taxonomy
@import '../../design/breakpoints.json';

// setting up basic breakpoint mixin
@mixin bp($name) {
    @if map-has-key($dialog-breakpoints, $name) {
        @media (#{map-get($dialog-breakpoints, $name)}) {
            @content;
        }
    } @else {
        @error "there is no breakpoint called #{$name}";
    }
}

// usage:
// @bp(mobile) {
//   whatever is different on mobile
// }

//  __    ___   _     ___   ___   __
// / /`  / / \ | |   / / \ | |_) ( (`
// \_\_, \_\_/ |_|__ \_\_/ |_| \ _)_)
//-----------------------------------------------------------------------------\
// Colors are organized in palettes, you can not access a named color like "red"
// you have to know in what context its used. Let's say you need a color inside
// the logo, you probably want to use the 'brand--primary' color. If contexts
// are missing, feel free to extend the colors.json file.
//
// see https://github.com/meodai/paletter/ for tooling reference

// import all colors from the taxonomy
@import '../../design/colors.json';

// imports the SCSS color parsing tools
@import "paletter/lib/parse-palettes.scss";

// populates the $paletter-colors map with the values from the taxonomy
$paletter-colors: _parsePalette($palettes);

// adds helper function to return colors
@import "paletter/lib/color-helper-fn.scss";

// see ../../design/colors.json for reference
// usage: color: c('brand--primary');

//  __   _  ____  ____  __
// ( (` | |  / / | |_  ( (`
// _)_) |_| /_/_ |_|__ _)_)
//-----------------------------------------------------------------------------\
// check https://github.com/meodai/dialog-size for more information about
// the library

// import all sizes from the taxonomy
@import '../../design/sizes.json';

// import the actual library
@import 'dialog-size/dist/dialog-size';

// populate the SCSS map for the sizes() function
$dialog-sizes: toDialogSizeList($sizes);

// see ../../design/sizes.json for reference
// usage: size('huge');

// _____  _     ___   ___   __    ___    __    ___   _     _
//  | |  \ \_/ | |_) / / \ / /`_ | |_)  / /\  | |_) | |_| \ \_/
//  |_|   |_|  |_|   \_\_/ \_\_/ |_| \ /_/--\ |_|   |_| |  |_|
//-----------------------------------------------------------------------------\
// check https://github.com/meodai/dialog-typography for more information about
// the library

// import typography from the design-taxonomy
@import '../../design/typography.json';
@import 'dialog-typography/dist/dialog-typography';

// usage: @include typo('title');

sizes.json

{
    "sizes": [
        {
            "value": "0.1rem",
            "names": ["line"]
        },
        {
            "value": "0.4rem",
            "names": ["inline", "border-radius", "icon-inline"]
        },
        {
            "value": "0.8rem",
            "names": ["input-bezel--y", "tag-gutter", "icon-bezel"]
        },
        {
            "value": "1.2rem",
            "names": [
                "input-bezel--x",
                "label-inline",
                "button-icon-inline",
                "input-icon-bezel--x",
                "form-futter--narrow",
                "symbol-inline"
            ]
        },
        {
            "value": "1.4rem",
            "names": ["form-gutter", "grid-gutter", "card-aside-bezel--y"],
            "isBase": true
        },
        {
            "value": "1.6rem",
            "names": [
                "card-bezel",
                "card-aside-bezel--x",
                "card-body-bezel--x",
                "card-body-bezel--y",
                "card-section-stack"
            ]
        },
        {
            "value": "2rem",
            "names": ["content-bezel", "card-stack"]
        }
    ]
}

typography.json

{
    "dialog-typo": {
        "desktop": {
            "default": {
                "font-size": "1.5rem",
                "font-family": "'Roboto, Arial, sans-serif'",
                "font-weight": 400,
                "font-style": "normal",
                "line-height": 1.5,
                "color": "c('text--default')"
            },
            "tag": {
                "color": "c('text--default')"
            },
            "button": {
                "color": "c('text--default')"
            },
            "link": {
                "color": "c('interaction--default')"
            },
            "meta": {
                "font-size": "1.2rem",
                "line-height": 1.3,
                "color": "c('text--weak')"
            },
            "title": {
                "font-size": "2.4rem",
                "line-height": 1.3,
                "font-weight": 700
            },
            "modal-title": {
                "font-size": "1.5rem",
                "line-height": 1.3,
                "font-weight": 700,
                "text-align": "center"
            }
        },
        "mobile": {
            "default": {
                "font-size": "1.15rem",
                "line-height": 1.5
            }
        }
    }
}