Skip to main content

TFT Set 16 Analytics

Sports & gaming · Dark · Tabbed

Dense leaderboard tables in a gaming skin. Worth a look specifically for the table styling.

What makes it work​

  • Navy and gold, with the gold reserved for rank and top performers.
  • Conditional formatting turns each table into something closer to a heatmap, doing the job a chart usually would.
  • Inline imagery in table cells keeps rows scannable when the labels are unfamiliar.
  • A reasonable pattern when your users genuinely want the numbers rather than a summary.

The views​

Each tab is shown below at full width.

Overview​

TFT Set 16 Analytics: Overview

Deep Dive​

TFT Set 16 Analytics: Deep Dive

See it live​

Open the live dashboard to click through it yourself. No Holistics account needed.

Theme code​

The theme this dashboard actually uses, written out as a reusable PageTheme. Paste it into a .theme.aml file under Development > Library > Themes to reuse it across your own dashboards, or inline it as a single dashboard's theme: property. Chart colour palettes are set separately, so they are not included here.

tft_set_16_theme.theme.aml
PageTheme tft_set_16_theme {
  background {
    bg_color: "#010A13"
  }
  canvas {
    border {
      border_color: "#0A1428"
      border_style: "none"
      border_width {
        top: 0
        left: 0
        right: 0
        bottom: 0
      }
      border_radius {
        top_left: 0
        top_right: 0
        bottom_left: 0
        bottom_right: 0
      }
    }
    shadow: "none"
    background {
      bg_color: "#0A1428"
    }
  }
  block {
    text {
      font_size: 14
      font_color: "#A8B2C0"
      font_style: "normal"
      font_family: "SpiegelSans, Arial, sans-serif"
      font_weight: "normal"
    }
    label {
      font_size: 18
      font_color: "#C8AA6E"
      font_style: "normal"
      font_family: "Beaufort for LOL, serif"
      font_weight: "bold"
    }
    border {
      border_color: "#463714"
      border_style: "solid"
      border_width {
        top: 1
        left: 1
        right: 1
        bottom: 1
      }
      border_radius {
        top_left: 2
        top_right: 2
        bottom_left: 2
        bottom_right: 2
      }
    }
    shadow: "none"
    opacity: 1
    padding {
      top: 20
      left: 20
      right: 20
      bottom: 20
    }
    background {
      bg_color: "#111E2B"
    }
  }
  viz {
    table {
      header {
        bg_color: "#010A13"
        font_size: 13
        font_color: "#C8AA6E"
        font_weight: "semibold"
      }
      general {
        bg_color: "#0A1428"
        font_size: 14
        font_color: "#CDDBE4"
        font_family: "SpiegelSans, Arial, sans-serif"
        hover_color: "#162033"
        banding_color: "#0D1829"
        grid_color: "#463714"
        border_color: "#1E2328"
        border_width: 1
      }
      sub_title {
        font_size: 13
        font_color: "#C8AA6E"
        font_weight: "bold"
      }
      sub_header {
        bg_color: "#1E2328"
        font_size: 13
        font_color: "#C8AA6E"
        font_weight: "semibold"
      }
    }
  }
}

The theme is paired with custom CSS, which lives beside it rather than inside it. See Custom CSS for where it goes.

Custom CSS
/* ==========================================
   FONT LOADING
   ========================================== */
@font-face {
  font-family: "Beaufort for LOL";
  src: url("https://db.onlinewebfonts.com/t/389c2da2e5f3636fea648e3849996604.woff2") format("woff2"),
       url("https://db.onlinewebfonts.com/t/389c2da2e5f3636fea648e3849996604.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Beaufort for LOL";
  src: url("https://db.onlinewebfonts.com/t/12420e8c141ca7c3dff41de2d59df13e.woff2") format("woff2"),
       url("https://db.onlinewebfonts.com/t/12420e8c141ca7c3dff41de2d59df13e.woff") format("woff");
  font-weight: bold; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "SpiegelSans";
  src: url("https://db.onlinewebfonts.com/t/3bd637b3a86a512a2bc2ac1d8b77d56e.woff2") format("woff2"),
       url("https://db.onlinewebfonts.com/t/3bd637b3a86a512a2bc2ac1d8b77d56e.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}

/* ==========================================
   SEMANTIC CLASSES (stable Holistics API)
   ========================================== */

.h-kpi-metric-kpi {
  color: #F0E6D2 !important;
  font-family: "Beaufort for LOL", serif !important;
  font-size: 40px !important;
}
.h-kpi-metric-label {
  color: #C8AA6E !important;
  font-family: "SpiegelSans", Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 13px !important;
  margin-top: 6px !important;
}
.h-kpi-metric-diff {
  font-family: "SpiegelSans", Arial, sans-serif !important;
  color: #0AC8B9 !important;
}
.dac-viz-block-label {
  color: #C8AA6E !important;
  font-family: "Beaufort for LOL", serif !important;
  font-size: 16px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Filters: transparent block, no outer border */
.dac-ic-block {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.dac-ic-block-label {
  color: #C8AA6E !important;
  font-family: "SpiegelSans", Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 13px !important;
}

.dac-text-block {
  color: #A8B2C0 !important;
  font-family: "SpiegelSans", Arial, sans-serif !important;
}

/* ==========================================
   ANIMATIONS
   ========================================== */

@keyframes hex-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes hex-glow-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes hex-teal-sweep {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

@keyframes hex-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

@keyframes hex-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes hex-breathe {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(10, 200, 185, 0.3)); }
  50% { filter: drop-shadow(0 0 10px rgba(10, 200, 185, 0.7)); }
}

@keyframes hex-border-shift {
  0% { border-color: #463714; }
  33% { border-color: #0A7A72; }
  66% { border-color: #785A28; }
  100% { border-color: #463714; }
}

@keyframes hex-scan {
  0% { left: -20%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

/* ==========================================
   CUSTOM CLASSES FOR TEXTBLOCK HTML
   ========================================== */

/* -- Hero: gold gradient text with shimmer -- */
.hex-hero {
  font-family: "Beaufort for LOL", serif;
  font-size: 42px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 4px;
  background: linear-gradient(90deg, #785A28, #C8AA6E, #F0E6D2, #C8AA6E, #785A28);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hex-shimmer 6s linear infinite;
  line-height: 1.3;
}

/* -- Section title with teal left bar -- */
.hex-section {
  font-family: "Beaufort for LOL", serif;
  font-size: 22px;
  font-weight: bold;
  color: #F0E6D2;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-left: 16px;
  border-left: 3px solid #0AC8B9;
}

.hex-subtitle {
  font-family: "SpiegelSans", Arial, sans-serif;
  color: #C8AA6E;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hex-body {
  font-family: "SpiegelSans", Arial, sans-serif;
  color: #A8B2C0;
  font-size: 14px;
  line-height: 1.6;
}

/* -- Dividers with teal/gold gradient -- */
.hex-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #0AC8B9, #C8AA6E, #0AC8B9, transparent);
  margin: 12px 0;
}

.hex-border-top {
  height: 2px;
  background: linear-gradient(90deg, #0A7A72, #0AC8B9, #C8AA6E, #F0E6D2, #C8AA6E, #0AC8B9, #0A7A72);
  background-size: 200% auto;
  animation: hex-teal-sweep 8s linear infinite;
}

/* -- Animated teal line (decorative separator) -- */
.hex-teal-line {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #0AC8B9 50%, transparent 100%);
  background-size: 200% auto;
  animation: hex-teal-sweep 4s linear infinite;
}

/* -- Diamond accent -- */
.hex-diamond {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #0AC8B9;
  transform: rotate(45deg);
  margin: 0 10px;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(10, 200, 185, 0.5);
}

/* -- Navigation link buttons -- */
.hex-nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.hex-nav a {
  display: inline-block;
  font-family: "Beaufort for LOL", serif;
  font-size: 13px;
  font-weight: bold;
  color: #C8AA6E;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  padding: 8px 20px;
  border: 1px solid #463714;
  background: linear-gradient(180deg, rgba(10, 200, 185, 0.05) 0%, rgba(10, 20, 40, 0.8) 100%);
  transition: all 0.3s ease;
}
.hex-nav a:hover {
  color: #F0E6D2;
  border-color: #0AC8B9;
  background: linear-gradient(180deg, rgba(10, 200, 185, 0.15) 0%, rgba(10, 20, 40, 0.9) 100%);
  box-shadow: 0 0 8px rgba(10, 200, 185, 0.3);
}

/* -- Teal accent text -- */
.hex-magic { color: #0AC8B9; font-weight: bold; }
.hex-gold { color: #C8AA6E; }

/* -- Badge (teal pill) -- */
.hex-badge {
  display: inline-block;
  font-family: "SpiegelSans", Arial, sans-serif;
  font-size: 12px;
  color: #0AC8B9;
  background: rgba(10, 200, 185, 0.08);
  border: 1px solid #0A7A72;
  border-radius: 2px;
  padding: 4px 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* -- Glowing teal card -- */
.hex-card-teal {
  background: linear-gradient(180deg, rgba(10, 200, 185, 0.05) 0%, #0A1428 100%);
  border: 1px solid #0A7A72;
  border-top: 2px solid #0AC8B9;
  padding: 20px;
  box-shadow: 0 0 12px rgba(10, 200, 185, 0.1);
}

/* -- Gold card -- */
.hex-card {
  background: linear-gradient(180deg, #111E2B 0%, #0A1428 100%);
  border: 1px solid #463714;
  border-top: 2px solid #C8AA6E;
  padding: 20px;
}

/* -- Stat boxes -- */
.hex-stat-box {
  display: inline-block;
  background: linear-gradient(180deg, #1E2328 0%, #111E2B 100%);
  border: 1px solid #463714;
  border-radius: 2px;
  padding: 14px 24px;
  text-align: center;
}
.hex-stat-value {
  font-family: "Beaufort for LOL", serif;
  color: #F0E6D2;
  font-size: 32px;
  font-weight: bold;
  display: block;
}
.hex-stat-label {
  font-family: "SpiegelSans", Arial, sans-serif;
  color: #785A28;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: block;
  margin-top: 6px;
}

/* -- Shimmer text -- */
.hex-shimmer {
  background: linear-gradient(90deg, #C8AA6E 0%, #F0E6D2 25%, #0AC8B9 50%, #F0E6D2 75%, #C8AA6E 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hex-shimmer 4s linear infinite;
}

/* -- Floating decoration -- */
.hex-float {
  animation: hex-float 3s ease-in-out infinite;
}

/* -- Teal glow border -- */
.hex-glow {
  box-shadow: 0 0 8px rgba(10, 200, 185, 0.3);
  border: 1px solid #0A7A72;
}

/* ==========================================
   ANIMATED VIZ BLOCK BORDERS
   ========================================== */

.dac-viz-block {
  animation: hex-border-shift 8s ease-in-out infinite;
}

/* ==========================================
   SVG HEXAGON DECORATIONS
   ========================================== */

/* -- Inline hexagon icon (small, next to text) -- */
.hex-icon {
  display: inline-block;
  vertical-align: middle;
  margin: 0 8px;
}
.hex-icon svg {
  width: 16px;
  height: 18px;
}

/* -- Floating hexagon cluster (decorative) -- */
.hex-cluster {
  position: relative;
  display: inline-block;
  height: 40px;
  width: 100%;
}
.hex-cluster svg {
  position: absolute;
  animation: hex-breathe 3s ease-in-out infinite;
}
.hex-cluster .hc-1 { left: 0; top: 4px; width: 24px; height: 28px; animation-delay: 0s; }
.hex-cluster .hc-2 { left: 30px; top: 0; width: 18px; height: 20px; animation-delay: 0.8s; opacity: 0.6; }
.hex-cluster .hc-3 { left: 52px; top: 8px; width: 14px; height: 16px; animation-delay: 1.6s; opacity: 0.4; }
.hex-cluster .hc-4 { right: 0; top: 4px; width: 24px; height: 28px; animation-delay: 0.4s; }
.hex-cluster .hc-5 { right: 30px; top: 0; width: 18px; height: 20px; animation-delay: 1.2s; opacity: 0.6; }
.hex-cluster .hc-6 { right: 52px; top: 8px; width: 14px; height: 16px; animation-delay: 2.0s; opacity: 0.4; }

/* -- Large spinning hexagon (background deco) -- */
.hex-spin-deco {
  display: inline-block;
  animation: hex-rotate 20s linear infinite;
}
.hex-spin-deco svg {
  width: 60px;
  height: 60px;
}

/* -- Hextech crystal (glowing gem shape) -- */
.hex-crystal {
  display: inline-block;
  animation: hex-float 4s ease-in-out infinite, hex-breathe 3s ease-in-out infinite;
}
.hex-crystal svg {
  width: 32px;
  height: 36px;
}

/* -- Scan line overlay (subtle horizontal sweep) -- */
.hex-scanline {
  position: relative;
  overflow: hidden;
}
.hex-scanline::after {
  content: "";
  position: absolute;
  top: 0;
  left: -20%;
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(10, 200, 185, 0.08), transparent);
  animation: hex-scan 6s linear infinite;
  pointer-events: none;
}

/* -- Section header with animated hex accent -- */
.hex-section-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* -- Pulsing dot (status indicator) -- */
.hex-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0AC8B9;
  animation: hex-glow-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(10, 200, 185, 0.5);
  vertical-align: middle;
  margin: 0 8px;
}
Open Markdown
Let us know what you think about this document :)