| 1 | # Rendering: glassmorphism |
| 2 | |
| 3 | Frosted-glass / soft-UI aesthetic — translucent layered panels, blurred background, soft shadows, depth via transparency. The "modern app UI" rendering — used for modern SaaS, fintech, health-tech, premium app showcases, product launches. |
| 4 | |
| 5 | --- |
| 6 | |
| 7 | ## 1. Style paragraph (paste-ready, 105 words) |
| 8 | |
| 9 | > Modern glassmorphism aesthetic. Composition built on layered semi-transparent panels with frosted-glass blur — each panel reads as a sheet of polished glass floating slightly above a soft gradient background. Panel edges are subtly defined with thin 1px highlight strokes (whitespace at top/left, slight shadow at bottom/right) suggesting refraction. Background is a soft pastel-cool gradient that blurs through the panels. Drop shadows under panels are large and soft (15-25% opacity, generous spread) to create real depth. Interior content of each panel uses crisp solid color shapes and clean typography character. Overall feel is premium, futuristic-friendly, polished — the aesthetic of contemporary fintech and Apple-style product showcases. |
| 10 | |
| 11 | --- |
| 12 | |
| 13 | ## 2. Line, texture, depth |
| 14 | |
| 15 | | Aspect | Treatment | |
| 16 | |---|---| |
| 17 | | Line quality | Thin 1px highlight strokes on panel top/left edges (glass refraction cue) | |
| 18 | | Texture | Frosted blur on panels (gaussian blur ~10-15px over background) | |
| 19 | | Depth | Real layered depth — large soft drop shadows, parallax-suggesting offsets | |
| 20 | | Material | Translucent polished glass on soft gradient background | |
| 21 | | Mood | Premium, polished, futuristic-friendly, optimistic | |
| 22 | |
| 23 | ## 3. Using the deck's HEX values |
| 24 | |
| 25 | glassmorphism treats the deck's HEX as **panel content + background gradient stops**: |
| 26 | |
| 27 | - Background gradient: a soft transition from a lighter tint of `primary` toward `secondary` (e.g., pale blue → pale gray) |
| 28 | - Panel fills: semi-transparent (~40-60% opacity) tints of `primary` or near-white |
| 29 | - Panel content shapes: solid `primary`, with `accent` reserved for the single most-emphasized data point or CTA element |
| 30 | - Avoid heavy saturation — glassmorphism feels best with mid-light tones; if the deck's primary is very dark, use it only in interior content shapes, not in the gradient |
| 31 | |
| 32 | --- |
| 33 | |
| 34 | ## 4. Fewshot prompt snippets |
| 35 | |
| 36 | **Snippet A — fintech product showcase, text_policy: none** |
| 37 | |
| 38 | > Modern glassmorphism product showcase. Soft pastel-cool background gradient transitioning from light tint of primary `#1E3A5F` (about 30% opacity) in the upper-left to near-white `#F8F9FA` in the lower-right. Two layered frosted-glass panels float above — a larger main panel (about 55% of canvas, centered with slight rotation suggesting 3D depth) and a smaller card peeking from behind the main panel. Each panel has subtle 1px white highlight on its top-left edge and soft 20%-opacity drop shadow beneath (generous spread, suggesting real depth). Interior content: clean solid shapes — a stylized chart bar in primary `#1E3A5F`, a small accent gold `#D4AF37` indicator marking one data point. Crisp, polished, premium. Composed as a 600×500 half-page UI showcase with 12% padding. Color values are rendering guidance only — do not display HEX codes as text. NO text or labels anywhere; SVG will overlay copy. |