DESIGN.md · Analysis

Esports ID

esports.id · 12 Jun 2026 · 47 colors · Poppins, Roboto

Esports ID

A high-energy esports news portal serving the Indonesian gaming community with tournament coverage, team profiles, and competitive analysis across MOBA, FPS, and mobile titles.

Colors

surface#121827

surface-dim#0a0f1a

surface-bright#1f2937

surface-container-lowest#060a14

surface-container-low#0f1419

surface-container#1a202c

surface-container-high#252d3d

surface-container-highest#303847

on-surface#e1e1e1

on-surface-variant#a0a0a0

inverse-surface#f5f5f5

inverse-on-surface#121827

outline#6c757d

outline-variant#505050

surface-tint#ffc700

primary#ffc700

on-primary#1a1a1a

primary-container#ffe066

on-primary-container#332200

inverse-primary#cc9900

secondary#6ea8fe

on-secondary#1f2937

secondary-container#1f2937

on-secondary-container#6ea8fe

tertiary#ffffff

on-tertiary#121827

tertiary-container#e9ecef

on-tertiary-container#505050

error#ff6b6b

on-error#ffffff

error-container#8b0000

on-error-container#ffcccc

primary-fixed#ffe066

primary-fixed-dim#ffc700

on-primary-fixed#1a1a1a

on-primary-fixed-variant#332200

secondary-fixed#6ea8fe

secondary-fixed-dim#4a7fd7

on-secondary-fixed#1f2937

on-secondary-fixed-variant#1f2937

tertiary-fixed#ffffff

tertiary-fixed-dim#e9ecef

on-tertiary-fixed#121827

on-tertiary-fixed-variant#505050

background#121827

on-background#e1e1e1

surface-variant#2a3f5f

Typography

display: fontFamily: Poppins · fontSize: 56px · fontWeight: 700 · lineHeight: 64px · letterSpacing: -0.03em
headline-lg: fontFamily: Poppins · fontSize: 36px · fontWeight: 700 · lineHeight: 44px · letterSpacing: -0.02em
headline-md: fontFamily: Poppins · fontSize: 28px · fontWeight: 600 · lineHeight: 36px · letterSpacing: -0.01em
title-lg: fontFamily: Poppins · fontSize: 22px · fontWeight: 600 · lineHeight: 28px · letterSpacing: 0em
body-lg: fontFamily: Roboto · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0.02em
body-md: fontFamily: Roboto · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0.01em
label-md: fontFamily: Poppins · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0.02em
label-sm: fontFamily: Poppins · fontSize: 12px · fontWeight: 600 · lineHeight: 16px · letterSpacing: 0.03em

Design guidance

Overview

Esports ID is Indonesia's premier esports news portal, delivering real-time coverage of competitive gaming across MOBA, FPS, and mobile titles. The design system embraces a "High-Energy Minimalism" aesthetic: a dark, focused canvas (rgb(18, 24, 39)) punctuated by a vibrant golden accent (rgb(255, 199, 0)) that commands attention on CTAs, navigation, and key highlights. The UI evokes the intensity and precision of competitive esports—every element is purposeful, every color choice deliberate. The brand personality is authoritative yet accessible: fast-paced, data-driven, and unapologetically enthusiast-focused. Voice example: "RedFace secures 5-0 sweep in PUBG Mobile playoffs—watch the clutch final round."

Colors

The color system balances a deep, immersive dark mode (surface #121827, on-surface #e1e1e1) with a singular, commanding accent. Primary (#ffc700, rgb(255, 199, 0)) is the brand's signature—deployed on all primary CTAs ("Lihat Semua Berita"), navigation highlights, and active states. It must never be used for body text or passive surfaces; reserve it exclusively for interactive elements and brand moments. Secondary (#6ea8fe, rgb(110, 168, 254)) provides a cool counterpoint for supporting actions and secondary information layers. The surface stack progresses from surface-container-lowest (#060a14) for recessed elements, through surface-container (#1a202c) for standard cards, to surface-container-highest (#303847) for elevated modals and overlays. Outline (#6c757d) and outline-variant (#50505

Typography

The type system pairs Poppins (headlines, labels, UI text) with Roboto (body copy, descriptions). Poppins' geometric warmth conveys energy and modernity, while Roboto's neutrality ensures readability at small sizes. Display (56px, 700 weight, -0.03em tracking) anchors hero moments; headline-lg (36px, 700 weight) titles major sections; headline-md (28px, 600 weight) breaks up content zones. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) carry article text with generous line-height (1.5x) to combat dark-mode fatigue. Label-md (14px, 600 weight, 0.02em tracking) and label-sm (12px, 600 weight, 0.03em tracking) handle buttons, badges, and UI chrome. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels over image overlays to ensure legib

Layout

The layout follows a 12-column grid with a 1280px max-width container, centered with 24px gutters on desktop and 12px on mobile. Page rhythm is driven by the lg spacing token (40px) for section separation, md (24px) for component padding, and sm (12px) for internal element spacing. The hero section occupies full-width with a 16:9 aspect ratio image carousel, followed by a two-column layout: left column (8 cols) for featured articles and trending cards, right column (4 cols) for the "Terpopuler" (Most Popular) sidebar. Cards use md padding (24px) internally, with md spacing (24px) between card rows. Navigation bar is fixed at the top with a dark background (surface-container) and a golden pill-shaped search input (rounded-full, 44px height) anchored right. All interactive zones maintain min

Elevation & Depth

Depth is conveyed through layered shadows and subtle surface-color progression rather than dramatic drop shadows. Level 1 (Base): surface (#121827) with no shadow, used for the page background and recessed containers. Level 2 (Standard Card): surface-container (#1a202c) with elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)), used for article cards, sidebars, and standard modals. Level 3 (Elevated/Modal): surface-container-highest (#303847) with elevation.lg (0 8px 24px rgba(0, 0, 0, 0.2)), used for floating modals, popovers, and top-level navigation. Every card and modal includes a 1px border at su

Shapes

The shape philosophy is "Precision with Warmth"—sharp corners on data-heavy elements (cards, inputs) paired with fully rounded corners on CTAs and badges. Buttons use rounded-full (9999px border-radius) to signal primary actions and create a friendly, approachable feel; secondary buttons use rounded-lg (1rem, 16px) for a more structured appearance. Cards and containers use rounded-lg (16px) for a modern, clean aesthetic that avoids harsh 90-degree corners. Input fields use rounded-full (44px height, 9999px radius) to match button styling and create a cohesive interaction zone. Badges and chips

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses primary (#ffc700) background with on-primary text (#1a1a1a), rounded-full (9999px), 8px vertical / 24px horizontal padding, and 40px height. On hover, transition to primary-fixed-dim (#cc9900) over 200ms. Active state shifts to inverse-primary (#cc9900) with a subtle 2px inset shadow (box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2)) to signal press. button-secondary uses surface-container background with secondary text (#6ea8fe), rounded-lg (16px), 1px outline-variant border, and 44px height; hover state elevates to surface-container-high with a 200ms transition. All buttons must include focus-visible: outline 2px solid primary with 2px offset for keyboard accessibility.

Containers & Surfaces Cards (

Do's and Don'ts

**Do**

Do use primary (#ffc700) exclusively on CTAs, active navigation items, and brand moments—never on body text or passive surfaces.
Do maintain 44px minimum touch targets on all interactive elements (buttons, inputs, list items) for mobile accessibility.
Do apply the md spacing token (24px) consistently between major content sections to establish rhythm and breathing room.
Do use Poppins for headlines and UI labels to convey energy; reserve Roboto for body copy to maximize readability.
Do include 1px borders at surface-container-high on all cards and modals to define edges in dark mode.
Do transition all hover/focus states over 150–200ms with ease-in-out timing to signal interactivity without jarring motion.

**Don't**

Don't use primary (#ffc700) on backgrounds, body text, or non-interactive elements—it must remain a rare, high-impact accent.
Don't apply shadows deeper than elevation.lg (0 8px 24px rgba(0, 0, 0, 0.2)) on any component; the dark surface already provides depth.
Don't mix rounded-full and sharp corners on the same component family (e.g., don't use rounded-full on some buttons and rounded-lg on others).
Don't omit focus-visible outlines on interactive elements; keyboard users must see a clear 2px primary outline with 2px offset.
Don't use secondary (#6ea8fe) on primary CTAs or hero elements; reserve it for supporting actions and secondary information.
Don't exceed 2–3 font sizes in a single content block; use the typography scale (display → headline-lg → body-md) to establish hierarchy.

---
version: alpha
name: Esports ID
description: >-
  A high-energy esports news portal serving the Indonesian gaming community with tournament coverage, team profiles, and
  competitive analysis across MOBA, FPS, and mobile titles.
logo:
  src: https://www.esports.id/themes/2024/img/logo/esports-id-white.png
colors:
  surface: '#121827'
  surface-dim: '#0a0f1a'
  surface-bright: '#1f2937'
  surface-container-lowest: '#060a14'
  surface-container-low: '#0f1419'
  surface-container: '#1a202c'
  surface-container-high: '#252d3d'
  surface-container-highest: '#303847'
  on-surface: '#e1e1e1'
  on-surface-variant: '#a0a0a0'
  inverse-surface: '#f5f5f5'
  inverse-on-surface: '#121827'
  outline: '#6c757d'
  outline-variant: '#505050'
  surface-tint: '#ffc700'
  primary: '#ffc700'
  on-primary: '#1a1a1a'
  primary-container: '#ffe066'
  on-primary-container: '#332200'
  inverse-primary: '#cc9900'
  secondary: '#6ea8fe'
  on-secondary: '#1f2937'
  secondary-container: '#1f2937'
  on-secondary-container: '#6ea8fe'
  tertiary: '#ffffff'
  on-tertiary: '#121827'
  tertiary-container: '#e9ecef'
  on-tertiary-container: '#505050'
  error: '#ff6b6b'
  on-error: '#ffffff'
  error-container: '#8b0000'
  on-error-container: '#ffcccc'
  primary-fixed: '#ffe066'
  primary-fixed-dim: '#ffc700'
  on-primary-fixed: '#1a1a1a'
  on-primary-fixed-variant: '#332200'
  secondary-fixed: '#6ea8fe'
  secondary-fixed-dim: '#4a7fd7'
  on-secondary-fixed: '#1f2937'
  on-secondary-fixed-variant: '#1f2937'
  tertiary-fixed: '#ffffff'
  tertiary-fixed-dim: '#e9ecef'
  on-tertiary-fixed: '#121827'
  on-tertiary-fixed-variant: '#505050'
  background: '#121827'
  on-background: '#e1e1e1'
  surface-variant: '#2a3f5f'
typography:
  display:
    fontFamily: Poppins
    fontSize: 56px
    fontWeight: '700'
    lineHeight: 64px
    letterSpacing: '-0.03em'
  headline-lg:
    fontFamily: Poppins
    fontSize: 36px
    fontWeight: '700'
    lineHeight: 44px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: Poppins
    fontSize: 28px
    fontWeight: '600'
    lineHeight: 36px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: Poppins
    fontSize: 22px
    fontWeight: '600'
    lineHeight: 28px
    letterSpacing: 0em
  body-lg:
    fontFamily: Roboto
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0.02em
  body-md:
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0.01em
  label-md:
    fontFamily: Poppins
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.02em
  label-sm:
    fontFamily: Poppins
    fontSize: 12px
    fontWeight: '600'
    lineHeight: 16px
    letterSpacing: 0.03em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1280px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.08)
  md: 0 3px 8px rgba(0, 0, 0, 0.15)
  lg: 0 8px 24px rgba(0, 0, 0, 0.2)
layout:
  containerMaxWidth: 1280px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 8px 24px
    height: 40px
    fontWeight: '600'
  button-primary-hover:
    backgroundColor: '{colors.primary-fixed-dim}'
    textColor: '{colors.on-primary}'
    transition: background-color 200ms ease-in-out
  button-primary-active:
    backgroundColor: '{colors.inverse-primary}'
    textColor: '{colors.on-primary}'
  button-secondary:
    backgroundColor: '{colors.surface-container}'
    textColor: '{colors.secondary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 12px 20px
    height: 44px
    border: 1px solid {colors.outline-variant}
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.secondary}'
    transition: background-color 200ms ease-in-out
  card:
    backgroundColor: '{colors.surface-container}'
    rounded: '{rounded.lg}'
    padding: '{spacing.md}'
    boxShadow: '{elevation.md}'
    border: 1px solid {colors.surface-container-high}
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
    boxShadow: '{elevation.lg}'
    transition: all 200ms ease-in-out
  input-field:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    padding: 12px 20px
    height: 44px
    border: 1px solid {colors.outline-variant}
  input-field-focus:
    borderColor: '{colors.primary}'
    boxShadow: 0 0 0 3px rgba(255, 199, 0, 0.1)
    transition: all 200ms ease-in-out
  badge:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.DEFAULT}'
    padding: 4px 12px
    fontWeight: '600'
  badge-secondary:
    backgroundColor: '{colors.secondary-container}'
    textColor: '{colors.secondary}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.DEFAULT}'
    padding: 4px 12px
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
    transition: background-color 150ms ease-in-out
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
  chip:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 6px 16px
    height: 32px
    border: 1px solid {colors.outline-variant}
  chip-selected:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    border: 1px solid {colors.primary}
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Buttons are the primary interaction mechanism. button-primary uses primary (#ffc700) background with on-primary text (#1a1a1a), rounded-full (9999px), 8px vertical / 24px horizontal padding, and 40px height. On hover, transition to primary-fixed-dim (#cc9900) over 200ms. Active state shifts to inverse-primary (#cc9900) with a subtle 2px inset shadow (box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2)) to signal press. button-secondary uses surface-container background with secondary text (#6ea8fe), rounded-lg (16px), 1px outline-variant border, and 44px height; hover state elevates to surface-container-high with a 200ms transition. All buttons must include focus-visible: outline 2px solid primary with 2px offset for keyboard accessibility.

### Containers & Surfaces
Cards (

## Do's and Don'ts

**Do**
- Do use primary (#ffc700) exclusively on CTAs, active navigation items, and brand moments—never on body text or passive surfaces.
- Do maintain 44px minimum touch targets on all interactive elements (buttons, inputs, list items) for mobile accessibility.
- Do apply the md spacing token (24px) consistently between major content sections to establish rhythm and breathing room.
- Do use Poppins for headlines and UI labels to convey energy; reserve Roboto for body copy to maximize readability.
- Do include 1px borders at surface-container-high on all cards and modals to define edges in dark mode.
- Do transition all hover/focus states over 150–200ms with ease-in-out timing to signal interactivity without jarring motion.

**Don't**
- Don't use primary (#ffc700) on backgrounds, body text, or non-interactive elements—it must remain a rare, high-impact accent.
- Don't apply shadows deeper than elevation.lg (0 8px 24px rgba(0, 0, 0, 0.2)) on any component; the dark surface already provides depth.
- Don't mix rounded-full and sharp corners on the same component family (e.g., don't use rounded-full on some buttons and rounded-lg on others).
- Don't omit focus-visible outlines on interactive elements; keyboard users must see a clear 2px primary outline with 2px offset.
- Don't use secondary (#6ea8fe) on primary CTAs or hero elements; reserve it for supporting actions and secondary information.
- Don't exceed 2–3 font sizes in a single content block; use the typography scale (display → headline-lg → body-md) to establish hierarchy.

Edit, then copy or download.