---
name: Cassandratang Me
description: "This site is a strong example of a high-energy, consumer-facing promotional design that successfully uses bold typography and character illustration to create an engaging brand identity."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#0A0A0A"
  secondary: "#141414"
  tertiary: "#FB8124"
  neutral: "#5B5B5B"
  bg-soft: "#F1F1F1"
  line: "rgba(236, 236, 236, 1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.5px"
  heading:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.3
    fontWeight: 700
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 10px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A bold, high-energy online gambling platform featuring a playful mascot and vibrant promotional offers.

*A vibrant digital arcade focused on high-energy gaming and promotions.*

## Colors

High-contrast warm accents on a clean white background to drive engagement and excitement.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#0A0A0A`)** — uses `ink` token
- **Secondary text (`#141414`)** — uses `ink-soft` token
- **Accent (`#FB8124`)** — uses `accent` token
- **Muted (`#5B5B5B`)** — uses `muted` token
- **Borders (`rgba(236, 236, 236, 1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

- Use uppercase for navigation and call-to-action buttons
- Keep body text highly readable with generous line height

## Layout

A standard top navigation bar followed by a full-width hero banner, transitioning into a content-rich grid layout.

*Rhythm:* Standard 4px base grid ensuring consistent component spacing.

## Elevation & Depth

- 0px 0px 10px 0px rgba(255, 215, 0, 0.8)
- 0px 0px 20px 0px rgba(255, 215, 0, 0.6)
- Borders: 1px solid #ECECEC

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 10px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons with vibrant orange gradients and bold uppercase text.
- **card:** Cards featuring large, high-quality imagery with overlaid text and date badges.
- **chip:** Rounded labels for categories or dates.
- **input:** Clean, bordered input fields for forms.
- **hero:** Full-width promotional banner combining 3D character art with large, bold typography.

## Do's and Don'ts

**Don't:**
- don't use cool blues or greens — screenshot shows a dominant warm orange and white palette
- don't use serif fonts for body text — screenshot shows a clean humanist-sans-serif
- don't use a minimalist layout — screenshot shows a busy, highly illustrative design
- don't use thin, subtle borders — screenshot shows prominent, glowing box-shadows
- don't use muted or desaturated colors — screenshot shows high-chroma, vibrant accents
- don't use lowercase for primary navigation — screenshot shows all uppercase labels

---

## System Prompt (paste into AI agent)

```
Design a high-energy online entertainment and gambling platform centered on bold promotions. Use a vibrant orange (#FB8124) as the primary accent against a clean white (#FFFFFF) background, with dark ink (#0A0A0A) for text. Utilize a humanist-sans-serif typeface (Be Vietnam Pro) for a modern, accessible feel. Ensure all promotional buttons and headlines are uppercase and visually dominant. Key critical donts: avoid cool color palettes like blue or green; do not use serif fonts for the main UI; do not design a minimalist or overly clean layout. The design should feel energetic, rewarding, and highly promotional, utilizing 3D mascot characters and glowing accents to draw attention to offers.
```