Nauval Cloud

Overview

Nauval Cloud is a premium Indonesian infrastructure platform delivering high-performance LXC container deployment with instant SSH provisioning and 99.9% uptime guarantees. The design system embodies 'Brutalist Minimalism'—a movement that combines stark geometric forms, bold typography, and deliberate use of negative space with a single vivid accent color (violet #7b5cff) that commands attention against a pristine white canvas. The aesthetic rejects ornamentation; every pixel serves function. The emotional response is one of confidence and technical mastery: users feel they are operating a powerful, no-nonsense tool.

The brand voice is direct, technical yet approachable, and unapologetically Indonesian. Vocabulary favors concrete action verbs ('Deploy', 'Luncurkan', 'Fokus') over marketing abstractions. Tone is confident without arrogance, precise without coldness. Example sentence in brand voice: 'Luncurkan LXC Container berkecepatan tinggi dengan infrastruktur Proxmox canggih langsung dari browser Anda—fokus kembangkan bisnis, kami yang urus servernya.'

Colors

The color system is anchored on a high-contrast, minimal palette designed for clarity and visual hierarchy. Primary (#7b5cff, a saturated violet) is the signature accent—used exclusively on call-to-action buttons, active states, and brand-critical interactive elements. It appears sparingly, making every use carry weight. On-primary is pure white (#ffffff) for maximum contrast and readability at 16px+ sizes. The surface stack ranges from pure white (#ffffff, surface) through carefully calibrated grays (surface-container-low #ececf0, surface-container #e9ecef, surface-container-high #e0e0e5) to support layering without introducing color. On-surface is a near-black (#17171b, not pure #000000) to reduce eye strain on extended reading. Secondary (#bef264, a lime-green) and tertiary (#ff7a6b, a

Typography

The type system pairs Space Grotesk (geometric, technical, weights 500 and 700) for headlines and display text with Inter (humanist sans-serif, weights 400 and 600) for body and UI labels. This pairing communicates precision (Space Grotesk's rigid geometry) grounded in accessibility (Inter's warm proportions). Display (60px, 700, -0.04em letter-spacing) is reserved for hero headlines; headline-lg (40px, 700, -0.02em) for section titles; headline-md (28px, 700, -0.01em) for subsections. Body-lg (18px, 400, 28px line-height) is used for hero copy and long-form content; body-md (16px, 400, 24px line-height) for standard UI text. Label-md (14px, 600, 0.01em letter-spacing) is the workhorse for button text, form labels, and navigation; label-sm (12px, 600, 0.05em letter-spacing) for badges, tag

Layout

The layout system uses a fluid 12-column grid with a max-width of 1440px (container-max-width: 1440px) and a gutter of 24px. On mobile (< 768px), the grid collapses to a single column with 24px horizontal padding; on tablet and desktop, full grid is active. White-space is generous and intentional: lg spacing (40px) separates major sections (hero, features, footer); md spacing (24px) separates cards and subsections; sm spacing (12px) separates inline elements and list items. The spacing scale is semantic: use lg for section separation, md for component padding and card gaps, sm for internal component spacing (button padding, list item padding). Container max-width ensures readability on ultra-wide displays; content never exceeds 1440px. Margins are symmetric; asymmetric spacing is avoided e

Elevation & Depth

Depth is conveyed through two mechanisms: geometric borders and brutal shadows. The primary elevation system uses a 2px solid border in outline (#2c2f39) on all interactive and container elements (buttons, cards, inputs, badges). This border is the primary visual separator and is never omitted. Secondary elevation is achieved via box-shadow: the 'brutal' shadow (2px 2px 0 rgba(23, 23, 27, 1)) is applied to buttons and cards to create a tactile, pressed appearance—a nod to Brutalist architecture's emphasis on material honesty. On hover, buttons and cards receive the lg elevation shadow (0 3px 8

Shapes

The shape philosophy is 'Geometric Precision with Minimal Softness'—a balance between sharp edges and subtle rounding that prevents the interface from feeling cold or austere. Buttons and primary interactive elements use rounded.lg (0.875rem / 14px) for a slightly softened rectangle that feels approachable without sacrificing geometric clarity. Cards and containers use rounded.lg (14px) to match buttons and create visual cohesion. Input fields and smaller UI elements use rounded.DEFAULT (0.5rem / 8px) for a tighter, more technical appearance. Badges and tags use rounded.full (9999px) to create

Components

Action Elements Buttons are the primary interactive component and come in two variants: primary (violet background, white text, 2px border, brutal shadow) and secondary (white background, dark text, 2px border, brutal shadow). Both use label-md typography (14px, 600, 0.01em letter-spacing) and a fixed height of 48px with 12px vertical and 20px horizontal padding. On hover, primary buttons shift to a darker violet (#6b4dd9) and receive the lg elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)). On active/pressed, primary buttons darken further (#5a3fb8) and translate down 2px (transform: translateY(2px)) to simulate a physical press. Secondary buttons on hover shift to surface-container-low (#ececf0) and maintain the border. Disabled buttons reduce opacity to 50% and remove the shadow. All

Do's and Don'ts

**Do**

• Do use the violet primary (#7b5cff) sparingly—only on CTAs, active states, and brand-critical elements. Overuse dilutes its impact.
• Do maintain the 2px border on all interactive and container elements; it is the visual signature of the system.
• Do pair Space Grotesk headlines with Inter body text; never reverse or mix weights inconsistently.
• Do use the brutal shadow (2px 2px 0 rgba(23, 23, 27, 1)) on buttons and cards to reinforce the Brutalist aesthetic.
• Do apply lg spacing (40px) between major sections and md spacing (24px) between components to create visual rhythm.
• Do use the secondary (#bef264) and tertiary (#ff7a6b) colors for status indicators and OS branding, never as primary accents.

**Don't**

• Don't use rounded corners smaller than 8px (rounded.DEFAULT); the system minimum is 0.5rem to maintain geometric clarity.
• Don't apply shadows other than the brutal shadow (2px 2px 0) or the lg elevation shadow (0 3px 8px); no soft, diffuse shadows.
• Don't mix fonts within a single component; headlines are always Space Grotesk, body/UI text is always Inter.
• Don't use pure black (#000000) or pure white (#ffffff) for text; use on-surface (#17171b) and on-primary (#ffffff) from the palette.
• Don't apply the primary color to more than 15% of the interface; it should feel like an accent, not a dominant color.
• Don't omit the 2px border on buttons, cards, or inputs; the border is non-negotiable and defines the visual language.