CreativCurrent

Overview

CreativCurrent is a premium creative subscription agency that delivers senior-led UX, design, development, and video production on demand. The brand embodies a "Premium Minimalist Dynamism" aesthetic—pairing a clean, light-dominant interface with vibrant purple and magenta accents that signal energy, creativity, and premium positioning. The design language prioritizes clarity and directness: a white canvas (#ffffff) with strategic pops of primary purple (#a940ff) and secondary violet (#6e32e1) create visual hierarchy without clutter. The emotional response is one of confidence and accessibility—clients feel they're working with seasoned professionals, not an agency with layers of bureaucracy.

The brand voice is direct, confident, and human-centered. Copy avoids jargon and hype; instead, it speaks in concrete outcomes: "1–2 day delivery," "No juniors," "Average 2–8× ROI in 120 days." The tone is conversational but authoritative, reflecting a senior creative director speaking to peers. Example: "Work directly with an experienced Creative Director delivering brand, digital, motion, and web work without agency layers, handoffs to juniors, or hiring headaches."

Colors

The color system is built on a light-first foundation with strategic accent deployment. Primary (#a940ff) is the signature action color—used exclusively on CTAs ("Book a 30-min call"), focus states, and brand moments. It is a vibrant, saturated magenta-purple that commands attention without aggression. Secondary (#6e32e1) is a deeper violet used for supporting interactive elements, hover states on secondary buttons, and secondary headings. Tertiary (#9b3fe6) bridges primary and secondary, used for accent text, decorative elements, and tertiary CTAs.

The surface stack is predominantly light: surface (#ffffff) is the main canvas, with container variants (surface-container-lowest #efeafe, surface-container-low #f4fafd, surface-container #e5e7eb) providing subtle depth for cards, inputs, and

Typography

The type system uses three distinct families to create visual rhythm and hierarchy. Marble Regular (custom font, 400 weight) is reserved for the display level (84px, -0.04em letter-spacing) to create a distinctive, premium headline voice—it appears on the hero "Your brand on demand" and signals craftsmanship. Rubik (Google Fonts, weights 400–700) serves as the workhorse for headlines (headline-lg 40px, headline-md 28px) and body copy (body-lg 18px, body-md 16px), providing warm, approachable readability. DM Sans (Google Fonts, 600 weight) is used for labels, CTAs, and UI text (label-md 14px, label-sm 12px), delivering precision and technical clarity. The hierarchy is reinforced through weight and size: display text at 84px with -0.04em tracking creates visual dominance; body text at 16px w

Layout

The layout follows a 12-column grid system with a 1280px container max-width, providing a responsive, structured foundation. The page rhythm uses semantic spacing: lg (40px) for major section separation (hero to value prop, value prop to portfolio), md (24px) for component-level spacing (card padding, button groups), and sm (12px) for internal element spacing (text-to-icon, list items). The gutter is 24px, applied symmetrically on desktop and adjusted to 16px on tablet/mobile to maintain breathing room. White-space is treated as a design element, not a void—the light background (#ffffff) is left generous and uncluttered, allowing the purple accents and typography to command attention. Container max-width of 1280px prevents content from stretching excessively on ultra-wide displays, maintai

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minimal lift on interactive elements like hover states on list items; md (0 4px 12px rgba(0, 0, 0, 0.08)) for standard cards and input fields, creating a gentle separation from the surface; lg (0 8px 32px rgba(90, 150, 255, 0.18), 0 -19.32px 38.64px rgba(90, 150, 255, 0.18)) for modals, hero imagery, and primary CTAs, introducing a subtle blue-tinted glow that reinforces the premium aesthetic. The blue tint (rgba(90, 150, 255, .

Shapes

The shape philosophy is "Approachable Precision"—combining soft, rounded corners with geometric clarity. Buttons and CTAs use full radius (9999px), creating pill-shaped buttons that feel friendly and modern while maintaining clear clickability. Cards and containers use lg radius (1rem / 16px), providing enough rounding to feel contemporary without becoming overly organic. Input fields and smaller UI elements use DEFAULT radius (0.5rem / 8px), balancing softness with functional clarity. The rationale: full-radius buttons are the brand's signature shape, appearing on every CTA and reinforcing th

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses full radius (9999px), primary background (#a940ff), white text, 16px horizontal padding, 48px height, and md elevation (0 4px 12px rgba(0, 0, 0, 0.08)). On hover, the background shifts to tertiary (#9b3fe6) and elevation increases to lg (0 8px 32px rgba(90, 150, 255, 0.18)), with a 120ms transition. On active/press, background darkens to #8a2dd4 and elevation reduces to sm. Button-secondary uses transparent background, on-surface text (#000000), a 2px border in on-surface, and the same full radius. On hover, the background fills with surface-container-high (#d9d9e3) while maintaining the border. All buttons use DM Sans at 14px weight 600 for label text.

Containers & Surfaces Cards use lg radius (1rem)

Do's and Don'ts

**Do**

• Do use primary (#a940ff) exclusively on CTAs and interactive focus states—it is the brand's signature accent and must remain distinctive.
• Do maintain generous white-space (lg spacing: 40px) between major sections to let the design breathe and emphasize content hierarchy.
• Do apply full radius (9999px) to all buttons and CTAs for consistency with the brand's approachable-premium aesthetic.
• Do use Marble Regular for display-level headlines (84px) to create a distinctive, premium voice that differentiates the brand.
• Do layer shadows with blue-tinted glows (rgba(90, 150, 255, ...)) on elevated elements to reinforce the atmospheric, premium quality.

**Don't**

• Don't use primary (#a940ff) on body text, backgrounds, or non-interactive elements—reserve it for CTAs and focus states only.
• Don't apply sharp corners (0px radius) to any UI element; maintain minimum DEFAULT radius (0.5rem) for consistency.
• Don't mix typefaces within a single component; use Marble for display, Rubik for body/headlines, and DM Sans for labels/UI text.
• Don't use dark backgrounds or near-black surfaces as the primary canvas—the brand is light-first; dark overlays are reserved for modals and atmospheric effects.
• Don't apply hard shadows (high blur, high spread); use soft, subtle shadows (md elevation: 0 4px 12px rgba(0, 0, 0, 0.08)) to maintain the refined aesthetic.