 
 (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]

            [:img {:style "display: block; left: 20px;" :src (render-img (render-sparkline-to-png xs' ys' 285 150))}]
          ]
          [:div
            [:div {:style "height: 15px; margin-left: 10px; margin-right: 10px; border: 4px solid rgb(233,233,233); border-top: none; border-bottom: none;"} "&#160;"]
            [:div {:style "height: 15px; margin-left: 10px; margin-right: 10px;"}
              [:div {:style "float: left;"} (format-timestamp xmin)]
              [:div {:style "float: right;"} (format-timestamp xmax)]]
          ]]]
      [:div {:style "margin-top: 20px; margin-left: 30px;"}
        (render-table {:cols cols :rows [(last rows) (first rows)]} nil)]]))

(defn datetime-field?
  [field]

  (try
    [:div {:style (str section-style "margin: 16px;")}
      (if include-title [:div {:style "margin-bottom: 16px;"}
        [:a {:style header-style :href (get-card-href card)}
          (-> card :name h)]])
      (case (detect-pulse-card-type card data)
        :scalar    (render-card-scalar    card data render-img)
        :sparkline (render-card-sparkline card data render-img)
        :bar       (render-card-bar       card data render-img)
        :table     (render-card-table     card data render-img)
        [:div {:style (str font-style "color: #F9D45C; font-weight: 700;")}
          "We were unable to display this card." [:br] "Please view this card in Metabase."])]
  (catch Throwable e
    (log/warn (str "Pulse card render error:" e))
    [:div {:style (str font-style "color: #EF8C8C; font-weight: 700;")} "An error occurred while displaying this card."])))

(defn render-img-data-uri
