Design Direction
The design philosophy is layered depth on a dark ground: rich greens stacked from near-black forest floor to bright canopy light, with high-contrast gold callouts for primary actions. Every interactive element uses strong drop shadows and beveled edges to push buttons visually forward from the illustrated background. Spacing is generous enough for touch targets, and the pill-shaped buttons reinforce the approachable, casual tone of a mobile puzzle game.
Colour Strategy
The dominant tone across the entire image is a deep, saturated forest green, drawn directly from the bamboo grove background. A warm golden yellow appears in the headline typography and coin UI elements, providing complementary tension against the green. A muted olive-yellow in the bamboo stalks bridges the two, keeping the palette coherent without competing with the green for attention.
Typography Strategy
Baloo 2 is a rounded display typeface with strong weight contrast, which matches the chunky, friendly character of the game's illustrated panda mascots and the bold stroke quality of the Chinese brush-style heading lettering. Noto Sans pairs cleanly as the body font because it was built for CJK script support, making it a functional and culturally appropriate match for this interface.
Colour Palette
primary
#52c775
secondary
#9ac158
accent
#d2af46
neutral
#88918a
success
#4ace76
warning
#dab33e
error
#ce654a
info
#4a8cce
Typography
Design is intelligence made visible
Great typography is the foundation of great design. The pairing of heading and body typefaces creates a visual hierarchy that guides the reader through content with clarity and purpose, while expressing personality at every level.
Selection colour · highlighted text looks like this · try selecting any text on this page
Spacing
4px base unit · balanced density
Border radius
none
0px
sm
8px
md
18px
lg
30px
xl
48px
full
9999px
Elevation
Shadows
0 1px 4px rgba(0, 0, 0, 0.3)
0 4px 12px rgba(0, 0, 0, 0.4)
0 12px 28px rgba(0, 0, 0, 0.5)
Texture
dots · opacity 1 · normal blend
Grid
balanced · 12 columns · 24px gutter · 40px margin · 1280px max
Motion
Hover, click, and interact to see the motion tokens in action.
60ms
120ms
250ms
400ms
600ms
Easings
Hover states, colour changes, most transitions
cubic-bezier(0.34, 1.56, 0.64, 1)
Elements appearing - modals, dropdowns, toasts
cubic-bezier(0.18, 1.4, 0.4, 1)
Elements leaving - dismissals, close animations
cubic-bezier(0.6, -0.28, 0.74, 0.05)
Playful feedback - toggles, badges, confirmations
cubic-bezier(0.34, 2, 0.64, 1)
Physics-based - drag, gestures, elastic effects
cubic-bezier(0.15, 1.8, 0.3, 1)
Iconography
Icon style derived from the system's personality, mood, and visual tokens.
Recommended library
Material Symbols
Comprehensive icon system with variable weight and fill
Browse Material Symbols ↗Also consider Phosphor — Rounded, friendly icons with multiple weight options
Stroke weight
1.5px
Matches border width (1px)
Corner rounding
8px
Use for icon containers
Icon set preview (default) — 1.5px stroke
Size scale
xs
12px
sm
16px
md
20px
lg
24px
xl
32px
On colour
primary
secondary
accent
muted
error
success
ComponentsPro
Component showcase is a Pro feature
Upgrade to see fully themed buttons, inputs, cards, badges, and more - all wired to this system's tokens.
PatternsPro
Patterns are a Pro feature
Upgrade to see fully themed form layouts, empty states, loading skeletons, and error handling - all built with this system's tokens.
Export
:root {
/* ─── Colors: Primary ─── */
--color-primary-50: #f6f9f7;
--color-primary-100: #eaf0ec;
--color-primary-200: #d4e8da;
--color-primary-300: #aae4bb;
--color-primary-400: #84d79d;
--color-primary-500: #52c775;
--color-primary-600: #38ad5b;
--color-primary-700: #2e8e4b;
--color-primary-800: #336141;
--color-primary-900: #2d3e32;
--color-primary-950: #1e2922;
/* ─── Colors: Secondary ─── */
--color-secondary-50: #f8f8f6;
--color-secondary-100: #eef0eb;
--color-secondary-200: #e0e7d5;
--color-secondary-300: #cee1ad;
--color-secondary-400: #b7d388;
--color-secondary-500: #9ac158;
--color-secondary-600: #81a73e;
--color-secondary-700: #6a8a33;
--color-secondary-800: #4f5e36;
--color-secondary-900: #383d2e;
--color-secondary-950: #25291f;
/* ─── Colors: Accent ─── */
--color-accent-50: #f9f8f6;
--color-accent-100: #f0efea;
--color-accent-200: #eae4d2;
--color-accent-300: #e9d8a5;
--color-accent-400: #dfc67b;
--color-accent-500: #d2af46;
--color-accent-600: #b9962d;
--color-accent-700: #987b25;
--color-accent-800: #65582f;
--color-accent-900: #3f3a2c;
--color-accent-950: #2a271d;
/* ─── Colors: Neutral ─── */
--color-neutral-50: #f7f8f7;
--color-neutral-100: #eceeed;
--color-neutral-200: #dddfdd;
--color-neutral-300: #c5c9c6;
--color-neutral-400: #aab1ac;
--color-neutral-500: #88918a;
--color-neutral-600: #6e7771;
--color-neutral-700: #5b625d;
--color-neutral-800: #474d49;
--color-neutral-900: #333835;
--color-neutral-950: #222523;
/* ─── Colors: Semantic ─── */
--color-success: #4ace76;
--color-success-light: #202d24;
--color-warning: #dab33e;
--color-warning-light: #2e2a1e;
--color-error: #ce654a;
--color-error-light: #2d2220;
--color-info: #4a8cce;
--color-info-light: #20262d;
/* ─── Colors: Surface ─── */
--color-background: #0e110f;
--color-foreground: #e4e7e5;
--color-card: #1a1e1b;
--color-card-foreground: #e4e7e5;
--color-muted: #242825;
--color-muted-foreground: #909892;
--color-border: #2c302d;
--color-input: #222523;
--color-ring: #47d171;
/* ─── Typography ─── */
--font-heading: Baloo 2, sans-serif;
--font-body: Noto Sans, sans-serif;
--font-mono: JetBrains Mono, monospace;
/* ─── Spacing ─── */
--space-lg: 24px;
--space-md: 16px;
--space-sm: 8px;
--space-xl: 32px;
--space-xs: 4px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;
/* ─── Border Radius ─── */
--radius-lg: 30px;
--radius-md: 18px;
--radius-sm: 8px;
--radius-xl: 48px;
--radius-full: 9999px;
--radius-none: 0px;
/* ─── Shadows ─── */
--shadow-low: 0 1px 4px rgba(0, 0, 0, 0.3);
--shadow-mid: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-high: 0 12px 28px rgba(0, 0, 0, 0.5);
--shadow-glow: 0 0 20px rgba(82, 199, 117, 0.12);
/* ─── Motion ─── */
--duration-micro: 60ms;
--duration-fast: 120ms;
--duration-normal: 250ms;
--duration-slow: 400ms;
--duration-glacial: 600ms;
--easing-default: cubic-bezier(0.34, 1.56, 0.64, 1);
--easing-entrance: cubic-bezier(0.18, 1.4, 0.4, 1);
--easing-exit: cubic-bezier(0.6, -0.28, 0.74, 0.05);
--easing-bounce: cubic-bezier(0.34, 2, 0.64, 1);
--easing-spring: cubic-bezier(0.15, 1.8, 0.3, 1);
/* ─── Elevation ─── */
--elevation-sunken: #070807;
--elevation-base: #0e100f;
--elevation-raised: #1a1e1b;
--elevation-floating: #262b28;
--elevation-overlay: #353b37;
/* ─── Component Scale (balanced) ─── */
--comp-padding-x: 16px;
--comp-padding-y: 10px;
--comp-gap: 10px;
--comp-border-width: 1px;
--comp-font-size: 14px;
--comp-input-height: 40px;
--comp-button-height: 40px;
--comp-icon-size: 16px;
/* ─── Grid (balanced) ─── */
--grid-columns: 12;
--grid-gutter: 24px;
--grid-margin: 40px;
--grid-max-width: 1280px;
/* ─── Selection ─── */
--selection-bg: #336141;
--selection-fg: #eaf0ec;
}Brand Guidelines
Standalone HTML, print to PDF. Colours, typography, spacing, all in one page.
Presentation Deck
PPTX template with palette, typography, and blank slides in your brand.
Figma Tokens
JSON for Tokens Studio plugin. Import colours, type, spacing straight into Figma.
PDF Brand Guide
Full brand guidelines as a real PDF file. Colours and typography rendered exactly.
AI Skill
System prompt you can paste into Cursor or any AI tool to generate on-brand UI instantly.