Typography

RAVRO Design System

WordPress Done Right

Colors

Primary Blue

#0052CC

Primary Hover

#0042AA

Light Blue

#E8EFFF

Charcoal

#2D3748

White

#FFFFFF

Light BG

#F8F9FB

Border

#E2E8F0

Muted Text

#718096

Success

#059669

Warning

#D97706

Error

#DC2626

Element	Size	Weight	Sample	Font Family
H1 / Hero	48px / 40px / 32px	700	Heading 1	Sora
H2 / Section	36px / 32px / 28px	700	Heading 2	Sora
H3 / Subsection	30px / 28px / 24px	600	Heading 3	Sora
Body Large	18px	400	Large body text here	Inter
Body Default	16px	400	Normal paragraph text	Inter
Body Small	14px	400	Small text	Inter
Caption	12px	400	CAPTION TEXT	Inter
Button	14px	500		Inter

Buttons

Primary Button

.btn-primary { background: #0052CC; color: white; } .btn-primary:hover { background: #0042AA; }

Secondary Button

.btn-secondary { background: #E8EFFF; color: #0052CC; } .btn-secondary:hover { background: #D9E5FF; }

Outline Button

.btn-outline { background: transparent; color: #0052CC; border: 1px solid #0052CC; } .btn-outline:hover { background: #E8EFFF; }

Ghost Button

.btn-ghost { background: transparent; color: #2D3748; } .btn-ghost:hover { background: #F8F9FB; }

Tabs

Overview

This is the overview tab content. RAVRO is a premium WordPress web design and development agency focused on creating beautiful, modern websites.

Features

Our design system includes comprehensive components, typography scales, color palette, and interactive elements for seamless web development.

Pricing

Custom pricing based on your project scope and requirements. Contact us for a detailed quote and consultation.

Tab CSS

.tab-button { border-bottom: 3px solid transparent; color: #718096; } .tab-button.active { color: #0052CC; border-bottom-color: #0052CC; } .tab-button:hover { color: #2D3748; }

Box Shadows

Small

Medium

Large

Extra Large

Shadow CSS

.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }