Website Design Guide

The central point of truth for all Spidrweb website design decisions, components, and standards.

Design Principles

Modern & Clean

Keep designs minimal and focused. Every element should have a purpose.

Dark Mode First

All designs should prioritize dark mode (#0a0a0a background) as the primary experience.

Accessibility

Maintain WCAG AA minimum contrast ratios and ensure keyboard navigation.

Consistency

Use this guide as the single source of truth for all design decisions.

Color System

Primary Gradients

Colors use progressive enhancement: Hex (fallback) → OKLCH (modern browsers) → P3 (wide gamut displays) for maximum vibrancy.

Primary Gradient

Hex (Fallback):

#b82ea1 → #bb2fc2 → #a62ccd → #9129d7 → #7c26e1 → #6521eb → #4b19f5 → #230aff

OKLCH (Modern):

oklch(0.55 0.25 330) → oklch(0.56 0.26 320) → oklch(0.54 0.27 310) → oklch(0.52 0.28 300) → oklch(0.50 0.29 290) → oklch(0.48 0.30 280) → oklch(0.46 0.31 270) → oklch(0.44 0.32 260)

P3 (Wide Gamut):

color(display-p3 0.72 0.18 0.63) → color(display-p3 0.73 0.18 0.76) → color(display-p3 0.65 0.17 0.80) → color(display-p3 0.57 0.16 0.84) → color(display-p3 0.49 0.15 0.88) → color(display-p3 0.40 0.13 0.92) → color(display-p3 0.30 0.10 0.96) → color(display-p3 0.14 0.04 1.0)

Use for: Primary CTAs, important highlights, key actions

Secondary Gradient

Hex (Fallback):

#302A9B → #37F486

OKLCH (Modern):

oklch(0.35 0.20 280) → oklch(0.75 0.20 160)

P3 (Wide Gamut):

color(display-p3 0.19 0.17 0.61) → color(display-p3 0.22 0.96 0.53)

Use for: Secondary elements, accents, alternative highlights

Base Colors

Dark Background

#0a0a0a

oklch(0.08 0 0)

Primary page background

Card Background

#1a1a1a

oklch(0.15 0 0)

Card and container backgrounds

Border

#2a2a2a

oklch(0.22 0 0)

Borders and dividers

Text

#e5e5e5 / #FFFFFF

oklch(0.92 0 0)

Primary text color

Color System Notes

Progressive Enhancement

Colors are defined with multiple fallbacks for maximum compatibility and vibrancy:

Hex colors - Fallback for all browsers
OKLCH colors - Better perceptual uniformity in modern browsers
P3 colors - Wider color gamut on supported displays (modern Macs, iPhones, high-end monitors)

Benefits

More vibrant colors on P3-capable displays
Better perceptual uniformity with OKLCH
Automatic enhancement on supported displays
Backward compatible with hex fallbacks

Usage

The CSS automatically uses the best available color format. No special syntax needed - just use the standard gradient classes like gradient-bg-primary or gradient-text.

Typography

Font Families

Headings - Montserrat

All headings (h1-h6) use Montserrat font family

Font weights: 400, 500, 600, 700, 800

Body Text - Outfit

All body text and non-heading elements use Outfit font family

Font weights: 300, 400, 500, 600, 700

Responsive Font Size System

The typography system uses CSS custom properties with clamp() for fully responsive font sizing. All sizes scale smoothly between minimum and maximum values based on viewport width.

:root {
    --spidrweb-xs: clamp(0.64rem, 0.05vi + 0.63rem, 0.67rem);
    --spidrweb-s: clamp(0.8rem, 0.17vi + 0.76rem, 0.89rem);
    --spidrweb-r: clamp(1rem, 0.34vi + 0.91rem, 1.19rem);
    --spidrweb-m: clamp(1.25rem, 0.61vi + 1.1rem, 1.58rem);
    --spidrweb-l: clamp(1.56rem, 1vi + 1.31rem, 2.11rem);
    --spidrweb-xl: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem);
    --spidrweb-xxl: clamp(2.44rem, 2.38vi + 1.85rem, 3.75rem);
    --spidrweb-xxxl: clamp(3.05rem, 3.54vi + 2.17rem, 5rem);
}
                        

XXXL - Hero Headings

Class: text-spidrweb-xxxl

Range: 3.05rem - 5rem | Use for: Large hero headings, page titles

XXL - Major Headings

Class: text-spidrweb-xxl

Range: 2.44rem - 3.75rem | Use for: Section titles, major headings

XL - Large Headings

Class: text-spidrweb-xl

Range: 1.95rem - 2.81rem | Use for: Subsection titles, card headers

L - Large Body

Class: text-spidrweb-l

Range: 1.56rem - 2.11rem | Use for: Lead paragraphs, emphasis text

M - Medium Body

Class: text-spidrweb-m

Range: 1.25rem - 1.58rem | Use for: Standard body content, paragraphs

R - Regular Body

Class: text-spidrweb-r

Range: 1rem - 1.19rem | Use for: Default body text, base content

S - Small Text

Class: text-spidrweb-s

Range: 0.8rem - 0.89rem | Use for: Secondary text, captions

XS - Extra Small

Class: text-spidrweb-xs

Range: 0.64rem - 0.67rem | Use for: Metadata, fine print

Usage Examples

Headings with Montserrat

<h1 class="text-spidrweb-xxxl font-bold">Page Title</h1>
<h2 class="text-spidrweb-xxl font-bold">Section Title</h2>
<h3 class="text-spidrweb-xl font-bold">Subsection Title</h3>
                                

Page Title Example

Section Title Example

Subsection Title Example

Body Text with Outfit

<p class="text-spidrweb-m">Standard paragraph text</p>
<p class="text-spidrweb-l">Lead paragraph text</p>
<p class="text-spidrweb-s">Small caption text</p>
                                

This is standard body text using the medium size. It's perfect for paragraphs and general content.

This is large body text, ideal for lead paragraphs and emphasis.

This is small text, perfect for captions and metadata.

Gradient Text

Use gradient text for emphasis in headings:

<h1 class="text-spidrweb-xxxl font-bold">
    Welcome to <span class="gradient-text">Spidrweb</span>
</h1>
                        

Welcome to Spidrweb

Logo & Branding

Logo Variations

Primary Logo (White) - 2026

Use on dark backgrounds (default for site)

File: assets/logos/spidrweb-logo-2026-white.png

Secondary Logo (Black) - 2026

Use on light backgrounds

File: assets/logos/spidrweb-logo-2026-black.png

Icon Version

Use as favicon or app icon

File: assets/icons/spidrweb-icon.jpg

Logo Usage Guidelines

Maintain minimum clear space around the logo (equal to the height of the logo)
Do not alter, distort, rotate, or change colors of the logo
Use the white logo on dark backgrounds (default for site), black logo on light backgrounds (#FFFFFF or lighter)
Never place the logo on busy backgrounds that reduce readability
Minimum logo size: 120px width for web, 200px for print
Always maintain aspect ratio when resizing

Spacing & Layout

Spacing Scale

Use Tailwind's spacing scale for consistency:

4px

p-1, gap-1, m-1

8px

p-2, gap-2, m-2

16px

p-4, gap-4, m-4

24px

p-6, gap-6, m-6

32px

p-8, gap-8, m-8

Container Guidelines

Use container mx-auto px-6 for main content containers
Section spacing: mb-20 (80px) between major sections
Card padding: p-8 (32px) for standard cards
Grid gaps: gap-6 (24px) or gap-8 (32px)

Components

Card Component

<div class="card rounded-lg p-8">
    <h3 class="text-spidrweb-l font-semibold mb-4">Card Title</h3>
    <p class="text-gray-400">Card content goes here</p>
</div>
                        

Example Card

This is an example card component with the standard styling.

Section Header

<h2 class="text-spidrweb-xxl font-bold mb-8">
    Section <span class="gradient-text-alt">Title</span>
</h2>
                        

Section Title

Trusted By / Client Logos

<section class="mb-16 py-12">
    <div class="text-center mb-8">
        <p class="text-spidrweb-s text-gray-400 uppercase tracking-wider mb-2">Trusted By</p>
        <div class="h-px w-24 bg-gradient-to-r from-transparent via-purple-500 to-transparent mx-auto"></div>
    </div>
    <div class="flex flex-wrap items-center justify-center gap-8 md:gap-12 opacity-60 hover:opacity-100 transition-opacity">
        <div class="flex items-center justify-center h-16 w-auto max-w-[180px] grayscale hover:grayscale-0 transition-all">
            <img src="/assets/client-logos/logo-1.png" alt="Client Name" class="max-h-full max-w-full object-contain">
        </div>
        <div class="flex items-center justify-center h-16 w-auto max-w-[180px] grayscale hover:grayscale-0 transition-all">
            <img src="/assets/client-logos/logo-2.png" alt="Client Name" class="max-h-full max-w-full object-contain">
        </div>
        <!-- Add more logos as needed -->
    </div>
</section>
                        

Trusted By

Features: Logos are displayed in grayscale by default and transition to full color on hover. The section includes a gradient divider line and is fully responsive.

Services Section

<section class="mb-16 py-20">
    <div class="text-center mb-12">
        <h2 class="text-spidrweb-xxl md:text-spidrweb-xxxl font-bold mb-4">
            Our <span class="gradient-text-alt">Services</span>
        </h2>
        <p class="text-spidrweb-m text-gray-400 max-w-3xl mx-auto">
            Providing a complete range of solutions tailored for you. Whether you're looking for fast web hosting, 
            expert malware removal, enterprise-grade email hosting, custom web design, or bespoke development, we've got you covered.
        </p>
        <a href="#" class="inline-block mt-6 text-gray-400 hover:text-white transition">
            Explore all services →
        </a>
    </div>

    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="card rounded-lg p-6 hover:border-purple-500/50 transition">
            <div class="mb-4">
                <i class="fab fa-wordpress text-spidrweb-xxl gradient-text"></i>
            </div>
            <h3 class="text-spidrweb-l font-semibold mb-3 gradient-text">Service Name</h3>
            <p class="text-gray-400">
                Service description goes here.
            </p>
        </div>
        <!-- Add more service cards as needed -->
    </div>
</section>
                        

Our Services

Providing a complete range of solutions tailored for you. Whether you're looking for fast web hosting, expert malware removal, enterprise-grade email hosting, custom web design, or bespoke development, we've got you covered.

Explore all services →

WPaaS

Fully managed WordPress website or app, so you can focus on what matters most.

Development

Full theme and plugin coded just for you. The only limitation is your imagination.

Web Design

Have a website fully designed from the ground up. Any platform, your choice!

Email Deployment & Support

Fast and reliable enterprise email. Making sure that you get your messages delivered.

Malware Removal

We know how annoying it is when sites are hacked with malware. We're happy to clean up all the malicious code for you so that your traffic can return!

Web Hosting

With our simple, speedy web hosting for businesses and individuals you can have your website up in no time.

Features: Services are displayed in a responsive grid (3 columns on desktop, 2 on tablet, 1 on mobile). Each service card includes a Font Awesome icon with gradient styling, alternating between primary and secondary gradients. Cards have hover effects with border color transitions. Icons use Font Awesome 6.5.1 (loaded via CDN in header).

Index: COMPONENT-001

Service Card with Features List

Index: COMPONENT-011

<div class="card service-card rounded-lg p-8 hover:border-purple-500/50 transition relative z-10 group">
    <div class="mb-6 flex items-center justify-between">
        <div>
            <i class="fab fa-wordpress text-spidrweb-xxxl gradient-text mb-4 block"></i>
            <h3 class="text-spidrweb-xl font-bold mb-2 gradient-text">Service Name</h3>
            <p class="text-spidrweb-s text-gray-500 uppercase tracking-wider">Service Tagline</p>
        </div>
    </div>
    <p class="text-spidrweb-m text-gray-400 mb-6 leading-relaxed">
        Service description goes here.
    </p>
    <div class="pt-6 border-t border-gray-800">
        <ul class="space-y-2 text-spidrweb-s text-gray-400">
            <li class="flex items-center gap-2">
                <i class="fas fa-check text-green-500 text-spidrweb-xs"></i>
                <span>Feature 1</span>
            </li>
            <li class="flex items-center gap-2">
                <i class="fas fa-check text-green-500 text-spidrweb-xs"></i>
                <span>Feature 2</span>
            </li>
        </ul>
    </div>
</div>
                        

WPaaS

WordPress as a Service

Fully managed WordPress website or app, so you can focus on what matters most.

Fully managed hosting
Automatic updates
24/7 support

Features: Enhanced service card with larger icon (text-spidrweb-xxxl), service tagline, description, and feature list with checkmarks. Includes a divider between description and features. Uses the service-card class for subtle gradient shine effect on hover.

Why Choose Us / Benefits Section

Index: COMPONENT-012

<section class="mb-20">
    <div class="text-center mb-12">
        <h2 class="text-spidrweb-xxl font-bold mb-4">
            Why Choose <span class="gradient-text-alt">Company</span>?
        </h2>
        <p class="text-spidrweb-m text-gray-400 max-w-3xl mx-auto">
            Description text here.
        </p>
    </div>
    <div class="grid md:grid-cols-3 gap-8">
        <div class="card rounded-lg p-8 text-center hover:border-purple-500/50 transition">
            <div class="w-16 h-16 mx-auto mb-6 rounded-full bg-gradient-to-br from-purple-500/20 to-green-500/20 flex items-center justify-center">
                <i class="fas fa-users text-spidrweb-xxl gradient-text"></i>
            </div>
            <h3 class="text-spidrweb-l font-bold mb-4">Benefit Title</h3>
            <p class="text-spidrweb-s text-gray-400">
                Benefit description goes here.
            </p>
        </div>
        <!-- Add more benefit cards -->
    </div>
</section>
                        

Why Choose Spidrweb?

We provide a complete solution for all your online needs.

Expert Team

Over 27 years of combined experience (since 1997) in web development.

Features: Three-column grid of benefit cards with circular icon containers, gradient backgrounds, and centered content. Each card includes an icon in a rounded container with gradient background, title, and description. Cards have hover border effects.

About Us Section with Stats

Index: COMPONENT-002

<section class="mb-16 py-20">
    <div class="grid md:grid-cols-2 gap-12 items-center">
        <div>
            <h2 class="text-spidrweb-xxl md:text-spidrweb-xxxl font-bold mb-6">
                About <span class="gradient-text-alt">Spidrweb</span>
            </h2>
            <div class="space-y-4 text-spidrweb-m text-gray-400 leading-relaxed">
                <p>Content goes here...</p>
            </div>
        </div>
        <div class="grid grid-cols-2 gap-6">
            <div class="card rounded-lg p-6 text-center">
                <div class="text-spidrweb-xxxl font-bold gradient-text mb-2">27+</div>
                <div class="text-spidrweb-s text-gray-400">Years Experience</div>
            </div>
            <!-- Add more stat cards -->
        </div>
    </div>
</section>
                        

About Spidrweb

Spidrweb is a business in Hampshire, UK. We provide businesses, individuals, and affiliate marketers around the world a full stack of services including hosting, web design, email, backup solutions, server support as well as business support services & bookkeeping.

With over 27 years of experience (since 1997), hard-earned knowledge, and industry expertise, we confidently deliver exceptional services to our valued clients.

27+

Years Experience

100+

Projects Delivered

50+

Happy Clients

Based in Hampshire

Features: Two-column layout with content on the left and a 2x2 grid of stat cards on the right. Stats alternate between primary and secondary gradient colors. Responsive: stacks on mobile.

Blog Roll Section

Index: COMPONENT-003

<section class="mb-16 py-20">
    <div class="text-center mb-12">
        <h2 class="text-spidrweb-xxl md:text-spidrweb-xxxl font-bold mb-4">
            Latest <span class="gradient-text">News & Articles</span>
        </h2>
        <p class="text-spidrweb-m text-gray-400 max-w-3xl mx-auto">
            Description text here...
        </p>
    </div>
    <div class="grid md:grid-cols-3 gap-6">
        <article class="card rounded-lg p-6 hover:border-purple-500/50 transition group">
            <div class="mb-4">
                <span class="text-spidrweb-s text-gray-400">Date</span>
            </div>
            <h3 class="text-spidrweb-l font-semibold mb-3 group-hover:text-white transition">Article Title</h3>
            <p class="text-gray-400 mb-4 line-clamp-3">Excerpt...</p>
            <a href="#" class="text-gray-400 hover:text-white transition inline-flex items-center gap-2">
                Read more <i class="fas fa-arrow-right text-spidrweb-s"></i>
            </a>
        </article>
        <!-- Add more articles -->
    </div>
</section>
                        

Latest News & Articles

Our latest articles on WordPress development, security, and performance.

January 10, 2023

Article Title Example

Article excerpt goes here. This is a sample of how blog articles are displayed in the blog roll section.

Features: Three-column grid of article cards. Each card includes date, title, excerpt (line-clamp-3), and read more link. Cards have hover effects with border color transitions and group hover for title color change.

Latest Projects Section

Index: COMPONENT-004

<section class="mb-16 py-20">
    <div class="text-center mb-12">
        <h2 class="text-spidrweb-xxl md:text-spidrweb-xxxl font-bold mb-4">
            Latest <span class="gradient-text-alt">Projects</span>
        </h2>
    </div>
    <div class="space-y-8">
        <div class="card rounded-lg p-8 md:p-12 hover:border-purple-500/50 transition group">
            <div class="grid md:grid-cols-2 gap-8 items-center">
                <div>
                    <span class="text-spidrweb-s font-semibold gradient-text-alt uppercase tracking-wider">Case Study</span>
                    <h3 class="text-spidrweb-xxl md:text-spidrweb-xxl font-bold mb-4 group-hover:text-white transition">Project Name</h3>
                    <p class="text-spidrweb-m text-gray-400 mb-6">Description...</p>
                    <div class="flex flex-wrap gap-3 mb-6">
                        <span class="px-4 py-2 bg-gray-800/50 rounded-full text-spidrweb-s text-gray-300">Tag</span>
                    </div>
                    <a href="#" class="inline-flex items-center gap-2 text-gray-400 hover:text-white transition">
                        View Project <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
                <div class="relative">
                    <div class="aspect-video bg-gradient-to-br from-purple-500/20 to-green-500/20 rounded-lg"></div>
                </div>
            </div>
        </div>
        <!-- Alternate layout for next project -->
    </div>
</section>
                        

Latest Projects

Case Study

Project Example

Project description goes here. This showcases the project details and impact.

WordPress Custom Design

View Project

Project Image

Features: Full-width project cards with alternating layouts (image left/right). Each project includes category badge, title, description, tags, and CTA link. Cards have hover effects. Projects are stacked vertically with spacing.

CTA Section (Full Version)

Index: COMPONENT-005

<section class="mb-16 py-20"> <div class="card rounded-lg p-12 md:p-16 relative overflow-hidden"> <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 via-transparent to-green-500/10 opacity-50"></div> <div class="relative z-10 text-center max-w-3xl mx-auto"> <h2 class="text-spidrweb-xxl md:text-spidrweb-xxxl font-bold mb-6"> Heading with <span class="gradient-text-alt">Gradient Text</span> </h2> <p class="text-spidrweb-l text-gray-400 mb-8 leading-relaxed">Description...</p> <div class="flex flex-col sm:flex-row gap-4 justify-center"> <a href="#" class="gradient-bg-primary text-white px-8 py-4 rounded-lg hover:opacity-90 transition font-semibold text-spidrweb-m"> Primary CTA </a> <a href="#" class="border border-gray-700 text-white px-8 py-4 rounded-lg hover:bg-gray-800 transition font-semibold text-spidrweb-m"> Secondary CTA </a> </div> <div class="mt-8 pt-8 border-t border-gray-800"> <p class="text-gray-400 mb-2">Or reach us directly:</p> <div class="flex flex-col sm:flex-row gap-4 justify-center items-center text-gray-300"> <a href="mailto:[email protected]" class="hover:text-white transition inline-flex items-center gap-2"> <i class="fas fa-envelope"></i> Email </a> <span class="hidden sm:inline text-gray-600">•</span> <a href="tel:+1234567890" class="hover:text-white transition inline-flex items-center gap-2"> <i class="fas fa-phone"></i> Phone </a> </div> </div> </div> </div> </section>

Need to Know More About Our Services?

Let's discuss how we can help transform your digital presence.

Get in Touch View Our Services

Or reach us directly:

[email protected] • +44 (0)7470 349 063

Features: Large card with gradient overlay background, centered content, primary and secondary CTAs, and contact information section with email and phone. Fully responsive.

Simple Hero Section

Index: HERO-005

<section class="mb-16 py-20">
    <div class="max-w-4xl mx-auto text-center">
        <h1 class="text-spidrweb-xxxl md:text-spidrweb-xxxl font-bold mb-6">
            Who We <span class="gradient-text-alt">Are</span>
        </h1>
        <p class="text-spidrweb-l text-gray-400 leading-relaxed mb-4">
            Description text here.
        </p>
    </div>
</section>
                        

Who We Are

Comprehensive web solutions for businesses, individuals, and affiliate marketers.

Trusted by…

Features: Centered, simple hero with large heading, description text, and optional tagline. Uses max-width container for optimal readability.

Feature Card with Gradient Overlay

Index: COMPONENT-006

<section class="mb-20">
    <div class="card rounded-lg p-8 md:p-12 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-transparent to-green-500/5"></div>
        <div class="relative z-10">
            <div class="text-center mb-8">
                <h2 class="text-spidrweb-xxl md:text-spidrweb-xxxl font-bold mb-6">
                    Heading with <span class="gradient-text">Gradient</span>
                </h2>
            </div>
            <div class="max-w-4xl mx-auto space-y-6 text-spidrweb-m text-gray-400 leading-relaxed">
                <p>Content goes here...</p>
            </div>
        </div>
    </div>
</section>
                        

Where Simplicity Meets Expertise

At Spidrweb, we provide a full-stack web solution designed to eliminate the frustrations businesses often face when juggling multiple service providers.

Features: Large card with subtle gradient overlay background, centered heading, and content area. Uses relative positioning for overlay and z-index for content layering.

Stats Section - 4 Columns

Index: COMPONENT-007

<section class="mb-20">
    <div class="text-center mb-12">
        <h2 class="text-spidrweb-xxl md:text-spidrweb-xxl font-bold mb-4">
            By The <span class="gradient-text-alt">Numbers</span>
        </h2>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="card rounded-lg p-8 text-center hover:border-purple-500/50 transition">
            <div class="text-spidrweb-xxxl font-bold gradient-text mb-3">200+</div>
            <div class="text-spidrweb-m text-gray-300 font-semibold mb-1">Stat Label</div>
            <div class="text-spidrweb-s text-gray-500">Description</div>
        </div>
        <!-- Add more stat cards -->
    </div>
</section>
                        

By The Numbers

200+

Clients Worldwide

Serving businesses globally

27+

Years of Experience

Industry expertise

Features: Four-column grid of stat cards (2 columns on tablet, 4 on desktop). Each card has large gradient number, label, and description. Stats alternate between primary and secondary gradients.

Team Member Cards

Index: COMPONENT-008

<section class="mb-20">
    <div class="text-center mb-12">
        <h2 class="text-spidrweb-xxl md:text-spidrweb-xxl font-bold mb-4">
            Meet The <span class="gradient-text">Team</span>
        </h2>
    </div>
    <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
        <div class="card rounded-lg p-8 hover:border-purple-500/50 transition">
            <div class="flex items-start gap-6 mb-6">
                <div class="w-20 h-20 rounded-full bg-gradient-to-br from-purple-500/30 to-green-500/30 flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-user text-spidrweb-xxl gradient-text"></i>
                </div>
                <div class="flex-1">
                    <h3 class="text-spidrweb-xl font-bold mb-1">Name</h3>
                    <p class="text-gray-400 gradient-text-alt font-semibold">Role</p>
                </div>
            </div>
            <p class="text-gray-400 leading-relaxed mb-6">Bio...</p>
            <div class="flex gap-4">
                <a href="#" class="text-gray-400 hover:text-white transition" aria-label="Social">
                    <i class="fab fa-bluesky text-spidrweb-l"></i>
                </a>
            </div>
        </div>
    </div>
</section>
                        

Meet The Team

Team Member

Role Title

Team member bio and description goes here.

Features: Two-column grid of team member cards. Each card includes avatar circle with gradient background, name, role, bio, and social media links. Cards have hover border effects.

Values Section

Index: COMPONENT-009

<section class="mb-20">
    <div class="text-center mb-12">
        <h2 class="text-spidrweb-xxl md:text-spidrweb-xxl font-bold mb-4">
            Our <span class="gradient-text-alt">Values</span>
        </h2>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="card rounded-lg p-6 text-center hover:border-purple-500/50 transition">
            <div class="mb-4">
                <i class="fas fa-star text-spidrweb-xxl gradient-text"></i>
            </div>
            <h3 class="text-spidrweb-l font-semibold mb-3 gradient-text">Value Title</h3>
            <p class="text-gray-400 text-spidrweb-s">Description...</p>
        </div>
        <!-- Add more value cards -->
    </div>
</section>
                        

Our Values

Best Quality

We deliver exceptional solutions, ensuring your business stands out online.

Expertise You Can Trust

Our team brings decades of knowledge to every project.

Features: Four-column grid of value cards (2 columns on tablet, 4 on desktop). Each card includes Font Awesome icon, title with gradient text, and description. Icons and titles alternate between primary and secondary gradients.

CTA Section (Simple Version)

Index: COMPONENT-010

<section class="mb-20">
    <div class="card rounded-lg p-12 md:p-16 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 via-transparent to-green-500/10"></div>
        <div class="relative z-10 text-center max-w-3xl mx-auto">
            <h2 class="text-spidrweb-xxl md:text-spidrweb-xxxl font-bold mb-6">
                Heading with <span class="gradient-text-alt">Gradient Text</span>
            </h2>
            <p class="text-spidrweb-l text-gray-400 mb-8 leading-relaxed">Description...</p>
            <a href="#" class="gradient-bg-primary text-white px-8 py-4 rounded-lg hover:opacity-90 transition font-semibold text-spidrweb-m inline-block">
                Get in Touch
            </a>
        </div>
    </div>
</section>
                        

Let Us Take Care of the Technical Side

So you can focus on growing your business.

Get in Touch

Features: Simplified CTA section with gradient overlay, centered content, heading, description, and single primary CTA button. No contact information section.

Hero Examples

Reference these hero section examples by their index numbers for consistent design across pages.

Hero Example #1 - Centered with Gradient Text

Index: HERO-001

<section class="text-center mb-16 py-20">
    <h1 class="text-spidrweb-xxxl md:text-spidrweb-xxxl font-bold mb-4">
        Welcome to <span class="gradient-text">Spidrweb</span>
    </h1>
    <p class="text-spidrweb-l text-gray-400 max-w-2xl mx-auto mb-8">
        UK based WordPress and Web development company creating modern, beautiful websites.
    </p>
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <button class="gradient-bg-primary text-white px-8 py-3 rounded-lg hover:opacity-90 transition">
            Get Started
        </button>
        <button class="border border-gray-700 text-white px-8 py-3 rounded-lg hover:bg-gray-800 transition">
            Learn More
        </button>
    </div>
</section>
                        

Welcome to Spidrweb

UK based WordPress and Web development company creating modern, beautiful websites.

Hero Example #2 - Left Aligned

Index: HERO-002

<section class="mb-16 py-20 relative overflow-hidden">
    <div class="max-w-4xl">
        <h1 class="text-spidrweb-xxxl font-bold mb-6">
            We Love <span class="gradient-text-alt">Designing, Building, Managing</span> and Hosting Websites
        </h1>
        <p class="text-spidrweb-m text-gray-400 mb-8 leading-relaxed">
            Spidrweb provide a wide selection of online services for business, individuals, charities, content creators and more. 
            With over 27 years of experience (since 1997), we confidently deliver exceptional services to our valued clients.
        </p>
        <a href="#services" class="gradient-bg-secondary text-white px-8 py-3 rounded-lg hover:opacity-90 transition inline-block font-semibold">
            See Our Services
        </a>
    </div>
</section>
                        

We Love Designing, Building, Managing and Hosting Websites

Spidrweb provide a wide selection of online services for business, individuals, charities, content creators and more. With over 27 years of experience (since 1997), we confidently deliver exceptional services to our valued clients.

See Our Services

Features: Clean left-aligned hero section with large heading, description text, and CTA button. Uses max-width container for optimal readability. Perfect for content-focused hero sections.

Hero Example #3 - Minimal Centered

Index: HERO-003

<section class="text-center mb-16 py-32">
    <h1 class="text-spidrweb-xxxl md:text-7xl font-bold mb-6">
        <span class="gradient-text">Spidrweb</span>
    </h1>
    <p class="text-spidrweb-xl text-gray-400 max-w-xl mx-auto">
        WordPress & Web Development
    </p>
</section>
                        

Spidrweb

WordPress & Web Development

Hero Example #4 - Split Layout with Stats

Index: HERO-004

<section class="mb-16 py-20">
    <div class="grid md:grid-cols-2 gap-12 items-center">
        <div>
            <h1 class="text-spidrweb-xxxl md:text-spidrweb-xxxl font-bold mb-6">
                We Build <span class="gradient-text">Amazing</span> Websites
            </h1>
            <p class="text-spidrweb-m text-gray-400 mb-8">
                From concept to launch, we deliver WordPress solutions that drive results.
            </p>
            <button class="gradient-bg-primary text-white px-8 py-3 rounded-lg hover:opacity-90 transition">
                View Our Work
            </button>
        </div>
        <div class="grid grid-cols-2 gap-6">
            <div class="card rounded-lg p-6 text-center">
                <div class="text-spidrweb-xxl font-bold gradient-text mb-2">100+</div>
                <div class="text-spidrweb-s text-gray-400">Projects</div>
            </div>
            <div class="card rounded-lg p-6 text-center">
                <div class="text-spidrweb-xxl font-bold gradient-text-alt mb-2">50+</div>
                <div class="text-spidrweb-s text-gray-400">Clients</div>
            </div>
        </div>
    </div>
</section>
                        

We Build Amazing Websites

From concept to launch, we deliver WordPress solutions that drive results.

100+

Projects

50+

Clients

Buttons

Button Styles

Primary Button

<button class="gradient-bg-primary text-white px-6 py-2 rounded-lg hover:opacity-90 transition">
    Primary Button
</button>
                                

Secondary Button

<button class="gradient-bg-secondary text-white px-6 py-2 rounded-lg hover:opacity-90 transition">
    Secondary Button
</button>
                                

Outline Button

<button class="border border-gray-700 text-white px-6 py-2 rounded-lg hover:bg-gray-800 transition">
    Outline Button
</button>
                                

Code Examples

Basic Page Structure

<?php 
$page_title = 'Page Title';
include 'includes/header.php'; 
?>

    <main class="container mx-auto px-6 py-16">
        <!-- Your content here -->
    </main>

<?php include 'includes/footer.php'; ?>
                        

Note: The header includes DOCTYPE, HTML, head, and opening body tag. The footer includes the closing body and HTML tags. CSS is loaded from /assets/css/main.css.

Hero Section

<section class="text-center mb-16">
    <h1 class="text-spidrweb-xxxl md:text-spidrweb-xxxl font-bold mb-4">
        Welcome to <span class="gradient-text">Spidrweb</span>
    </h1>
    <p class="text-spidrweb-l text-gray-400 max-w-2xl mx-auto mb-8">
        Your description here
    </p>
    <button class="gradient-bg-primary text-white px-8 py-3 rounded-lg hover:opacity-90 transition">
        Get Started
    </button>
</section>
                        

Best Practices

Design Consistency

Always use the color system defined in this guide
Maintain consistent spacing using Tailwind's scale
Use Montserrat for headings and Outfit for body text
Apply gradient text sparingly for emphasis

Accessibility

Ensure all text meets WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text)
Provide alt text for all images
Use semantic HTML elements
Ensure keyboard navigation works for all interactive elements
Test with screen readers

Performance

Optimize images before uploading (use WebP when possible)
Use Tailwind CDN for development, consider purging for production
Lazy load images below the fold
Minimize custom CSS, prefer Tailwind utilities

Responsive Design

Design mobile-first, then enhance for larger screens
Use Tailwind's responsive prefixes (md:, lg:, xl:)
Test on multiple device sizes
Ensure touch targets are at least 44x44px

Code Quality

Follow PHP best practices and security guidelines
Use semantic HTML5 elements
Keep components reusable and modular
Comment complex logic
Validate all user inputs