---
name: Rating Tenis Meja Mania
colors:
  surface: "#f8f9ff"
  surface-dim: "#cbdbf5"
  surface-bright: "#f8f9ff"
  surface-container-lowest: "#ffffff"
  surface-container-low: "#eff4ff"
  surface-container: "#e5eeff"
  surface-container-high: "#dce9ff"
  surface-container-highest: "#d3e4fe"
  on-surface: "#0b1c30"
  on-surface-variant: "#444651"
  inverse-surface: "#213145"
  inverse-on-surface: "#eaf1ff"
  outline: "#757682"
  outline-variant: "#c5c5d3"
  surface-tint: "#4059aa"
  primary: "#00236f"
  on-primary: "#ffffff"
  primary-container: "#1e3a8a"
  on-primary-container: "#90a8ff"
  inverse-primary: "#b6c4ff"
  secondary: "#006c49"
  on-secondary: "#ffffff"
  secondary-container: "#6cf8bb"
  on-secondary-container: "#00714d"
  tertiary: "#4b1c00"
  on-tertiary: "#ffffff"
  tertiary-container: "#6e2c00"
  on-tertiary-container: "#f39461"
  error: "#ba1a1a"
  on-error: "#ffffff"
  error-container: "#ffdad6"
  on-error-container: "#93000a"
  primary-fixed: "#dce1ff"
  primary-fixed-dim: "#b6c4ff"
  on-primary-fixed: "#00164e"
  on-primary-fixed-variant: "#264191"
  secondary-fixed: "#6ffbbe"
  secondary-fixed-dim: "#4edea3"
  on-secondary-fixed: "#002113"
  on-secondary-fixed-variant: "#005236"
  tertiary-fixed: "#ffdbcb"
  tertiary-fixed-dim: "#ffb691"
  on-tertiary-fixed: "#341100"
  on-tertiary-fixed-variant: "#773205"
  background: "#f8f9ff"
  on-background: "#0b1c30"
  surface-variant: "#d3e4fe"
  background-subtle: "#F8FAFC"
  status-warning: "#F59E0B"
  status-error: "#EF4444"
  border-subtle: "#E2E8F0"
typography:
  headline-lg:
    fontFamily: Inter
    fontSize: 30px
    fontWeight: "700"
    lineHeight: 38px
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: "600"
    lineHeight: 32px
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: "600"
    lineHeight: 28px
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: "400"
    lineHeight: 24px
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: "400"
    lineHeight: 20px
  body-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: "400"
    lineHeight: 18px
  label-md:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: "600"
    lineHeight: 16px
    letterSpacing: 0.05em
  label-sm:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: "500"
    lineHeight: 14px
  headline-lg-mobile:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: "700"
    lineHeight: 32px
rounded:
  sm: 0.125rem
  DEFAULT: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  full: 9999px
spacing:
  unit: 4px
  container-max-width: 1440px
  gutter: 24px
  sidebar-width: 260px
  margin-mobile: 16px
  margin-desktop: 32px
---

## Brand & Style

The design system is engineered for the **Rating Tenis Meja Mania** platform, focusing on the complex needs of regional data management. The brand personality is **authoritative, systematic, and transparent**. It aims to evoke a sense of trust and efficiency for government officials and data analysts.

The visual style follows a **Corporate / Modern** aesthetic. It prioritizes clarity and functional density over decorative flair. By utilizing a structured layout with high information density and subtle tonal layering, the system ensures that large datasets remain legible and actionable. The interface is designed to feel like a precision tool: reliable, fast, and organized.

## Colors

The palette is anchored by **Deep Blue (#1E3A8A)**, representing institutional stability and regional authority. This is complemented by **Emerald Green (#10B981)**, used strategically for positive growth indicators, "success" states, and primary calls to action related to data submission or approval.

A neutral scale based on slate grays provides the necessary scaffolding for a data-heavy dashboard. Backgrounds use a very light tint to reduce eye strain during prolonged use, while borders and dividers use a subtle gray to define structure without creating visual noise. Status indicators (Warning/Error) are calibrated for high visibility against the primary blue to ensure critical data issues are never missed.

## Typography

**Inter** is selected as the sole typeface for this design system due to its exceptional legibility in tabular data and user interface contexts. The typography hierarchy is highly structured to support complex information architectures.

- **Headlines:** Use tighter letter spacing and heavier weights to provide clear section signposting.
- **Body:** The default size is 14px (`body-md`), optimized for dense data tables and long-form administrative reports.
- **Labels:** Uppercase styles with slight tracking are used for table headers and form labels to differentiate them from user-inputted data.
- **Numerical Data:** Inter’s tabular lining figures should be enabled to ensure columns of numbers align perfectly in reports.

## Layout & Spacing

The system employs a **Fixed-Fluid Hybrid** grid. The side navigation remains fixed at 260px, while the main content area utilizes a fluid 12-column grid that expands to a maximum width of 1440px to prevent excessive line lengths on ultra-wide monitors.

A 4px baseline shift (8px/16px increments) governs all spacing to ensure a rigorous mathematical rhythm.

- **Desktop:** 32px external margins with 24px gutters.
- **Tablet:** 24px margins; tables should allow horizontal scrolling.
- **Mobile:** 16px margins; sidebar collapses into a hamburger menu, and multi-column forms reflow to a single column.

## Elevation & Depth

This design system uses **Tonal Layers** and **Low-Contrast Outlines** rather than heavy shadows to maintain a clean, professional "flat-plus" look.

- **Level 0 (Surface):** The main application background (#F8FAFC).
- **Level 1 (Cards/Tables):** White (#FFFFFF) surfaces with a 1px border (#E2E8F0).
- **Level 2 (Popovers/Dropdowns):** White surfaces with a soft, 12% opacity neutral shadow to provide separation from the background.
- **Interactive States:** Hovering over list items or table rows triggers a subtle background shift to a light blue-gray tint rather than an elevation change.

## Shapes

The shape language is **Soft (0.25rem)**. This subtle rounding strikes a balance between the precision of sharp corners (Brutalism) and the friendliness of fully rounded corners (SaaS/Consumer).

- **Standard Elements:** Buttons, input fields, and checkboxes use a 4px radius.
- **Large Elements:** Data cards and dashboard widgets use a 8px (`rounded-lg`) radius.
- **Status Pills:** Status indicators and tags use a fully circular (pill) radius to distinguish them from interactive buttons.

## Components

### Data Tables

Tables are the core of the system. They must feature a "sticky" header and a striped row effect (Zebra striping) using a very faint gray. Column headers use `label-md` and include sort/filter icons.

### Dynamic Dropdowns

Dropdowns should support search-in-menu functionality. Selection states are indicated using the Primary Blue (#1E3A8A) for the text and a light blue background tint.

### Input Fields

Inputs use a white background with a 1px slate-300 border. On focus, the border transitions to Primary Blue with a subtle 2px outer glow.

### Status Indicators

Clear, color-coded pills:

- **Active/Success:** Emerald Green background (10% opacity) with Emerald Green text.
- **Pending/Review:** Amber/Warning background (10% opacity) with Amber text.
- **Issue/Error:** Red background (10% opacity) with Red text.

### Search Bars

Dashboard search bars are prominent, featuring a leading magnifying glass icon and a keyboard shortcut hint (e.g., "Ctrl+K") to cater to power users managing regional data.