NQCLOUDS

Overview

NQCLOUDS is a unified cloud storage management platform designed for users who demand both security and simplicity. The design system embodies 'Minimal Clarity'—a philosophy that strips away visual noise while maintaining a vibrant, approachable personality through a signature teal-to-emerald accent palette. The brand serves professionals and teams who need to connect, organize, and access multiple cloud accounts without friction. The UI evokes trust through clean typography (Manrope for headlines, Public Sans for body), generous whitespace, and a restrained color palette where the primary teal (#0f9f9a) acts as the sole emotional anchor. Voice: direct, confident, and human. Example: 'Connect your accounts once. Access everything, everywhere.'

Colors

The color system is anchored by a primary teal (#0f9f9a) that appears on all call-to-action buttons, active states, and brand-critical interactions. This color is chosen because it signals both security (cool, professional) and energy (vibrant, modern). The surface stack ranges from #f4f6f8 (base background) through #e9ecef (container) to #ffffff (elevated cards), creating a subtle depth hierarchy without relying on darkness. Secondary blue (#0a7bbd) supports data visualization and secondary actions. Tertiary amber (#f59e0b) is reserved for alerts, warnings, and accent highlights. On-surface text is a near-black (#111a1a) at 100% opacity for body copy, with variant text at #6c757d (60% opacity) for secondary information. The outline color (#8e9192) is used for borders and dividers at 1px w

Typography

The type system uses a two-font pairing: Manrope (500–800 weights) for all display and headline levels, and Public Sans (400–700 weights) for body and label text. This combination communicates modern professionalism—Manrope's geometric warmth softens the technical nature of cloud storage, while Public Sans provides clarity and legibility at small sizes. Display text (72px, 800 weight, -0.02em letter-spacing) is reserved for hero headlines and major section breaks. Headline-lg (40px, 700 weight) anchors feature sections. Body-md (16px, 400 weight, 24px line-height) is the default for all paragraph text and ensures 1.5 line-height ratio for accessibility. Label-md (14px, 600 weight) is used for button text and form labels. On small labels over busy backgrounds, apply text-shadow: 0 2px 4px r

Layout

The layout uses a 12-column grid with a max-width of 1400px, centered on the viewport. The hero section spans full width with 40px (lg spacing) vertical padding above and below, creating breathing room. Feature cards are arranged in a 3-column grid on desktop, 2 columns on tablet, and 1 column on mobile, with 24px (md spacing) gaps between cards. Container padding is consistently 24px on desktop, 16px on tablet, and 12px on mobile. The gutter (24px) is used for horizontal spacing between major sections. White-space is intentional: the hero section uses 75vh minimum height to emphasize the primary CTA and headline. Section separators use 64px (xl spacing) vertical margins. The grid pattern background (visible in the hero) uses a subtle 32px grid with 30% opacity to provide visual texture wi

Elevation & Depth

Depth is achieved through a three-tier shadow system and subtle vertical translation on hover. Level 1 (Base): no shadow, flat surface at #f4f6f8. Level 2 (Standard Card): box-shadow: 0 1px 2px rgba(15, 20, 26, 0.06), used on cards and input fields. Level 3 (Elevated/Hover): box-shadow: 0 4px 12px rgba(15, 20, 26, 0.08), applied on card hover and modal backgrounds. Level 4 (Maximum Elevation): box-shadow: 0 16px 40px rgba(15, 20, 26, 0.12), reserved for dropdowns and floating panels. Primary buttons receive an additional colored shadow: box-shadow: 0 4px 12px rgba(15, 159, 154, 0.25) to reinfo

Shapes

The shape philosophy is 'Soft-Technical'—combining sharp, geometric precision with approachable rounded corners. Buttons use full radius (9999px) to signal friendliness and approachability, while maintaining a professional 48px height. Cards use 1.5rem (24px) border-radius for a softer, more inviting appearance than sharp corners, but not so rounded as to feel playful. Input fields use 0.5rem (8px) radius for a subtle, contained feel. Icon containers within cards use 1rem (16px) radius. The rationale: full-radius buttons stand out as primary actions and feel modern; card radius sits between mi

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (bg: #0f9f9a, text: white, 48px height, 32px horizontal padding, full radius) use a gradient shadow (0 4px 12px rgba(15, 159, 154, 0.25)) to emphasize importance. On hover, the background shifts to #89e6c7 (primary-fixed-dim), shadow expands to 0 8px 24px rgba(15, 159, 154, 0.35), and the button scales to 1.05 over 150ms (cubic-bezier(0.4, 0, 0.2, 1)). Secondary buttons (transparent bg, 1px border #c4c7c8, text: #0f9f9a) use the same dimensions but no shadow. On hover, secondary buttons fill with #e0e5eb (surface-container-high). All buttons use font-weight: 600 (label-md) and transition all properties over 150ms.

Containers & Surfaces Cards are the primary content container. Standard cards use bg: whit

Do's and Don'ts

**Do**

• Do use the primary teal (#0f9f9a) exclusively for CTAs, active states, and brand-critical interactions—never dilute it with secondary colors on the same element.
• Do maintain 24px (md spacing) as the default gap between major sections and 12px (sm spacing) for component-level spacing.
• Do apply the full-radius (9999px) style only to buttons; use 24px radius for cards and 8px for inputs to maintain visual hierarchy.
• Do use Manrope for all headlines (h1–h3) and Public Sans for body text and labels—never reverse these roles.
• Do apply the three-tier shadow system consistently: level 1 (no shadow) for base, level 2 (0 1px 2px) for standard cards, level 3 (0 4px 12px) for hover states.

**Don't**

• Don't use the secondary blue (#0a7bbd) or tertiary amber (#f59e0b) on primary CTAs—reserve these for secondary actions and alerts only.
• Don't apply border-radius greater than 24px to cards or containers; this breaks the 'Soft-Technical' aesthetic and reads as overly playful.
• Don't use drop shadows greater than 0 16px 40px rgba(15, 20, 26, 0.12)—deeper shadows create visual confusion and undermine the clean, minimal aesthetic.
• Don't mix Manrope and Public Sans weights arbitrarily; use Manrope 700+ for headlines and Public Sans 400–600 for body to maintain typographic hierarchy.
• Don't apply color overlays or gradients to the background; the subtle grid pattern and clean surface colors are sufficient for visual interest.