Ajax Baseball Design System 2.0
A living specification that demonstrates its own principles. Every element you see is built using the system it documents.
Core Design Refinements
Version 2.0 brings subtle but impactful improvements to create a more refined visual experience
Background System
Reduced opacity layers create depth without overwhelming content. Background blur increased to 120px for better readability.
/* Refined opacity values */
opacity: 0.15; /* Was 0.3 */
backdrop-filter: blur(120px);
Particle System
Smaller, subtler particles with slower animation create ambient movement without distraction.
/* Optimized particles */
--particle-size: 2px;
--particle-opacity: 0.3;
animation-duration: 80s;
Icon System
Consistent 1.5px stroke width with contextual icon selection based on content purpose.
/* Icon specifications */
stroke-width: 1.5px;
size: 36x36px (cards)
size: 40x40px (features)
Enhanced Color System
Dynamic color relationships that adapt to context and user preferences
House League Design
Unique visual identity for House League with progressive badge system
T-Ball
Single Stripe
Rookie
Two Stripes
Mosquito
Three Stripes + Star
Pee Wee
Four Stripes + 2 Stars
Bantam/Midget
Five Stripes + Crown
Did You Know?
Years of Excellence
Ajax Baseball has been developing champions since 1954
Active Players
One of Ontario's largest youth baseball programs
Diamond Fields
Premium facilities across Ajax and Durham Region
Component Library
Reusable components that maintain consistency across all implementations
Green Hover Pattern
Interactive Card
Hover to see the effect
Implementation Pattern
The green hover state creates a consistent interaction pattern across all components.
/* Base State - Gold */
.component {
background: linear-gradient(135deg,
rgba(255, 215, 0, 0.1) 0%,
rgba(255, 193, 7, 0.1) 100%);
border: 1px solid rgba(255, 215, 0, 0.2);
color: var(--gold-primary);
transition: all var(--time-short) ease;
}
/* Hover State - Green */
.component:hover {
background: linear-gradient(135deg,
rgba(27, 94, 32, 0.2) 0%,
rgba(46, 125, 50, 0.2) 100%);
border-color: rgba(27, 94, 32, 0.4);
color: var(--green-light);
transform: translateY(-2px);
}
Animation System
Temporal coherence creates rhythm through shared timing functions
Pulse
2s ease-in-out
Bounce
2s ease-in-out
Spin
var(--time-long)
Float
3s ease-in-out
Temporal Coherence System
All animations share a base timing unit, creating polyrhythmic relationships throughout the interface.
:root {
/* Base unit creates rhythm */
--time-base: 1s;
/* Derived timings maintain relationships */
--time-short: calc(var(--time-base) * 0.3); /* 0.3s - Micro interactions */
--time-medium: var(--time-base); /* 1s - Standard transitions */
--time-long: calc(var(--time-base) * 3); /* 3s - Ambient animations */
--time-epic: calc(var(--time-base) * 80); /* 80s - Background cycles */
}