Design System

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.

Background
Foreground
Card
Muted
Primary
Secondary
Accent
Hydra
Canvas
Surface
Border
Destructive

Components

Buttons

Multiple button variants for different contexts and emphasis levels.

Components

Badges

Labels and tags for categorization and status indication.

Default
Secondary
Outline
Destructive
Hydra
Ghost
LABEL STYLE

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.

99.99%
UPTIME

Industry-leading reliability

<10ms
LATENCY

Global edge network

10M+
REQUESTS/SEC

Peak throughput

500+
ENTERPRISES

Trust Hydra

Components

Testimonials

Social proof from satisfied customers.

Hydra transformed how we build and deploy AI applications. The speed and reliability are unmatched.
Sarah Chen
CTO · TechCorp
We reduced our infrastructure costs by 60% while improving performance. Hydra is a game-changer.
Marcus Johnson
VP Engineering · ScaleUp Inc

Components

Form Elements

Input fields and form controls.

Components

Code Blocks

Syntax-highlighted code snippets.

hydra.config.ts
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

PRODUCT DEMO

16:9 STANDARD

FEATURE VIDEO

1:1 SQUARE

SOCIAL CLIP

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@system:~$

HYDRA DESIGN SYSTEM

Built with Next.js, Tailwind CSS, and shadcn/ui