LOUD

Overview

LOUD is a digital product studio rooted in the aesthetic of **Fluid Brutalism**—a design philosophy that marries the stark, uncompromising geometry of brutalist architecture with the organic, flowing motion of 3D fluid simulations. The brand serves ambitious companies seeking to transform complex digital challenges into visceral, memorable experiences. The UI evokes a sense of controlled chaos: a deep black canvas (#000000) hosts flowing, iridescent 3D abstractions rendered in real-time, while crisp white typography (#ffffff) cuts through with surgical precision. The emotional response is one of technological confidence—the user feels they are interfacing with a studio that understands both the poetry of motion and the discipline of engineering.

The voice is direct, unpretentious, and technically grounded. LOUD speaks in short, declarative sentences: "We make digital products." "Think. Design. Develop." The vocabulary avoids marketing clichés; instead, it privileges clarity and specificity. The brand personality is that of a Milan-based collective of makers who view design as a craft requiring equal parts artistic vision and technical rigor. Example sentence in the brand's voice: "Your product deserves a canvas that moves with intention—not decoration, but communication."

Colors

The color system is deliberately monochromatic at its core, with a single accent layer for interactive states and error conditions. **Primary (#ffffff)** is the dominant interactive color, used on all CTAs, active navigation states, and primary text. It commands attention through contrast against the black surface, never through saturation. **On-Primary (#000000)** ensures legibility when primary is used as a background. **Secondary (#4e71ff)** is a deep, desaturated blue reserved for secondary actions, focus rings, and data visualization accents—it appears infrequently but signals technical sophistication. **Tertiary (#e40014)** is a vivid red used exclusively for error states, warnings, and critical alerts; its high saturation makes it unmissable without feeling garish. The surface stack

Typography

The type system uses **DM Sans** as the primary typeface—a geometric, highly legible sans-serif that conveys both modernity and accessibility. Display sizes (72px, 700 weight, -0.04em letter-spacing) are reserved for hero statements and major section headings, where the negative letter-spacing tightens the letterforms into a confident, almost architectural presence. Headline-lg (48px, 600 weight) and Headline-md (32px, 600 weight) establish visual hierarchy for subsections and card titles. Body text (16px–18px, 400 weight, 24–28px line-height) maintains generous leading (1.5x) to ensure readability over the dark background and to give breathing room to longer passages. **DM Mono** (14px, 400 weight) is used for code snippets, timestamps, and technical labels, reinforcing the studio's engin

Layout

The page layout follows a **fluid, full-bleed grid** with a 12-column structure that collapses to 4 columns on mobile. The container max-width is 1280px, but hero sections and background animations extend edge-to-edge to maximize the impact of the 3D fluid canvas. Spacing is semantic: **lg (40px)** separates major sections, **md (24px)** creates breathing room between cards and components, and **sm (12px)** is used for internal padding within buttons and input fields. The gutter is 40px on desktop, reducing to 24px on tablet and 16px on mobile. White-space is treated as a design material—the dark background means that empty space reads as intentional and sophisticated rather than sparse. Navigation and header elements use a fixed positioning strategy with a z-index hierarchy (header: z-100

Elevation & Depth

Depth in LOUD's design system is achieved through **layered shadows and subtle background shifts** rather than bright highlights or glassmorphism. The elevation scale uses three levels: **sm (0 1px 2px rgba(0, 0, 0, 0.06))** for subtle dividers and disabled states; **md (0 3px 8px rgba(0, 0, 0, 0.15))** for standard cards and popovers; **lg (0 8px 24px rgba(0, 0, 0, 0.25))** for modals and elevated overlays. Each shadow is soft and spread, never sharp, to complement the fluid motion of the background. Interactive elements (buttons, inputs) do not use shadows on their default state; instead, th

Shapes

The shape philosophy is **Geometric Minimalism**—sharp, intentional corners that echo the precision of the brand's technical foundation. **Border-radius: 0.5rem (8px)** is the default for buttons, inputs, and small components, providing just enough softness to feel contemporary without sacrificing the architectural sharpness. **Border-radius: 1rem (16px)** is used for cards and larger containers, where the slightly increased radius creates visual breathing room. **Border-radius: 9999px** is reserved for badges, pills, and circular indicators where a fully rounded appearance is semantically app

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants: **Primary** (solid white background, black text, 8px 16px padding, 40px height, 0.5rem radius), **Secondary** (transparent background, white text, 1px white border, 8px 16px padding, 40px height), and **Ghost** (transparent background, white text, no border, 8px 16px padding, 40px height). All buttons use `transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1)` to smoothly animate state changes. On hover, Primary buttons shift to `backgroundColor: #d0d0d0` (primary-fixed-dim), Secondary buttons gain a white border and `backgroundColor: rgba(255, 255, 255, 0.08)`, and Ghost buttons gain `backgroundColor: rgba(255, 255, 255, 0.08)`. Focus states add a 3px ring of `rgba(255, 255, 255, 0.1)`. Active/press

Do's and Don'ts

**Do**

• Do use white (#ffffff) for all primary CTAs and interactive text—it is the brand's signature accent and must never be diluted or replaced with a lighter gray.
• Do maintain the dark background (#000000) as the canvas for all pages; light backgrounds are reserved for modals and overlays only.
• Do apply 300ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all interactive state changes (hover, focus, active) to reinforce the motion-first philosophy.
• Do use DM Sans for all body and UI text; reserve DM Mono for code and technical labels, and Krona One only for rare, high-impact hero moments.
• Do respect the spacing scale: use lg (40px) for section separation, md (24px) for component padding, and sm (12px) for internal element spacing.
• Do layer shadows softly: use md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and lg (0 8px 24px rgba(0, 0, 0, 0.25)) for elevated elements.
• Do use border-radius: 0.5rem (8px) as the default for buttons and inputs, and 1rem (16px) for cards—never use sharp corners (0px) except to make a deliberate brutalist statement.

**Don't**

• Don't use colors other than white, black, secondary blue (#4e71ff), or error red (#e40014) for interactive elements—the palette is intentionally constrained to maintain visual discipline.
• Don't apply blur effects greater than 12px on glass overlays; excessive blur obscures the background animation and reduces the sense of depth.
• Don't use rounded corners greater than 1.5rem (24px) on any component; excessive rounding dilutes the brand's architectural precision.
• Don't animate state changes faster than 150ms or slower than 500ms; the brand's motion language uses 300ms as the golden standard.
• Don't add drop shadows to buttons or inputs in their default state; shadows are reserved for elevated containers (cards, modals) only.
• Don't use system fonts or fallback sans-serif; always load DM Sans, DM Mono, and Krona One from the local font files to maintain brand consistency.
• Don't reduce padding below 8px (xs) or increase it above 64px (xl) without explicit design direction; the spacing scale is calibrated for visual rhythm.
• Don't use opacity-based text for body copy; all readable text must have a contrast ratio of at least 4.5:1 against its background.