gStride AI exists to give individuals back their most valuable resource: focused time. Professionals lose
thousands of hours each year to fragmented workflows -- switching between time trackers, task boards,
leave systems, and scattered notes. gStride AI absorbs that friction entirely. Punch in, set your focus,
and let the AI surface what matters. We are building the future where productive people stop managing
their tools and start owning their output.
"We don't just track time. We help you own it."
-- gStride AI Brand Promise
Brand Personality
Empowering
We put the individual in control. Every feature is designed to amplify personal capability, not add overhead.
Personal
This is your productivity suite. It adapts to how you work, not the other way around. Intimate, not institutional.
Focused
One screen, one priority. We strip away the noise so you can do deep work without distraction.
Growth-oriented
Every day is a chance to go further. The AI learns your patterns and helps you improve week over week.
Voice & Tone
Do
Be encouraging. Lead with what the user can achieve.
Use "stride" as a verb. Find your stride. Stride through tasks. Keep striding.
Write for individuals. Assume personal ambition.
Use short, clear sentences. Action-oriented, warm.
Show confidence. "gStride helps you own your day." Not "gStride might help you be productive."
Reference real workflows: punch in, focus blocks, Pomodoro, leave requests.
Don't
Use corporate buzzwords: "leverage", "synergy", "optimize resources".
Over-qualify with hedging: "might", "could potentially", "may help".
Use exclamation marks. Calm confidence, not hype.
Write long paragraphs. If it takes 3 sentences, use 2.
Use emojis in product copy or documentation.
Talk about the tool more than the person using it.
03 / Logo
Logo Variants
The gStride AI logo is a 3D orbital ring/ellipse -- representing continuous momentum, rhythm, and finding
your pace. Three variants are provided for different contexts. Always use the appropriate variant for the
background. The logo is 3:2 landscape ratio (1536x1024).
Primary (Color)
Default logo. Green gradient 3D orbital ring. Use on dark backgrounds, marketing materials, hero sections, and digital product interfaces.
The orbital ring represents continuous momentum and the rhythm of a productive individual finding their pace.
The 3D ellipse conveys forward motion, growth, and the cyclical nature of focused work -- plan, execute, reflect,
improve. The emerald gradient ties the mark to the Groovy Connect product family while standing distinct within the suite.
04 / Clear Space & Sizing
Clear Space Rules
Maintain a minimum clear space equal to 1x the height of the icon on all sides. This ensures the
logo always has breathing room and is never crowded by adjacent elements. Note the logo is 3:2 landscape
ratio -- clear space is based on the shorter dimension (height).
1x height1x height1x height1x height
Minimum Sizes
Icon only: minimum 48px wide (32px tall at 3:2 ratio). With wordmark: minimum 120px wide.
Below 48px wide, the logo loses legibility and must not be used.
128px
64px
48px
32px
24px (below min)
05 / Logo Misuse
Do's and Don'ts
Consistent logo usage is critical to maintaining brand integrity. Follow these rules at all times.
+ Use on solid dark backgrounds
+ Maintain original proportions
+ Use provided color variants
+ White variant on brand colors
x Stretch or distort
x Change logo colors
x Add shadows or effects
x Place on busy backgrounds
x Rotate the logo
06 / Color Palette
Color System
The gStride AI color palette is built around an emerald primary with deep midnight backgrounds. Every color
has a defined role. Click any hex code to copy it to your clipboard.
Primary Colors
Emerald 500
#10b981
rgb(16, 185, 129)
Emerald 600
#059669
rgb(5, 150, 105)
Emerald 700
#047857
rgb(4, 120, 87)
Emerald 400
#34d399
rgb(52, 211, 153)
Emerald 300
#6ee7b7
rgb(110, 231, 183)
Neutral / Background
Midnight
#0a0a1a
rgb(10, 10, 26)
Surface
#111827
rgb(17, 24, 39)
Surface Light
#1e293b
rgb(30, 41, 59)
White
#ffffff
rgb(255, 255, 255)
Light Gray
#f1f5f9
rgb(241, 245, 249)
Text Colors
Primary (on Dark)
#ffffff
rgb(255, 255, 255)
Secondary (on Dark)
#94a3b8
rgb(148, 163, 184)
Muted
#64748b
rgb(100, 116, 139)
Dark Primary (on Light)
#0f172a
rgb(15, 23, 42)
Dark Secondary (on Light)
#475569
rgb(71, 85, 105)
Semantic Colors
Success
#10b981
rgb(16, 185, 129)
Error
#ef4444
rgb(239, 68, 68)
Warning
#f59e0b
rgb(245, 158, 11)
Info
#3b82f6
rgb(59, 130, 246)
07 / Typography
Type System
Inter is the primary typeface for all gStride AI communications. JetBrains Mono is used for code,
technical content, and monospaced elements. Both are loaded from Google Fonts.
Display
56px / 800
-0.02em tracking
Find your pace
Heading 1
40px / 700
From busy work to real output
Heading 2
32px / 700
AI-powered productivity insights
Heading 3
24px / 600
Punch in. Focus. Stride through your day.
Heading 4
18px / 600
Time tracking, task management, and Pomodoro -- unified
Body
16px / 400
1.6 line-height
gStride AI combines punch-in/out time tracking, task management, project tracking, leave management, and a Pomodoro timer into one focused workspace. AI-powered insights help you understand your patterns and increase your output every week.
Body Small
14px / 400
Track time per project, manage tasks with priorities, and get weekly AI reports on where your hours went.
Caption
12px / 500
uppercase / 1px tracking
Focus session: 47 minutes remaining
Code
14px / JetBrains Mono
400 weight
gstride punch-in --project "client-app" --focus deep
gStride AI visuals are warm, personal, and growth-focused. Deep greens and emeralds dominate. Imagery should
feel like the calm focus of a productive morning -- clear desk, single task, forward momentum.
Warm & Growth-focused
Primary aesthetic. Deep backgrounds with subtle emerald accents and gradients. Feels personal and empowering.
Gradient Overlays
When placing the logo or text over photos, always apply a dark gradient overlay (bottom-up) to ensure legibility.
Geometric Patterns
Line-based, geometric illustrations using brand colors only. Clean intersections. No gradients on lines.
Photography Treatment
Desaturate, apply dark overlay, tint toward green. Photography should support the brand feel -- focused, clean, personal.
Guidelines Summary
- Backgrounds: #0a0a1a to #111827 range, never lighter than #1e293b
- Accent glows: Radial gradients of emerald at 8-15% opacity, never full brightness
- Photography: Desaturate 40-60%, overlay at 70-95% opacity, tint toward green
- Illustrations: Single-weight strokes, 1px on screen, brand colors only
- Icons: Outline style, 1.5px stroke, rounded caps and joins
09 / UI Components
Component Library
Core UI components styled in the gStride AI brand. These serve as the reference for product interfaces,
marketing pages, and documentation.
Buttons
Input Fields
Card
Focus Session #312
Deep work completed. 2h 15m focused time. 4 tasks closed.
CompletedDeep Focus
Badges & Tags
In ProgressDoneOn BreakOverdue
Alerts
+
Punch in recorded. Focus session started.
!
You forgot to punch out yesterday. Please update.
!
Leave balance low. 2 days remaining this quarter.
i
Weekly report ready. You logged 38.5 hours across 6 projects.
10 / Social Media
Social Templates
Standard social media template sizes for consistent brand presence across platforms.
All templates use the dark aesthetic with centered or left-aligned logo placement.
gStride AI
From busy work to real output.
OG Image1200 x 630
gStride AI
From busy work to real output.
Twitter / X1200 x 675
gStride AI by Groovy Connect
From busy work to real output.
LinkedIn Banner1584 x 396
gStride AI
From busy work to real output.
Square Post1080 x 1080
App Icon512 x 512
11 / Brand in Action
Applied Examples
Real-world applications of the gStride AI brand across digital and physical touchpoints.
Social Templates
gStride AI
From busy work to real output.
gStride AI
From busy work to real output.
gStride AI by Groovy Connect
From busy work to real output.
gStride AI
From busy work to real output.