Antinrml

Overview

Antinrml is an Indonesian music label that channels the raw energy of underground electronic culture through a bold **Cyberpunk Minimalism** aesthetic. The brand identity merges high-contrast neon accents—specifically a vivid magenta (#b23afe)—against pure black surfaces, evoking the visual language of digital rebellion and avant-garde music production. The UI is deliberately stark and uncompromising: jet-black backgrounds (#000000) provide the canvas, while neon purple and electric blue serve as the only chromatic voices, creating an immersive, almost dystopian atmosphere that commands attention without distraction. The emotional response is one of edgy sophistication—users feel they are entering an exclusive, forward-thinking creative space.

The brand voice is direct, minimalist, and unapologetically bold. Vocabulary skews toward action-oriented language: "Enter Site," "Explore," "Discover." Sentences are short and punchy, avoiding flowery description in favor of stark clarity. The tone is confident without arrogance, inviting without being casual. Example sentence in brand voice: "We amplify the unheard. Enter the collective."

Colors

The color system is built on a **high-contrast, neon-driven palette** designed to evoke the visual language of 1980s–90s cyberpunk and contemporary electronic music aesthetics. **Primary (#b23afe)** is the signature magenta—used exclusively for CTAs, interactive focus states, and brand-defining accents. It appears on buttons, hover states, and neon text effects, commanding visual hierarchy through saturation rather than size. **Secondary (#116dff)** is a bright electric blue, reserved for secondary actions, links, and supporting UI elements; it provides chromatic variety without competing with primary. **Surface (#000000)** is pure black, the dominant background, creating maximum contrast and visual clarity. **On-surface (#ffffff)** is pure white, used for primary body text and UI labels.

Typography

The type system balances utilitarian clarity with dramatic presence. **Display and Headline** levels (72px–48px) use din-next-w01-light, a geometric sans-serif that evokes technical precision and retro-futurism; these sizes are reserved for hero sections and major section breaks, where their angular letterforms command attention. **Title and Body** levels (24px–16px) shift to Arial/Helvetica for maximum legibility and web-safe reliability; these carry the narrative content and must remain scannable even at small sizes. **Label** levels (14px–12px) use the same sans-serif stack with increased letter-spacing (0.01em–0.05em) to enhance readability in dense UI contexts. Font weights are deliberately restrained: 400 for body text, 600 for interactive elements and labels, 700 only for display-le

Layout

The layout system uses a **12-column fixed grid** with a max-width of 1280px, centered on desktop and fluid on mobile. The gutter is 24px between columns, providing breathing room without excessive whitespace. Sections are separated using the **lg spacing token (40px)** for major rhythm breaks, with **md spacing (24px)** for subsection separation and **sm spacing (12px)** for component-level padding. The design favors **generous negative space** around neon accents—a magenta button sits alone in a sea of black, not crowded by competing elements. Container padding follows a 24px–40px range depending on viewport, ensuring content never touches viewport edges. The hero section occupies the full viewport height (100vh) on desktop, with the neon-ringed logo centered and the "Enter Site" CTA pos

Elevation & Depth

Depth is conveyed through **subtle shadow and border systems** rather than layered backgrounds. The base elevation (sm) uses a soft shadow: **box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6)**, applied to cards and modals to lift them slightly from the black surface. Medium elevation (md) introduces a **neon-tinted glow: 0 4px 12px rgba(178, 58, 254, 0.2)**, used on hover states and interactive elements to signal interactivity through color rather than darkness. High elevation (lg) amplifies the glow: **0 16px 40px rgba(178, 58, 254, 0.3)**, reserved for modals and overlays. All surfaces use a **1px s

Shapes

The shape philosophy is **Geometric Precision with Neon Softness**—corners are rounded just enough to feel contemporary, never sharp enough to feel cold. **Buttons and interactive elements** use **rounded.lg (1rem / 16px)** for a balanced, approachable feel; this radius is large enough to soften the geometric aesthetic without introducing organic curves. **Cards and containers** use **rounded.xl (1.5rem / 24px)** to create visual breathing room and a sense of enclosure. **Input fields** use **rounded.DEFAULT (0.5rem / 8px)** for a more utilitarian, technical appearance—smaller radius signals f

Components

Action Elements **Buttons** are the primary interactive surface. Primary buttons use **background: {colors.primary} (#b23afe)**, **color: {colors.on-primary} (#000000)**, **padding: 12px 24px**, **height: 48px**, and **border: 2px solid {colors.primary}**. On hover, the background shifts to **{colors.primary-container} (#d966ff)** with a neon glow: **box-shadow: 0 8px 24px rgba(178, 58, 254, 0.4)**. The transition uses **cubic-bezier(0.37, 0, 0.63, 1) over 200ms** for smooth, predictable motion. Secondary buttons are transparent with a **2px border in {colors.primary}** and text in magenta; on hover, the background fills with **rgba(178, 58, 254, 0.1)** and the border shifts to **{colors.primary-container}**. All buttons must have a minimum touch target of 48px height for accessibility

Do's and Don'ts

**Do**

• Do use the primary magenta (#b23afe) exclusively for CTAs and interactive focus states—it is the brand's signature accent and must never be diluted or overused.
• Do apply neon glow effects (text-shadow: 0 0 10px rgba(178, 58, 254, 0.6)) to headlines and primary CTAs to reinforce the cyberpunk aesthetic; transition these effects over 300ms on hover.
• Do maintain pure black (#000000) as the dominant background—it is the foundation of the brand's high-contrast identity and must never be replaced with dark gray.
• Do use the 12-column grid with 24px gutters and 40px section spacing to create rhythm and breathing room; generous negative space is a core brand principle.

**Don't**

• Don't introduce new accent colors beyond primary (#b23afe) and secondary (#116dff)—the palette is intentionally restrained to maintain visual clarity and brand distinctiveness.
• Don't apply rounded corners larger than 1.5rem (rounded.xl) to cards or containers; excessive softness dilutes the geometric precision of the cyberpunk aesthetic.
• Don't use drop shadows without neon tinting on interactive elements—all hover/focus states must shift from neutral gray shadows to magenta-tinted glows to signal interactivity.
• Don't set body text smaller than 16px or larger than 18px; legibility is non-negotiable, and the neon aesthetic must never compromise readability.