ui/_theme.scss
// Shared look and feel for every Breakout UI panel.
// Each .razor.scss @imports this file, so all the colours and fonts live in one place.
// Change a value here and it updates across every screen.
// Fonts
$font-display: "Baloo 2", Poppins, sans-serif; // headings, scores, and buttons
$font-body: Poppins, sans-serif; // labels and smaller text
// Core palette
$ink: #2B2440; // dark colour for outlines, borders, shadows, and most text
$cream: #F6ECD4; // warm background and panel fill
$sand: #E7DDC6; // muted tan for avatars, tags, and empty life dots
$sand-deep: #b3a988; // slightly darker tan for the empty-dot border
$white: #ffffff;
// Accent colours
$green: #46D07E; // play buttons
$gold: #FFC93C; // stars and the level chip
$gold-deep: #C9A227; // the "best score" label
$red: #FF5D5D; // badges and life dots
$blue: #4A9BFF; // classic mode and the selected tab
$purple: #9B7BFF; // arcade mode
$orange: #FF9E45; // weekly mode
$highlight: #FFF3C4; // your own leaderboard row and the score flash
$muted: #6A6280; // secondary, less important text
// Damage flash effect
$damage-glow: #CD1919; // red glow around the screen edge when you lose a life
$damage-tint: #BE1414; // faint red wash over the whole screen at the same time