OuraStore Design System

Overview

OuraStore presents itself as a dark-mode gaming top-up marketplace built for Indonesian gamers who value speed, trust, and round-the-clock availability. The visual language is deliberately restrained: a near-black canvas ({colors.canvas}) serves as the foundation, with slightly lighter elevated surfaces ({colors.surface-elevated}) creating depth without breaking the immersive gaming atmosphere. The dominant ink color ({colors.ink}) — a warm off-white rather than pure white — reads softly against the dark ground, reducing eye strain during extended browsing sessions.

The brand's voltage lives in its signature bronze-gold palette ({colors.accent} / {colors.signature-bronze}), which appears strategically: as link underlines, highlighted text within modals, the custom shadow treatment on premium CTAs, and checkbox accents. This warmth prevents the dark interface from feeling cold or utilitarian. Primary actions invert the expected dark-mode convention by using light backgrounds ({colors.primary}) with dark text ({colors.on-primary}), creating high-contrast call-to-action moments that pop against the surrounding darkness.

Typography is unified under IBM Plex Sans Condensed, a typeface chosen for its technical precision and space efficiency — critical when displaying game titles, pricing tiers, and transaction statuses in compact card layouts. The weight spectrum is intentionally narrow (400–600), relying on size and color contrast rather than boldness to establish hierarchy. Rounded corners are generous throughout: cards and modals use {rounded.xl} (16px) to {rounded.2xl} (24px), softening the technical aesthetic and making the marketplace feel approachable.

The system comprises two main dialects: the navigation/search dialect (sticky header with glassmorphic backdrop, search input with semi-transparent background) and the content dialect (section bands, game card grids, modal overlays). A third utility dialect covers the floating chat FAB and carousel controls.

Key Characteristics

• Dark-first canvas ({colors.canvas} — #373b3f) with warm off-white ink ({colors.ink} — #fafaf9) for reduced eye strain
• Signature bronze-gold accent ({colors.accent} — #a58c6f) applied to links, highlights, and decorative shadows
• IBM Plex Sans Condensed across all roles, weights 400–600 only, with condensed letter-spacing on subheadings
• Generous rounding: {rounded.xl} on cards, {rounded.2xl} on modals, {rounded.pill} on pagination dots
• Glassmorphic sticky header ({colors.overlay-strong}) with backdrop-blur and 500ms transition
• Semi-transparent input backgrounds ({colors.input-bg}) that blend into the surface layer
• Light-on-dark primary buttons ({component.button-primary} pattern) for maximum CTA visibility
• Modal system with {colors.overlay} backdrop and elevated card surface ({colors.surface-elevated})
• Section bands using {colors.overlay-strong} at 50% opacity for subtle content separation

Colors

Brand & Accent

• Primary ({colors.primary} — #fafaf9): Warm off-white used for primary button backgrounds, header text, and high-emphasis UI elements. Serves as the lightest anchor in the dark palette.
• Primary Active ({colors.primary-active} — #e7e5e4): Slightly dimmed warm gray for pressed/active states on primary-colored surfaces.
• Primary Hover ({colors.primary-hover} — #f5f5f4): Intermediate brightness for hover interactions on primary elements.
• Accent ({colors.accent} — #a58c6f): Signature bronze-gold color used for links, highlighted text (Instagram/WhatsApp mentions), checkbox accents, and brand-reinforcing details.
• Accent Hover ({colors.accent-hover} — #b8a188): Lightened bronze for interactive hover states on accent-colored elements.
• Accent Active ({colors.accent-active} — #8f7a61): Deepened bronze for active/pressed states on accent elements.
• Secondary ({colors.secondary} — #212121): Near-black used for header backgrounds and deeply recessed surfaces.

Surface

• Canvas ({colors.canvas} — #373b3f): Primary page background — a dark charcoal with slight blue undertone that defines the overall atmosphere.
• Surface ({colors.surface} — #262727): Card and container backgrounds, slightly darker than canvas for subtle elevation.
• Surface Soft ({colors.surface-soft} — #212121): Deep surface used for header backgrounds, input defaults, and heavily recessed areas.
• Surface Strong ({colors.surface-strong} — #1a1a1a): Deepest surface reserved for extreme depth contrast (rarely used).
• Surface Elevated ({colors.surface-elevated} — #2d3033): Modal and popover backgrounds — marginally lighter than canvas to create lift.
• Overlay ({colors.overlay} — rgba(55, 59, 63, 0.5)): 50% opacity canvas color used for modal backdrops and scrim layers.
• Overlay Strong ({colors.overlay-strong} — rgba(33, 33, 33, 0.8)): 80% opacity dark overlay for sticky header glassmorphism.
• Overlay Dim ({colors.overlay-dim} — rgba(0, 0, 0, 0.8)): Near-black overlay for maximum dimming (loading states, deep modals).

Text

• Ink ({colors.ink} — #fafaf9): Primary text color — warm off-white, used for headlines, body copy, and most readable content.
• Body ({colors.body} — #ffffff): Pure white reserved for highest-priority text elements (prices, status badges).
• Muted ({colors.muted} — #a58c6f): Bronze-gold muted text for secondary information, subtitles, and decorative labels.
• Muted Soft ({colors.muted-soft} — #8b8680): Neutral gray-muted for tertiary text, captions, and helper text.
• On Primary ({colors.on-primary} — #212121): Dark text color for readability on light primary backgrounds.
• On Dark ({colors.on-dark} — #fafaf9): Light text for any dark-colored surface.
• On Surface ({colors.on-surface} — #fafaf9): Default light text for surface-colored containers.
• On Accent ({colors.on-accent} — #ffffff): White text for legibility on bronze-gold accent backgrounds.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(250, 250, 249, 0.1)): Subtle 10% opacity white border for input fields and faint dividers.
• Hairline Soft ({colors.hairline-soft} — rgba(77, 82, 86, 0.5)): Medium-gray 50% opacity border for outlined buttons and secondary separators.
• Border Strong ({colors.border-strong} — rgba(77, 82, 86, 0.8)): Higher-opacity border for emphasized outlines and focus rings.
• Input Border ({colors.input-border} — rgba(250, 250, 249, 0.1)): Specific border token for search and form inputs matching the hairline opacity.

Semantic

• Error ({colors.error} — #ef4444): Red for validation errors, failed transactions, and destructive actions.
• Success ({colors.success} — #22c55e): Green for completed transactions, success messages, and confirmations.
• Warning ({colors.warning} — #f59e0b): Amber for cautionary states, pending items, and attention-needed alerts.
• Info ({colors.info} — #3b82f6): Blue for informational tooltips, help text, and neutral notifications.
• Link ({colors.link} — #a58c6f): Bronze-gold link color matching the accent palette for visual consistency.
• Link Active ({colors.link-active} — #b8a188): Lightened bronze for visited or active link states.

Signature / Brand-specific

• Signature Bronze ({colors.signature-bronze} — #a58c6f): The core brand color — identical to accent but named explicitly for brand-identity references in documentation and component descriptions.
• Signature Bronze Shadow ({colors.signature-bronze-shadow} — rgba(165, 140, 111, 0.3)): Tinted shadow color for bronze-accented elements, creating colored drop shadows on featured CTAs.
• Input Background ({colors.input-bg} — rgba(95, 102, 109, 0.8)): Semi-transparent gray-blue at 80% opacity for search inputs that blend into the surface.
• Checkbox Background ({colors.checkbox-bg} — #262727): Dark surface color specifically for unchecked checkbox states.

Typography

Font Family

The entire system runs on IBM Plex Sans Condensed, a proprietary typeface from IBM's open-source type family designed for technical interfaces. The font-face declarations reveal weights 200, 300, and 400 are loaded (with 200 and 300 likely available though not actively used in the extracted styles). The fallback stack degrades gracefully through system sans-serifs and emoji fonts: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji".

The condensed nature of the typeface is a deliberate choice: gaming marketplaces must display long game titles ("Mobile Legends: Bang Bang", "Magic Chess: Go Go"), publisher names ("Moonton", "Viza Games"), and pricing information within constrained card widths (188px per {component.game-card}). The condensed proportions allow 16–18px type to remain readable while fitting more characters per line.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 24px | 600 | 1.4 (-0.02em) | -0.02em | Page-level hero headlines (rare on this view) | | {typography.display-lg} | 16px | 400 | 1.5 | 0 | Secondary display text, large body emphasis | | {typography.title-md} | 16px | 600 | 1.5 | 0 | Modal headings, card titles, section labels | | {typography.title-sm} | 18px | 600 | 1.625 | 0.9px | Section headings ("POPULER SEKARANG!") with expanded spacing | | {typography.body-md} | 16px | 400 | 1.5 | 0 | Primary body copy, modal content, paragraphs | | {typography.body-sm} | 14px | 400 | 1.43 | 0 | Navigation links, button labels, secondary text | | {typography.caption} | 13px | 400 | 1.38 | 0 | Game card subtitles, timestamps, fine print | | {typography.button} | 14px | 500 | 1.25 | 0 | Button text, interactive labels | | {typography.label} | 14px | 500 | 1.43 | 0 | Form labels, tag text |

Principles

The typography system trusts size and color contrast over weight to create hierarchy. Notice that {typography.display-lg} and {typography.body-md} share identical 16px/400 specs — their differentiation comes from context (display vs. paragraph) and surrounding whitespace, not from the type itself. When emphasis is needed, the system steps up to weight 600 ({typography.title-md}, {typography.title-sm}), never exceeding it. There is no bold (700) usage anywhere in the extracted styles — this is intentional restraint that keeps the interface feeling precise rather than shouty.

Letter-spacing expansion appears exactly once: {typography.title-sm} uses 0.9px tracking on the "POPULER SEKARANG!" section heading, giving it a slightly editorial, spaced-out feel that distinguishes category headers from body text. All other roles use normal (0) letter-spacing, keeping the condensed typeface dense and efficient.

Color plays a significant typographic role: {colors.muted} (bronze-gold) is used for Instagram and WhatsApp brand names inside the modal, creating inline highlighting without weight changes. {colors.muted-soft} handles tertiary information like publisher names beneath game titles.

Note on Font Substitutes

IBM Plex Sans Condensed is available on Google Fonts. For implementations without access to the hosted Next.js font files, substitute via:

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@300;400;600&display=swap');

:root {
  --font-sans: 'IBM Plex Sans Condensed', ui-sans-serif, system-ui, sans-serif;
}

The CSS variable __IBM_Plex_Sans_Condensed_403b53 in the source is auto-generated by Next.js/font; replace it with 'IBM Plex Sans Condensed' in vanilla CSS or Tailwind configuration. Weights 300, 400, and 600 cover all observed usage.

Layout

Spacing System

• Base unit: 8px (with 4px and 2px sub-units for micro-adjustments).
• Tokens: {spacing.xxs} (2px — micro-gaps, focus ring offsets), {spacing.xs} (4px — icon padding, inner gaps), {spacing.sm} (8px — button internal padding, small margins), {spacing.md} (16px — standard padding, card internal gaps, grid gutters), {spacing.lg} (24px — section-internal spacing, larger margins), {spacing.xl} (32px — section vertical padding, modal internal padding), {spacing.2xl} (40px — generous section spacing), {spacing.3xl} (64px — major section breaks), {spacing.section} (80px — hero/landing section vertical rhythm).
• Section padding (vertical): {spacing.xl} (32px) — used on {component.section-band} containers with additional 16px horizontal padding.
• Card internal padding: {spacing.md} (16px) — consistent across {component.game-card} entries.
• Gutters: 16px horizontal padding on the main container ({spacing.md}); nav container uses same 16px gutters within its 1280px max-width.

Grid & Container

• Max content width: 1440px for main content area (main element), 1280px for navigation container (nav element).
• Density choice: Marketplace-dense — game cards render at fixed 188px width in a multi-column grid, maximizing products-per-view. This is not an editorial-airy layout; it's a transactional e-commerce density.
• Grid behavior at desktop: Game cards appear in a responsive grid (likely 4–6 columns at 1440px viewport) with 16px gaps. The "POPULER SEKARANG!" section shows at least 3 visible cards (Mobile Legends, Magic Chess Go Go, PUBG Mobile) with carousel navigation suggesting horizontal overflow.
• Hero column split: Not prominently visible in this modal-focused screenshot, but the underlying page structure suggests a standard e-commerce hero with search prominence.

Whitespace Philosophy

The system uses whitespace strategically, not generously. This is a gaming marketplace where users want to find their game, select a denomination, and complete a purchase quickly. Whitespace exists to separate sections (the 32px {spacing.xl} section band padding) and breathe around modal content (32px internal modal padding), but cards are tightly packed and the header is compact at 64px. The dark background naturally creates more perceived whitespace than a light theme would, allowing denser layouts without feeling cluttered.

Header Architecture

┌──────────────────────────────────────────────────────────────────────┐
│ [Logo]     [🔍 Search Input.................]  [ID/IDR ▾] [Masuk][Daftar] │
│                                                                      │
│ [Topup] [Cek Transaksi] [Leaderboard] [Artikel] [Kalkulator]          │
└──────────────────────────────────────────────────────────────────────┘
  ← 16px pad →                                       ← 16px pad →
  ↑ 1280px max-width nav container                                 ↑
  ↑ Sticky, bg-secondary/80, backdrop-blur, 500ms ease-in-out       ↑

The header is a two-row layout within a sticky, glassmorphic container. Row 1 holds the logo (left), search bar (center-expanded), and utility actions (right: language selector, login/register). Row 2 holds the primary navigation links. The entire header uses {colors.overlay-strong} (80% opaque dark) with backdrop-blur for the frosted-glass effect.

Hero Section

Not fully visible due to modal overlay, but structural inference from container data suggests:

┌──────────────────────────────────────────────────────────────────────┐
│                                                                      │
│   [Search/Filter Area or Hero Content]                               │
│                                                                      │
├──────────────────────────────────────────────────────────────────────┤
│ 📦 MODAL OVERLAY (centered)                                          │
│   ┌────────────────────────────────────────────┐                    │
│   │  1/1        Follow Channel WA & IG...  [X] │                    │
│   │  ─────────────────────────────────────────  │                    │
│   │  Klik Disini untuk follow...               │                    │
│   │  Info daget (lebih cepat)...               │                    │
│   │  ☐ Jangan tampilkan lagi                   │                    │
│   └────────────────────────────────────────────┘                    │
│                                                                      │
├──────────────────────────────────────────────────────────────────────┤
│ 🔥 POPULER SEKARANG!                                                 │
│ Berikut adalah beberapa produk yang paling populer saat ini         │
│                                                                      │
│ ┌─────────┐  ┌─────────┐  ┌─────────┐                               │
│ │ 🎮 MLBB  │  │ 🎮 MCGG  │  │ 🎮 PUBGM  │  →                         │
│ │ Moonton │  │ Viza G.. │  │ Tencent  │                             │
│ └─────────┘  └─────────┘  └─────────┘                               │
└──────────────────────────────────────────────────────────────────────┘

Modal Structure

The promotional modal is the dominant visible element, centered with these characteristics:

• Backdrop: {colors.overlay} (50% opaque canvas)
• Card: {colors.surface-elevated}, {rounded.xl} (16px), 32px internal padding, ~600px width
• Header: Centered text "Follow Channel WA & IG Oura Store" with close button (X) in top-right
• Body: Promotional text with inline bronze-colored links, informational paragraph, checkbox with label
• Pagination indicator: "1/1" centered above the modal title

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, solid {colors.canvas} | Page background, static sections | | 1 (Hairline) | {colors.hairline} 1px border or {shadows.sm} | Input fields, outlined buttons | | 2 (Soft) | {shadows.md} — 10px/15px blur, 10% black | Cards, dropdown menus | | 3 (Modal) | {shadows.lg} — 25px/50px blur, 25% black + overlay backdrop | Modal cards, centered dialogs | | 4 (Floating) | {shadows.xl} — 20px/25px blur + overlay | Chat FAB, toast notifications | | 5 (Inset) | {shadows.inset} — white inset shadow | Pressed button states, input focus | | Accent | {shadows.bronze} — 3px/8px colored shadow in {colors.signature-bronze} | Featured CTAs, premium badges |

The elevation philosophy is layered-dark: rather than using lighter surfaces to suggest height (as light-mode Material Design does), OuraKeep uses increasingly dark shadows and overlay opacities to create depth. The modal sits atop a 50%-opacity canvas scrim ({colors.overlay}), and the modal card itself uses {colors.surface-elevated} — marginally lighter than the page background — to appear lifted. Shadows are neutral-toned (black at varying opacities) except for the special {shadows.bronze} which tints the shadow in the brand's signature color for premium moments.

The glassmorphic header represents a different depth strategy: translucency plus blur rather than shadow. The {colors.overlay-strong} at 80% opacity with backdrop-filter: blur() creates a frosted effect that lets underlying content subtly show through while maintaining readability of nav elements.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Small inner elements, tags, badges | | {rounded.DEFAULT} / {rounded.md} | 8px | Buttons, inputs, default corners | | {rounded.lg} | 12px | Large buttons, panel corners | | {rounded.xl} | 16px | Cards, modals, major containers | | {rounded.2xl} | 24px | Hero cards, featured modals, image containers | | {rounded.pill} / {rounded.full} | 9999px | Pagination dots, avatar circles, pills |

The shape language favors soft rectangles over sharp edges or fully round forms. Even the "closest to round" token ({rounded.pill}) appears only on 8px pagination dots and potential avatars — never on buttons or cards. The progression from 8px (inputs/buttons) → 16px (cards/modals) → 24px (hero elements) creates a clear visual hierarchy where more important = rounder. This is inverted from some systems where small things are rounder; here, prominence correlates with radius size.

Photography Geometry

Game card imagery (visible as placeholder rectangles in the screenshot) uses {rounded.md} (8px) corner rounding, contained within the 188px-wide {component.game-card} containers. Aspect ratio appears roughly 4:3 or 1:1 for the thumbnail area above the title/subtitle text. Images do not bleed to card edges — they sit within the 16px internal padding of the card. No full-bleed imagery treatments were observed in this view.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-outline-focus}, {component.search-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & Interactive Elements

{component.button-outline} — The primary button style visible in the navigation and utility areas. Transparent background with {colors.hairline-soft} border (50% opacity gray), {colors.ink} text at 14px/500 weight, {rounded.lg} (12px) corners, and 8px×16px internal padding. Carries {shadows.sm} for subtle lift. Used for language selector ("ID/IDR"), login/register triggers, and navigation-style actions. State variant: {component.button-outline-focus} maintains the same structure for keyboard-focus indication.

{component.lang-selector} — Specialized instance of outline button with asymmetric padding (8px left, 12px right) to accommodate a flag icon prefix alongside the "ID / IDR" text. Same {colors.ink} on transparent background, {rounded.md} (8px).

{component.modal-close-button} — Square 32px button positioned absolute top-right of {component.modal-card}. Transparent background, {colors.ink} X-icon, {rounded.lg} corners. Functions as the dismiss control for modal overlays.

{component.chat-fab} — Floating Action Button fixed to bottom-right corner (bottom-0 right-4 in Tailwind classes). Uses inverted scheme: {colors.primary} (light) background with {colors.on-primary} (dark) text, {rounded.lg} top-only rounding (rounded-t-lg), 8px×16px padding. Contains chat icon and "CHAT CS" label. This is the highest-contrast interactive element on the page, designed to be unmissable.

{component.carousel-nav-prev} / {component.carousel-nav-next} — Circular 40px navigation buttons for the game card carousel. Fully round ({rounded.full}), transparent background, {colors.ink} chevron icons. Positioned flanking the card row.

{component.pagination-dot} / {component.pagination-dot-active} — 8px圆形指示器用于模态框分页。非活跃状态使用 {colors.muted-soft}，活跃状态使用 {colors.ink}。完全圆形 ({rounded.pill})。在截图中显示为"1/1"，表示单页模态框。

Cards & Containers

{component.modal-card} — 页面上最突出的容器元素。居中显示，使用 {colors.surface-elevated} 背景（略浅于画布），圆角为 {rounded.xl} (16px)，内边距为 32px，宽度约 600px。承载促销内容（"关注频道..."）。应用了 {shadows.lg} 阴影以产生浮起效果。内部包含 {component.modal-header}、{component.modal-body} 和表单控件。

{component.game-card} — 核心电商组件，固定宽度为 188px。背景为 {colors.surface}，圆角为 {rounded.lg} (16px)，内边距为 16px。包含缩略图区域、游戏标题（{component.game-card-title}）和发行商副标题（{component.game-card-subtitle}）。在"POPULER SEKARANG！"部分可见三个实例：Mobile Legends、Magic Chess Go Go、PUBG Mobile。

{component.section-band} — 全宽区块容器，使用 {colors.overlay-strong} 半透明背景（不透明度 0.5），垂直内边距为 32px ({spacing.xl})，水平内边距为 16px。用于分隔"POPULER SEKARANG！"等主要内容区域。

{component.top-nav} — 固定在顶部的粘性导航栏，高度为 64px。使用 {colors.overlay-strong} 背景（不透明度 0.8），并带有 backdrop-blur 滤镜效果（毛玻璃效果）。包含两行布局：标志/搜索/工具栏和导航链接。500ms 的 ease-in-out 过渡时间使其滚动行为平滑。

输入与表单

{component.search-input} — 主要搜索字段，横跨导航栏的中心区域。背景为半透明灰色蓝色 ({colors.input-bg} —— 不透明度 0.8)，文字颜色为 {colors.ink}，字体大小为 14px，圆角为 {rounded.md} (8px)。左侧内边距为 36px 以容纳搜索图标，右侧内边距为 12px。高度为 44px。边框使用 {colors.input-border}（10% 白色）。状态变体：{component.search-input-focus} 保持相同的视觉属性，焦点指示可能通过阴影或边框颜色变化实现。

{component.modal-checkbox} — 模态框内的复选框控件（"Jangan tampilkan lagi" —— "不再显示"）。背景为深色表面 ({colors.checkbox-bg} —— #262727)，选中指示器/边框颜色为 {colors.muted}（青铜色），尺寸为 16px×16px。这是品牌青铜色调应用于功能性表单元素的少数位置之一。

导航

{component.nav-link} — 顶部和第二行导航中的链接（Topup、Cek Transaksi、Leaderboard、Artikel、Kalkulator）。透明背景，文字颜色为 {colors.ink}，字体规格为 {typography.button} (14px/500)。无圆角（全宽点击目标或基于内边距）。悬停状态可能使用 {colors.muted} 或下划线效果。

弹窗系统

{component.modal-overlay} — 覆盖整个视口的背景遮罩层，使用 {colors.overlay}（画布颜色 50% 不透明度）。完全圆角（技术上是覆盖层，但标记为圆角：full）。位于 {component.modal-card} 后面。

{component.modal-header} — 模态框标题区域，包含分页指示器 ("1/1")、主标题 ("Follow Channel WA & IG Oura Store") 和关闭按钮。标题文字使用 {typography.title-md} (16px/600)，颜色为 {colors.ink}。

{component.modal-body} — 模态框的主要内容区域。包含带内联链接的段落（链接使用 {colors.accent} —— 青铜色）、信息文本和复选框行。正文使用 {typography.body-md} (16px/400)。

{component.modal-link} — 模态框正文内的内联链接样式（"INSTAGRAM"、"WHATSAPP"、"Klik Disini"）。文字颜色为 {colors.accent}（#a58c6f —— 青铜金色），与周围 {colors.ink} 正文形成对比。无背景，无圆角 —— 纯文本链接。

签名组件

{component.section-heading} — "POPULER SEKARANG！" 部分标题。使用 {typography.title-sm} (18px/600)，并带有扩展的 0.9px 字间距，营造编辑感。可能前缀有火焰 emoji (🔥)。文字颜色为 {colors.ink}。

{component.section-subheading} — 部分标题下方的描述性副标题（"Berikut adalah beberapa produk yang paling populer saat ini"）。使用 {typography.body-sm} (14px/400)，颜色为 {colors.muted-soft}（中性灰色）。

Do's and Don'ts

Do

• 在所有文本元素中使用 {colors.ink} (#fafaf9) 作为主要文字颜色 —— 它的暖白色调比纯白色更柔和，适合长时间使用的深色界面。
• 将 {colors.accent} (#a58c6f) 应用于链接、品牌提及和强调文本 —— 这是该品牌的标志性笔触，能统一地标记交互元素。
• 为模态框和弹出卡片使用 {rounded.xl} (16px) 或更大的圆角 —— 圆润的角落能柔化技术感的美学。
• 在输入框中坚持使用 {colors.input-bg} (rgba(95, 102, 109, 0.8)) 作为背景色 —— 半透明的输入框能与表面层自然融合。
• 利用 {shadows.bronze} 为特色行动号召添加彩色阴影 —— 这种微妙的青铜色调能为高级时刻增添品牌特色。
• 使用 {typography.title-sm} 并配合其 0.9px 的字间距来设置部分标题 —— 扩展的字间距是编辑式标题的标志。
• 保持 {component.top-nav} 具有 backdrop-blur 效果和 {colors.overlay-strong} 背景 —— 毛玻璃效果是该导航的标志性特征。
• 在游戏卡片中使用 {rounded.lg} (16px) —— 这能在密集的产品网格中提供一致且易于识别的卡片形状。
• 将 {colors.muted-soft} (#8b8680) 用于次要信息，如发行商名称和时间戳 —— 它能在不争夺注意力的情况下后退。
• 确保聊天浮动操作按钮 ({component.chat-fab}) 使用反转配色方案（浅色背景配深色文字）—— 这是页面上对比度最高的元素。

Don'ts

• 不要用 {colors.body} (纯白色 #ffffff) 替换 {colors.ink} (暖白色 #fafaf9) 作为主体文字颜色 —— 微妙的暖色调是有意为之，能减少眼部疲劳。
• 不要将字重增加到 600 以上 —— 该系统的字重重心止步于 600 ({typography.title-md} / {typography.title-sm})，没有粗体 (700) 的使用场景。
• 不要对模态框或卡片使用尖锐的角落（0px 或 {rounded.sm}）—— 最小的有效圆角是 {rounded.DEFAULT} (8px)，用于输入框和按钮。
• 不要给 {component.button-outline} 添加实心背景 —— 它的设计意图就是透明背景搭配细边框；如果需要填充按钮，应创建一个新的组件变体。
• 不要移除搜索输入框中的 36px 左侧内边距 —— 这个空间是为搜索图标保留的，它能向用户发出可搜索性的信号。
• 不要在 {component.game-card} 中使用超过 188px 的宽度 —— 固定的窄宽度是移动端优先/密集型市场网格的策略选择。
• 不要对部分标题使用紧凑的字间距 —— 唯一扩展的字间距 (0.9px) 是为 {typography.title-sm} 保留的，用于创建视觉层次。
• 不要使用纯黑色 (#000000) 作为叠加层 —— 请使用已定义的 {colors.overlay}、{colors.overlay-strong} 或 {colors.overlay-dim} 令牌来保持一致性。
• 不要忽略 {colors.signature-bronze-shadow} 用于彩色投影的用法 —— 这是一个独特的品牌元素，不应被标准的中性阴影所取代。
• 不要假设这是一个浅色主题界面 —— 所有设计决策都围绕 {extensions.mode}: "dark" 展开，其中浅色元素（如 {colors.primary}）是用于对比的例外情况。

Motion & Animation

Transition Tokens

从提取的CSS过渡数据来看，该系统采用了多种缓动曲线和持续时间：

--transition-all: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transform-standard: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transform-expressive: transform 0.5s cubic-bezier(0, 0, 0.2, 1);
--fade-quick: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--duration-default: 0.3s;

主要的缓动函数是 cubic-bezier(0.4, 0, 0.2, 1) —— 这是标准的 CSS ease-in-out 曲线，能产生自然的减速运动。持续时间范围从 150ms（快速微交互）到 500ms（页面级别的转换，如粘性导航栏的背景过渡）。

关键帧动画

检测到的关键帧动画包括：

• aurora —— 可能是背景渐变的极光/发光效果（未在此静态视图中激活）
• marquee / marquee-vertical —— 横向和纵向的文字或内容滚动效果
• accordion-up / accordion-down —— 可折叠内容区域的展开/收起动画
• enter / exit —— 模态框或弹出层的进入/退出过渡效果（可能与模态框系统相关）
• pulse —— 脉冲/跳动效果，可能用于通知徽章或加载状态
• spin —— 旋转动画，用于加载指示器
• wiggle-scale —— 组合的摆动+缩放效果，可能用于错误提示或趣味微交互
• meteor —— 流星/划过效果，可能是背景装饰
• rainbow / gradient —— 彩虹或渐变色循环效果
• hightlight / animate —— 通用的突出显示或基础动画
• animate-persegi-panjang —— 印尼语名称的矩形动画（"persegi panjang" = rectangle）
• swiper-preloader-spin / go2264125279 / go3020080000 —— 第三方库生成的动画（可能是 Swiper 轮播组件或 Google Tag Manager）

交互模式

• 粘性导航栏过渡：顶部导航栏在滚动时使用 500ms ease-in-out 过渡来改变其背景不透明度（根据 duration-500 ease-in-out 的 Tailwind 类判断）。
• 模态框进入/退出：模态框很可能使用 enter/exit 关键帧进行淡入+缩放动画，配合 {colors.overlay} 背景过渡。
• 轮播滑动：游戏卡片区使用水平滑动/滑动动画（由 carousel-nav-prev/next 按钮和 swiper 相关关键帧表明）。
• 按钮状态：所有交互式按钮都有 transition-all 属性，确保背景、边框、阴影和颜色的变化都是平滑的。
• 聚焦环：输入框和按钮在获得键盘焦点时显示聚焦环（通过 focus-visible:ring-2 类表明）。
• 复选框切换：复选框可能有颜色过渡（从默认状态切换到 {colors.accent} 选中状态）。
• 聊天悬浮按钮：固定定位的 FAB 可能在首次加载时有进入动画，或在悬停时有轻微的上浮效果。

Imagery Style

• 占位符驱动：当前视图主要显示占位符矩形（游戏卡片缩略图），而非实际的照片资产，这表明该系统是为动态内容设计的。
• 游戏图标/封面图：卡片的预期 imagery 是游戏封面图或图标，可能采用统一的宽高比（约 4:3 或 1:1），并应用 {rounded.md} (8px) 的圆角处理。
• 深色兼容性：所有 imagery 必须在深色背景（{colors.surface} 或 {colors.canvas}）上清晰可见，这意味着游戏封面图可能需要添加边框或阴影以确保在深色背景下不会消失。
• 品牌 logo：OuraStore logo 显示在左上角，是一个自定义的 SVG/图像资源（在提供的 DOM 数据中未完整提取）。
• 旗帜图标：语言选择器中有一个小型的印度尼西亚国旗图标（由 "ID / IDR" 按钮表明）。
• Lucide 图标：UI 图标来自 Lucide 库（搜索、购物车、用户、菜单、chevron-left/right、X/close 等）—— 参见图标系统部分。
• 无摄影主导：这不是一个以大型英雄摄影为特色的着陆页；它是一个以功能为导向的市场界面，imagery 支持而非主导用户体验。
• 表情符号的使用：部分标题使用了表情符号（🔥 用于 "POPULER SEKARANG！"），这表明在特定上下文中允许使用表情符号来增加视觉趣味性。
• 渐变/抽象背景：检测到的 aurora、gradient 和 rainbow 关键帧表明，某些页面状态或背景可能具有动态渐变效果，尽管在此静态模态视图中并未激活。

Icon System

• 库：Lucide（通过框架检测和 lucide 图标类明确识别）
• 观察到的具体图标：
  • search（搜索输入框，左侧）
  • shopping-cart 或 package（可能在 "Topup" 导航项中）
  • receipt 或 check-circle（"Cek Transaksi" —— 查看交易）
  • trophy 或 bar-chart（"Leaderboard"）
  • file-text 或 newspaper（"Artikel" —— 文章）
  • calculator（"Kalkulator" —— 计算器）
  • user（"Masuk" —— 登录）
  • log-in 或 user-plus（"Daftar" —— 注册）
  • x 或 close（模态框关闭按钮）
  • chevron-left / chevron-right（轮播导航）
  • message-circle 或 headphones（聊天 FAB 图标）
  • flag（语言选择器中的印度尼西亚国旗）
• 描边风格：Lucide 图标默认使用 stroke（描边）而非 fill（填充），线条宽度约为 1.5px–2px。
• 颜色：图标使用 currentColor，继承父元素的 {colors.ink} 或 {colors.muted-soft} 文字颜色。
• 尺寸：
  • 导航/按钮图标：16px–20px（与 {typography.button} 的 14px 文字对齐）
  • 搜索图标：20px（在 44px 高的输入框内视觉平衡）
  • 模态框关闭按钮：18px–20px（在 32px 按钮内居中）
  • 轮播导航：24px（在 40px 圆形按钮内）
  • 聊天 FAB：20px（与按钮文字并排）

Recommended Frontend Stack

- Framework:      Next.js (App Router) — evident from __variable_ font naming, next/static font URLs, and pageProps JSON structure
- Styling:        Tailwind CSS v3+ — confirmed by utility class patterns (rounded-lg, shadow-sm, backdrop-blur, px-4, etc.)
- Fonts:          next/font (local WOFF2 hosting of IBM Plex Sans Condensed) or Google Fonts CDN fallback
- Animation:      CSS transitions + keyframes (native, no GSAP/Framer Motion detected in core UI)
- Icons:          Lucide React (lucide-react package)
- Component lib:  Custom components with Tailwind utility classes (no shadcn/radix detection in class names)
- i18n:           next-i18next (evident from _nextI18Next in pageProps)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column game card stack, hamburger menu, full-width search, modal fills viewport width | | Tablet | 640px – 1024px | 2-column game card grid, condensed nav, modal at 90% width | | Desktop | 1024px – 1440px | 3–4 column game card grid, full nav visible, modal at 600px fixed width | | Wide | > 1440px | 4–6 column game card grid, max-width container centered |

Touch Targets

• {component.button-outline}：水平方向约 80px–120px（取决于文字内容），垂直方向约 36px（8px 上内边距 + 14px 字体行高约 17.5px + 8px 下内边距 ≈ 34px–36px）。满足 WCAG AA 的 44×44px 最小要求（如果文字较短，则处于临界状态）。
• {component.search-input}：44px 高度 × 全宽（最小 200px 在移动端）。轻松通过触摸目标要求。
• {component.lang-selector}：约 80px 宽 × 36px 高。对于较短的文字来说偏小，但可以接受。
• {component.modal-close-button}：32px × 32px。低于 44px 的 WCAG AAA 标准，但对于关闭按钮来说属于常见情况（Fitts 定律通过角落放置得到缓解）。
• {component.chat-fab}：约 100px+ 宽 × 40px 高。优秀的触摸目标。
• {component.carousel-nav-prev/next}：40px × 40px（圆形）。达到 WCAG AAA 标准。
• {component.game-card}：188px 宽 × 约 220px 高（估算）。整个卡片作为产品链接的可点击区域。

Collapsing Strategy

• Navigation：在移动端，第二行导航链接（Topup、Cek Transaksi 等）可能会折叠到汉堡菜单中，或者变为底部标签栏。第一行（logo、search、utilities）会保留但会压缩 —— search 可能变成一个图标，从而触发展开的搜索覆盖层。
• Search input：在桌面上横跨中心区域的全宽搜索框，在移动端可能变成一个触发搜索模式（全屏搜索覆盖层）的放大镜图标。
• Game card grid：从桌面端的 4–6 列流式布局变为平板端的 2 列，再变为手机端的单列堆叠。每张卡片的固定宽度（188px）可能会在移动端变为流体宽度（width: 100%）。
• Modal：桌面端固定的 600px 宽度模态框在移动端会扩展到 width: 90vw 或 width: 100% 并带有 16px 边距，同时保持 32px 的内边距或减少到 24px。
• Chat FAB：保持在 fixed bottom-0 right-4，但在移动端可能会稍微调整位置，以免与移动浏览器导航栏重叠。
• Section padding：{spacing.xl} (32px) 的垂直内边距在移动端可能会减少到 {spacing.lg} (24px)，以节省屏幕空间。

Image Behavior

• Game card thumbnails：在桌面端，188px 卡片内的固定尺寸缩略图（约 120px 宽 × 90px 高）。在移动端，随着卡片宽度扩展，缩很可能会按比例增大，或者保持固定的纵横比（例如 aspect-ratio: 4/3）并随卡片一起缩放。
• Modal images：此特定模态框中没有图片，但如果未来的模态框包含图片（例如游戏横幅广告），它们应该在移动端响应式缩放，并在桌面端限制最大宽度。
• Logo：在移动端可能会缩小尺寸或只显示图标，而不是完整的 wordmark。

Iteration Guide

1. 使用 Next.js (App Router) 配合 Tailwind CSS v3+ 构建一个落地页面，以此 closely mimic 本 DESIGN.md 中的设计系统。利用 next/font/local 来配置 IBM Plex Sans Condensed 字体（或者如果本地文件不可用，则使用 next/font/google）。

2. 通过 {section.token} 路径从 YAML frontmatter 中提取每种颜色、字体、圆角和间距值。不要硬编码任何已有 token 的值。例如，使用 var(--color-canvas) 或 Tailwind 的 theme('colors.canvas') 来引用 #373b3f，而不是直接写 bg-[#373b3f]。

3. 按照你所使用的技术栈的约定添加状态变体（-hover、-disabled、-focus）；该规范仅记录了 Default 和 Active/Pressed 状态。对于 Tailwind，使用 hover: 和 focus: 变体；对于 CSS Modules，使用 .className:hover 和 .className:focus 选择器。

4. 在添加新组件时，首先决定它属于哪个子系统：导航/搜索子系统（粘性头部、搜索、语言切换器）、内容子系统（分区带、游戏卡片、轮播）、弹窗子系统（覆盖层、模态框卡片、复选框）或 工具子系统（聊天悬浮按钮、分页点）。

5. 现有组件的变体应作为 frontmatter 中的独立条目存在（例如 button-outline 和 button-outline-focus 是同级条目，而非嵌套结构）。每个变体都应在 Components 部分有其对应的说明段落。

6. 编辑后运行 npx @google/design.md lint DESIGN.md —— broken-ref（断开的引用）、contrast-ratio（对比度问题）和 orphaned-tokens（孤立 token）警告会自动标记出问题。

7. 当需要强调某个元素时，优先选择字号增大而非字重增加（该系统止步于 600 字重）；优先选择签名表面卡片（{component.modal-card} 带 {colors.surface-elevated}）而非纯强调色块；优先选择青铜色高亮（{colors.accent}）用于链接，而非通用的蓝色或紫色。

8. 使用 lucide-react 包实现所有图标，并保持一致的尺寸规范（导航使用 16–20px，输入框使用 20px，大按钮使用 24px）。始终设置 strokeWidth={1.5} 或 {2} 以匹配提取的视觉权重。

9. 实现玻璃态头部时，务必应用 backdrop-blur-md（或等效的 CSS backdrop-filter: blur()）以及 {colors.overlay-strong} 的背景颜色，并设置 500ms 的 ease-in-out 过渡效果，以匹配提取的行为。

10. 对于暗色模式的实现，确保 HTML 元素上设置了 class="dark"（如果使用 Tailwind 的暗色模式策略），并且所有颜色 token 都映射到了 dark: 变体上，或者在 tailwind.config.js 中将暗色模式设置为默认模式。

Font Setup：要配置 IBM Plex Sans Condensed 字体，请将以下内容添加到你的 next/font 设置或 CSS 中：

// next/font (recommended for Next.js projects)
import { IBM_Plex_Sans_Condensed } from 'next/font/google';

const ibmPlexSans = IBM_Plex_Sans_Condensed({
  subsets: ['latin'],
  weight: ['300', '400', '600'],
  variable: '--font-ibm-plex-sans',
  display: 'swap',
});

// Then apply to <body className={`${ibmPlexSans.variable} font-sans`}>

/* Alternative: CSS / Tailwind config */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@300;400;600&display=swap');

:root {
  --font-sans: 'IBM Plex Sans Condensed', ui-sans-serif, system-ui, sans-serif;
}

/* Tailwind config */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-ibm-plex-sans)', 'ui-sans-serif', 'system-ui'],
      },
    },
  },
};

Known Gaps

• Hover state styling：按照“无悬停文档”策略，具体的悬停颜色变化（按钮变亮、链接下划线、卡片抬升）未被记录。这些应在实施过程中根据各组件的常规暗色模式惯例推导得出。
• Loading skeletons / pending states：虽然检测到了 swiper-preloader-spin 关键帧，但完整的骨架屏系统（针对游戏卡片、模态框内容）未在静态视图中观察到。
• Form validation states beyond focus：错误状态（红色边框、错误消息）是通过语义颜色 token ({colors.error}) 定义的，但具体的验证 UI 布局（内联消息 vs. toast 通知）未被捕获。
• Authenticated-only flows：登录后的仪表板、订单历史、个人资料设置和钱包余额界面在此公开的落地页/营销页面视图中不可见。
• Mobile navigation behavior：移动设备上的精确汉堡菜单实现（滑出抽屉？底部工作表？全屏覆盖层？）是推断出来的，而非直接观察到的。
• Product detail / checkout flow：选择游戏、选择 denomination、支付方式选择和订单确认界面均不在当前截图范围内。
• Pixel-exact values for translucent surfaces：像 {colors.overlay} (rgba(55, 59, 63, 0.5)) 和 {colors.input-bg} (rgba(95, 102, 109, 0.8)) 这样的值是从 CSS 提取的，但在不同显示器上感知到的外观可能因色彩配置文件而异。
• Third-party animation keyframes：go2264125279、go3020080000 和 swiper-preloader-spin 是外部库（可能是 Google Optimize/Tag Manager 和 Swiper JS）自动生成的，不应被视为核心设计系统的组成部分。
• Accessibility contrast ratios：虽然 {colors.ink} on {colors.canvas} 大致符合 WCAG AA 标准（浅色文字在深色背景上），但 {colors.muted} (#a58c6f) on {colors.surface-elevated} (#2d3033) 的具体对比度比值未经计算验证，可能需要对小字号文本进行审核。
• Dark mode toggle：此界面的设计似乎原生为暗色模式（{extensions.mode}: "dark"）；如果存在浅色模式主题（用于白天使用或辅助功能选项），其对应的颜色 token 完全未知，需要独立的设计 pass。