Identity
The Steorra Suite identity is the cornerstone of our visual language. It combines the star mark with specialized typography to create a unified platform signature.
Construction & Spacing
32px × 32px18px (1.125rem)12px (0.75rem)CenterStar center = Text middleLight (300)0.2em (Wide)Construction & Geometry
The Steorra mark is constructed on a 24-unit grid. The geometry relies on precise intersections to create a unique 5-point star.
Construction & Clear Space
Minimum Size
Do not render the mark smaller than 16px. Ensure clear visibility of point intersections.
Safe Area
Maintain a minimum clear space of x/4 (6 units on a 24-unit grid) around the logo to ensure visual distinction and prominence.
Logo Guidelines
Respect the void. The Steorra mark relies on precise geometry and should not be altered.
Use white on dark backgrounds.
Do not rotate the mark.
Do not colorize the full mark.
Do not distort dimensions.
Asset Downloads
Spectrum
Our palette is born from the void. Deep, rich backgrounds provide high contrast for luminous signal colors.
Base Layer
Signals & Accents
Product System
Each product in the Steorra Suite has a distinct signal color and typographic treatment.
Product Identities
Product identity treatment across the full suite. Each variant keeps Steorra geometry and structure while expressing product-specific intent in a unified order: Copilot, GrowQ, Prism, Tide, and Helle.
Copilot Identity
Use blue accent for guidance, coaching, and operator-level decisions.
Wordmark accent: Co/pilot with Co highlighted in sapphire blue.
Core Mark
Primary Wordmark
Copilot Motion
Motion icon: core mark with rotated star-eyes blink pulses for active attention.
GrowQ Identity
Use cyan-forward accents for growth mapping, momentum, and orbit-guided trajectories.
Wordmark accent: GrowQ with Q highlighted in cyan.
Core Mark
Primary Wordmark
GrowQ Motion
Motion icon: core mark with a soft orbital ring sweep to express progression.
Prism Identity
Use gradient-forward surfaces for calibration, clarity, and evidence views.
Wordmark accent: full-spectrum gradient across Prism.
Core Mark
Primary Wordmark
Prism Motion
Motion icon: pulsating prism glow aligned with the Prism section treatment.
Tide Identity
Use vivid cyan-blue accents in execution and delivery tracking contexts.
Wordmark accent: Ti/de split with Tide blue accents.
Core Mark
Primary Wordmark
Tide Motion
Motion icon: curved Tide waves flowing through the core mark.
Helle Identity
Use amber highlights for connective workflows and orchestration actions.
Wordmark accent: Helle in amber to denote connective guidance.
Core Mark
Primary Wordmark
Helle Motion
Motion icon: pulsating circuitry dots in product colors at the ends of signal paths.
Typography
Inter. Clean, legible, and timeless. We use tight leading on headings for a dense, engineered feel.
Display .text-6xl .font-bold
Cosmic Scale
Heading .text-4xl .font-bold
Intelligence Engine
Subheading .text-xl .text-white/60
The operating system for the AI era.
Suite Lockup
Premium LockupCurrent
Typeface
Inter
Designed by Rasmus Andersson
Core Principles
Steorra is designed for clarity in complex environments. Our typographic hierarchy ensures that critical data signals stand out against the noise of the void. We prioritize legibility and scanability above all else.
Motion
Motion conveys life and intelligence. We use a specific "Thinking Pulse" to signify active processing, living data, or AI cognition.
The Cosmic Pulse
A slow, deep respiratory rhythm. Used for the persistent "Organization" state and the main logomark used as a loader or status indicator.
Usage Constants
4s ease-in-outDrop Shadow Glow1.0 → 1.1The Thinking Pulse
A combination of scale, opacity, and color cycling. This animation is reserved for the "Neural Brain" and moments where the system is actively generating or synthesizing data.
Usage Constants
2.5s ease-in-out12s linear1.0 → 1.15Controls
Interactive elements designed for focus and precision.
Primitives
The fundamental building blocks of our interface.
bg-slate-900/40
backdrop-blur-md
border-white/10
bg-slate-800/50
backdrop-blur-xl
border-white/20
bg-blue-900/30
border-blue-500/30
ring-blue-500/20
Assets & Downloads
Official asset packages for Steorra brand marks and icons.
Stacked Icon
300x300px • SVG (Dark Mode)
Stacked Icon
300x300px • SVG (Light Mode)
Preloader Animation
Continuous: Top Down
Build State Tier Variants
Tier-specific signature color stacks for workspace provisioning.
Solo Preloader
Build State • 2-Layer Stack • Solo
Team Preloader
Build State • 3-Layer Stack • Team
Enterprise Preloader
Build State • 4-Layer Stack • Enterprise
Quantum Preloader
Build State • 5-Layer Stack • Quantum
LinkedIn Page Cover
4200x700px • Steorra Suite Identity
LinkedIn Page Cover — Mystery
4200x700px • Constellation Only