NIOMI AU

Overview

NIOMI AU is an Australian organic hair care brand that delivers premium, cruelty-free products with a minimalist, architectural aesthetic. The design system embodies 'Refined Minimalism'—a movement that strips away ornamentation to reveal essential form and function. The UI prioritizes clarity and elegance through a restrained palette of pure white (#ffffff), deep charcoal (#121212), and a signature teal-green accent (#108474) that signals premium quality and natural ingredients. The brand voice is confident yet approachable: precise, informative, and never condescending. Example: 'Organic shampoo formulated with vanilla and natural botanicals—luxe, effective, and kind to your hair.'

The design philosophy rejects unnecessary decoration in favor of generous white space, refined typography in Montserrat, and strategic use of the secondary teal accent to guide user attention. Every interaction—from button hover states to form focus rings—is deliberate and purposeful. The system serves a global audience seeking premium, ethically-sourced hair care, and the interface reflects that aspiration through restraint and sophistication.

Colors

The NIOMI AU color system is built on a foundation of high-contrast, accessible neutrals paired with a distinctive secondary accent. Primary (#121212) is the deep charcoal used for all body text, navigation, and primary call-to-action buttons—it conveys authority and premium positioning. On-primary (#f3f3f3) is applied to text within primary buttons for maximum legibility at 16px body size. Surface (#ffffff) provides the clean, minimal canvas; surface-container tokens (#eeeeee to #cccccc) create subtle depth for cards, inputs, and hover states without visual noise.

Secondary (#108474), a sophisticated teal-green, is reserved for accent elements: secondary buttons, badges, links, and interactive highlights. This color appears in the review widget stars and select UI accents, signaling the

Typography

The NIOMI AU typography system uses Montserrat exclusively—a geometric sans-serif that conveys modern sophistication and approachability. Display (60px, 400 weight, -0.02em letter-spacing) anchors hero sections with restrained elegance; headline-lg (40px, 400 weight) introduces major sections without visual aggression. Body-md (16px, 400 weight, 0.06rem letter-spacing) is the primary reading size, set with 24px line-height (1.5x) for comfortable scanning. Label-md (14px, 600 weight) is applied to buttons and form labels, providing visual distinction through weight rather than size.

The system avoids excessive weight variation—primarily using 400 (regular) and 700 (bold) to maintain visual calm. Letter-spacing is applied consistently at 0.06rem for body text and 0.01em for labels, creating

Layout

NIOMI AU uses a 12-column grid with a max-width of 1280px (989px observed in production), centered with symmetric margins. The layout philosophy is 'breathing space'—sections are separated by lg spacing (40px) on desktop, reducing to md spacing (24px) on mobile. The header uses 20px padding (50px horizontal on desktop), creating a clean frame around navigation and logo. Container padding follows the gutter token (24px) for consistent margins between content and viewport edges.

White space is treated as a design element, not wasted space. Product cards and content sections use 0px border-radius and minimal shadows (0 3px 8px rgba(0, 0, 0, 0.15) only on elevated surfaces), allowing the grid structure and typography to create visual rhythm. Input fields use 22px vertical padding (8px top, 22

Elevation & Depth

Depth in NIOMI AU is achieved through subtle shadow and surface-container layering rather than dramatic drop shadows. The elevation system uses three levels: Level 1 (Base) has no shadow—the white surface (#ffffff) is the foundation. Level 2 (Cards, Inputs) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffused shadow that suggests a thin layer above the base. Level 3 (Modals, Popovers) uses box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), a slightly larger blur radius (16px vs 8px) and vertical offset (8px vs 3px) to convey greater separation.

Alternatively, elevation is con

Shapes

NIOMI AU embraces 'Architectural Precision'—a philosophy that uses sharp corners and geometric forms to convey premium quality and intentional design. The default border-radius is 0px (sharp corners) for cards, inputs, and most surfaces, reflecting the brand's minimalist, architectural aesthetic. Buttons are the exception: they use rounded: full (9999px, rendered as 41px in CSS) to create a pill shape that softens the interface and invites interaction. This contrast—sharp cards paired with rounded buttons—creates visual interest while maintaining clarity.

Badges use rounded: full (9999px) to

Components

Action Elements Buttons are the primary interaction mechanism and use a pill shape (rounded: full, 41px radius) to stand out from the minimal card system. Button-primary uses backgroundColor: rgb(18, 18, 18) with textColor: rgb(243, 243, 243), padding: 0 30px, and height: 48px. On hover, background shifts to primary-container (rgb(80, 80, 80)) with a smooth 200ms transition. Button-secondary mirrors the primary button but uses backgroundColor: rgb(255, 255, 255) with textColor: rgb(18, 18, 18) and a 1px border at primary. Button-tertiary (for secondary actions like 'Contact Us') uses transparent background with textColor: secondary (#108474) and a 1px border at secondary; on hover, backgroundColor becomes secondary-container (#d4f0eb).

Containers & Surfaces Cards use 0px border-ra

Do's and Don'ts

**Do**

• Do use sharp 0px corners for cards, inputs, and surfaces to reinforce the architectural, premium aesthetic—reserve rounded: full exclusively for buttons and badges.
• Do apply the secondary teal (#108474) sparingly to accent links, badges, and secondary buttons; it should never dominate the interface.
• Do maintain 40px (lg spacing) between major sections on desktop and 24px (md spacing) on mobile to preserve breathing room and visual clarity.
• Do use Montserrat 400 weight for body text and 700 weight for labels; avoid intermediate weights to keep the type system clean and predictable.
• Do apply subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) only to elevated surfaces like modals; cards at rest should have no shadow.

**Don't**

• Don't use rounded corners on cards or inputs—the sharp aesthetic is core to NIOMI AU's architectural identity and differentiates it from softer, more playful brands.
• Don't apply the primary charcoal (#121212) as a background color; it should be reserved for text, buttons, and interactive elements only.
• Don't mix border-radius values; use only 0px (sharp) or 9999px (full pill); intermediate values like 4px or 8px dilute the design system's precision.
• Don't apply drop shadows to every element; shadows should be used strategically to create hierarchy, not as a default treatment.
• Don't exceed 2 font weights (400 and 700) in a single layout; weight variation should signal hierarchy, not decoration.