Aether Brand Style Guide
← Color Fonts

Aether

A monochrome feature section built for highlighting product capabilities: white type on #050505, a light #F4F4F4 surface for bento cards, numbered JetBrains Mono labels and an "AETHER ™" first viewport signal. Reusable, responsive and production-ready.

Source: designmd.ai/brunopetrovic/aether-the-new-frontier · by @brunopetrovic · MIT

Typography

Inter · JetBrains Mono
Heading system
Inter
Specimen · 500 · 48px · ls 0. Display-lg token 64px / 1.04
Body system
Inter
Body-md 16px · 400 · 1.6
Crafting experiences that elevate, engage, and resonate.
Label system
JetBrains Mono
Label-md 12px · 600 · 1.2. Labels and technical metadata.
Exact families · Inter and JetBrains Mono are the documented fonts and load from Google Fonts as is.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
01-A. 02-B. 03-C. // 2025 // 5K+

Colors

Dark · Monochrome
Primary · Accent#FFFFFF
Secondary#111111
Surface#F4F4F4
Background#050505
Text secondary #A1A1AA Border #27272A

Background #050505 · Surface #F4F4F4 · Text #FFFFFF / #A1A1AA · Border #27272A · Accent #FFFFFF · Ink on surface #111111

Overview

Feature · bento
LayoutFeature section, bento
Content width(not specified)
FramingSubtle borders, light cards
First viewportAETHER ™ as focal signal

Components

One radius language
01-A.

Surface card on the dark canvas.

02-B.

Border #27272A on #050505.

Badge // pillTag // 12px mono
Cardsurface token · subtle border · 8px · 24px
Badgesame radius and border language
Card shadow(not specified)
Gap16px

Buttons

Primary only
Pill radius Control 8px
Backgroundprimary / accent #FFFFFF
Radiuscontrol 8px or pill 9999px
Padding / height(not specified)
Secondary variant(not specified)

Spacing

8px base
03-C. // Archive

Five thousand screens, each one checked at the pixel.

Open archive
Scale
8 base16 gap24 card80 section

Elevation & Depth

Borders, contrast

Depth comes from contrast between roles: a light #F4F4F4 surface against the #050505 canvas, held by subtle #27272A borders. Shadow depth should match the source HTML, which is not included.

canvas #050505
surface #F4F4F4
Border#27272A
Shadow(not specified)

Shapes

Radius family
card 8px
control 8px
pill 9999px
Primary radius8px
RuleButtons, cards, badges share it

Do's and Don'ts

Guardrails

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

Smooth, restrained

Masked reveals, staggered entrance, hover lift, scroll-triggered transitions and ambient movement, all with smooth, restrained easing. The preview approximates the reveal and the stagger; the source gives no timings.

EntranceMasked reveal + stagger
HoverLift
Durations(not specified)
Scroll patternScroll-triggered transitions
Generated from DESIGN.md · design-md-styleguide · Aether
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --color-primary: #FFFFFF;
  --color-secondary: #111111;
  --color-accent: #FFFFFF;
  --color-background: #050505;
  --color-surface: #F4F4F4;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #A1A1AA;
  --color-border: #27272A;
  --font-display: "Inter";
  --font-body: "Inter";
  --radius-card: 8px;
  --radius-control: 8px;
  --radius-pill: 9999px;
  --space-base: 8px;
  --space-gap: 16px;
  --space-card-padding: 24px;
  --space-section-padding: 80px;
}
@theme {
  --color-primary: #FFFFFF;
  --color-secondary: #111111;
  --color-accent: #FFFFFF;
  --color-background: #050505;
  --color-surface: #F4F4F4;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #A1A1AA;
  --color-border: #27272A;
  --font-display: "Inter";
  --font-body: "Inter";
  --radius-card: 8px;
  --radius-control: 8px;
  --radius-pill: 9999px;
  --spacing-base: 8px;
  --spacing-gap: 16px;
  --spacing-card-padding: 24px;
  --spacing-section-padding: 80px;
}
{
  "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"
  }
}
---
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.