✨ Live Brand Book Concept: This style guide operates directly using CSS variables. Use the "Toggle Dark Mode" button in the navigation bar to see how the site structure transitions smoothly from an airy white theme to a sleek charcoal workspace while maintaining the perfect high-contrast casino felt board.
1. Color Palette & Functional Tokens
Our design system relies on a curated set of functional colors and HSL tokens. Spanning both light/dark wrappers and a premium green casino table background.
Green Felt (Center)
var(--felt-color-center) #165e38
Green Felt (Edge)
var(--felt-color-edge) #0a3d24
Heart/Diamond Red
var(--suit-red) #e11d48
Spade/Club Black
var(--suit-black) #0f172a
Royal Gold Accent
var(--accent-gold) #d97706
Outer Shell Background
var(--bg-shell)
2. Typography
We use Google Fonts: Outfit for strong geometric UI headings/branding, and Inter for clean, readable body copy, rules, and card numbers.
Brand Title Heading (Outfit Bold 800)
Solitaire Online
Section Heading (Outfit SemiBold 700)
1. Color Palette & Tokens
Body Text (Inter Regular 400)
Solitaire is a single-player card game where the goal is to build up four foundation stacks by suit from Ace to King. Players arrange cards in seven tableau columns in descending order with alternating colors.
3. Interactive UI Elements
Our design outlines button variants spanning site-level interactions and in-game control panels.