Vylex Website Guidelines | Building Web Pages

01 — Page Architecture

Standard Page Layout Structure

Every page on vylex.co.za follows a strict semantic hierarchy. This ensures predictable user navigation, fast page loads, and uniform accessibility across mobile and desktop devices.

HTML Layout Blueprintvylex-page-template.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Page Title] | Vylex Technologies</title>
  <meta name="description" content="[Compelling meta description matching brand voice]">
  
  <!-- Tailwind CSS & Font Awesome -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 text-brand-navy font-sans antialiased">

  <!-- 1. Global Navigation Header -->
  <div id="header-placeholder"></div>

  <!-- 2. Hero Section -->
  <section class="relative pt-32 pb-20 bg-brand-navy text-white overflow-hidden">
    <div class="max-w-7xl mx-auto px-6 text-center">
      <h1 class="text-4xl lg:text-6xl font-extrabold mb-6">[Page H1 Title]</h1>
      <p class="text-xl text-gray-300 max-w-2xl mx-auto mb-8">[Sub-headline]</p>
    </div>
  </section>

  <!-- 3. Main Content Sections -->
  <main class="max-w-7xl mx-auto px-6 py-20">
    <!-- Feature Grids / Pain Point Blocks / Details -->
  </main>

  <!-- 4. Global Footer -->
  <div id="footer-placeholder"></div>

</body>
</html>

02 — Design Tokens

Tailwind CSS Classes & Variables

Use these standard Tailwind configuration tokens and custom utility classes across all website HTML pages:

Color Tokens

bg-brand-navy (#051B38) — Main dark headers & hero sections
bg-brand-orange (#FBA919) — High priority CTA buttons & badges
text-brand-orange (#FBA919) — Highlighted text spans & icons
border-brand-orange (#FBA919) — Focus rings & active borders

UI & Utility Tokens

rounded-2xl (16px - 18px) — Card corners
shadow-xl hover:-translate-y-1 — Hover lift animation for cards
focus-ring — Accessible outline glow for interactive elements
backdrop-blur-md — Glassmorphic modal & navigation bar overlays

03 — Reusable Components

Standard Website UI Components

Interactive preview and copyable code for primary website UI blocks:

Primary CTA Button

CTA Button CodeHTML

<a href="/contact" class="px-8 py-4 bg-brand-orange text-brand-navy font-extrabold rounded-xl hover:bg-white transition-all shadow-lg shadow-orange-500/20 inline-flex items-center gap-3">
  Schedule Free Strategy Call <i class="fa-solid fa-arrow-right"></i>
</a>

Feature Grid Card

Workflow Automation

Eliminate repetitive manual tasks with custom software integration tailored to your operations.

Feature Card HTMLHTML

<div class="p-8 rounded-2xl border border-gray-100 bg-white shadow-lg shadow-gray-200/50 hover:border-brand-orange transition-all hover:-translate-y-1">
  <div class="w-12 h-12 bg-brand-navy rounded-xl flex items-center justify-center text-brand-orange text-xl mb-6">
    <i class="fa-solid fa-gears"></i>
  </div>
  <h3 class="text-xl font-bold text-brand-navy mb-3">Workflow Automation</h3>
  <p class="text-gray-600 text-sm leading-relaxed">Eliminate repetitive manual tasks with custom software integration.</p>
</div>

04 — Verification

SEO & Quality Checklist

Single H1 Tag: Every page must have exactly one <h1> element in the hero section.
Meta Description: High-impact summary under 160 characters.
Unique IDs: Ensure all interactive buttons, inputs, and sections have unique IDs for automated testing.
WCAG AA Contrast: Text on Vylex Orange background must use Vylex Navy (#051B38) text, never white.

Building Pages for Vylex.co.za