# Cassandratang Me · Design system migration spec

> Source: https://www.cassandratang.me  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

The design system for Cassandratang is a vibrant digital arcade, engineered for high-energy entertainment and immediate promotional clarity. Its architecture prioritizes excitement and reward, building a playful, interactive environment from bold typographic foundations and luminous accents.

**One-liner:** A bold, high-energy online gambling platform featuring a playful mascot and vibrant promotional offers.
**Keywords:** gambling · entertainment · online casino · promotional
**Analogy:** A vibrant digital arcade focused on high-energy gaming and promotions.

## 2. Color

The palette is a study in high-contrast warmth, pairing a dominant, vibrant orange with a pristine white background to command attention. Supporting hues are selected for their high chroma and energetic contribution to the promotional hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F1F1F1` | card background |
| `--ink` | `#0A0A0A` | body text |
| `--ink-soft` | `#141414` | secondary text |
| `--muted` | `#5B5B5B` | placeholder |
| `--accent` | `#FB8124` | single accent |
| `--line` | `rgba(236, 236, 236, 1)` | divider |

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

Every color application serves a singular principle: to generate a sense of excitement and drive immediate engagement with offers.

## 3. Typography

The typographic voice is assertive and highly descriptive, anchored by the **Be Vietnam Pro** humanist-sans-serif for modern accessibility. Its scale and rules enforce a promotional hierarchy where uppercase headlines and calls to action dominate the visual field.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.1 | 700 | -0.5px | Hero headlines and major promotions |
| heading | 24px | 1.3 | 700 | 0px | Section titles and article headers |
| body | 16px | 1.6 | 400 | 0px | Standard paragraph text |
| caption | 14px | 1.5 | 400 | 0px | Smaller supporting text and navigation |

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

## 4. Spacing

A consistent 4px base grid establishes a predictable spatial rhythm, ensuring generous and orderly component alignment across the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base grid ensuring consistent component spacing.

## 5. Surfaces

Surface treatment eschews minimalist borders for depth and glow, using prominent, warm-toned box-shadows to create a sense of layered, rewarding elements. A single, fine border provides structure where needed, but the primary depth cue is luminous elevation.

- **Radius:** sm 4px · md 8px · lg 10px · pill 999px
- **Shadows:**
  - 0px 0px 10px 0px rgba(255, 215, 0, 0.8)
  - 0px 0px 20px 0px rgba(255, 215, 0, 0.6)
- **Borders:** 1px solid #ECECEC

## 6. Layout

The structural skeleton follows a commercial blueprint: a persistent top navigation bar flows into a full-width, high-impact hero banner. This transitions into a content-rich grid system designed to showcase promotional imagery and categorical information.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is employed as functional feedback, not flourish. Transitions are smooth and purposeful, using opacity and transform shifts to acknowledge interaction and manage content loading without interrupting the energetic pace.

- **Durations:** micro 200ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity and transform transitions on hover states
  - Fade-in effects for content loading

- **Hover:** Subtle color shifts and elevation changes via box-shadow.
- **Click:** Slight scale or brightness adjustment to indicate engagement.
- **Transition:** Smooth 0.3s background-color and transform transitions.
- **Keyboard:** Standard focusable elements with clear visual indicators.

## 8. Voice & Don'ts

The editorial voice is exciting and promotional, employing bold, uppercase headlines and direct, action-oriented calls to action. This tone is deliberately informal, speaking to users with clarity and enthusiasm about rewards and opportunities.

- **Tone:** Exciting, promotional, and slightly informal.
- **Headline style:** Bold, uppercase, and highly descriptive.
- **CTA style:** Direct, action-oriented, and visually prominent.
- **Avoid:** Subtle language / Muted visuals / Complex technical jargon

### Don'ts
- ❌ 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

The system deliberately avoids subtlety, muted visuals, and minimalist aesthetics in favor of an unambiguously high-energy and illustrative promotional environment.

## System Prompt (paste into AI tool)

```
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.
```