| 1 | # Visual style: glassmorphism |
| 2 | |
| 3 | Frosted-glass SaaS — translucent layered panels, flowing gradient light, floating depth on a dark field. Future-tech, weightless, premium. For modern SaaS, fintech, health-tech, product launches, AI demos. |
| 4 | |
| 5 | --- |
| 6 | |
| 7 | ## 1. Shape & decoration |
| 8 | |
| 9 | - Shape language: visibly rounded translucent glass panels (low fill-opacity over the dark field) with bright hairline edges; layered, floating cards that imply blur and frost. |
| 10 | - Composition geometry: one hero glass panel set off-axis over a radial bloom; overlapping translucent discs building the focal cluster; a large glass ring encircling the key metric; panels stepped in depth to imply sequence; a diagonal light beam crossing the dark field. |
| 11 | - Decoration: soft radial light blooms in the background; thin luminous edge highlights along panels; restrained — the glass material is the decoration, not added ornament. Realize the radial bloom / glow halo as a `<circle>` / `<ellipse>` with a `<radialGradient>` fill, never a `rect rx=w/2` standing in for it. |
| 12 | - Whitespace: dark negative space reads as depth; let panels float on it with room to breathe. |
| 13 | |
| 14 | ## 2. Typography character |
| 15 | |
| 16 | - Clean modern sans; regular with selective bold; airy. Exact Light/Black requires a user-confirmed installed face. Headlines can carry a luminous gradient on the dark field. |
| 17 | |
| 18 | > Families are chosen at confirmation `g`; this style asks for a clean, modern, airy sans *character*. This governs editable native text; decorative-lettering eligibility remains a separate carrier decision. |
| 19 | |
| 20 | ## 3. Using the deck's colors |
| 21 | |
| 22 | - Dark field; the deck's colors read as luminous gradients flowing across panels and titles, low-opacity glass tints, and a subordinate neon accent. Color behaves like light through glass, not flat fill. |
| 23 | - Depth and hierarchy come from how brightly the glass glows, not from heavy saturation. |
| 24 | |
| 25 | > HEX values come from confirmation `e`; this style only governs the translucent-glass, luminous-gradient discipline — it names no colors. |
| 26 | |
| 27 | ## 4. Texture / elevation |
| 28 | |
| 29 | - Depth via translucency, layering, bright edge highlights, and soft background glow — not hard drop shadows. Smooth multi-stop gradients are intrinsic here (the one style where generous gradient use is on-brand); keep them luminous, not muddy. |
| 30 | |
| 31 | ## 5. Paired image-rendering |
| 32 | |
| 33 | `glassmorphism` — frosted translucent panels / soft-gradient imagery matching the glass surfaces. |
| 34 | |
| 35 | ## 6. Illustration propensity |
| 36 | |
| 37 | **sparse** — translucent panels, gradient light, and floating depth lead. Use illustration selectively within, behind, beside, or across the glass layers when it improves composition without obscuring their hierarchy. An explicit user request wins either way, and `image_usage: none` writes no illustration rows. |
| 38 |