UI8

Overview

UI8 is a premium design marketplace that serves designers, developers, and startups seeking high-quality UI kits, templates, and design resources. The design system embodies 'Professional Clarity'—a refined, accessible aesthetic that prioritizes content discoverability and transaction confidence. The interface uses a clean white canvas (surface: #ffffff) with strategic accent colors to guide user attention toward discovery and purchase actions. The emotional response is one of trust and professionalism: users should feel they're browsing a curated, high-value collection, not a chaotic marketplace.

The brand voice is direct, helpful, and design-literate. Vocabulary emphasizes quality ('premium', 'curated', 'professional') and action ('discover', 'explore', 'download'). Tone is confident but never condescending—the copy assumes the user knows what they want and respects their time. Example sentence in brand voice: 'Explore 5,832 UI kits designed by industry leaders—find your next component library in seconds.'

Colors

The color system is built on a foundation of neutral surfaces with two vibrant accent colors that drive interaction and hierarchy. Primary (#2d68ff) is the signature brand accent—a vivid, saturated blue used exclusively on call-to-action buttons, active states, and key interactive elements. It commands attention without aggression, evoking professionalism and trustworthiness. Secondary (#1f93ff) is a lighter, more energetic blue reserved for secondary actions, notifications, and supporting UI elements like the chat bubble (background: #1f93ff, box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16)). Tertiary (#37546d) is a muted slate used for subtle text hierarchy and disabled states.

The surface stack is anchored in white (#ffffff) with carefully calibrated grays for layering: surface-container-low

Typography

The type system uses a single typeface family (Inter) across all scales, creating visual cohesion while maintaining clear hierarchy through weight and size. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines; Headline-lg (40px, 600 weight) anchors major sections; Body-md (16px, 400 weight, 24px line-height) is the workhorse for product descriptions and marketplace copy. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons and interactive labels to ensure legibility at small sizes. On small labels over busy product card backgrounds, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to maintain contrast. All body text uses a line-height of 1.5 (24px for 16px base) to ensure readability in dense product listings.

Layout

The page uses a 12-column fluid grid with a max-width of 1280px, allowing content to breathe on large screens while remaining compact on mobile. The gutter spacing is 24px (md token), applied consistently between grid columns and section boundaries. Container padding follows the lg spacing token (40px) on desktop, reducing to md (24px) on tablet and sm (12px) on mobile. White-space is used strategically: product cards are separated by lg spacing (40px) vertically to reduce cognitive load, while related items (like category counts) use xs spacing (4px) for tight grouping. The marketplace grid itself uses a responsive column layout that collapses from 4 columns (desktop) to 2 columns (tablet) to 1 column (mobile), with consistent md spacing (24px) between cards.

Elevation & Depth

Depth is conveyed through a three-tier shadow system that mimics real-world layering without introducing visual clutter. Level 1 (Base/Surface): no shadow; elements sit flush on the white background. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border in surface-container-highest (#d0d0d0), creating a subtle lift that distinguishes cards from the background. Level 3 (Modals/Dropdowns): box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16) with the same border treatment, signaling prominence and focus. Interactive elements like the chat bubble use Level 3 shadows with a 6

Shapes

The shape system follows 'Refined Minimalism'—sharp, geometric corners that convey professionalism and precision, with strategic rounding only where it enhances usability. Buttons use full border-radius (9999px / 100px) to create pill-shaped CTAs that feel modern and clickable; this applies to both primary (#2d68ff background, 48px height, 12px 24px padding) and secondary buttons. Cards and containers use lg radius (1rem / 16px) for a clean, contemporary look that softens hard edges without appearing playful. Input fields use DEFAULT radius (0.5rem / 8px) for a neutral, professional appearance

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (background: #2d68ff, color: #ffffff, border-radius: 100px, height: 48px, padding: 12px 24px) use the full-width pill shape to maximize click targets and signal importance. On hover, the background darkens to #1f4a99 and a subtle shadow (0 3px 8px rgba(45, 104, 255, 0.25)) appears, providing visual feedback. Active state uses #1a3a7a with no shadow change. Secondary buttons (background: transparent, border: 1px solid #6c757d, color: #2d68ff) are used for 'View all' and similar exploratory actions; on hover, the background fills with surface-container-low (#e9ecef) while the border remains visible. All button text uses label-md typography (14px, 600 weight) for consistent legibility.

Containers & Surface

Do's and Don'ts

**Do**

• Do use primary blue (#2d68ff) exclusively on CTAs and interactive elements—never on passive text or backgrounds.
• Do apply md spacing (24px) between major content sections and lg spacing (40px) between distinct marketplace categories to create visual rhythm.
• Do use the full border-radius (100px) on all buttons to create a modern, clickable affordance that stands out from card elements.
• Do apply the three-tier shadow system consistently: no shadow for base surfaces, 0 3px 8px for standard cards, 0 5px 40px for modals.
• Do use body-md typography (16px, 400 weight, 24px line-height) for product descriptions to ensure readability in dense layouts.

**Don't**

• Don't use secondary blue (#1f93ff) on primary CTAs—reserve it for notifications, secondary actions, and the chat widget.
• Don't apply border-radius greater than lg (1rem) to cards or containers; this softens the professional aesthetic and reduces visual clarity.
• Don't use shadows darker than rgba(0, 0, 0, 0.16) or blur values greater than 40px; excessive depth creates visual noise in a marketplace context.
• Don't mix typeface families; Inter is the single source of truth across all scales and weights.
• Don't apply primary color (#2d68ff) to disabled or inactive states; use outline (#6c757d) or surface-container-high (#d9dce2) instead to signal unavailability.