AssetBox.bd

Overview

AssetBox.bd is a premium design asset subscription platform serving Bengali-speaking designers, freelancers, and creative agencies across South Asia. The brand embodies a "Minimalist-Maximalist" aesthetic: a dark, sophisticated canvas (near-black at oklch(0.16 0.022 285)) paired with a vibrant violet accent (primary: #7c5cff) that commands attention on CTAs and interactive elements. The UI philosophy prioritizes clarity and abundance—users see unlimited access, weekly updates, and commercial licensing rights prominently featured. The emotional response is one of creative liberation: "everything you need, nothing you don't." Voice: direct, Bengali-fluent, action-oriented, and celebratory of creative work. The brand speaks to makers, not gatekeepers. Example sentence: "৳৪৯০ দিয়ে ১,৮৪০+ ফাইল আনলক করুন—প্রতি সপ্তাহে নতুন কন্টেন্ট যোগ হয়।"

Colors

The color system centers on a high-contrast dark-mode palette optimized for creative professionals who spend hours in design tools. Primary (#7c5cff) is a saturated violet used exclusively for CTAs, focus states, and brand moments—it appears on the hero button, accent text, and interactive highlights. The surface stack descends from #0a0e27 (surface) through #050810 (surface-dim) to #030508 (surface-container-lowest), creating visual separation without harsh blacks. On-surface text (#f5f7fb) maintains 15:1 contrast against the darkest surfaces, meeting WCAG AAA. Secondary (#a8c9eb) and tertiary (#f0a8d8) provide supporting accents for badges, status indicators, and secondary CTAs. The outline-variant (#49505c) is used for subtle borders and dividers at 1px width. All glass-morphic cards us

Typography

The type system pairs Geist (display, headlines) with Hind Siliguri (body, labels), reflecting the bilingual Bengali-English nature of the product. Display (60px, 600 weight, -0.04em tracking) anchors hero sections and major announcements; headline-lg (40px, 600 weight) structures section breaks; body-md (16px, 400 weight, 24px line-height) ensures readability in dense content areas. All headings receive -0.02em to -0.04em negative letter-spacing to create visual tension and modernity. Labels use 14px at 600 weight with 0.01em positive tracking for button text and form labels. On small labels over busy backgrounds (e.g., badges), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to maintain legibility. The type hierarchy is enforced via CSS custom properties (--font-display, --font-sans) to

Layout

The page uses a 12-column grid with a max-width of 1280px, centered with 24px gutters on desktop and 12px on mobile. Hero sections span full width with 40px (lg spacing) vertical separation between major sections. The container rhythm follows a 4px base unit: 4px (xs), 12px (sm), 24px (md), 40px (lg), 64px (xl). Cards and components use 24px padding (md) internally, with 12px gaps between elements. White-space is generous—sections breathe with 40px+ vertical margins to avoid cognitive overload. The grid-lines background (visible in hero) uses opacity-70 at 1px intervals to reinforce the modular system. Responsive breakpoints: mobile-first at 375px, tablet at 768px, desktop at 1024px, wide at 1280px+.

Elevation & Depth

Depth is conveyed through layered shadows and subtle backdrop-filter effects rather than flat color shifts. Level 1 (Base): no shadow, surface color only. Level 2 (Standard Card): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), backdrop-filter: blur(8px), background: rgba(20, 24, 41, 0.6). Level 3 (Elevated/Modal): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), backdrop-filter: blur(16px), background: rgba(20, 24, 41, 0.8). Primary buttons receive a glow effect: box-shadow: 0 0 24px rgba(124, 92, 255, 0.3) to emphasize CTAs. Hover states elevate cards to Level 3 with a 200ms transition. Focus states

Shapes

The design system employs "Soft-Technical" geometry: rounded corners are used strategically to soften the dark, technical aesthetic without sacrificing modernity. Buttons and CTAs use full radius (9999px) to create pill-shaped affordances that feel friendly and clickable. Cards use 1.5rem (24px) radius for a softer container feel. Input fields use 18px radius (slightly less than full) to balance usability with visual warmth. Smaller UI elements (badges, tags) use full radius for consistency. All radius values are applied via CSS custom properties (--rounded-full, --rounded-lg, etc.) to ensure

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses #7c5cff background, white text, 14px label-md typography, 14px vertical padding + 28px horizontal padding, and full radius. On hover, the background darkens to #6247d9 and scales to 1.04 over 200ms with cubic-bezier(0.16, 1, 0.32, 1) easing. A glow effect (box-shadow: 0 0 24px rgba(124, 92, 255, 0.3)) reinforces the CTA. Secondary buttons use transparent background with a 1px outline-variant border, full radius, and 12px vertical + 24px horizontal padding. On hover, the background fills with surface-container-high and the border shifts to primary color. All buttons include a focus-visible state with a 2px #575ECF outline at 2px offset.

Containers & Surfaces Cards (card component)

Do's and Don'ts

**Do**

• Do use primary (#7c5cff) exclusively for CTAs, focus states, and brand moments—never use it for neutral UI.
• Do maintain 15:1 contrast between on-surface (#f5f7fb) and surface (#0a0e27) for accessibility.
• Do apply full radius (9999px) to all interactive elements (buttons, inputs, pills) to signal affordance.
• Do use backdrop-filter: blur(8px) on cards to create depth without opacity collapse.
• Do transition all interactive states over 150–200ms with cubic-bezier(0.16, 1, 0.32, 1) easing for consistency.

**Don't**

• Don't use primary color for body text, backgrounds, or non-interactive elements—it must remain a signal.
• Don't apply shadows deeper than 0 16px 40px rgba(0, 0, 0, 0.2) or the dark theme becomes muddy.
• Don't use rounded corners smaller than 0.5rem (8px) on interactive elements; they become hard to tap.
• Don't mix Geist and Hind Siliguri in the same text block; use Geist for headlines, Hind Siliguri for body.
• Don't disable focus-visible outlines; always provide a 2px #575ECF outline at 2px offset for keyboard navigation.