Design Guide - Survivor Platform

This documentation presents the design system used for the Survivor platform. The design draws inspiration from the official website and reuses certain images from it to maintain visual consistency with the brand identity.

🎨 Color Palette

Brand Colors

Our platform uses a sophisticated purple-to-pink gradient theme that works across light and dark modes.

Primary Colors (Light Mode)

Main Brand

• Primary Purple: Main brand color for buttons and key interactive elements
• Primary Text: White text on purple backgrounds

Secondary Elements

• Secondary Pink: For secondary buttons and less prominent elements
• Secondary Text: Dark purple text on pink backgrounds

Background & Content

• Main Background: Light purple-tinted white
• Main Text: Deep purple for excellent readability
• Cards & Popups: Pure white surfaces

Supporting Colors

• Accent Purple: For hover states and highlights
• Muted Background: Light pink for subtle UI elements