Colors
accent1 , link , input-border-focus , button-primary-bg
#336699
accent1-lighter
color(#336699 lightness(+20%))
accent1-darker , link-hover
color(#336699 blackness(+20%))
accent2 , button-secondary-bg
#ffa500
accent2-lighter
color(#ffa500 lightness(+20%))
accent2-darker
color(#ffa500 blackness(+20%))
body , heading , input-border , icons
#333
white , body-light , background-default , input-background , button-primary-color , button-secondary-color
#fff
background-alt
#5f5f5f
input-group-background
#f1f1f1
input-label , input-disabled
#808080
input-error , text-color-error
#ff0000
border
#ccc
tooltip-bg
rgba(17,17,17,.9)
message-info
#f0f0f0
message-success
#dff0d8
message-error
#f2dede
Fonts

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Large Font

Body Font

Small Font

Buttons
Breakpoints

      desktop-wide-max-width: 100vw
      desktop-wide-min-width: 1440px
      desktop-wide-content: 1400px
      desktop-wide-col: xl
      desktop-wide-default: true
      desktop-wide-bleed: 1600px
      desktop-max-width: 1439px
      desktop-min-width: 1024px
      desktop-content: 1000px
      desktop-col: lg
      tablet-max-width: 1023px
      tablet-min-width: 768px
      tablet-content: 750px
      tablet-col: md
      mobile-max-width: 767px
      mobile-min-width: 320px
      mobile-content: 100%
      mobile-col: sm
      mobile-default: false
      
    
Spacing

      default-none: 0
      default-xl: 80px
      default-lg: 50px
      default-md: 30px
      default-sm: 20px
      default-xs: 10px
      
    
Grid

      columns: 12
      gutters: 15px
      
    
Variables

      font-primary: system-ui
      font-secondary: system-ui
      font-heading: system-ui
      font-weight-body: normal
      font-weight-light: 300
      font-weight-regular: 400
      font-weight-bold: 700
      font-size-body: 14px
      font-size-large: 16px
      font-size-small: 12px
      font-mobile-size-body: 14px
      font-mobile-size-large: 16px
      font-mobile-size-small: 12px
      line-height: 1.1
      line-height-large: 1.5
      heading-line-height: 1.2
      heading-font-weight: bold
      heading-1-size: 45px
      heading-1-mobile-size: 30px
      heading-2-size: 30px
      heading-2-mobile-size: 25px
      heading-3-size: 25px
      heading-3-mobile-size: 20px
      heading-4-size: 20px
      heading-4-mobile-size: 16px
      heading-5-size: 16px
      heading-5-mobile-size: 14px
      heading-6-size: 14px
      heading-6-mobile-size: 12px
      table-cell-padding: 10px
      table-sm-cell-padding: 5px
      table-bg: transparent
      table-bg-accent: #f9f9f9
      table-bg-hover: #f5f5f5
      table-bg-active: #f5f5f5
      table-border-width: 1px
      table-border-color: #eceeef
      border-size: 1px
      border-radius-default: 3px
      border-radius-lg: 5px
      border-radius-sm: 2px
      button-radius-default: 3px
      button-radius-lg: 5px
      button-radius-sm: 2px
      hr-max-width: 3.5em
      hr-height: 3px
      hr-color: #333
      message-border-radius: 2px
      dropdown-bg: #fff
      easing-out: cubic-bezier(0.35, 0.97, 0.57, 0.99)
      easing-in-out: ease-in-out
      
    
Config

{
  "tasks": {
    "analyze": "taskkit-analyze",
    "clean": "taskkit-clean",
    "eslint": "taskkit-eslint",
    "hash": "taskkit-hash",
    "scripts": "taskkit-rollup",
    "styleguide": "clientkit-styleguide",
    "stylesheets": "clientkit-css",
    "svgsprite": "taskkit-svg-sprite",
    "watcher": "taskkit-watcher",
    "default": [
      [
        "clean",
        "eslint"
      ],
      [
        "stylesheets",
        "scripts",
        "svgsprite",
        "styleguide"
      ]
    ],
    "dev": [
      "clean",
      "styleguide",
      "watcher"
    ],
    "prod": [
      "default",
      "hash",
      "styleguide"
    ]
  },
  "analyze": {
    "files": "/var/work/dev/clientkit/test/out/*.+(js|css)"
  },
  "clean": {
    "files": {
      "all": "/var/work/dev/clientkit/test/out"
    }
  },
  "stylesheets": {
    "color": {
      "accent1": "#336699",
      "accent1-lighter": "color(#336699 lightness(+20%))",
      "accent1-darker": "color(#336699 blackness(+20%))",
      "accent2": "#ffa500",
      "accent2-lighter": "color(#ffa500 lightness(+20%))",
      "accent2-darker": "color(#ffa500 blackness(+20%))",
      "body": "#333",
      "heading": "#333",
      "white": "#fff",
      "body-light": "#fff",
      "background-default": "#fff",
      "background-alt": "#5f5f5f",
      "link": "#336699",
      "link-hover": "color(#336699 blackness(+20%))",
      "input-background": "#fff",
      "input-border": "#333",
      "input-border-focus": "#336699",
      "input-group-background": "#f1f1f1",
      "input-label": "#808080",
      "input-error": "#ff0000",
      "input-disabled": "#808080",
      "button-primary-bg": "#336699",
      "button-primary-color": "#fff",
      "button-secondary-bg": "#ffa500",
      "button-secondary-color": "#fff",
      "border": "#ccc",
      "tooltip-bg": "rgba(17,17,17,.9)",
      "icons": "#333",
      "message-info": "#f0f0f0",
      "message-success": "#dff0d8",
      "message-error": "#f2dede",
      "text-color-error": "#ff0000"
    },
    "easing": {
      "linear": "cubic-bezier(0.250, 0.250, 0.750, 0.750)",
      "ease": "cubic-bezier(0.250, 0.100, 0.250, 1.000)",
      "ease-in": "cubic-bezier(0.420, 0.000, 1.000, 1.000)",
      "ease-out": "cubic-bezier(0.000, 0.000, 0.580, 1.000)",
      "ease-in-out": "cubic-bezier(0.420, 0.000, 0.580, 1.000)",
      "ease-in-quad": "cubic-bezier(0.550, 0.085, 0.680, 0.530)",
      "ease-in-cubic": "cubic-bezier(0.550, 0.055, 0.675, 0.190)",
      "ease-in-quart": "cubic-bezier(0.895, 0.030, 0.685, 0.220)",
      "ease-in-quint": "cubic-bezier(0.755, 0.050, 0.855, 0.060)",
      "ease-in-sine": "cubic-bezier(0.470, 0.000, 0.745, 0.715)",
      "ease-in-expo": "cubic-bezier(0.950, 0.050, 0.795, 0.035)",
      "ease-in-circ": "cubic-bezier(0.600, 0.040, 0.980, 0.335)",
      "ease-in-back": "cubic-bezier(0.600, -0.280, 0.735, 0.045)",
      "ease-out-quad": "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
      "ease-out-cubic": "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
      "ease-out-quart": "cubic-bezier(0.165, 0.840, 0.440, 1.000)",
      "ease-out-quint": "cubic-bezier(0.230, 1.000, 0.320, 1.000)",
      "ease-out-sine": "cubic-bezier(0.390, 0.575, 0.565, 1.000)",
      "ease-out-expo": "cubic-bezier(0.190, 1.000, 0.220, 1.000)",
      "ease-out-circ": "cubic-bezier(0.075, 0.820, 0.165, 1.000)",
      "ease-out-back": "cubic-bezier(0.175, 0.885, 0.320, 1.275)",
      "ease-in-out-quad": "cubic-bezier(0.455, 0.030, 0.515, 0.955)",
      "ease-in-out-cubic": "cubic-bezier(0.645, 0.045, 0.355, 1.000)",
      "ease-in-out-quart": "cubic-bezier(0.770, 0.000, 0.175, 1.000)",
      "ease-in-out-quint": "cubic-bezier(0.860, 0.000, 0.070, 1.000)",
      "ease-in-out-sine": "cubic-bezier(0.445, 0.050, 0.550, 0.950)",
      "ease-in-out-expo": "cubic-bezier(1.000, 0.000, 0.000, 1.000)",
      "ease-in-out-circ": "cubic-bezier(0.785, 0.135, 0.150, 0.860)",
      "ease-in-out-back": "cubic-bezier(0.680, -0.550, 0.265, 1.550)"
    },
    "logColor": "green",
    "importPaths": [
      "/var/work/dev/clientkit/styles"
    ],
    "mixinPath": "/var/work/dev/clientkit/styles/mixins/*.css",
    "globalMixins": "/var/work/dev/clientkit/styles/mixins",
    "assetPath": "/var/work/dev/clientkit/test/assets",
    "dist": "/var/work/dev/clientkit/test/out",
    "minify": false,
    "mobileFirst": false,
    "breakpoints": {
      "desktop-wide": {
        "max-width": "100vw",
        "min-width": "1440px",
        "content": "1400px",
        "col": "xl",
        "default": true,
        "bleed": "1600px"
      },
      "desktop": {
        "max-width": "1439px",
        "min-width": "1024px",
        "content": "1000px",
        "col": "lg"
      },
      "tablet": {
        "max-width": "1023px",
        "min-width": "768px",
        "content": "750px",
        "col": "md"
      },
      "mobile": {
        "max-width": "767px",
        "min-width": "320px",
        "content": "100%",
        "col": "sm",
        "default": false
      }
    },
    "fontParsingWhitelist": "default.css",
    "autoprefixer": {
      "browsers": [
        "last 2 versions",
        "iOS 8",
        "iOS 9"
      ]
    },
    "grid": {
      "columns": 12,
      "gutters": "15px"
    },
    "spacing": {
      "default": {
        "none": 0,
        "xl": "80px",
        "lg": "50px",
        "md": "30px",
        "sm": "20px",
        "xs": "10px"
      }
    },
    "vars": {
      "font": {
        "primary": "system-ui",
        "secondary": "system-ui",
        "heading": "system-ui",
        "weight": {
          "body": "normal",
          "light": 300,
          "regular": 400,
          "bold": 700
        },
        "size": {
          "body": "14px",
          "large": "16px",
          "small": "12px"
        },
        "mobile-size": {
          "body": "14px",
          "large": "16px",
          "small": "12px"
        }
      },
      "line-height": 1.1,
      "line-height-large": 1.5,
      "heading": {
        "line-height": 1.2,
        "font-weight": "bold",
        "1-size": "45px",
        "1-mobile-size": "30px",
        "2-size": "30px",
        "2-mobile-size": "25px",
        "3-size": "25px",
        "3-mobile-size": "20px",
        "4-size": "20px",
        "4-mobile-size": "16px",
        "5-size": "16px",
        "5-mobile-size": "14px",
        "6-size": "14px",
        "6-mobile-size": "12px"
      },
      "table": {
        "cell-padding": "10px",
        "sm-cell-padding": "5px",
        "bg": "transparent",
        "bg-accent": "#f9f9f9",
        "bg-hover": "#f5f5f5",
        "bg-active": "#f5f5f5",
        "border-width": "1px",
        "border-color": "#eceeef"
      },
      "border": {
        "size": "1px",
        "radius": {
          "default": "3px",
          "lg": "5px",
          "sm": "2px"
        }
      },
      "button": {
        "radius": {
          "default": "3px",
          "lg": "5px",
          "sm": "2px"
        }
      },
      "hr": {
        "max-width": "3.5em",
        "height": "3px",
        "color": "#333"
      },
      "message": {
        "border-radius": "2px"
      },
      "dropdown": {
        "bg": "#fff"
      },
      "easing": {
        "out": "cubic-bezier(0.35, 0.97, 0.57, 0.99)",
        "in-out": "ease-in-out"
      }
    },
    "files": {
      "full.css": "./full.css",
      "slim.css": "./slim.css"
    }
  },
  "eslint": {
    "crashOnError": false,
    "ignore": [
      "node_modules",
      "/var/work/dev/clientkit/test/out"
    ],
    "files": [
      "/var/work/dev/clientkit/test/assets/**/*.js"
    ]
  },
  "hash": {
    "logColor": "yellow",
    "dist": "/var/work/dev/clientkit/test/out",
    "files": {
      "js": "/var/work/dev/clientkit/test/out/**/*.js",
      "css": "/var/work/dev/clientkit/test/out/**/*.css"
    },
    "mappingFile": "assets.json"
  },
  "scripts": {
    "assetPath": "/var/work/dev/clientkit/test/assets",
    "dist": "/var/work/dev/clientkit/test/out",
    "minify": false
  },
  "styleguide": {
    "output": "/var/work/dev/clientkit/test/out/styleguide.html",
    "mapping": "/var/work/dev/clientkit/test/out/assets.json",
    "css": []
  },
  "svgsprite": {
    "assetPath": "/var/work/dev/clientkit/test/assets",
    "dist": "/var/work/dev/clientkit/test/out"
  },
  "watcher": {
    "ignore": [
      "node_modules",
      ".git"
    ],
    "files": {
      "/var/work/dev/clientkit/test/assets/**/*.css": {
        "task": "stylesheets",
        "ignore": [
          "/var/work/dev/clientkit/test/out"
        ]
      },
      "/var/work/dev/clientkit/test/assets/**/*.js": {
        "task": [
          "eslint",
          "scripts"
        ],
        "ignore": [
          "/var/work/dev/clientkit/test/out"
        ]
      },
      "/var/work/dev/clientkit/test/clientkit/*.yaml": "reloadConfig"
    },
    "delay": 500
  },
  "CKDIR": "/var/work/dev/clientkit",
  "dist": "/var/work/dev/clientkit/test/out",
  "assetPath": "/var/work/dev/clientkit/test/assets",
  "minify": false,
  "crashOnError": false,
  "env": "dev"
}