Overview
The Competitive Knowledge Arena Rule. FantasyWiki should feel like a tactical game board, not a passive dashboard. The visual system is strategic, energetic, and clear, with gameplay urgency carried by hierarchy and action focus rather than decorative noise.
The Confident Clarity Rule. Surface key decisions fast, keep interaction friction low, and preserve readability in both light and dark modes.
Colors
The League Green Rule. League Green (#1e7e50) is the core action color for primary affordances and selected states. Its lighter and darker variants tune emphasis without changing hue identity.
The Wiki Gold Rule. Wiki Gold (#f5c842) marks reward, ranking, and prestige moments. It is an accent, not a default background fill.
The Paper Sage Neutral Rule. Paper/sage neutrals (#fbfbf7, #f0f5f0, #171f1b, #737f73) keep the interface readable and game-like while avoiding sterile monochrome.
Typography
The Editorial-Gameplay Pairing Rule. Use Libre Baskerville for display/headline/title moments to reinforce a knowledge-first personality, and Source Sans 3 for body/label text to keep controls and data scannable.
The Contrast Hierarchy Rule. Maintain strong role separation between display/headline/title/body/label styles so competitive signals are immediately legible.
Elevation
The Layered-Light Rule. The system is mostly flat, with selective lift for modal and state emphasis. Shadows stay soft and sparse, supporting hierarchy rather than visual effect.
Components
The Game-Ready Controls Rule. Buttons, cards, and interactive surfaces should feel confident and game-ready: rounded corners, compact spacing, clear hover/focus responses, and immediate action readability.
The State Visibility Rule. Error, loading, and empty states must be explicit, icon-supported, and actionable (retry, navigate, or next-step CTA).
Do's and Don'ts
Do design for strategy legibility, decisive actions, and persistent league context.
Do keep competitive energy visible while preserving calm readability.
Don't make the UI feel boring or static.
Don't use generic "for sale" marketing templates or sterile corporate dashboard tropes.