---
version: "alpha"
name: "Aether"
description: "Aether New Feature Section is designed for highlighting product capabilities and value points. Key features include reusable structure, responsive behavior, and production-ready presentation. It is suitable for component libraries and responsive product interfaces."
source: "https://designmd.ai/brunopetrovic/aether-the-new-frontier"
author: "@brunopetrovic"
license: "MIT"
colors:
  primary: "#FFFFFF"
  secondary: "#111111"
  accent: "#FFFFFF"
  background: "#050505"
  surface: "#F4F4F4"
  text-primary: "#FFFFFF"
  text-secondary: "#A1A1AA"
  border: "#27272A"
typography:
  display-lg:
    fontFamily: "Inter"
    fontSize: "64px"
    fontWeight: 500
    lineHeight: "1.04"
    letterSpacing: "0"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.6"
  label-md:
    fontFamily: "JetBrains Mono"
    fontSize: "12px"
    fontWeight: 600
    lineHeight: "1.2"
rounded:
  card: "8px"
  control: "8px"
  pill: "9999px"
spacing:
  base: "8px"
  gap: "16px"
  card-padding: "24px"
  section-padding: "80px"
components:
  card:
    background: "Use the surface token with subtle borders and HTML-matched shadow depth"
    radius: "{rounded.card}"
  button:
    background: "Use primary or accent colors for the main action"
    radius: "Use the control or pill radius based on the source HTML"
---

## Overview

Aether New Feature Section is designed for highlighting product capabilities and value points. Key features include reusable structure, responsive behavior, and production-ready presentation. It is suitable for component libraries and responsive product interfaces.

Visible copy in the source reference: "AETHER ™", a nav with Vision, Archive, Studio and Contact, and numbered mono labels such as "01-A. EST. 2025 // Crafting experiences that elevate, engage, and resonate.", "02-B. bridging the space between bold concepts and digital reality." and "03-C. PIXEL PERFECT // 5K+".

Tags: feature, section, animated, bento.

## Composition

The attached HTML reference is the source of truth (it is not included in the download). Keep its visible hierarchy, first-screen composition, section rhythm, density and interaction tone before adapting copy or content. The key visible heading is "AETHER ™".

## Colors

Dark mode. The palette anchors on primary #FFFFFF, secondary #111111, accent #FFFFFF, background #050505, surface #F4F4F4 and text-primary #FFFFFF. Keep background, surface, text and border roles distinct so generated layouts keep the same contrast pattern as the source.

- **Primary (#FFFFFF)** and **Accent (#FFFFFF):** main action, headline type.
- **Secondary (#111111):** near-black, the ink on light surfaces.
- **Background (#050505):** page canvas.
- **Surface (#F4F4F4):** light card surface.
- **Text primary (#FFFFFF)**, **Text secondary (#A1A1AA)**.
- **Border (#27272A):** subtle card and control borders.

## Typography

- **Display:** Inter 64px, 500, 1.04 line height, 0 letter-spacing.
- **Body:** Inter 16px, 400, 1.6 line height.
- **Label:** JetBrains Mono 12px, 600, 1.2 line height. Labels and technical metadata use the mono face.

## Layout

Keep spacing deliberate and stable. Follow the grid direction, max-width behavior, card density and responsive stacking of the source HTML. Do not replace distinctive source structures with generic SaaS sections.

- **Base:** 8px.
- **Gap:** 16px.
- **Card padding:** 24px.
- **Section padding:** 80px.
- Max width and column count: (no especificado).

## Elevation & Depth

Cards use the surface token with subtle borders and shadow depth matched to the HTML. Shadow values: (no especificado).

## Shapes

- **Card:** 8px.
- **Control:** 8px.
- **Pill:** 9999px.

Buttons use the control or the pill radius depending on the source HTML. Buttons, cards and badges share one radius and border language.

## Components

Cards, buttons, badges, navigation and repeated blocks keep the source geometry, border treatment and hover feel.

- **Card:** surface token, subtle borders, HTML-matched shadow depth, 8px radius.
- **Button:** primary or accent color for the main action, control (8px) or pill radius.
- Exact component recipes (padding, heights, hover values): (no especificado).

## Do's and Don'ts

### Do
- Preserve the first viewport signal, focal object and visual density.
- Keep buttons, cards and badges aligned to the same radius and border language.

### Don't
- Flatten the source into a generic card grid.
- Swap the color mode unless the source clearly supports it.

## Motion

Keep the existing motion cues: masked reveals, staggered entrance, hover lift, scroll-triggered transitions and ambient movement. Easing stays smooth and restrained. Durations and easing curves: (no especificado).

## WebGL & Effects

If the source includes canvas, WebGL, Three.js, gradients, particles or atmospheric effects, rebuild them as supporting layers behind the content, performant, responsive and secondary to the interface. The source does not say which effect is present: (no especificado).

## HTML notes

Inter and JetBrains Mono are the documented families and load from Google Fonts as is. Original creator per the source: Sourasith Phomhome (@madebysourasith), from Neuform featured templates.

Source: https://designmd.ai/brunopetrovic/aether-the-new-frontier · by @brunopetrovic · MIT License. Published there with the subtitle "The New Frontier". Converted to this format keeping the original notice.