Brand Patterns

The Alterspective diagonal "A" pattern is a core brand asset that creates visual interest and directional flow. Available in 6 colors with left/right anchoring positions for flexible layouts.

Pattern Dimensions: 348 × 601 pixels (optimized for edge anchoring)

Critical Rules

Pattern Usage Rules - MUST BE FOLLOWED

  • PATTERN-001 Patterns must be LEFT or RIGHT anchored - NEVER centered (follows LOGO-001 philosophy)
  • COLOR-001 NEVER use white text on Citrus (#ABDD65) patterns - contrast fails WCAG AA
  • A11Y-001 Minimum 4.5:1 contrast ratio required between pattern and any text overlay
  • PATTERN-002 Use dark patterns (Marine, Green, Navy) on light backgrounds; light patterns (Citrus, Pale Blue, White) on dark backgrounds
  • PATTERN-003 Maintain original 348:601 aspect ratio - do not stretch or crop the diagonal geometry

Browse by Color

Marine Green Citrus Navy Pale Blue White

Pattern Collection

Marine (#075156)

Marine Left - diagonal A pattern in Marine for left anchoring

Marine Left

Ideal for left-edge anchoring on light backgrounds, hero sections, page headers

Position: ← Left
Dimensions: 348×601px
CSS Variable: --as-marine
Contrast Ratings:
On White: excellent
On Pale Blue: excellent
On Navy: poor
On Black: poor
⬇️ Download WebP
Marine Right - diagonal A pattern in Marine for right anchoring

Marine Right

Ideal for right-edge anchoring on light backgrounds, sidebar accents, asymmetric layouts

Position: Right →
Dimensions: 348×601px
CSS Variable: --as-marine
Contrast Ratings:
On White: excellent
On Pale Blue: excellent
On Navy: poor
On Black: poor
⬇️ Download WebP

Green (#2C8248)

Green Left - diagonal A pattern in Green for left anchoring

Green Left

Success states, secondary accents, environmental/sustainability content

Position: ← Left
Dimensions: 348×601px
CSS Variable: --as-green
Contrast Ratings:
On White: excellent
On Pale Blue: excellent
On Navy: poor
On Black: poor
⬇️ Download WebP
Green Right - diagonal A pattern in Green for right anchoring

Green Right

Secondary sections, call-to-action backgrounds, feature highlights

Position: Right →
Dimensions: 348×601px
CSS Variable: --as-green
Contrast Ratings:
On White: excellent
On Pale Blue: excellent
On Navy: poor
On Black: poor
⬇️ Download WebP

Citrus (#ABDD65)

⚠️ Usage Warnings:
  • CRITICAL: Fails WCAG contrast with white text (COLOR-001)
  • Use on dark backgrounds only
Citrus Left - diagonal A pattern in Citrus for left anchoring

Citrus Left

Accent decoration on dark backgrounds only - NEVER use with white text

Position: ← Left
Dimensions: 348×601px
CSS Variable: --as-citrus
Contrast Ratings:
On White: poor
On Pale Blue: poor
On Navy: excellent
On Black: excellent
⬇️ Download WebP
Citrus Right - diagonal A pattern in Citrus for right anchoring

Citrus Right

Visual accents, highlighting, dark mode decorative elements

Position: Right →
Dimensions: 348×601px
CSS Variable: --as-citrus
Contrast Ratings:
On White: poor
On Pale Blue: poor
On Navy: excellent
On Black: excellent
⬇️ Download WebP

Pale Blue (#E5EEEF)

⚠️ Usage Warnings:
  • Use on dark backgrounds only - invisible on light backgrounds
Pale Blue Left - diagonal A pattern in Pale Blue for left anchoring

Pale Blue Left

Dark mode patterns, subtle accents on navy/black backgrounds

Position: ← Left
Dimensions: 348×601px
CSS Variable: --as-pale-blue
Contrast Ratings:
On White: poor
On Pale Blue: poor
On Navy: excellent
On Black: excellent
⬇️ Download WebP
Pale Blue Right - diagonal A pattern in Pale Blue for right anchoring

Pale Blue Right

Dark mode layouts, night theme decorations, subtle contrast

Position: Right →
Dimensions: 348×601px
CSS Variable: --as-pale-blue
Contrast Ratings:
On White: poor
On Pale Blue: poor
On Navy: excellent
On Black: excellent
⬇️ Download WebP

White (#FFFFFF)

⚠️ Usage Warnings:
  • Use on dark backgrounds only - invisible on light backgrounds
White Left - diagonal A pattern in White for left anchoring

White Left

Maximum contrast on dark backgrounds, dark mode hero sections

Position: ← Left
Dimensions: 348×601px
CSS Variable: --white
Contrast Ratings:
On White: poor
On Pale Blue: poor
On Navy: excellent
On Black: excellent
⬇️ Download WebP
White Right - diagonal A pattern in White for right anchoring

White Right

Bold dark mode layouts, high-contrast decorative elements

Position: Right →
Dimensions: 348×601px
CSS Variable: --white
Contrast Ratings:
On White: poor
On Pale Blue: poor
On Navy: excellent
On Black: excellent
⬇️ Download WebP

Usage Guidelines

✓ Do

Use left or right anchoring to create directional flow

✗ Don't

Center the pattern - the asymmetric diagonal design is meant for edge anchoring

✓ Do

Match pattern color to background (dark patterns on light, light patterns on dark)

✗ Don't

Use Marine, Green, or Navy patterns on dark backgrounds - contrast fails

✓ Do

Use Marine or Green as primary pattern choices

✗ Don't

Overuse Citrus patterns - they are accent colors and have contrast limitations

✓ Do

Maintain the 348:601 aspect ratio when scaling

✗ Don't

Stretch, squash, or crop the pattern geometry

✓ Do

Test text overlays with contrast validators

✗ Don't

Place white text over Citrus patterns - violates COLOR-001

✓ Do

Use patterns sparingly as decorative accents

✗ Don't

Cover entire pages with patterns - they should enhance, not dominate

Implementation Examples

CSS Background Image

/* Left-anchored Marine pattern */
.hero-section {
  background-image: url('/patterns/alterspective-pattern-marine-left.svg');
  background-position: left center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

/* Right-anchored Green pattern */
.sidebar {
  background-image: url('/patterns/alterspective-pattern-green-right.svg');
  background-position: right center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

React Component

import marineLeft from './assets/patterns/alterspective-pattern-marine-left.svg';

function HeroSection() {
  return (
    <div
      style={{
        backgroundImage: `url(${marineLeft})`,
        backgroundPosition: 'left center',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'auto 100%',
      }}
    >
      {/* Content */}
    </div>
  );
}

HTML Image Element

<!-- Positioned absolutely for precise control -->
<div style="position: relative;">
  <img
    src="/patterns/alterspective-pattern-marine-left.svg"
    alt="Decorative pattern"
    aria-hidden="true"
    style="position: absolute; left: 0; top: 0; height: 100%; z-index: -1;"
  />
  <div class="content">
    <!-- Your content here -->
  </div>
</div>

Interactive Contrast Testing

Test pattern visibility on different background colors. Hover or tap patterns to see them in context.

Light Backgrounds

White Background Marine pattern demo
Pale Blue Background Green pattern demo

✓ Use Marine, Green, Navy patterns on light backgrounds

Dark Backgrounds

Navy Background Citrus pattern demo
Black Background White pattern demo

✓ Use Citrus, Pale Blue, White patterns on dark backgrounds

Technical Specifications

File Format
WebP (High-quality web image format)
Dimensions
348 × 601 pixels (aspect ratio preserved)
File Size
~16-17 KB per file (optimized WebP)
Color Format
Hex color codes matching brand palette
Scaling
High resolution (400×690px) - maintain aspect ratio when scaling
Accessibility
Decorative patterns should have aria-hidden="true" or empty alt=""
Performance
Use loading="lazy" for below-the-fold patterns
Style
Theme