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.
Intelligent 121 Companion
Career Development
Performance Reviews
Delivery intelligence
Connective intelligence layer
GrowQ Identity
The GrowQ mark represents the "Q-Orbit" – a synthesis of star-like quality and orbital momentum.
View Full GrowQ Brandkit
Solid Q-Orbit
Primary Wordmark
GrowQ Motion
The "Animated Color" logo is the primary motion asset for GrowQ, symbolizing the dynamic intersections of career path, intelligence, and momentum.
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