# Design Language for gabs.review ## Aesthetics and Tone gabs.review is a holographic review board where evaluations of value (gabs = price in Korean) hover in mid-air as luminous cards, each review a translucent hologram rotating slowly in a dark exhibition space. The holographic aesthetic creates an atmosphere of floating, intangible assessment -- reviews are not fixed documents but shimmering, dimensional projections that shift perspective as the user scrolls. Every card catches light differently, every text block has depth, and the background blurs behind content like looking through frosted glass at a neon city. The tone is energetic -- reviews are presented with the excitement of discovery, each one a verdict delivered with conviction and velocity. Sentences are punchy. Conclusions are bold. The oversized-display typography ensures that key judgments dominate the viewport with the authority of a billboard, while the card-grid layout allows rapid scanning of multiple reviews simultaneously. Visual inspiration: the holographic heads-up displays in Iron Man's workshop; the review cards in a design portfolio presented on a lightbox; the bokeh-heavy photography of Tokyo street signs at night; the elastic, physics-based animations of Apple's iOS card interfaces. ## Layout Motifs and Structure The layout is a **card-grid** -- a responsive grid of review cards, each a holographic surface with depth, glow, and dimensionality. **Card-Grid Architecture:** - Desktop: 3-column grid, 20px gap, max-width 1200px centered - Each card: min-height 240px, border-radius: 12px (the only design with rounded cards -- holographic surfaces read better with soft edges) - Card surfaces: semi-transparent (#1a1a2e at 80% opacity) with backdrop-filter: blur(16px) and a subtle holographic border-gradient - Cards have box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), creating floating depth **Section Flow:** 1. **The Projection (Hero):** 100vh. "GABS.REVIEW" in oversized-display type (10rem) with a high-contrast glow effect. Below: a subtitle. The background is a soft bokeh pattern -- CSS-generated circles of varying sizes and opacities. 2. **The Board:** The main card-grid. 9-12 review cards, each containing a review summary with a headline rating, body text, and a small floating-elements motif (small geometric shapes that orbit the card edges). 3. **The Verdict:** A full-width section breaking the grid. A single massive review in large type, the "headline review" that represents the site's definitive assessment. 4. **The Gallery:** A second card-grid with smaller cards (mini-reviews), denser arrangement (4 columns). 5. **The Stamp:** Domain name centered, with floating holographic geometric shapes orbiting it. ## Typography and Palette **Typography:** - **Display / Headlines:** "Outfit" (Google Fonts) -- a geometric sans with clean, modern proportions perfect for large display. Used at 4rem-10rem for hero text and verdict headlines. Weight: 800. The oversized-display approach means headlines are environmental events -- they fill the viewport edge to edge at hero scale. - **Body / Card Content:** "Inter" (Google Fonts) -- the definitive interface sans-serif. Used at 15px/1.6 for card body text. Weight: 400 for body, 700 for rating labels. Inter's tight metrics work perfectly inside card containers. - **Accent / Ratings:** "Outfit" at weight 900, used at 3rem for numerical ratings or one-word verdicts within cards. These large accent numbers/words are the visual anchor of each card. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Deep Space | Dark blue-violet | #0a0a1e | Page background | | Card Surface | Dark glass | #1a1a2e | Card backgrounds (80% opacity with blur) | | Holographic White | Bright white | #f0f0ff | Primary text on dark, headline text | | Holographic Violet | Electric purple | #7c3aed | Primary accent, card border-glow, rating highlights | | Holographic Cyan | Bright teal | #06d6a0 | Secondary accent, positive review indicators | | Holographic Rose | Warm pink | #ff6b9d | Tertiary accent, emphatic review highlights | | Bokeh Warm | Golden circle | #ffd166 | Bokeh background circles, floating-element color | | Text Card | Pale lavender | #d0d0e8 | Card body text | | Text Muted | Dim violet | #6060a0 | Metadata, secondary card information | The palette is high-contrast -- bright, saturated accent colors on very dark backgrounds. The holographic effect comes from the combination of semi-transparent card surfaces, backdrop blur, and multi-colored accent glow that shifts across cards. ## Imagery and Motifs **Bokeh Background:** The page background features CSS-generated bokeh: - 30-50 circular radial-gradients of varying sizes (40px-200px diameter) - Colors: golden (#ffd166 at 8% opacity), violet (#7c3aed at 5%), cyan (#06d6a0 at 5%) - Positioned randomly across the viewport via CSS custom properties - Very subtle -- they create an atmospheric depth behind the cards without competing for attention **Floating-Elements Motifs:** Small geometric shapes (circles, triangles, squares, 8-16px) in holographic colors float near card edges: - Each card has 2-3 floating elements positioned absolutely near its corners - Elements have CSS @keyframes animations: gentle floating motion (translateY ±10px over 3-5 seconds, with slight rotation) - Colors: violet, cyan, rose, golden -- matching the card's accent - These create the impression of holographic artifacts orbiting the review cards **Elastic Animation:** All card interactions use elastic easing: - On hover: cards lift (translateY: -8px) with an elastic overshoot (cubic-bezier(0.34, 1.56, 0.64, 1), 400ms) - On scroll reveal: cards spring in from opacity: 0, scale: 0.95 to opacity: 1, scale: 1 with elastic easing over 600ms - The elastic quality makes interactions feel physical -- cards have mass and bounce when they land - Stagger between cards on reveal: 80ms ## Prompts for Implementation **Full-Screen Narrative Experience:** The card-grid creates a review board that the user scans and explores. The holographic depth effects (backdrop blur, glow, floating elements) create a three-dimensional exhibition space. The hero section's enormous typography demands attention before the user enters the review grid below. **Holographic Card Implementation:** Cards: background: rgba(26, 26, 46, 0.8); backdrop-filter: blur(16px); border: 1px solid rgba(124, 58, 237, 0.3). On hover, border-color brightens and box-shadow gains a colored glow: box-shadow: 0 8px 32px rgba(124, 58, 237, 0.3), 0 2px 8px rgba(0, 0, 0, 0.4). **Floating Elements Implementation:** For each card, create 2-3 small divs positioned absolutely around the card edges. Apply @keyframes for vertical floating (translateY oscillation) and slight rotation. Use different animation-duration values for each element (3s, 4s, 5s) to prevent synchronized motion. **Responsive Behavior:** On mobile (below 640px), card grid becomes single column. Cards maintain holographic effects. Hero text scales to 4rem. Floating elements reduce to 1 per card. Bokeh background simplifies to fewer, larger circles. **AVOID:** Star ratings (conventional review-site cliche), comparison tables, user avatars, timestamp-heavy interfaces, corporate photography, muted/pastel palettes, anything that looks like Yelp or Amazon reviews. ## Uniqueness Notes **Differentiators from other designs:** 1. **Holographic aesthetic for a review platform:** Holographic (11%) is never used for review/evaluation content elsewhere. The shimmering, dimensional quality of holograms becomes a metaphor for the multi-perspective nature of reviews. 2. **Card-grid with holographic depth effects (14% for card-grid):** While card grids exist, holographic glassmorphic cards with backdrop blur and colored glow create a fundamentally different visual quality -- cards as light projections rather than surfaces. 3. **Oversized-display typography at 10rem hero scale:** The extreme scale of the hero text (larger than most designs in the collection) makes the site name an environmental feature rather than a label. 4. **Elastic animation as physics simulation (7% frequency):** The elastic pattern creates a consistent physics-based feel -- every interaction has overshoot and settle, as if the interface operates in a world with different gravity. 5. **Floating-elements motifs as holographic artifacts (1% frequency):** Small geometric shapes floating near card edges create a unique visual effect of holographic interference patterns. **Documented Seed/Style:** aesthetic: holographic, layout: card-grid, typography: oversized-display, palette: high-contrast, patterns: elastic, imagery: bokeh-background, motifs: floating-elements, tone: energetic **Avoided Overused Patterns:** - corporate aesthetic (62%) -- holographic (11%) instead - asymmetric layout (94%) -- card-grid (14%) instead - warm palette (100%) -- high-contrast (27%) instead - parallax patterns (98%) -- elastic (7%) instead - mono typography (98%) -- oversized-display instead - tech motifs (96%) -- floating-elements (1%) instead - friendly tone (64%) -- energetic (9%) instead - minimal imagery (94%) -- bokeh-background instead