Design System

Site color reference.

CSS variables and resolved values for the GreenSparks site color system. Semi-transparent values are composited over their actual in-context background.

Element CSS Variable Resolved Value Swatches
Page background --feature-page-dark-bg HSL(170°,14%,14%)
rgb(31,41,39)
Panel / card base --feature-page-dark-panel HSL(160°,15%,19%)
rgb(41,56,51)
Section gradient overlay --feature-page-section-gradient linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0))
Panel gradient overlay --feature-page-panel-gradient linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018))
Proof strip gradient (hardcoded) linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.018))
Section top border --feature-page-section-border rgba(151, 178, 153, 0.08)
Panel / card border --feature-page-panel-border rgba(151, 178, 153, 0.25)
Primary text --site-hero-ink rgb(244, 247, 241)
Secondary text --site-hero-muted rgba(232, 238, 229, 0.76)
Faint text / placeholders --site-hero-faint rgba(232, 238, 229, 0.56)
Accent --site-accent rgb(155, 216, 111)
Accent strong --site-accent-strong rgb(108, 174, 80)
Accent soft fill --site-accent-soft rgba(155, 216, 111, 0.12)
Nav background (computed) color-mix(rgb(17, 24, 22) 94%, black)
Nav / utility text --gs-color-text ~rgb(245, 247, 251)