UNSMM

Overview

UNSMM is a task-automation engine designed for Perfect Panel SMM resellers who operate in high-volume, time-sensitive environments. The platform eliminates manual labor through intelligent systems: automated ticket responses (60-second average), deposit verification via SMS matching, service recommendation widgets, and Telegram channel synchronization. The aesthetic is "Technical Minimalism with Depth"—a dark, high-contrast interface where a vivid purple accent (#6E5BD6) and cyan secondary (#2DD4BF) cut through the near-black canvas (#0A0E17), creating visual hierarchy without clutter. The design evokes precision, reliability, and 24/7 operational readiness. Voice: direct, outcome-focused, Arabic-first (RTL-native). Example: "Your ticket got a bot response in 43 seconds. Deposit matched. Service updated on Telegram."

Colors

The color system is anchored in a deep-space palette optimized for extended viewing and accessibility in low-light environments. Primary (#6E5BD6, a saturated purple) is the signature accent—used exclusively on call-to-action buttons ("Start Free", "Begin Now"), active states, and brand-critical interactive elements. Secondary (#2DD4BF, a vibrant cyan) highlights status indicators, success states, and live-operation badges (e.g., the green pulse on "Live Auto-Reply"). Tertiary (#E8C574, a warm gold) marks premium features and special offers (the "Custom Themes" banner). The surface stack progresses from #0A0E17 (base background) through #111726 (standard containers) to #252D3D (elevated modals), with a 1px border at #232B40 separating layers. Error red (#F87171) is reserved for destructive

Typography

IBM Plex Sans Arabic is the sole typeface, chosen for its native RTL support, technical clarity, and professional warmth. The type hierarchy spans 8 levels: Display (60px, 700 weight) for hero headlines; Headline-LG (54px, 700) for section titles; Headline-MD (32px, 600) for subsections; Title-LG (24px, 600) for card headers; Body-LG (18px, 400) for feature descriptions; Body-MD (15px, 400) for body copy and UI labels; Label-MD (14px, 600) for buttons and badges; Label-SM (12px, 500) for metadata and helper text. Letter-spacing is tightened on display sizes (-0.04em) to reinforce boldness, and loosened on labels (+0.01–0.02em) for legibility at small scales. Line-height is generous (1.5–1.6x) to accommodate Arabic diacritics and improve readability on dark backgrounds. Apply text-shadow: 0

Layout

The page uses a 12-column fluid grid with a 1200px max-width container. Sections are separated by 40px (lg spacing) vertically, with 24px (md spacing) gutters between columns. The hero occupies full-width with asymmetric layout: copy on the right (RTL), visual mockup on the left, both centered within the container. Feature cards are arranged in a 3-column grid (md breakpoint: 2 columns; sm: 1 column) with 24px gaps. The stats band uses a 4-column equal-width layout. All padding follows the spacing scale: 24px for card interiors, 12px for input fields, 4px for badge interiors. White-space is deliberate—never cramped—to emphasize the premium, focused nature of the product. Container max-width of 1200px ensures readability without excessive line-length on large displays.

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle border treatments, avoiding glassmorphism in favor of clarity. Level 1 (Base): No shadow; flat surface at #0A0E17. Level 2 (Standard Cards): 1px border at rgba(35, 43, 64, 1) + box-shadow: 0 4px 18px rgba(110, 91, 214, 0.28)—the purple tint signals interactivity. Level 3 (Elevated/Modals): 1px border at rgba(58, 68, 86, 1) + box-shadow: 0 6px 24px rgba(110, 91, 214, 0.4)—increased blur and spread for prominence. Hover states transition shadows in 240ms (ease-out) to signal responsiveness. No drop-shadows on text; instead, use the

Shapes

The shape philosophy is "Geometric Precision with Warmth"—sharp enough to feel technical, rounded enough to feel approachable. Buttons use 1rem (16px) border-radius, creating a soft-rectangular silhouette that's neither pill-shaped nor sharp. Cards and containers use 0.75rem (12px) for a tighter, more structured feel. Input fields use 0.5rem (8px) for subtle definition. The premium "Custom Themes" banner uses 1.5rem (24px) for visual distinction. Badges and chips use full (9999px) for a cohesive, badge-like appearance. This graduated scale ensures visual hierarchy: larger radius = more promine

Components

Action Elements Buttons are the primary interaction pattern. **Button-Primary** (bg: #6E5BD6, text: white, 48px height, 16px radius, 12px 24px padding) is used for all primary CTAs ("Start Free", "Begin Now"). On hover, the background shifts to #7C63D6 (primary-fixed-dim) with a 200ms ease-out transition. On active/press, it darkens to #5A4AB8 (primary-container). **Button-Ghost** (transparent bg, 1px border at #232B40, text: #E8ECF4, same dimensions) is used for secondary actions ("Explore Features", "Follow Updates"). Hover state: bg becomes #1A212F (surface-container-high), border shifts to #3A4456 (outline-variant). All buttons include a 2px focus ring at rgba(110, 91, 214, 0.3) when keyboard-focused.

Containers & Surfaces **Card** (bg: #111726, 1px border #232B40, 24px paddin

Do's and Don'ts

**Do**

• Do use the purple primary (#6E5BD6) exclusively on CTAs and active states—it's the brand's signature and must remain rare and impactful.
• Do apply the 1px border + shadow stack consistently across all elevated surfaces to maintain visual coherence and depth.
• Do respect the RTL layout throughout—text direction, icon placement, and grid flow must all honor Arabic-first design.
• Do use the spacing scale (4px, 12px, 24px, 40px, 64px) religiously; never invent intermediate values.
• Do transition all interactive states (hover, focus, active) in 200–240ms with ease-out timing for a responsive, premium feel.
• Do apply text-shadow on small labels over busy backgrounds to guarantee 4.5:1 contrast for accessibility.

**Don't**

• Don't use the cyan secondary (#2DD4BF) on primary CTAs—it's reserved for status indicators and live badges.
• Don't flatten the shadow system or remove borders; depth is critical for distinguishing interactive layers in a dark UI.
• Don't apply glassmorphism (backdrop-filter, semi-transparent overlays) on this brand—it conflicts with the technical-minimalist aesthetic.
• Don't use system fonts or fallback sans-serifs; IBM Plex Sans Arabic must load and render for RTL correctness and brand consistency.
• Don't exceed 1200px container width or deviate from the 12-column grid without explicit design rationale.
• Don't animate non-interactive elements; motion should signal interactivity, not decoration.