# AkongCuan — Design System
> A directory and guide for online slot platforms focusing on low-deposit accessibility.
- **Canonical:** https://uiuxskills.com/library/akongcuan
- **Source:** https://prototyper.design
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:16:40.453Z

---

---
version: alpha
name: AkongCuan
description: A directory and guide for low-deposit online slot platforms.
tone: >-
  Urgent, direct, and functional. The tone is designed to guide users quickly toward registration
  and deposit actions.
color-scheme: light
colors:
  primary: "#FFDD00"
  secondary: "#FF0000"
  surface: "#FFFFFF"
  surface-container: "#F5F5F5"
  on-surface: "#1A1A1A"
  on-primary: "#000000"
  outline: "#E0E0E0"
  error: "#D32F2F"
  success: "#388E3C"
  focus-ring: "#FFDD00"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: 100%
  button-primary-hover:
    backgroundColor: "#E6C700"
  button-secondary:
    backgroundColor: transparent
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
  input-field:
    padding: "{spacing.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "#0066CC"
  link-hover:
    textColor: "#004499"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "#FFFFFF"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "{colors.success}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-container:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

AkongCuan functions as a navigational hub for online gaming, focusing on accessibility and low-barrier entry. The visual identity is high-energy and urgent, utilizing a bold yellow and red palette to command attention and signal promotional offers.

## Colors

The color strategy is designed for high-contrast, immediate visual impact, prioritizing urgency and clarity for users navigating promotional content.

*   Primary (#FFDD00): The core brand color used for high-visibility CTAs and promotional highlights.
*   Secondary (#FF0000): Reserved for urgent alerts, error states, and promotional banners.
*   Surface (inferred) (#FFFFFF): Clean white background for optimal content readability.
*   Surface-container (#F5F5F5): Light gray background used for secondary containers and cards.
*   On-surface (inferred) (#1A1A1A): Primary text color for high contrast against white surfaces.
*   On-primary (inferred) (#000000): Text color for buttons using the primary yellow background.
*   Outline (inferred) (#E0E0E0): Border color for input fields and card dividers.
*   Error (inferred) (#D32F2F): Semantic color for validation errors and out-of-stock indicators.
*   Success (inferred) (#388E3C): Semantic color for positive status indicators.
*   Focus-ring (inferred) (#FFDD00): High-visibility focus state for interactive elements.

## Typography

Typography is clean and sans-serif, focusing on hierarchy and scannability to guide users through dense information quickly.

*   Display-lg (inferred): Used for primary hero headings.
*   Headline-md (inferred): Used for section titles and card headers.
*   Body-md (inferred): Standard paragraph text for readability.
*   Label-sm (inferred): Used for metadata, small labels, and button text.

## Layout

The site utilizes a mobile-first grid strategy, ensuring content is centered within a max-width container to maintain readability across all devices. The section order follows a logical flow: nav, hero, features, pricing, and footer. The hero pattern is centered, featuring a primary headline and a direct CTA button. Spacing is managed via a consistent scale, with {spacing.md} serving as the base padding for cards and {spacing.2xl} as the maximum section margin.

## Elevation & Depth

Depth is conveyed through subtle, single-layer shadows across three levels to differentiate interactive elements from the background.

*   elevation.sm: Subtle lift for basic cards.
*   elevation.md: Standard lift for dropdowns and popovers.
*   elevation.lg: Pronounced lift for modal and drawer overlays.

## Shapes

The design employs a functional approach to geometry, balancing structural integrity with accessibility. Sharp corners are used for primary containers to maintain a clean, grid-based aesthetic, while rounded corners are applied to buttons and badges to signal interactivity and improve touch-target ergonomics.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
Anatomy includes a {colors.primary} background and {typography.label-sm} text. Use this for the main conversion action, such as registration or deposit, to ensure maximum visibility.

### Card
A structural container using {colors.surface} and {colors.outline} borders. Use this to group related information, such as game provider details or promotional summaries.

### Input Field
Features {spacing.md} padding and {colors.outline} borders. Use for all user-entry forms, ensuring {colors.primary} is applied to the border during focus states.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary call-to-action buttons. | Do not use {colors.primary} for text on white backgrounds. |
| Apply {typography.headline-md} for all section titles. | Avoid using {typography.display-lg} for body copy. |
| Use {spacing.md} as the base padding for all card components. | Do not mix rounded and sharp corners within the same component group. |
| Ensure {colors.secondary} is reserved for urgent alerts or error states. | Never use {colors.secondary} for primary navigation elements. |
| Use {rounded.lg} for button borders to maintain a modern feel. | Do not exceed {spacing.2xl} for section margins. |
| Apply {colors.outline} for all subtle dividers between content sections. | Avoid using low-contrast colors for input field borders. |
| Use {rounded.sm} for {badge-error} to keep status indicators compact. | Do not use {colors.primary} for non-interactive decorative elements. |
| Apply {elevation.md} to {card-elevated} to distinguish from page background. | Avoid using {elevation.lg} for static, non-overlay elements. |

## Content Style

CTA labels are imperative, short, and direct (e.g., "LOGIN", "DAFTAR"). This brevity ensures that the user's path to action is never obscured by wordy instructions.

Headings are benefit-driven and urgent. They focus on the accessibility of low-deposit gaming, using clear, declarative language to address the user's primary goal immediately.

Copy density is kept low. Paragraphs are short and scannable, utilizing bullet points for feature lists to ensure users can digest information quickly without feeling overwhelmed.

## Imagery & Icons

The imagery style is mixed, combining product photography with simple, functional icons to represent game providers and payment methods. Iconography should remain minimal and high-contrast to match the bold, direct tone of the brand. Avoid overly complex illustrations; prioritize clarity and quick recognition.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for AkongCuan, a minimal-bold online slot directory with an urgent, conversion-driven tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{spacing.md}`, `{rounded.lg}` — never hardcode hex, px, or rem values.
2. Use only the component variants defined under `components:`. Do not invent variants (e.g. no ghost buttons, outlined cards) that the spec does not list.
3. Follow the Layout section for page structure: mobile-first, max-width container, section order nav → hero → features → pricing → footer. One breakpoint at 768px when the spec is silent.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g. using `{colors.secondary}` in navigation), surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) exists, those values override the spec.

## Output contract

**Must:**
- Use token names for every color, spacing, radius, and typography decision.
- Include hover, focus, and disabled states for all interactive components when the spec defines them (`button-primary-hover`, `input-field-focus`, `swatch-focus-ring`).
- Apply `{spacing.md}` as base card padding; never exceed `{spacing.2xl}` for section margins.
- Keep CTA copy imperative and brief (e.g. "DAFTAR", "LOGIN") per the Content Style section.
- Apply `{elevation.md}` to `card-elevated`; reserve `{elevation.lg}` for modals and overlays only.

**Must NOT:**
- Invent colors, font sizes, or radii outside the spec.
- Use generic system defaults when a brand token exists.
- Use `{colors.primary}` on non-interactive decorative elements or as text on white backgrounds.
- Use `{colors.secondary}` outside urgent alerts, error states, and promotional banners.
- Mix rounded and sharp corners within the same component group.
- Add emoji, filler copy, or marketing language.
- Rewrite page copy, button labels, or alter navigation structure.

## When in doubt
- Ask the user before introducing any token not in the spec.
- Prefer composing existing components over adding new tokens.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for text on those surfaces, use `{colors.on-surface}`.
- For unspecified breakpoints, default mobile-first with one breakpoint at 768px.
- Prefer the bolder, higher-contrast option when two spec-valid choices exist — this brand reads urgent and direct.