Schoolyard Survival

Overview

Schoolyard Survival is a Thai-language battle royale card game that transforms the familiar chaos of a schoolyard into a strategic multiplayer arena. The brand aesthetic blends **Playful Nostalgia with Tactical Depth**: the visual language draws from children's sticker collections, school notebooks, and hand-drawn doodles, yet the interaction model is sophisticated—players manage card hands, skill trees, and reputation mechanics across 4–10-player matches. The emotional response is one of joyful tension: the UI feels tactile and approachable (rounded corners, warm cream backgrounds, soft shadows), but the game state demands focus and quick decision-making. The design celebrates the Thai schoolyard as a living, colorful world—the hero image shows a vibrant anime-style campus with cherry blossoms, Thai flags, and playful architecture.

The brand voice is conversational and encouraging, never condescending. Vocabulary patterns favor simple, direct Thai phrasing (e.g., "เล่นแบบผลัดตา" = "take turns", "เอาชีวิตรอดให้ถึงคนสุดท้าย" = "survive to the last person") paired with playful English loanwords and emoji. The tone celebrates both victory and failure as part of the game's social fabric. Example sentence in brand voice: "ตัวการ์ดนี้ต้องเล่นให้ได้ — ถ้าไม่เล่น ชื่อเสียงจะลดลง!" (This card must be played—if you don't, your reputation drops!).

Colors

The color system balances a warm, paper-like foundation with bold accent colors that signal game state and player agency. **Primary (#3E6E9E, a forest-blue)** is used sparingly for secondary CTAs, links, and focus states—it evokes trust and calm decision-making. **Error/Danger (#B23A48, a muted rust-red)** is the dominant CTA color on the main "Start Game" button (rendered as rgb(178, 58, 72) in computed styles), commanding attention without aggression. **Secondary (#B98A2E, a warm gold)** highlights rewards, reputation gains, and premium card rarity. **Tertiary (#2F4538, a deep forest-green)** anchors the brand identity and appears in the meta theme-color tag; it's used for status badges and calm informational elements.

The surface stack is deliberately warm and paper-like: surface (#FBF

Typography

The type system pairs **Kalam** (a playful, rounded serif from Google Fonts, self-hosted at /fonts/kalam-*.woff2) for display and headline levels, creating a hand-drawn, approachable voice that echoes school notebooks and children's books. Body and label text use system-ui fallback (ui-sans-serif, -apple-system, sans-serif) for clarity and performance; IBM Plex Mono is reserved for small labels and technical data (e.g., card stats, player IDs). Display (56px, 700 weight, -0.02em letter-spacing) is used for hero titles and major section breaks. Headline-lg (36px, 700 weight) anchors modal titles and game state announcements. Body-md (16px, 400 weight, 24px line-height) is the workhorse for card descriptions and game rules. All small labels (12–14px) receive +0.02–0.03em letter-spacing to im

Layout

The page uses a **fluid, mobile-first grid** with a max-width of 1280px (container-max). The hero section spans full width with a vibrant anime background image (schoolyard scene with cherry blossoms, Thai flag, colorful buildings). Below the hero, content is organized into stacked cards and sections, each using 24px (md spacing) for vertical rhythm and 24px gutter for horizontal margins on mobile, scaling to 40px (lg spacing) on tablets and desktops. The main game lobby card (containing mode selector, player count, and start button) uses a centered, card-based layout with 24px internal padding and 12px (sm spacing) between form elements. On mobile (<768px), cards stack vertically and take full width minus 24px margins. On desktop (≥768px), the layout shifts to a 2–3 column grid with cards

Elevation & Depth

Depth is conveyed through **soft, paper-like shadows** rather than harsh drop-shadows or glassmorphism. The elevation system uses three levels: **Level 1 (sm)** — 0 1px 3px rgba(0,0,0,0.12) — for subtle card borders and input fields; **Level 2 (md)** — 0 3px 8px rgba(0,0,0,0.15) — for standard cards and buttons at rest; **Level 3 (lg)** — 0 8px 24px rgba(0,0,0,0.18) — for modals, dropdowns, and hovered cards. Cards on the game board use filter: drop-shadow(0 2px 2px rgba(0,0,0,0.16)) to avoid layout shift. Interactive elements (buttons, inputs) receive a 2px translateY lift on hover, paired wi

Shapes

The shape philosophy is **Soft-Technical Playfulness**: rounded corners are generous enough to feel friendly and approachable, yet precise enough to maintain a structured, game-like aesthetic. **Buttons and CTAs use rounded.lg (12px)**, creating a pill-like appearance that invites interaction. **Input fields and standard cards use rounded.DEFAULT (8px)** for a balanced, neutral look. **Elevated containers and modals use rounded.xl (20px)** to emphasize importance and create visual separation. **Badges and small UI elements use rounded.full (9999px)** for a circular, compact appearance. The rat

Components

Action Elements **Button-Primary** (Error/Danger color, #B23A48) is the dominant CTA for game start, match confirmation, and critical actions. Rendered as 48px height, 12px vertical padding, 24px horizontal padding, with rounded.lg (12px). On hover, the background darkens to #A03240 and receives a 0 4px 12px rgba(178,58,72,0.25) shadow, creating a subtle lift. On active/press, the background becomes #8F2F1D (a deeper rust). Transition: all 120ms ease-out. **Button-Secondary** uses a transparent background with a 2px solid border in primary color (#3E6E9E), maintaining the same 48px height and padding. On hover, the background fills with primary-container (#B7D4E8) and text shifts to on-primary-container (#1A3A52). Both button variants use label-md typography (14px, 600 weight, 0.02em l

Do's and Don'ts

**Do**

• Do use Kalam for all display and headline text (h1–h3 equivalents) to maintain the playful, notebook-like brand voice; never substitute with system fonts for these levels.
• Do apply the error color (#B23A48) exclusively to primary CTAs (start game, confirm action, submit form) to create a consistent, scannable call-to-action hierarchy.
• Do maintain 24px (md spacing) as the default vertical rhythm between sections and 12px (sm spacing) between form elements; this breathing room reinforces the unhurried, playful tone.
• Do use the full Material 3 color token stack (surface-container-lowest through surface-container-highest) to create subtle depth layers; never hardcode hex values inside component definitions.
• Do apply soft shadows (md: 0 3px 8px rgba(0,0,0,0.15)) to all elevated content; avoid harsh drop-shadows or glassmorphism effects that conflict with the paper-like aesthetic.

**Don't**

• Don't use pure black (#000000) or pure white (#FFFFFF) for text or backgrounds; always use the defined on-surface (#2B2B28) and surface (#FBF8F1) tokens to maintain warmth and approachability.
• Don't apply rounded corners smaller than 8px (DEFAULT) to interactive elements; sharp corners feel cold and corporate, conflicting with the playful brand.
• Don't mix Kalam and system fonts within a single heading or title; choose one per text level and stick with it to avoid visual chaos.
• Don't use secondary or tertiary colors for primary CTAs; reserve the error color (#B23A48) for the most important actions to maintain a clear visual hierarchy.
• Don't animate shadows or transforms for longer than 200ms on hover/focus; fast, snappy feedback (100–150ms) feels more responsive and playful than sluggish transitions.