ui/ux

Prompt

# AETHERBRACKETS™ V2 UI — MASTER BUILD PROMPT Build the complete AetherBrackets™ V2 interface as a polished, production-quality tournament platform UI. The interface should feel dark, precise, modern, technical, competitive, and calm. It should look like a serious tournament system rather than a generic dashboard. Every element should feel like it belongs to the same design system. The goal is not to add decoration everywhere. The goal is to create a clear interface where tournament information, account state, bracket progression, verification, and organizer actions are immediately understandable. Build the interface as a complete component system. Every component must work independently, have all of its required states, and remain visually consistent with the rest of the product. --- # 1. VISUAL LANGUAGE Use a very dark foundation with a restrained cyan accent. The visual hierarchy should primarily come from: * spacing * typography * borders * subtle surface differences * controlled shadows * restrained state colours * precise alignment The interface should not look glossy or overloaded. There are three material treatments: ### Glass A translucent panel with a subtle blur. Glass should feel lightweight and elevated. Glass must never be placed directly inside another glass surface. ### Neumorphic A softer raised surface using the dark base material with subtle light and shadow treatment. This treatment is static. ### Skeuomorphic A more physical material treatment used for the champion card. It should feel special because it appears rarely. Only one skeuomorphic treatment should appear on a page. --- # 2. COLOUR SYSTEM Use the established colour roles consistently. The main roles are: * page background * panel surface * cyan accent * win * loss * pending * primary text * muted text * neumorphic base Cyan represents the primary brand/action language. Green represents successful/winning states. Red represents loss, destructive actions, or serious negative states. Amber represents pending/upcoming attention. Muted tones represent inactive or completed information where appropriate. Do not use colour alone to communicate meaning. Whenever colour represents a state, pair it with an icon, label, symbol, weight, or another visible indicator. --- # 3. SPACING AND TYPOGRAPHY Everything should feel deliberately spaced. Avoid cramped layouts. Avoid excessive empty space. Use a consistent spacing rhythm across: * cards * buttons * forms * tables * panels * navigation * tournament information Numbers such as scores, standings, counts, quotas, and statistics should use tabular numerals so they remain visually aligned. Small metadata should remain compact and readable. At very narrow widths, metadata may wrap, but it should wrap intelligently rather than becoming a broken collection of fragments. --- # 4. BUTTONS Create a complete button system. The button styles are: ### Primary Strong cyan action. Used for the main action. ### Secondary Dark panel treatment with a visible border. ### Outline Transparent/minimal surface with visible border. ### Ghost Very subtle action that does not compete with primary controls. ### Danger Red destructive action. Use only when the action itself is destructive or requires confirmation. ### Link Text-based action. Buttons come in: * small * default * large Buttons may contain: * leading icon * text * trailing icon * keyboard shortcut hint Interactive states must include: * default * hover * active * focus * disabled * loading The active state should move only slightly rather than bounce or scale. The loading state must preserve the button's width so the layout does not jump. The focus state

A system prompt was added to support web rendering