 
 (def ^:private card-width 400)
 
-(def ^:private font-style "font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;")
-(def ^:private section-style font-style)
-(def ^:private header-style  (str font-style "font-size: 16px; font-weight: 700; color: rgb(57,67,64); text-decoration: none;"))
-(def ^:private scalar-style  (str font-style "font-size: 32px; font-weight: 400; color: rgb(45,134,212);"))
-(def ^:private bar-th-style  (str font-style "font-size: 10px; font-weight: 400; color: rgb(57,67,64); border-bottom: 4px solid rgb(248, 248, 248); padding-top: 0px; padding-bottom: 10px;"))
+(def ^:private rows-limit 10)
+(def ^:private cols-limit 3)
+
+;;; ## STYLES
+
+(def ^:private color-brand  "rgb(80,158,227)")
+(def ^:private color-purple "rgb(135,93,175)")
+(def ^:private color-grey-1 "rgb(248,248,248)")
+(def ^:private color-grey-2 "rgb(189,193,191)")
+(def ^:private color-grey-3 "rgb(124,131,129)")
+(def ^:private color-grey-4 "rgb(57,67,64)")
+
+(def ^:private font-style    "font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;")
+(def ^:private section-style (str font-style))
+(def ^:private header-style  (str font-style "font-size: 16px; font-weight: 700; color: " color-grey-4 "; text-decoration: none;"))
+(def ^:private scalar-style  (str font-style "font-size: 32px; font-weight: 400; color: " color-brand ";"))
+(def ^:private bar-th-style  (str font-style "font-size: 10px; font-weight: 400; color: " color-grey-4 "; border-bottom: 4px solid " color-grey-1 "; padding-top: 0px; padding-bottom: 10px;"))
 (def ^:private bar-td-style  (str font-style "font-size: 16px; font-weight: 400; text-align: left; padding-right: 1em; padding-top: 8px;"))
+(def ^:private button-style  (str font-style "display: inline-block; box-sizing: border-box; padding: 8px; color: " color-brand "; border: 1px solid " color-brand "; border-radius: 4px; text-decoration: none; "))
+
 
 (defn- format-number
   [n]

        yrange (- ymax ymin)
        ys' (map #(/ (- % ymin) yrange) ys)]
    [:div
      [:div {:style "color: rgb(214,214,214);" }
        [:div {:style "display: inline-block; position: relative; margin-left: 30px;" }
          [:div {:style "position: relative;"}
            [:div {:style "position: absolute; height: 100%; text-align: right; background-color: red;"}

            [clj-time.core :as t]
            [clj-time.coerce :as c]
            [clj-time.format :as f]
            [clojure.java.io :as io]
            [clojure.tools.logging :as log]
            [clojure.pprint :refer [cl-format]]
            [clojure.string :refer [upper-case]]
