Brand System & Visual Identity
Angular stack of layered rectangles forming a futuristic "M" monogram
Primary Mark
Animated Version
Monochrome
Reversed
Minimum clear space equals height of one logo layer
24px height for digital, 0.5 inch for print
Use primary on dark backgrounds, monochrome on light
Pulse glow for interactive elements only
Digital Sovereignty - Premium colors for a futuristic media marketplace
#0D0D0D
Authority & Premium
Backgrounds, text, depth
#FFD700
Value & Success
Accents, CTA, highlights
#FF0055
Energy & Passion
Alerts, urgency, passion
#001AFF
Trust & Intelligence
Links, info, trust
#00FF8C
Success & Growth
#FF00FF
Creativity & Innovation
#00FFFF
Technology & Future
#FF8C00
Energy & Enthusiasm
#F5F5F5
Clarity & Space
#C0C0C0
Premium & Modern
#808080
Balance & Neutral
#404040
Depth & Sophistication
Customize and preview typography in real-time
Futuristic precision meets human warmth
Space Grotesk Bold • 48px • Line Height 1.2
Used for primary headlines and hero sections
Space Grotesk Bold • 36px • Line Height 1.3
Main section headings and page titles
Space Grotesk Medium • 24px • Line Height 1.4
Subsection headings and content organization
Space Grotesk Medium • 20px • Line Height 1.4
Component headings and card titles
Space Grotesk Regular • 18px • Line Height 1.4
Small headings and labels
Body Large - Inter Regular
Inter Regular • 18px • Line Height 1.6
Important descriptions and featured content
Body Text - Inter Regular
Inter Regular • 16px • Line Height 1.5
Standard body text for all content
Small Text - Inter Regular
Inter Regular • 14px • Line Height 1.4
Secondary information and metadata
Caption Text - Inter Medium
Inter Medium • 12px • Line Height 1.3
Captions, labels, and micro-copy
Monospace - JetBrains Mono
JetBrains Mono • 14px • Line Height 1.4
Code, technical data, and precise information
Orbitron Display
Orbitron Bold • Variable • Line Height 1.2
Futuristic headlines and special displays
See how brand elements work together in different contexts
This is how content looks with current theme settings.
Secondary content with different hierarchy.
Consistent UI elements that embody the Mediastak brand
Featured content with gold accent
Standard content card
Strategic use of scale, color, and spacing to guide attention
Hero elements, main headlines, primary actions
Section headers, important content, key features
Subsections, descriptions, supporting details
Labels, captions, timestamps, secondary actions
How Mediastak brand elements work in real-world contexts
Professional Identity
Corporate Slides
Kinetic stacking with premium micro-interactions
Stack In - Logo Reveal
Pulse Glow - Interactive State
Subtle scale and glow on hover
Smooth content reveals
Cards and modals entrance
Layers animate in sequence, building visual hierarchy
Smooth, refined curves that feel expensive
Every animation serves a functional purpose
Micro-interactions that enhance usability
How Mediastak speaks to its audience across all touchpoints
Cutting-edge, forward-thinking, pioneering
Sophisticated, refined, high-quality
Enabling, supportive, confidence-building
Genuine, transparent, trustworthy
"Elevate Your Media Empire"
Bold, aspirational, action-oriented
"Transform your creative vision into a thriving digital marketplace with our premium tools and infrastructure."
Clear, benefit-focused, professional
"We're working to resolve this quickly. Your content is safe."
Reassuring, helpful, solution-focused
"Your media empire just got stronger."
Celebratory, empowering, brand-aligned
Essential rules for maintaining brand consistency across all applications
Maintain minimum distance equal to one logo layer height
Gold for primary, silver for secondary, gray for tertiary
Space Grotesk, Inter, JetBrains Mono, Orbitron only
Use the defined spacing scale for all layouts
Never stretch, squish, or alter the logo geometry
Stick to the defined color palette for brand consistency
Avoid Arial, Helvetica, or other generic fonts
Respect white space and maintain visual breathing room
Collection of brand elements ready for download and use
SVG, PNG, PDF formats
Single color versions
App icons, favicons
ASE, ACO, SCSS files
Extended color options
Web fonts, desktop fonts
Optimized for readability
Code and data display