aero-mint-glass-html-design

Aero Mint Glass HTML Design

Use this skill only as a visual and motion style layer on top of broader frontend design guidance. It must not infer, add, or reshape the user's content, structure, domain, or narrative.

Visual Target

Create an interface that feels like transparent white glass floating in clean morning air: mint and aqua light, soft blur, precise typography, generous breathing room, and a quiet sense of depth. The page should feel polished and luminous without becoming neon, cyberpunk, or generic AI-gradient decoration.

The memorable signature is the combination of:

• pale mint-aqua ambient background
• translucent white glass panels
• large rounded geometry
• very soft green-tinted shadows
• clean dark green ink
• light floating chips and badges
• restrained, slow motion
• one soft 3D or dimensional focal visual when the page needs a hero image

Color And Material

Start from a light surface, then layer depth. Avoid pure white flat pages.

:root {
  --amg-bg: #f5f9f7;
  --amg-mint: #42d55c;
  --amg-aqua: #2fb8ff;
  --amg-amber: #ffb84a;
  --amg-ink: #11231d;
  --amg-muted: #5e726c;
  --amg-panel: rgba(255, 255, 255, 0.84);
  --amg-panel-strong: rgba(255, 255, 255, 0.94);
  --amg-line: rgba(120, 180, 160, 0.22);
  --amg-shadow: 0 16px 40px rgba(34, 78, 63, 0.08);
  --amg-shadow-xl: 0 28px 80px rgba(34, 78, 63, 0.12);
  --amg-radius-lg: 24px;
  --amg-radius-xl: 32px;
}

For the page background, combine a pale base with low-opacity radial gradients and a faint grid. The grid should barely register; it is there to add structure, not decoration.

body {
  color: var(--amg-ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(66, 213, 92, 0.18), transparent 30%),
    radial-gradient(circle at 86% 6%, rgba(47, 184, 255, 0.16), transparent 28%),
    linear-gradient(135deg, #f5f9f7 0%, #eef8ff 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(17, 35, 29, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 35, 29, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 80%);
}

Panels should look bright, thin, and softly blurred:

.amg-panel {
  border: 1px solid var(--amg-line);
  border-radius: var(--amg-radius-xl);
  background: var(--amg-panel);
  box-shadow: var(--amg-shadow);
  backdrop-filter: blur(22px);
}

Typography

Use modern, clean typography. Inter, Noto Sans SC, and system-ui are appropriate when no product typeface is available. Titles can be heavy and slightly tight; body text should be relaxed and readable.

• H1: large, confident, 700-800 weight, slightly tight letter spacing.
• H2: strong but not oversized, around 32-40px on desktop.
• Body: 15-18px, line-height around 1.65-1.9.
• Labels: small, medium weight, often in pill shapes.
• Avoid novelty display fonts, serif editorial drama, and condensed tech fonts.

Shape Language

Keep the entire interface soft and continuous:

• Large surfaces: 24-32px radius.
• Small cards: 20-24px radius.
• Buttons, chips, badges: 999px radius.
• Borders: 1px, translucent, green/aqua-tinted.
• Shadows: broad and low opacity, never black-heavy.
• Icons: thin, rounded, minimal. Use them as interaction cues, not decoration clutter.

If a shape feels sharp, heavy, metallic, or aggressive, it is drifting away from Aero Mint Glass.

Layout Feel

Favor calm composition over dramatic template tricks. The layout can be asymmetric, but it should stay balanced and breathable.

• Use a centered container around min(1180px, calc(100% - 32px)) to min(1240px, calc(100% - 32px)).
• Use generous section spacing, but keep enough structure that the page does not feel empty.
• Let important panels float on the background instead of framing every area with hard section blocks.
• Use a few high-signal chips, compact detail tiles, preview cards, or visual clusters to create rhythm.
• Avoid nested cards unless there is a clear hierarchy and enough padding to preserve air.

Imagery And Decorative Elements

When a hero or focal visual is needed, prefer one soft dimensional asset over many flat decorations. A suitable focal visual can be a soft 3D object, product-like module, luminous device, character, or abstract glass component, as long as it shares the mint-aqua palette and rounded material language.

If no bitmap asset exists, build a CSS/HTML dimensional cluster: stacked translucent panels, floating pills, progress rings, small glowing nodes, and rounded icon tiles. Do not use generic gradient blobs, abstract SVG waves, or random particle fields.

Motion

Motion should feel quiet, slow, and weightless. It should reinforce the glassy floating quality rather than call attention to itself.

Use:

• page entrance: fade in with translateY(10px-18px)
• cards: hover lift of -2px to -4px
• shadows: slightly deeper on hover
• floating accents: very slow vertical drift, 6-10s duration
• buttons: subtle brightness and lift
• progress or highlight elements: smooth width/opacity transitions

Avoid:

• bounce physics
• fast elastic motion
• neon blinking
• large parallax swings
• 3D card flips
• high-frequency particles
• dramatic scroll-triggered choreography

Respect prefers-reduced-motion.

@media (prefers-reduced-motion: no-preference) {
  .amg-float {
    animation: amg-float 8s ease-in-out infinite;
  }

  @keyframes amg-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
}

Buttons And Interactive States

Use one primary gradient treatment at a time. The best primary action is a pill with mint-to-aqua fill, dark ink or white text depending on contrast, and a soft glow.

Secondary actions should stay translucent or lightly outlined. Do not make every button colorful.

.amg-button-primary {
  border: 0;
  border-radius: 999px;
  color: #062017;
  background: linear-gradient(135deg, var(--amg-mint), var(--amg-aqua));
  box-shadow: 0 14px 30px rgba(47, 184, 255, 0.22);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.amg-button-primary:hover {
  transform: translateY(-2px);
  filter: saturate(1.05) brightness(1.02);
  box-shadow: 0 18px 38px rgba(47, 184, 255, 0.28);
}

Do

• Build the page from light, blur, translucency, and soft hierarchy.
• Keep the palette mostly pale mint, aqua, white, dark green ink, and muted green-gray.
• Use CSS variables so the style is coherent.
• Make the background layered but quiet.
• Give panels enough padding to feel airy.
• Use rounded chips and light badges for detail.
• Use one strong visual focus instead of many competing ornaments.
• Keep motion subtle and slow.

Don't

• Do not turn it into a purple-blue AI gradient page.
• Do not use dark cyber glass, neon outlines, or nightclub glow.
• Do not rely on generic gradient blobs as the main visual identity.
• Do not use heavy black shadows or hard gray borders.
• Do not crowd the page with nested white cards.
• Do not use sharp geometric brutalism, metallic chrome, or aggressive angles.
• Do not add flashy animation just because CSS can do it.
• Do not bind this style to a specific content category.

Quick Self-Check

Before finishing, ask:

• Does the page still read as airy mint-aqua glass at a glance?
• Are shadows broad, soft, and green-tinted rather than black?
• Are panels translucent enough to feel light but opaque enough for readability?
• Is motion restrained, slow, and optional?
• Is there a clear focal visual or material moment?
• Did the design avoid generic AI-gradient tropes?
• Did the result preserve the user's supplied content exactly and avoid adding any content category?