Design System v1.0

Style
Guide

Complete design system — colors, typography, spacing, components, and effects for Amplify SEO.

Brand Metrics
+847%4.9/5.0

Avg. Traffic Growth

01

Color Palette

Navy#0F1B2D

--background

Teal#00D4AA

--primary

Gold#F5A623

--accent

Foreground#F8FAFC

--foreground

Muted

#8899AA

Card

#161F33

Border

#263040

Destructive

#EF4444

Teal Scale

#E6FFF7
#70FFD6
#00D4AA
#008F6E

Gold Scale

#FFF8E6
#FFCB70
#F5A623
#D4901A

gradient-text

135° teal → gold

gradient-bg

135° teal/15% → gold/10%

02

Typography

Aa

Headings

Space Grotesk

Weight: 600–700

Aa

Body

Inter

Weight: 400–500

Aa

Labels / Nav

JetBrains Mono

Weight: 400–500

H148–72pxThe quick brown fox
H236–48pxThe quick brown fox
H324–30pxThe quick brown fox
Body16pxThe quick brown fox
Small12pxThe quick brown fox
03

Spacing & Layout

Containermax-w: 1400px, 2rem padding
Sectionpy-20 / md:py-28 / lg:py-32
Cardp-6 to p-8 (24–32px)
Radius0.75rem (--radius)
Breakpointssm:640 / md:768 / lg:1024 / xl:1280
Grid1–4 cols, responsive Tailwind grid
04

Buttons

Primary

bg-accent, shadow glow, mono uppercase

Outline

border-primary/40, text-primary

Sizes

sm:h-9 / default:h-10 / lg:h-11

05

Cards

Standard Card

Surface Treatment

bg-card, border-border, corner accents, hover:translateY(-4px)

Glass Card

Frosted Surface

backdrop-blur-xl, bg-background/60, border-border/50

06

Effects & Animations

Gradient Text

bg-clip-text 135° teal→gold

.gradient-text

Pulse Glow

box-shadow oscillation, teal

.animate-pulse-glow

Float

translateY 6s infinite

.animate-float

Fade In

opacity + translateY 0.6s

.animate-fade-in

Live Preview

Amplify Your Digital Presence

gradient-text · Space Grotesk · 48px Bold

AmplifySEO

Nested triangles with teal-to-gold gradient + wordmark

Min Size

36×36px

Clear Space

8px

Gradient

#00D4AA → #F5A623