FotMob Predict

Overview

FotMob Predict is a high-energy sports prediction gaming platform that gamifies football competition forecasting through a vibrant, neon-accented dark interface. The brand serves competitive sports enthusiasts and casual fans alike, delivering real-time prediction mechanics with an aesthetic rooted in 'Neon Minimalism'—a design movement that pairs austere, near-black surfaces with saturated, glowing accent colors (lime green #5fff94, electric purple #a896f3, golden yellow #e9f420) to create visual excitement without visual clutter. The UI evokes a sense of immediacy, competition, and playful intensity.

The brand voice is direct, energetic, and accessible—never condescending, always encouraging participation. Vocabulary leans toward action verbs ("Tebak hasil dan bersaing," "Putar," "Tampilkan") and short, punchy sentences. Tone is confident but approachable, treating predictions as sport rather than gambling. Example sentence in brand voice: "Tebak hasil dan bersaing dengan teman-teman untuk mendapatkan poin tertinggi."

Colors

The color system is built on a pure-black foundation (#000000) with a carefully curated accent palette that creates visual hierarchy through saturation and luminosity rather than value contrast. Primary (#5fff94, a vivid lime green) is reserved exclusively for call-to-action buttons, active states, and key interactive elements—it is the signature brand accent and must never be used for passive surfaces or body text. Secondary (#a896f3, electric purple) supports secondary CTAs and highlights, providing a complementary accent for competition or alternative actions. Tertiary (#e9f420, golden yellow) is used for tertiary CTAs, badges, and status indicators, creating a three-tier action hierarchy. The surface stack uses near-black grays (#0d0c0c for surface-dim, #1b1a1a for surface-container-lo

Typography

The type system uses Inter exclusively, a geometric sans-serif that pairs clarity with personality. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major section breaks, commanding attention through scale and weight rather than color. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure content hierarchy, with headline-md used for section titles and card headers. Title-lg (20px, 600 weight) marks subsection breaks and card titles. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry primary content, with body-lg used for introductory paragraphs and body-md for standard body copy. Label-md (14px, 600 weight, 0.01em letter-spacing) and label-sm (12px, 500 weight, 0.02em letter-spacing) are used for button text, badges, a

Layout

The layout uses a 12-column grid with a maximum container width of 1280px, allowing flexible content arrangement across desktop and mobile viewports. The design employs a fluid-to-fixed breakpoint strategy: on mobile (< 768px), containers expand to full width with 24px gutters; on tablet and desktop, the 1280px container centers with 24px side margins. Section spacing follows the semantic scale: lg spacing (40px) separates major sections (hero, competitions, leaderboard), md spacing (24px) separates cards and subsections, and sm spacing (12px) separates inline elements. The hero section uses 64px (xl) top and bottom padding to establish visual breathing room. Cards are arranged in a responsive grid: 1 column on mobile, 2 columns on tablet, 3 columns on desktop. Padding within cards is cons

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle surface-container layering rather than dramatic drop shadows. Level 1 (Base): the pure-black background (#000000) with no shadow. Level 2 (Standard Card): surface-container (#2f2f2f) with a 1px border in outline-variant (#505050) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)—this creates a soft, contained elevation. Level 3 (Elevated Card / Modal): surface-container-highest (#4a4a4a) with a 1px border in outline (#666666) and box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25)—reserved for modals, popovers, and primary content containers

Shapes

The shape philosophy is 'Energetic Roundness'—a balance between technical precision and approachable softness. Buttons and chips use full border-radius (9999px) to create pill-shaped, energetic forms that feel playful and interactive. Cards and containers use lg (1rem / 16px) or xl (1.5rem / 24px) border-radius to soften edges without sacrificing visual clarity. Input fields use DEFAULT (0.5rem / 8px) border-radius for a more technical, form-like appearance. Modals and elevated surfaces use xl (1.5rem / 24px) to emphasize their prominence. The rationale: full-radius buttons signal 'tap me' thr

Components

Action Elements Buttons are the primary interaction mechanism and use three distinct color tiers. Button-primary (background: {colors.primary} #5fff94, text: {colors.on-primary} #000000, rounded: full, padding: 12px 24px, height: 44px) is used for primary CTAs like 'Putar' (Play) and 'Mulai' (Start). On hover, transition to button-primary-hover (background: {colors.primary-fixed-dim} #4dd2ff) over 200ms. Button-secondary (background: {colors.secondary} #a896f3, text: #000000, same dimensions) is used for secondary actions like 'Lihat Lebih Banyak' (See More). Button-tertiary (background: {colors.tertiary} #e9f420, text: #000000) is used for tertiary or status-related actions. Button-ghost (background: transparent, border: 1px solid {colors.outline}, text: {colors.on-surface}) is used f

Do's and Don'ts

**Do**

• Do use primary (#5fff94) exclusively for call-to-action buttons and active/focus states—never use it for passive surfaces or body text.
• Do maintain the full-radius (9999px) border-radius on all buttons and chips to reinforce the energetic, playful brand personality.
• Do apply consistent 24px padding (md spacing) inside cards and containers, with 12px (sm) spacing for internal element separation.
• Do use the three-tier button hierarchy (primary green, secondary purple, tertiary yellow) to guide user attention through competing actions.
• Do transition all interactive elements (buttons, cards, inputs) over 200ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, predictable motion.
• Do layer text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels (label-sm) when placed over busy backgrounds to ensure legibility.
• Do use negative letter-spacing (-0.04em to -0.01em) on all headlines to create visual tightness and energy.

**Don't**

• Don't use primary, secondary, or tertiary accent colors as background fills for large surfaces—reserve them for interactive elements only.
• Don't apply sharp corners (0px border-radius) to buttons, cards, or input fields; use full-radius for buttons and lg/xl for containers.
• Don't mix accent colors on a single button or component—each button should use one primary color from the three-tier system.
• Don't use white or light-colored shadows; all shadows must use rgba(0, 0, 0, ...) with opacity between 0.06 and 0.25 to work with the dark theme.
• Don't center-align body copy or list items—left-align is the default for readability; center alignment is reserved for headlines and section dividers.
• Don't exceed a 1280px container max-width on desktop, and don't reduce gutter spacing below 24px on any viewport.
• Don't use the dark surface colors (#0d0c0c, #1b1a1a) for text—always use on-surface (#ffffff) or on-surface-variant (#ededed) for legibility.