# Design Language for gamelicen.se ## Aesthetics and Tone gamelicen.se is a cabinet of curiosities for game licensing -- a playful museum where each exhibit is a bento-box compartment containing a different aspect of game licensing, assembled with the whimsical precision of a board game designer who trained as a fine art curator. The playful aesthetic manifests as surprise: unexpected type pairings, collage imagery that juxtaposes game controllers with 18th-century engravings, and a sepia-nostalgic palette that makes everything feel like a treasured object discovered in a grandfather's study. The ".se" TLD (Sweden) adds a subtle Scandinavian precision to the playfulness. The tone is elegant-sophisticated -- the playfulness never descends into childishness. It is the sophistication of a luxury game collection: hand-stitched leather game boards, ivory chess pieces, cards printed on cotton stock. The site treats game licensing as a subject worthy of beautiful presentation, elevating legal-technical content into something visually desirable. Visual inspiration: the Wunderkammer (wonder cabinets) of 17th-century European collectors; the bento packaging design of Japanese department store food halls; vintage board game boxes from the 1950s with their hand-painted illustrations; the sepia-toned pages of a Victorian patent filing. ## Layout Motifs and Structure The layout uses a **bento-box** grid -- a modular arrangement of rectangular compartments of varying sizes, tightly packed with minimal gaps, creating the appearance of a compartmentalized display case. **Bento-Box Grid:** - Desktop: a CSS Grid with explicit row/column sizing creating 6-8 compartments per visible viewport - Compartment sizes vary: 1x1, 2x1, 1x2, 2x2 units on a base grid of ~200px - Gap: 4px (tight, like the walls of a bento box) - Each compartment has a distinct background treatment within the sepia range **Section Flow:** 1. **The Cabinet Door (Hero):** A single large bento compartment (spanning full width) containing "gamelicen.se" in playfair-elegant type. The background is a collage: overlapping fragments of vintage game illustrations, patent drawings, and typographic specimens, all in sepia tones. 2. **The Collection:** The main bento grid. Each compartment contains a different licensing concept: some have text, some have collage imagery, some have a single large number or keyword. The variety within the uniform grid creates discovery. 3. **The Drawer:** A full-width horizontal strip with a single line of text, breaking the bento rhythm. 4. **The Archive Grid:** A denser bento grid with smaller compartments containing an index of licensing terms. 5. **The Lock:** Final compartment, centered, containing the domain name and a small circuit motif. ## Typography and Palette **Typography:** - **Display / Headlines:** "Playfair Display" (Google Fonts) -- a high-contrast transitional display serif with sharp hairlines and elegant swash potential. Used at 3rem-6rem for the hero and compartment headers. Weight: 700. The playfair-elegant presence creates instant sophistication while remaining readable in the bento compartments. - **Body / Content:** "Nunito Sans" (Google Fonts) -- a clean, rounded sans-serif that pairs well with Playfair's sharpness. Used at 15px/1.6 for body text inside compartments. Weight: 400 for body, 700 for labels. The contrast between elegant serif display and friendly sans body creates the "sophisticated play" duality. - **Accent / Index:** "Playfair Display SC" (Google Fonts) -- small caps variant at 11px, letter-spacing: 0.15em for compartment labels and index entries. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Sepia Dark | Deep brown | #3a2a18 | Primary text, darkest compartment backgrounds | | Sepia Mid | Warm brown | #6a5030 | Secondary text, compartment borders | | Sepia Light | Tan | #c8a878 | Lighter compartment backgrounds, accent | | Parchment | Aged cream | #f0e4d0 | Lightest compartment backgrounds, page base | | Circuit Copper | Metallic warm | #b87840 | Circuit motif elements, hover accents | | Ink Blue | Faded cobalt | #4a6080 | Rare accent -- link color, cross-references | | Sepia Shadow | Dark umber | #2a1a0e | Deep shadows, bento grid gaps | The palette is sepia-nostalgic -- a complete world rendered in the tonal range of antique photographs and aged paper. The circuit copper adds a warm metallic accent that bridges the vintage aesthetic with the tech/gaming content. The ink blue appears only for interactive elements. ## Imagery and Motifs **Collage Imagery:** Select bento compartments contain collage compositions: - Overlapping fragments: a vintage game controller illustration, a patent drawing cross-section, a typographic specimen of the word "LICENSE" in various historical typefaces - Sepia-toned throughout, with CSS filter: sepia(0.8) grayscale(0.3) applied to any source imagery - Collages are CSS-assembled from positioned div elements with background-images, creating layered compositions within each compartment **Circuit Motifs:** The circuit motif bridges gaming technology and licensing bureaucracy: - Thin SVG circuit-board traces (1px strokes in circuit copper #b87840) that run along the edges of bento compartments - Small circuit nodes (4px circles) at compartment intersections - These create a subtle technical layer over the vintage aesthetic **Tilt-3D Interaction:** Bento compartments respond to hover with a tilt-3D effect: - On hover, the compartment applies transform: perspective(800px) rotateX(2deg) rotateY(-3deg) based on cursor position within the compartment - A box-shadow shifts to match the tilt direction - Transition: 300ms cubic-bezier(0.25, 0.8, 0.25, 1) - This creates a tactile quality, as if the compartment is a physical card that can be tilted ## Prompts for Implementation **Full-Screen Narrative Experience:** The bento grid creates an exploratory experience -- the user scans compartments, discovers content in varied formats (text, collage, numbers, keywords), and assembles understanding from fragments. The tight gaps and varied sizes create visual density without clutter. **Bento-Box Grid Implementation:** CSS Grid with explicit grid-template-areas or grid-column/row spans. Each compartment is a grid child with assigned span. The 4px gap is set as grid-gap. Compartment backgrounds alternate between parchment and sepia-light tones. **Tilt-3D Implementation:** JavaScript mousemove event on each compartment. Calculate cursor position relative to compartment center. Map x-offset to rotateY and y-offset to rotateX (inverted). Apply via CSS transform with perspective(800px). Reset on mouseleave. **Responsive Behavior:** On mobile (below 640px), bento grid simplifies to 2 columns with uniform compartment sizes. Tilt-3D disables on touch devices. Collage imagery scales proportionally. **AVOID:** CTA buttons, legal jargon without visual wrapping, pricing tables, corporate photography, modern flat design, neon colors, anything that looks like a legal document. ## Uniqueness Notes **Differentiators from other designs:** 1. **Playful aesthetic with elegant-sophisticated tone:** The collision of play and sophistication is rare -- playful designs (24%) typically have friendly tones, while this one maintains elegance throughout. 2. **Bento-box layout (7% frequency):** One of the few bento-box designs, and the only one that treats compartments as museum display cases rather than dashboard widgets. 3. **Collage imagery in sepia-nostalgic palette:** Collage (9%) combined with sepia-nostalgic (3%) creates a unique visual vocabulary of vintage game-licensing artifacts assembled like curiosity-cabinet specimens. 4. **Circuit motifs on antique surfaces:** The circuit motif (14%) is typically used in tech/futuristic contexts. Placing copper circuit traces on sepia-aged surfaces creates a unique historical-tech fusion. 5. **Tilt-3D on bento compartments (7% frequency):** The tilt pattern applied to grid compartments (rather than cards or images) creates a unique tactile quality for the bento layout. **Documented Seed/Style:** aesthetic: playful, layout: bento-box, typography: playfair-elegant, palette: sepia-nostalgic, patterns: tilt-3d, imagery: collage, motifs: circuit, tone: elegant-sophisticated **Avoided Overused Patterns:** - corporate aesthetic (62%) -- playful (24%) instead - asymmetric layout (94%) -- bento-box (7%) instead - warm palette (100%) -- sepia-nostalgic (3%) instead - parallax patterns (98%) -- tilt-3d (7%) instead - mono typography (98%) -- playfair-elegant (3%) instead - tech motifs (96%) -- circuit (14%) instead - friendly tone (64%) -- elegant-sophisticated (5%) instead - minimal imagery (94%) -- collage (9%) instead