Hydra Design System
A modern, high-tech, futuristic, and elegant design system for the Hydra product website. Inspired by Augment Code's brand language.
Typography
Type Scale & Styles
Bold geometric headlines with Space Grotesk, clean body text with Outfit, and futuristic accents with Orbitron.
DISPLAY HEADINGS — SPACE GROTESK
DISPLAY XL
DISPLAY LG
DISPLAY MD
DISPLAY SM
ACCENT HEADINGS — ORBITRON
ACCENT XL
ACCENT LG
ACCENT MD
BODY TEXT — OUTFIT
Body Large — Perfect for introductions and lead paragraphs that need emphasis.
Body Default — Standard paragraph text for most content throughout the site.
Body Small — Used for captions, footnotes, and secondary information.
SPECIAL EFFECTS
LABEL STYLE — UPPERCASE MONO
LABEL SMALL — COMPACT LABELS
const code = "Monospace for code";
GRADIENT TEXT
CYBER OUTLINE
CYBER GLOW
Colors
Color Palette
A sophisticated palette with deep blacks, clean whites, and a signature cyan accent.
Components
Buttons
Multiple button variants for different contexts and emphasis levels.
Components
Badges
Labels and tags for categorization and status indication.
Components
Cards
Container components for grouping related content.
Default Card
Standard card with subtle border
Card content goes here with any components you need.
Elevated Card
Enhanced shadow on hover
Perfect for interactive elements that need emphasis.
Glow Card
Hydra accent glow effect
Use for premium or highlighted content sections.
Components
Feature Cards
Highlight product features and capabilities.
Lightning Fast
Optimized for speed with sub-millisecond response times.
Enterprise Security
Bank-grade encryption and compliance certifications.
AI-Powered
Advanced machine learning models at your fingertips.
Global Scale
Deploy to 200+ edge locations worldwide instantly.
Components
Statistics
Display impressive numbers and metrics.
Industry-leading reliability
Global edge network
Peak throughput
Trust Hydra
Components
Testimonials
Social proof from satisfied customers.
“Hydra transformed how we build and deploy AI applications. The speed and reliability are unmatched.”
“We reduced our infrastructure costs by 60% while improving performance. Hydra is a game-changer.”
Components
Form Elements
Input fields and form controls.
Components
Code Blocks
Syntax-highlighted code snippets.
1import { Hydra } from '@hydra/sdk';2 3const client = new Hydra({4 apiKey: process.env.HYDRA_API_KEY,5 region: 'us-east-1',6});7 8await client.deploy({9 model: 'gpt-4',10 scaling: 'auto',11});Components
Video Placeholders
Placeholder components for video content with various aspect ratios.
21:9 CINEMATIC
16:9 STANDARD
1:1 SQUARE
Effects
Visual Effects
Glow, glass, grid patterns, and animation utilities.
GLOW EFFECT
Subtle cyan glow
GLASS EFFECT
Frosted glass blur
HOVER LIFT
Hover to see effect
TEXT GLOW
Glowing text effect
FLOAT ANIMATION
Gentle floating motion
PULSE GLOW
Breathing glow effect
TECH PATTERNS
TECH GRID
TECH GRID SM
DOT GRID
SCAN LINES
GRID + GLOW
HYDRA DESIGN SYSTEM
Built with Next.js, Tailwind CSS, and shadcn/ui