Our visual identity system. Consistent usage ensures Gekko is always recognizable and professional.
The Gekko logo combines a symbol mark with a wordmark. Always use the official assets.
Our palette centers on emerald-to-teal gradients, supported by neutral grays and functional accent colors.
All gradients flow from dark (left) to light (right). This is a core brand rule — never reverse the direction.
Programmable Revenue
bg-gradient-to-r from-emerald-800 via-emerald-500 to-teal-400 bg-clip-text text-transparentCall to Action Section
Used for prominent CTA banners and hero sections
bg-gradient-to-r from-emerald-800 via-emerald-600 to-teal-500Page Background
Subtle vertical gradient from white to light gray
bg-gradient-to-b from-background to-secondary/20bg-gradient-to-br from-emerald-700 via-emerald-500 to-teal-400We use Geist Sans as our primary typeface — clean, modern, and highly readable across all sizes.
Gekko
Normal (400)
Body text
Gekko
Medium (500)
Nav items, labels
Gekko
Semibold (600)
Card titles, buttons
Gekko
Extrabold (800)
Hero headlines
Buttons follow a strict hierarchy. Use the correct variant to guide user attention.
Primary CTA
Gradient emerald button with shadow. For the single most important action on a page — "Start Free Trial", "Get Started".
variant="cta"Secondary CTA
Slate-blue button with subtle shadow. Companion to the primary CTA — "View Demo", "Learn More".
variant="ctaSecondary"Default
Solid primary-color button. For standard in-page actions.
variant="default"Outline
Bordered button with transparent background. For tertiary actions and navigation.
variant="outline"Ghost
No background, hover reveals accent. For navigation items and subtle actions.
variant="ghost"Secondary
Muted background button. For less prominent actions and inside gradient CTA sections.
variant="secondary"Consistent spacing creates rhythm and hierarchy across the page.
py-16 / py-2464–96pxpx-624pxp-6 / p-824–32pxgap-4 / gap-6 / gap-816–32pxmax-w-5xl / max-w-6xl1024–1152pxRecurring UI patterns that maintain consistency across the product.
Standard card with icon, title, and description. Hover reveals primary border.
Used for "most popular" or featured items. Gradient background with emerald border.
Reduced prominence for secondary content sections.
The site header uses a frosted-glass effect with backdrop blur. It remains fixed at the top on scroll.
bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/80 sticky top-0 z-[100]All colors are defined as HSL CSS variables for consistent theming and dark mode support.
| Token | Light Value | Usage |
|---|---|---|
| --background | 0 0% 100% | Page background |
| --foreground | 0 0% 3.9% | Primary text |
| --primary | 142 76% 36% | Brand emerald |
| --secondary | 0 0% 96.1% | Subtle backgrounds |
| --muted-foreground | 0 0% 45.1% | Secondary text |
| --card | 0 0% 100% | Card backgrounds |
| --border | 0 0% 89.8% | Borders & dividers |
| --cta-primary | 155 80% 32% | Primary CTA |
| --cta-secondary | 215 50% 47% | Secondary CTA |
| --destructive | 0 84.2% 60.2% | Error & destructive |
| --ring | 142 76% 36% | Focus rings |
| --radius | 0.5rem | Base border radius |
How Gekko communicates — confident, precise, and forward-looking.