Fishbone Cast

Overview

Fishbone Cast is a casual, browser-based fishing MMO that prioritizes accessibility and social connection over complexity. The design language—termed 'Warm Minimalism'—combines soft, earthy tones (warm cream #fffaf0, sand #f7e7c5, and rich brown #4a3222) with playful, rounded geometry to create an inviting, low-stress gaming environment. The aesthetic evokes the quiet contentment of sitting by a peaceful river, with gentle animations (bubble rises, swimming cursors) and organic wave patterns reinforcing the aquatic theme. The brand personality is cheerful yet grounded: approachable, never condescending, with a tone that celebrates small victories and community. Example voice: 'ตกปลากับเพื่อนแบบเรียลไทม์ — เก็บตัวละคร เหรียญ และเพื่อนไว้ไม่ให้หาย' (Fish with friends in real-time — keep your characters, coins, and friends safe).

Colors

The color system is anchored in a warm, earthy palette that reflects the natural fishing environment. Primary (#06c755, a vibrant green) is reserved exclusively for call-to-action buttons and success states, creating immediate visual hierarchy and encouraging engagement. Secondary (#f29d3f, a warm orange) serves as an accent for highlights, badges, and secondary interactive elements, adding warmth without competing with primary. The surface stack progresses from the brightest cream (#fffaf0) for card backgrounds through progressively warmer tones (#f4e3c2, #ecd9b4, #e2d6bb) to establish depth without darkness. On-surface text (#4a3222, a deep brown) maintains 7:1 contrast on all light surfaces. The outline-variant (#d3bd93, a muted tan) is used for subtle borders and dividers, creating vis

Typography

The type system uses Noto Sans Thai exclusively, honoring the Thai-language user base while maintaining a modern, friendly voice. Display and headline weights (900 and 700) are reserved for hero content and section titles, set at 60px and 40px respectively with tight letter-spacing (-0.04em, -0.02em) to create visual impact and personality. Body text (400 weight, 16px–18px) is set at 1.5 line-height (24px–28px) for comfortable reading on mobile and desktop. Labels and buttons use 600 weight at 14px with 0.01em letter-spacing to convey action and hierarchy. All text over busy backgrounds (e.g., hero section with gradient) applies a subtle text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) to ensure legibility. The type pairing communicates approachability: heavy weights (900) for brand moments, regu

Layout

The page layout uses a centered, single-column design with a max-width of 820px, optimized for mobile-first viewing and touch interaction. The hero card (login container) sits at the center of a full-viewport flex container, with 24px horizontal padding (gutter) on mobile and 40px (lg spacing) on tablet+. The background uses a radial gradient (120% 90% at 50% -10%, transitioning from #fff6e2 to #f7e7c5 to #dcd0ae) to create depth without introducing new colors. Animated bubble elements (positioned absolutely, bottom: -12%, with 13s–16s animation cycles) float upward, adding motion without distraction. The wave SVG footer (16vh height) uses two overlapping paths with opacity (0.55 and 0.5) to suggest water. Vertical spacing between sections uses md (24px) for card padding and lg (40px) for

Elevation & Depth

Depth is conveyed through layered shadows and subtle borders rather than dark overlays. Level 1 (Base): the radial gradient background with animated bubbles creates the foundation. Level 2 (Card): the login card uses a 2px border (#e3cfa4, a light tan) with a large, soft shadow (0 26px 60px -18px rgba(74, 50, 34, 0.45)) to lift it off the background. An inset highlight (inset 0 2px 6px rgba(255, 255, 255, 0.9)) at the top edge of the card reinforces the frosted-glass aesthetic. Level 3 (Buttons): primary buttons use a 5px solid drop-shadow (0 5px 0 #04a548, a darker green) that shifts on hover

Shapes

The shape philosophy is termed 'Soft-Technical Warmth': rounded corners are generous and consistent, avoiding sharp edges while maintaining clarity. Buttons and cards use 24px border-radius (1.5rem, {rounded.xl}), creating a friendly, approachable feel that invites interaction. Input fields and smaller interactive elements use 8px (1rem, {rounded.lg}) or 6px (0.75rem, {rounded.md}) for subtle hierarchy. The logo container uses a full circle (border-radius: 50%, {rounded.full}) to emphasize the brand mark. Wave SVG paths use organic curves (quadratic Bézier paths) to evoke water without literal

Components

Action Elements Buttons are the primary interactive element and use a distinctive 3D-press aesthetic. Primary buttons (bg: #06c755, text: white, 48px height, 16px 24px padding, 24px border-radius) display a 5px solid drop-shadow (#04a548) in the resting state. On hover, the button translates up 2px (transform: translateY(-2px)) and the shadow extends to 7px, creating a 'lifting' effect. On active/click, the button translates down 2px and the shadow compresses to 2px, simulating a press. The transition duration is 150ms cubic-bezier(0.2, 0.8, 0.3, 1) for snappy feedback. Secondary buttons (white bg, 2px tan border #e2d6bb, same shadow logic) follow the same press pattern but with a border to differentiate. Icon buttons are 48px squares with transparent backgrounds; on hover, they gain a

Do's and Don'ts

**Do**

• Do use primary green (#06c755) exclusively for CTAs and success states — it is the only color users should click on without hesitation.
• Do apply the 3D press shadow effect (5px drop-shadow, hover lift, active compress) to all buttons to reinforce the playful, tactile brand.
• Do maintain the warm color palette (cream, sand, brown, orange) in all new components — never introduce cool grays or pure blacks.
• Do use Noto Sans Thai at 900 weight for headlines and 400 weight for body to create the friendly-yet-clear hierarchy.
• Do apply the inset highlight (inset 0 2px 6px rgba(255, 255, 255, 0.9)) to card tops to reinforce the frosted-glass aesthetic.
• Do use 24px border-radius on buttons and cards, 8px on inputs, and 50% on circular elements — no sharp corners.

**Don't**

• Don't use dark overlays, pure black shadows, or cool-toned grays — they break the warm, approachable aesthetic.
• Don't apply primary green to non-interactive elements or backgrounds — reserve it for CTAs only.
• Don't use system fonts or sans-serif fallbacks; always specify Noto Sans Thai to honor the Thai-language user base.
• Don't reduce border-radius below 6px or use sharp corners anywhere — the brand relies on soft, rounded geometry.
• Don't animate elements faster than 150ms or slower than 420ms without explicit design rationale — maintain the snappy, responsive feel.
• Don't add drop-shadows using pure black (rgba(0, 0, 0, ...)) — always use the warm brown rgba(74, 50, 34, ...) to preserve the palette.