Qris-Soundbox/design/soundbox_ops/DESIGN.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
Soundbox Ops	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant success warning danger info slate-900 slate-700 slate-500 slate-200 slate-100 #faf8ff #d9d9e5 #faf8ff #ffffff #f3f3fe #ededf9 #e7e7f3 #e1e2ed #191b23 #434655 #2e3039 #f0f0fb #737686 #c3c6d7 #0053db #004ac6 #ffffff #2563eb #eeefff #b4c5ff #505f76 #ffffff #d0e1fb #54647a #943700 #ffffff #bc4800 #ffede6 #ba1a1a #ffffff #ffdad6 #93000a #dbe1ff #b4c5ff #00174b #003ea8 #d3e4fe #b7c8e1 #0b1c30 #38485d #ffdbcd #ffb596 #360f00 #7d2d00 #F8FAFC #191b23 #e1e2ed #16A34A #F59E0B #DC2626 #0EA5E9 #0F172A #334155 #64748B #E2E8F0 #F1F5F9	display-lg headline-lg headline-md body-lg body-md label-md metric-lg metric-sm fontFamily fontSize fontWeight lineHeight letterSpacing Plus Jakarta Sans 36px 600 44px -0.02em fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 28px 600 36px fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 20px 600 28px fontFamily fontSize fontWeight lineHeight Inter 16px 400 24px fontFamily fontSize fontWeight lineHeight Inter 14px 400 20px fontFamily fontSize fontWeight lineHeight letterSpacing Inter 12px 500 16px 0.01em fontFamily fontSize fontWeight lineHeight Inter 32px 600 40px fontFamily fontSize fontWeight lineHeight Inter 14px 600 20px	sm DEFAULT md lg xl full 0.125rem 0.25rem 0.375rem 0.5rem 0.75rem 9999px	topbar-height page-padding card-padding row-height gutter 72px 24px 20px 52px 24px

Brand & Style

The design system is engineered for the high-stakes environment of fintech operations. The brand personality is Precise, Reliable, and Proactive, focusing on the seamless bridge between digital ledgers and physical IoT soundboxes.

The chosen style is Corporate / Modern with a heavy emphasis on Data-Centricity. This is achieved through a structured information hierarchy that prioritizes rapid scanning of transaction states and device health. The interface utilizes high-density layouts, subtle tonal layering to separate operational controls from data displays, and a functional aesthetic that avoids unnecessary decoration in favor of utility and speed.

Key visual principles:

• Clarity over Flourish: Every pixel must serve a functional purpose in the monitoring workflow.
• Immediate Feedback: Use of distinct semantic colors to highlight system anomalies or successful settlements.
• Operational Efficiency: Minimizing clicks through the use of drawers and context-aware action bars.

Colors

The palette is anchored by Primary Blue (#2563EB) to evoke trust and established financial authority. The neutral foundation is built exclusively on the Slate scale, providing a cool, professional backdrop that allows semantic alerts to stand out.

Usage Guidance:

• Primary: Actionable elements, active navigation states, and primary buttons.
• Semantic Colors: Reserved strictly for status indicators (Success for 'Settled', Warning for 'Degraded', Danger for 'Offline/Failed').
• Neutrals: Slate-900 for primary headings, Slate-700 for body text, and Slate-100/200 for borders and subtle backgrounds.
• Background: The F8FAFC base provides a low-strain environment for long-duration operational shifts.

Typography

This design system employs a dual-font strategy. Plus Jakarta Sans is used for headings to provide a modern, clean fintech feel, while Inter is used for all body and functional text for maximum legibility at small sizes.

Tabular Numbers: Crucial for a platform dealing with currency (IDR) and device IDs, all metric-related typography must have font-variant-numeric: tabular-nums enabled. This ensures that columns of numbers align perfectly in data tables and KPI cards, facilitating easier comparison.

Scale and Hierarchy:

• Headlines use Semibold (600) to anchor page sections.
• Body text remains Regular (400) for extended reading in audit logs.
• Labels use Medium (500) with slight letter spacing for specialized metadata.

Layout & Spacing

The system follows a 12-column fluid grid for the main content area, allowing the platform to scale from large monitoring displays to standard laptops.

Key Layout Rules:

• Fixed Infrastructure: The topbar is locked at 72px and the sidebar remains visible for Admin/Merchant portals to provide persistent global context.
• Density: We utilize a "Comfortable-Compact" rhythm. Page margins are set to 24px, but internal card components and data tables use tighter spacing to maximize information density without sacrificing touch/click targets.
• Vertical Rhythm: A base 4px / 8px grid governs all spacing. Data tables utilize a consistent 52px row height to accommodate status chips and action buttons comfortably.

Elevation & Depth

To maintain a "fast and clean" feel, the system avoids heavy drop shadows. Instead, it utilizes Tonal Layers and Low-Contrast Outlines.

• Level 0 (Surface): #F8FAFC (Background) - The lowest layer.
• Level 1 (Cards/Container): #FFFFFF with a 1px border of Slate-200. This is the primary surface for all data widgets.
• Level 2 (Interactive): Elements that require focus (like drawers or modals) use a very soft, diffused shadow (0 10px 15px -3px rgb(0 0 0 / 0.1)) to lift them above the data grid.
• Depth via Border: Sticky headers in tables use a 1px bottom border in Slate-200 rather than a shadow to indicate they are "above" the scrolling content while maintaining a flat, professional profile.

Shapes

The design system adopts a Soft shape language. A 0.25rem (4px) base radius is used for most UI elements, which maintains a professional, structured look while appearing modern.

• Components: Buttons, Input fields, and KPI cards use the base rounded (4px) or rounded-lg (8px).
• Status Chips: Use rounded-full (pill-shaped) to distinguish them from interactive buttons.
• Icons: Should follow the same geometric principles—no sharp 90-degree corners, but not overly rounded or "bubbly."

Components

KPI Cards

Standardized containers for top-level metrics. They include a label-md for title, a metric-lg for the value, and a bottom section for metric-sm trend indicators (e.g., +12% vs last month).

Data Tables

• Sticky Header: Background remains white with a Slate-200 bottom border during scroll.
• Numeric Alignment: Amounts and percentages are right-aligned using tabular numbers.
• Row Hover: Use Slate-50 background on hover to facilitate line scanning.

Status Chips

Pill-shaped badges with low-opacity backgrounds and high-contrast text:

• Active/Online/Settled: Green (Success)
• Pending/Retrying: Orange (Warning)
• Failed/Offline: Red (Danger)
• Default/Inactive: Slate-500 (Neutral)

Vertical Timelines

Used for transaction history and device lifecycle. Dots represent states; solid lines represent completed paths, and dashed lines represent pending/future steps.

Audit Blocks (Raw Payload Viewer)

Monospaced font (Courier Prime or JetBrains Mono as an alternative), contained in a Slate-900 box with a 'Copy' action always present in the top-right corner.

Detail Drawers

Standardized side-panel that slides from the right. It allows for "quick inspection" of a merchant or device without losing the context of the main list.