Pattern Library

The WyvernPress Pattern Library contains 100+ pre-built CSS patterns that match common styling requests instantly, without any AI API calls. Patterns respond in under 50ms and handle approximately 60% of typical styling requests.

How Pattern Matching Works

You type: “Add a subtle shadow”
WyvernPress extracts keywords: [“subtle”, “shadow”]
Pattern matcher scores all patterns: Calculates similarity scores
Best match found: “subtle shadow” pattern → box-shadow: 0 1px 2px rgba(0,0,0,0.05)
Confidence calculated: 95% (high match)
Result returned: Instant CSS, zero API cost

Confidence Thresholds

Confidence	Action
70-100%	Use pattern result
50-69%	Fallback to AI (if configured)
0-49%	Fallback to AI (if configured)

Pattern Categories

WyvernPress includes patterns in these categories:

Colors: 50+ patterns (text, background, gradients)
Shadows: 30+ patterns (box shadows, text shadows, glows)
Borders: 25+ patterns (radius, styles, widths)
Spacing: 20+ patterns (padding, margin, gaps)
Typography: 20+ patterns (sizes, weights, alignment)
Layout: 15+ patterns (flex, grid, centering)
Buttons: 15+ patterns (styles, states)

Color Patterns

Text Colors

Prompt	CSS Output
`blue`	`color: #0073aa`
`light blue`	`color: #00a0d2`
`dark blue`	`color: #005177`
`red`	`color: #dc3232`
`light red`	`color: #f56e28`
`dark red`	`color: #8a1b1b`
`green`	`color: #46b450`
`light green`	`color: #5fd35f`
`dark green`	`color: #2e7d32`
`yellow`	`color: #ffb900`
`orange`	`color: #f56e28`
`purple`	`color: #826eb4`
`black`	`color: #000000`
`white`	`color: #ffffff`
`gray` / `grey`	`color: #666666`

Variations: All colors work with variations like “make this blue”, “blue text”, “color blue”

Background Colors

Prompt	CSS Output
`blue background`	`background-color: #0073aa`
`red background`	`background-color: #dc3232`
`green background`	`background-color: #46b450`
`white background`	`background-color: #ffffff`
`dark background`	`background-color: #23282d`
`light background`	`background-color: #f1f1f1`
`transparent`	`background-color: transparent`

WordPress Brand Colors

Prompt	CSS Output
`wordpress blue`	`color: #0073aa`
`primary color`	`color: #0073aa`
`success color`	`color: #46b450`
`warning color`	`color: #ffb900`
`error color`	`color: #dc3232`
`info color`	`color: #00a0d2`

Gradients

Prompt	CSS Output
`gradient`	`background: linear-gradient(135deg, #0073aa, #00a0d2)`
`blue gradient`	`background: linear-gradient(135deg, #0073aa, #00a0d2)`
`sunset gradient`	`background: linear-gradient(135deg, #f56e28, #dc3232)`
`purple gradient`	`background: linear-gradient(135deg, #826eb4, #a88cd4)`

Shadow Patterns

Box Shadows

Prompt	CSS Output
`shadow`	`box-shadow: 0 2px 4px rgba(0,0,0,0.1)`
`add shadow`	`box-shadow: 0 2px 4px rgba(0,0,0,0.1)`
`subtle shadow`	`box-shadow: 0 1px 2px rgba(0,0,0,0.05)`
`light shadow`	`box-shadow: 0 1px 3px rgba(0,0,0,0.08)`
`medium shadow`	`box-shadow: 0 2px 4px rgba(0,0,0,0.1)`
`heavy shadow`	`box-shadow: 0 4px 8px rgba(0,0,0,0.15)`
`deep shadow`	`box-shadow: 0 8px 16px rgba(0,0,0,0.2)`
`no shadow`	`box-shadow: none`

Elevated Effects

Prompt	CSS Output
`elevated`	`box-shadow: 0 4px 12px rgba(0,0,0,0.15)`
`raised`	`box-shadow: 0 4px 12px rgba(0,0,0,0.15)`
`floating`	`box-shadow: 0 8px 24px rgba(0,0,0,0.15)`
`inner shadow`	`box-shadow: inset 0 2px 4px rgba(0,0,0,0.1)`

Text Shadows

Prompt	CSS Output
`text shadow`	`text-shadow: 1px 1px 2px rgba(0,0,0,0.2)`
`subtle text shadow`	`text-shadow: 1px 1px 1px rgba(0,0,0,0.1)`
`heavy text shadow`	`text-shadow: 2px 2px 6px rgba(0,0,0,0.4)`

Glow Effects

Prompt	CSS Output
`glow`	`box-shadow: 0 0 10px rgba(0,123,255,0.5)`
`blue glow`	`box-shadow: 0 0 15px rgba(0,115,170,0.6)`
`green glow`	`box-shadow: 0 0 15px rgba(70,180,80,0.6)`
`red glow`	`box-shadow: 0 0 15px rgba(220,50,50,0.6)`
`text glow`	`text-shadow: 0 0 8px rgba(0,123,255,0.8)`

Border Patterns

Border Radius

Prompt	CSS Output
`rounded`	`border-radius: 4px`
`rounded corners`	`border-radius: 8px`
`more rounded`	`border-radius: 12px`
`very rounded`	`border-radius: 16px`
`pill`	`border-radius: 9999px`
`circle`	`border-radius: 50%`
`square`	`border-radius: 0`

Border Styles

Prompt	CSS Output
`border`	`border: 1px solid #ddd`
`thin border`	`border: 1px solid #ddd`
`thick border`	`border: 3px solid #ddd`
`no border`	`border: none`
`dashed border`	`border: 1px dashed #ddd`
`dotted border`	`border: 1px dotted #ddd`

Colored Borders

Prompt	CSS Output
`blue border`	`border: 1px solid #0073aa`
`red border`	`border: 1px solid #dc3232`
`green border`	`border: 1px solid #46b450`
`gray border`	`border: 1px solid #ccc`

Spacing Patterns

Padding

Prompt	CSS Output
`padding`	`padding: 1rem`
`add padding`	`padding: 1rem`
`small padding`	`padding: 0.5rem`
`large padding`	`padding: 2rem`
`extra padding`	`padding: 3rem`
`no padding`	`padding: 0`

Margin

Prompt	CSS Output
`margin`	`margin: 1rem`
`add margin`	`margin: 1rem`
`small margin`	`margin: 0.5rem`
`large margin`	`margin: 2rem`
`no margin`	`margin: 0`
`center`	`margin: 0 auto`

Gaps

Prompt	CSS Output
`gap`	`gap: 1rem`
`small gap`	`gap: 0.5rem`
`large gap`	`gap: 2rem`
`space between`	`gap: 1rem`

Typography Patterns

Font Sizes

Prompt	CSS Output
`larger text`	`font-size: 1.25rem`
`large text`	`font-size: 1.5rem`
`bigger`	`font-size: 1.25rem`
`smaller text`	`font-size: 0.875rem`
`tiny text`	`font-size: 0.75rem`

Font Weights

Prompt	CSS Output
`bold`	`font-weight: 700`
`semibold`	`font-weight: 600`
`normal weight`	`font-weight: 400`
`light weight`	`font-weight: 300`

Text Transforms

Prompt	CSS Output
`uppercase`	`text-transform: uppercase`
`lowercase`	`text-transform: lowercase`
`capitalize`	`text-transform: capitalize`
`italic`	`font-style: italic`
`underline`	`text-decoration: underline`
`strikethrough`	`text-decoration: line-through`

Text Alignment

Prompt	CSS Output
`center text`	`text-align: center`
`left align`	`text-align: left`
`right align`	`text-align: right`
`justify`	`text-align: justify`

Layout Patterns

Display

Prompt	CSS Output
`flex`	`display: flex`
`inline`	`display: inline`
`block`	`display: block`
`hidden`	`display: none`
`grid`	`display: grid`

Flexbox

Prompt	CSS Output
`center`	`display: flex; justify-content: center; align-items: center`
`center horizontally`	`display: flex; justify-content: center`
`center vertically`	`display: flex; align-items: center`
`space between`	`display: flex; justify-content: space-between`
`stack`	`display: flex; flex-direction: column`

Width

Prompt	CSS Output
`full width`	`width: 100%`
`half width`	`width: 50%`
`auto width`	`width: auto`

Button Patterns

Button Styles

Prompt	CSS Output
`primary button`	`background: #0073aa; color: #fff; padding: 10px 20px; border: none; border-radius: 4px`
`secondary button`	`background: #f1f1f1; color: #23282d; padding: 10px 20px; border: 1px solid #ddd; border-radius: 4px`
`outline button`	`background: transparent; color: #0073aa; padding: 10px 20px; border: 2px solid #0073aa; border-radius: 4px`
`pill button`	`border-radius: 9999px; padding: 10px 24px`

Button States

Prompt	CSS Output
`disabled`	`opacity: 0.5; cursor: not-allowed`
`loading`	`opacity: 0.7; cursor: wait`

Hover Effects

Prompt	CSS Output
`hover effect`	`transition: all 0.2s ease`
`lift on hover`	`:hover { transform: translateY(-2px) }`
`grow on hover`	`:hover { transform: scale(1.05) }`
`brighten on hover`	`:hover { filter: brightness(1.1) }`
`dim on hover`	`:hover { opacity: 0.8 }`

Combining Patterns

You can combine multiple pattern terms in one request:

Example: “Blue background with rounded corners and subtle shadow”

Matches: blue background + rounded corners + subtle shadow
Result: Combined CSS from all three patterns

Works best when:

Each term clearly matches a pattern
Terms don’t conflict (e.g., “blue” and “red”)
2-4 patterns combined

Falls back to AI when:

Too many terms to match confidently
Conflicting terms
Unknown styling concepts

Pattern Matching Tips

Use These Terms for Best Results

Colors: blue, red, green, yellow, orange, purple, black, white, gray Intensity: light, dark, bright, subtle Shadows: shadow, glow, elevated, floating Borders: rounded, pill, circle, border, outline Spacing: padding, margin, gap, center Typography: bold, large, uppercase, italic

Patterns Are Case-Insensitive

All of these work the same:

“Blue background”
“BLUE BACKGROUND”
“blue BACKGROUND”

Partial Matches Work

“make it blue” → matches “blue” pattern
“give it shadow” → matches “shadow” pattern
“add some padding” → matches “padding” pattern

Adding Custom Patterns

Developers can add custom patterns. See Custom Patterns Guide →

Example custom pattern:

// In your theme's functions.php or a custom plugin
add_filter( 'wyvernpress_patterns', function( $patterns ) {
    $patterns['brand blue'] = array(
        'background-color' => '#1a73e8',
        'color' => '#ffffff',
    );
    return $patterns;
} );

Pattern vs AI: When to Use Each

Scenario	Use Pattern	Use AI
Common colors	Yes	No
Basic shadows	Yes	No
Standard borders	Yes	No
Common spacing	Yes	No
Creative styling	No	Yes
Complex animations	No	Yes
Brand-specific styles	Maybe	Maybe
Unknown concepts	No	Yes

Performance

Metric	Pattern Library	AI Generation
Response time	<50ms	1-3 seconds
API cost	Zero	Per-request
Cache	WordPress cache	24-hour cache
Availability	Always	Requires API key

Next Steps

AI Styling Guide → - For complex styling needs
Custom Patterns → - Add your own patterns
Basic Usage → - Complete workflow guide