3.7 KiB

Raw Blame History

Story 13.3: Subtle Background Pattern Implementation

Story

As a visitor to the authentication pages I want to see a subtle, elegant background pattern on the form side So that the page feels polished and professionally designed

Acceptance Criteria

AC1: Create SVG Pattern Asset

Given the need for a subtle background pattern When the pattern is created Then:

SVG format for scalability and performance
Uses brand color (Warm Gold #A68966) at 5-8% opacity
Pattern type: Geometric or botanical (wheat/leaf motif)
Seamlessly tileable
File size under 5KB for performance

AC2: Pattern Placement

Given the SVG pattern is created When applied to the auth layout Then:

Pattern appears on the form side (right panel desktop, full background mobile)
Pattern overlays the Warm Cream background
Pattern is fixed/static (doesn't scroll with content)
Pattern doesn't interfere with form readability

AC3: Pattern Opacity

Given readability requirements When the pattern is displayed Then:

Opacity is subtle (5-8%)
Text remains clearly readable
Pattern adds visual interest without distraction

AC4: CSS Implementation

Given the pattern asset When integrated into CSS Then:

Applied via background-image or pseudo-element
Uses background-repeat: repeat for tiling
Background is fixed or positioned appropriately
Can be easily disabled if needed

AC5: Performance Consideration

Given page load performance When the pattern loads Then:

Pattern is inlined or loaded efficiently
No noticeable delay in page rendering
Pattern works without JavaScript

AC6: Mobile Compatibility

Given mobile viewport When pattern is displayed Then:

Pattern scales appropriately
No horizontal scrolling caused by pattern
Pattern remains subtle on smaller screens

Technical Notes

Pattern Options

Option A: Geometric (Recommended)

Simple diagonal lines or dots
Clean, modern aesthetic
Easier to create and maintain

Option B: Botanical

Wheat/leaf silhouettes
Aligns with LIBRA brand identity
More complex but more unique

SVG Pattern Example (Geometric)

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
  <circle cx="2" cy="2" r="1" fill="#A68966" fill-opacity="0.06"/>
</svg>

CSS Implementation Options

Option 1: Inline SVG in CSS

.auth-pattern {
    background-image: url("data:image/svg+xml,...");
    background-repeat: repeat;
}

Option 2: Pseudo-element Overlay

.auth-form-side::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/images/pattern.svg');
    background-repeat: repeat;
    opacity: 0.06;
    pointer-events: none;
}

Option 3: Tailwind Arbitrary Value

<div class="bg-[url('/images/pattern.svg')]">

Files to Create/Modify

public/images/auth-pattern.svg (new) OR inline in CSS
resources/css/app.css (if adding pattern class)
resources/views/components/layouts/auth/split.blade.php (apply pattern)

Pattern Design Guidelines

Color: Warm Gold (#A68966)
Opacity: 5-8% (0.05-0.08)
Size: 20-40px tiles for subtle effect
Style: Minimalist, professional

Dev Checklist

Design/select pattern style (geometric vs botanical)
Create SVG pattern file
Optimize SVG for file size
Add pattern to auth layout CSS
Test pattern visibility at various screen sizes
Verify text readability over pattern
Test in both Arabic and English
Verify no horizontal scroll issues
Check pattern on high-DPI displays

Estimation

Complexity: Medium Risk: Low - Decorative enhancement only

Dependencies

Story 13.2 (Auth Split Layout) - Must be completed first

3.7 KiB Raw Blame History