SQUIRCLE GAMES — Fully Responsive High Contrast Design
A high-contrast, 'Old World luxury' meets modern minimalist design system. It features an earthy, organic palette of cream, charcoal, burnt orange, and olive green, paired with sophisticated editorial typography. Optimized for premium retail, artisan brands, boutique hospitality, and heritage-focused digital experiences. The layout utilizes asymmetric bento grids, horizontal scrolling product shelves, and immersive hero sections with film-grain textures and squircle-based geometric accents.
Summary
SQUIRCLE GAMES is a sophisticated, heritage-driven design system characterized by its warm earthy tones (#F5EEE0, #C85A17), high-contrast serif typography (Cormorant Garamond), and tactile textures. It balances traditional craftsmanship vibes with modern responsive layouts, using 'squircles' as a primary geometric motif.
Style
Editorial heritage style using a layered approach: organic textures (grain, diagonal lines), fluid typography (clamp scales), and a deep earthy palette. It relies on smooth cubic-bezier transitions and sophisticated serif pairings (Cormorant Garamond & DM Serif Text) against clean geometric sans-serif UI elements (Jost).
Layout & Structure
Modular, responsive layout structure moving from high-impact immersive hero sections to functional asymmetric grids and horizontal-scroll product shelves.
Header & Ticker
Hero Section
Asymmetric Collection Grid
Product Shelf
Spotlight/Narrative Section
Footer
Components
Interactive Ghost Button
A sophisticated CTA with a sliding background fill on hover.
Numbered Feature Card
Minimalist card with a large background numeral.
Squircle Logo Icon
The signature brand mark of the system.
Special Notes
MUST: Maintain the grain texture for the artisan feel. MUST: Use Cormorant Garamond for all emotive/storytelling text and Jost for all utility/UI text. MUST: Use the specific bezier curve (0.16, 1, 0.3, 1) for all interactive elements. DO NOT: Use standard sharp corners; always prefer the 'Squircle' (30% radius) for branding elements. DO NOT: Use pure black; always use #2B2620 for text and shadows.