Pattern Library

Design Comprehension

From reusable parts to wiser compositions

Design Comprehension is Monarch's documented understanding of how tokens, components, patterns, images, and page structures should be combined to create clear, attractive, purposeful designs.

Pattern Purpose

Every pattern identifies the job it performs, the pages it supports, and the situations where it should be avoided.

Image Composition

Default Images are treated as composition tools selected by aspect ratio, visual weight, mode, and page purpose—not as empty placeholders.

Page Rhythm

A strong page balances dominant images, supporting images, text-led sections, CTAs, and quiet space. Not every section needs an image.

Image Mode

Grayscale teaches. Color communicates.

Monarch uses grayscale images for structural instruction and color images for finished Kaleidoscope page examples.

Grayscale landscape default image used for instructional pattern structure.

Instructional Mode

Use grayscale to study spacing, crop, hierarchy, and component anatomy without color distraction.

Color landscape default image used for finished Kaleidoscope public page presence.

Applied Mode

Use color when the page should feel public-facing, emotional, branded, and complete.

Default Image Composition Matrix

Choose by shape, weight, and purpose

The filename is only a starting point. The dimensions and visual weight decide the best pattern use.

Role	Dimensions	Ratio	Visual Weight	Best Uses	Avoid
Hero	2560 × 1097	2.33:1	dominant	Full Hero, Split Hero, Landing Page Opener	Small Cards, Square Tiles, Dense Grids, Narrow Sidebars
Banner	1920 × 600	3.2:1	transitional	CTA Band, Section Divider, Story Bridge	Small Cards, Portrait Panels, Form Sidebars
Landscape	1920 × 1080	16:9	strong supporting	Split Content, Feature Panel, Article Preview, Resource Preview	Avatar, Logo Area, Tiny Sidebar Thumbnail
Background	1920 × 1080	16:9	ambient	CTA Atmosphere, Soft Section Background, Newsletter Panel	Main Content Image, Form-Heavy Primary Action, Identity Avatar
Card	1200 × 900	4:3	modular	Resource Card Grid, Blog Preview Grid, Product Listing, Service Listing	Dominant Hero, Repeated Identical Visual Rows Without Variation
Square	1200 × 1200	1:1	symbolic modular	Category Tiles, Equal-Choice Grid, Portfolio Tiles, Symbolic Cards	Wide Story Section, Main Hero, Banner Area
Portrait	1200 × 1800	2:3	editorial vertical	Story Section, People Preview, Contact Sidebar, Editorial Feature	Wide Banner, Full-Width Hero, Horizontal CTA Strip
Avatar	600 × 600	1:1	identity accent	Testimonial Row, Team Snippet, Author Card, Account Header	Page Hero, Wide Feature, Atmospheric Background
Logo Light	1200 × 400	3:1	identity	Brand Panel, Footer Identity, Empty State Branding	General Illustration, Content Card Image, Gallery Tile
Logo Dark	1200 × 400	3:1	identity	Brand Panel, Footer Identity, Empty State Branding	General Illustration, Content Card Image, Gallery Tile
Image Not Found	1200 × 900	4:3	fallback	Fallback Demonstration, Error State	Normal Page Composition, Intentional Marketing Imagery

Good / Better / Best

Image use improves when purpose gets sharper

These examples are not rigid templates. They train judgment about image density, hierarchy, and section purpose.

GOOD

Images fit the slots

A pattern uses images with matching aspect ratios and does not break the layout.

BETTER

Images support the purpose

The image role is chosen because the pattern needs a dominant image, a support image, a symbolic tile, or no image.

BEST

Images shape the whole page rhythm

The page balances one dominant visual, a few supporting visuals, text-led sections, and clear actions.

Pattern Catalog

Curated reusable section patterns

Patterns are organized by purpose. “30 examples” is not a rule; the useful number is the number needed for clarity.

Account Patterns

guidance

Account / Sign-In

Authentication or account-entry panel with form, reassurance, and help links.

Purpose: Help users access or create an account clearly and safely.
Source: Pattern guidance
Components: Form, Button, Alert, Card
Recommended Pages: Sign In, Register, Account
Recommended Image Roles: none, logo-light, background
Image Density: Zero or one small brand/support image.

Use / Avoid

Use When

A visitor needs to sign in, register, or recover access.
The page needs account trust and clear form flow.

Avoid When

The action is not account-related.
Authentication is not supported yet.

Image Guidance

Instructional Mode: No image or grayscale background to teach layout.
Public Mode: No image, logo, or subtle background; form must remain primary.
Avoid Roles: hero, repeated cards, large portrait beside compact login
Best Placement: Above form as brand identity or behind as subtle atmosphere.
Mobile Behavior: Form remains first and uncluttered.
Accessibility: Inputs need labels, password help, and clear errors.

Good / Better / Best

Good: Sign-in form.
Better: Form with help links and clear feedback.
Best: Account entry that feels secure, simple, and focused.

guidance

Dashboard Summary

Account or dashboard overview with status cards, recent activity, and next actions.

Purpose: Summarize status and guide action.
Source: Pattern guidance
Components: Card, Statistic, Table, Badge, Button
Recommended Pages: Dashboard, Account, Orders, Billing, Support
Recommended Image Roles: none, avatar, logo-light
Image Density: Zero images in metrics; one identity image optional.

Use / Avoid

Use When

Users need current status or recent activity.
Several account-related tasks are available.

Avoid When

The page is purely public marketing.
There is no user-specific state.

Image Guidance

Instructional Mode: No image; grayscale avatar/logo optional for account identity.
Public Mode: Usually no image; account avatar or logo may appear.
Avoid Roles: hero, banner, large decorative background
Best Placement: Small identity marker, not in every data card.
Mobile Behavior: Status cards stack before detailed tables.
Accessibility: Status must be conveyed in text, not color alone.

Good / Better / Best

Good: Metric cards.
Better: Metrics plus recent activity and next actions.
Best: Dashboard that answers “what changed and what should I do?” quickly.

CTA Patterns

stable

CTA Banner

Focused call-to-action panel that invites one next step.

Purpose: Move the visitor from reading to action.
Source: patterns/cta-banner.php
Components: Button, Heading, Card
Recommended Pages: Landing Page, Pricing, Contact, Home, Article
Recommended Image Roles: banner, background, none
Image Density: Zero to one image.

Use / Avoid

Use When

A page needs a clear next step.
The visitor has received enough context to act.
A section should close with confidence.

Avoid When

The page has too many competing CTAs.
The next step is unclear.
The form itself is already the primary action.

Image Guidance

Instructional Mode: Grayscale banner/background or no image to teach emphasis.
Public Mode: Color banner/background only if it supports emotion without weakening button clarity.
Avoid Roles: avatar, square grid, repeated card images
Best Placement: As a background atmosphere or adjacent support image; typography and button lead.
Mobile Behavior: Buttons remain visible and easy to tap.
Accessibility: Button labels must state the action clearly.

Good / Better / Best

Good: A short headline and button.
Better: A CTA with one supporting sentence and a secondary link.
Best: A focused action moment that does not compete with surrounding page content.

Contact Patterns

stable

Contact Panel

Contact information and form shell for inquiries, support, and response expectations.

Purpose: Make communication clear, trustworthy, and easy.
Source: patterns/contact-panel.php
Components: Form, Card, Button, Label
Recommended Pages: Contact Us, Support, Contact Support
Recommended Image Roles: portrait, background, none
Image Density: Zero to one image.

Use / Avoid

Use When

A user needs to reach the organization.
A form and contact details should be shown together.
The page needs confidence and response expectations.

Avoid When

The page only needs a simple email link.
The user should complete a transactional workflow instead.

Image Guidance

Instructional Mode: Grayscale portrait/background or no image to keep focus on form anatomy.
Public Mode: Color portrait, subtle background, or no image; image must not compete with the form.
Avoid Roles: hero, banner as primary form image, repeated card images
Best Placement: Sidebar, lower support panel, or subtle atmospheric background.
Mobile Behavior: Form appears before decorative image.
Accessibility: Forms need visible labels, errors, and keyboard-friendly controls.

Good / Better / Best

Good: A clean form and contact details.
Better: A form with routing cards and expected response time.
Best: A contact panel that removes uncertainty and keeps action primary.

guidance

Location / Service Area

Location, hours, region, or service-area information with optional map/image support.

Purpose: Clarify where and when a visitor can engage.
Source: Pattern guidance
Components: Card, List, Image Frame
Recommended Pages: Contact Us, Locations, Support
Recommended Image Roles: landscape, background, none
Image Density: One image for the panel or none.

Use / Avoid

Use When

Physical place, office hours, region, or service area matters.
Visitors need confidence that the organization is reachable.

Avoid When

The organization is purely conceptual or no location should be implied.

Image Guidance

Instructional Mode: Grayscale landscape or no image.
Public Mode: Color landscape/background if the section needs place atmosphere.
Avoid Roles: avatar, logo, hero
Best Placement: Beside hours/service-area cards or as a map placeholder area.
Mobile Behavior: Location details should not be hidden below a large decorative image.
Accessibility: Text address/hours should be present even if a map or image is used.

Good / Better / Best

Good: Address and hours in a card.
Better: Address, hours, and service area in a readable grid.
Best: A location panel that supports visitors without distracting from contact actions.

Content Patterns

stable

Split Content

Two-column content and media composition for story, explanation, or feature emphasis.

Purpose: Pair a strong idea with a supporting visual or secondary content block.
Source: patterns/split-content.php
Components: Image Frame, Heading, Button, List
Recommended Pages: About Us, Service Detail, Home, Contact Us
Recommended Image Roles: landscape, portrait
Image Density: One image.

Use / Avoid

Use When

A section needs a balanced story/media relationship.
One image can clarify or humanize the copy.
The layout needs contrast after card/grid sections.

Avoid When

Both columns have equal long-form text.
The image is purely filler.
The page already has too many split sections.

Image Guidance

Instructional Mode: Grayscale landscape or portrait to teach column proportion and crop.
Public Mode: Color landscape for broad features; color portrait for editorial, people, or contact tone.
Avoid Roles: avatar, logo-light, logo-dark, banner unless the section is very wide
Best Placement: Opposite the primary text block.
Mobile Behavior: Stack text before image unless the image is the subject.
Accessibility: Alt depends on whether the image is informative or atmospheric.

Good / Better / Best

Good: A two-column text and image section.
Better: Image role chosen for the shape of the content.
Best: A split section that creates rhythm between dense information and visual relief.

guidance

Story Section

Narrative section for origin, mission, belief, or brand meaning.

Purpose: Create trust through narrative and point of view.
Source: Pattern guidance
Components: Heading, Paragraph, Quote, Image Frame
Recommended Pages: About Us, Home, Organization, Leadership
Recommended Image Roles: portrait, landscape
Image Density: One strong supporting image; maybe one quote without image.

Use / Avoid

Use When

A page needs meaning beyond facts.
The brand story or origin matters.
Visitors need emotional or philosophical context.

Avoid When

The page is transactional.
The content is purely legal or account-related.
There is no real narrative to tell.

Image Guidance

Instructional Mode: Grayscale portrait or landscape to teach editorial rhythm.
Public Mode: Color portrait or landscape for Kaleidoscope story, butterflies, wonder, motion, and transformation.
Avoid Roles: avatar unless person-specific, card repeats, logo as filler
Best Placement: Image paired with narrative text or used as a quiet bridge.
Mobile Behavior: Keep the story readable; image should not interrupt every paragraph.
Accessibility: Narrative images are often atmospheric; use empty alt unless they convey specific content.

Good / Better / Best

Good: A mission paragraph with image support.
Better: Narrative copy, one strong image, and a proof point.
Best: A story section that makes the page more memorable without slowing the user down.

guidance

Article / Longform Content

Readable longform layout for articles, documentation, resource details, and policy pages.

Purpose: Support sustained reading and comprehension.
Source: Pattern guidance
Components: Typography, List, Blockquote, Table, Image Frame
Recommended Pages: Article, Documentation, Resources, Privacy Policy, Terms
Recommended Image Roles: landscape, card, none
Image Density: One featured image plus occasional inline figures when they add meaning.

Use / Avoid

Use When

The content is meant to be read linearly.
Policies or documentation need clarity.
An article needs metadata, body, and related content.

Avoid When

The page is a landing page.
The content is mostly short cards or choices.

Image Guidance

Instructional Mode: Grayscale card or landscape for article-image examples.
Public Mode: Color landscape or card for featured editorial content; grayscale can work for archival or policy tone.
Avoid Roles: hero repeated inside body, avatar unless author content
Best Placement: Featured image after header or inline figures between text groups.
Mobile Behavior: Images span container and preserve text readability.
Accessibility: Informative diagrams and figures need meaningful alt or captions.

Good / Better / Best

Good: Readable body text with headings.
Better: Metadata, figures, lists, and related links.
Best: A longform page that balances reading, scanning, and accessible structure.

stable

Timeline / Milestones

Chronological milestone presentation.

Purpose: Show progression, origin, history, or planned stages over time.
Source: patterns/timeline.php
Components: Card, Label, List
Recommended Pages: About Us, Careers, Organization, Press
Recommended Image Roles: none, square
Image Density: Zero images or one intro image.

Use / Avoid

Use When

Time/order is meaningful.
Milestones explain credibility or progress.
A story needs chronological structure.

Avoid When

Items are not time-based.
A simple list would be clearer.

Image Guidance

Instructional Mode: Usually no image; grayscale square accents optional.
Public Mode: Usually no image; one banner/landscape can introduce the history section.
Avoid Roles: image per milestone unless each milestone genuinely needs media
Best Placement: Timeline labels and dates should lead.
Mobile Behavior: Timeline becomes vertical and readable.
Accessibility: Dates and order must be text-readable.

Good / Better / Best

Good: Milestones in order.
Better: Dates, headings, and concise meaning.
Best: Timeline that strengthens the story without becoming a decorative list.

Data Patterns

guidance

Pricing / Comparison

Plan cards, comparison matrix, or feature comparison layout.

Purpose: Help visitors compare options and choose confidently.
Source: Pattern guidance
Components: Card, Table, Button, Badge
Recommended Pages: Pricing, Products, Services, Billing
Recommended Image Roles: none
Image Density: Usually zero images.

Use / Avoid

Use When

Options need comparison.
Features differ by tier.
A purchase/selection decision is expected.

Avoid When

There is only one option.
The comparison cannot be honest or clear.

Image Guidance

Instructional Mode: No image; grayscale accents only if showing card anatomy.
Public Mode: No image in most cases; product/service comparison may use one color card/landscape at top.
Avoid Roles: hero per plan, portrait, background behind tables
Best Placement: If used, above comparison as context, not inside every price card.
Mobile Behavior: Tables/cards must remain readable; consider stacked comparison.
Accessibility: Tables need headers and clear plan labels.

Good / Better / Best

Good: Plan cards.
Better: Plan cards plus feature matrix.
Best: Comparison that makes the best fit obvious without overwhelming the visitor.

guidance

Responsive Table / Data Layout

Structured data table or matrix designed for desktop and mobile readability.

Purpose: Present structured facts, specifications, orders, billing, or comparisons.
Source: Pattern guidance
Components: Table, Card, Badge
Recommended Pages: Pricing, Billing, Orders, Documentation, Product Detail
Recommended Image Roles: none
Image Density: Zero images.

Use / Avoid

Use When

Rows and columns are necessary for comprehension.
Users must compare exact values.

Avoid When

A list or cards would be clearer.
The table would be too wide with no mobile strategy.

Image Guidance

Instructional Mode: No image.
Public Mode: No image.
Avoid Roles: all images
Best Placement: Data is the visual object.
Mobile Behavior: Use responsive wrappers or stacked cards where necessary.
Accessibility: Use table headers and captions when appropriate.

Good / Better / Best

Good: A readable table.
Better: A responsive table with clear labels.
Best: Data layout that remains understandable at every width.

Detail Patterns

guidance

Detail Page Summary

Intro summary for a service, product, article, resource, project, or detail page.

Purpose: Give enough context for a visitor to understand the detail page before reading deeper.
Source: Pattern guidance
Components: Heading, Badge, Button, Image Frame, List
Recommended Pages: Service Detail, Product Detail, Article, Portfolio, Resource Detail
Recommended Image Roles: landscape, card
Image Density: One primary image, maybe supporting thumbnails later.

Use / Avoid

Use When

A page presents one primary item or subject.
Users need summary, metadata, and primary action.

Avoid When

The page is a collection or overview.
There is no single item to summarize.

Image Guidance

Instructional Mode: Grayscale landscape/card for structure.
Public Mode: Color landscape/card for item identity; portrait if the detail is person/editorial.
Avoid Roles: avatar unless person detail, logo as item image
Best Placement: Right or top of summary; avoid crowding metadata.
Mobile Behavior: Summary text and action remain above large detail media unless image is essential.
Accessibility: Alt should identify the subject if informative.

Good / Better / Best

Good: Title, summary, and image.
Better: Summary, metadata, action, and appropriate image role.
Best: A detail opener that quickly tells users what this page is and why it matters.

guidance

Sidebar Content Layout

Main content with supporting sidebar for links, metadata, contact details, or related material.

Purpose: Keep primary content readable while surfacing secondary actions or context.
Source: Pattern guidance
Components: Card, List, Navigation, Form, Image Frame
Recommended Pages: Article, Documentation, Service Detail, Contact Us, Legal Pages
Recommended Image Roles: none, portrait, background
Image Density: Zero or one small supporting image.

Use / Avoid

Use When

Secondary content helps but should not interrupt reading.
Related links or metadata need a persistent place.

Avoid When

The page is short.
The sidebar becomes a dumping ground.

Image Guidance

Instructional Mode: No image or grayscale portrait/sidebar example.
Public Mode: No image or one color portrait/background only if it supports the sidebar purpose.
Avoid Roles: hero, banner, large landscape that overpowers sidebar
Best Placement: Within sidebar card, never as the dominant page image.
Mobile Behavior: Sidebar content moves below primary content or becomes section navigation.
Accessibility: Source order should keep primary content before secondary sidebar content.

Good / Better / Best

Good: Content and sidebar split.
Better: Sidebar has clear purpose and restrained content.
Best: A layout that improves navigation without weakening reading flow.

Feature Patterns

stable

Feature Grid

Grid of reusable feature, benefit, route, or category cards.

Purpose: Let visitors compare several equal-weight options quickly.
Source: patterns/feature-grid.php
Components: Card, Label, Button, Image Frame
Recommended Pages: Home, Services, Products, Resources
Recommended Image Roles: card, square, none
Image Density: Zero to one image per card; avoid mechanical repetition.

Use / Avoid

Use When

Three to six items need equal emphasis.
The page needs fast scanning.
Visitors are choosing a route.

Avoid When

The items are sequential steps.
One item should dominate.
The cards have too much long-form copy.

Image Guidance

Instructional Mode: Grayscale card or square images, or no images, to teach spacing and hierarchy.
Public Mode: Color card/square images only when each item benefits from visual identity.
Avoid Roles: hero, banner, portrait unless cards are intentionally vertical
Best Placement: Top of card or small symbolic media zone.
Mobile Behavior: Cards stack; image height should remain consistent.
Accessibility: Repeated decorative images should use empty alt; informative card images need useful alt.

Good / Better / Best

Good: Equal cards with consistent headings.
Better: Cards with clear labels, short copy, and restrained images.
Best: A grid where visual rhythm supports comparison and no image is added merely to fill space.

guidance

Process / How It Works

Sequential steps that explain how something begins, moves, and completes.

Purpose: Teach sequence, progress, or method.
Source: Pattern guidance
Components: Label, Card, List, Button
Recommended Pages: Home, Services, Support, Product Detail
Recommended Image Roles: none, square
Image Density: Zero images or one small visual per step.

Use / Avoid

Use When

Visitors need to understand order or next steps.
A service or support flow needs to feel simple.
A complex idea can be reduced to stages.

Avoid When

Items are not sequential.
The content is a comparison grid.
The flow has too many branches for a simple row.

Image Guidance

Instructional Mode: Usually no image; grayscale square accents may clarify steps.
Public Mode: Color is optional and should be limited to one supporting landscape or symbolic square accents.
Avoid Roles: hero, banner, repeated large card images
Best Placement: Numbered labels and typography should lead.
Mobile Behavior: Steps should stack in order; numbers remain visible.
Accessibility: Use ordered lists when order matters.

Good / Better / Best

Good: Three numbered cards.
Better: A clear sequence with short step titles and next-action support.
Best: A process that reduces uncertainty and shows the visitor where to begin.

Feedback Patterns

stable

FAQ List

Question and answer list for reassurance, support, and decision help.

Purpose: Reduce uncertainty by answering common questions quickly.
Source: patterns/faq-list.php
Components: Accordion, Typography
Recommended Pages: FAQ, Product Detail, Services, Contact Us, Support
Recommended Image Roles: none
Image Density: Zero images.

Use / Avoid

Use When

Users have recurring objections or questions.
A form/page needs reassurance.
Support content can be shortened into scan-friendly answers.

Avoid When

The answer requires a full article.
The FAQ would duplicate nearby content.

Image Guidance

Instructional Mode: No image.
Public Mode: No image or a subtle background only.
Avoid Roles: hero, card images per question, avatar
Best Placement: Let question/answer structure carry the section.
Mobile Behavior: Accordion controls must be easy to tap.
Accessibility: Use semantic disclosure controls and keyboard-friendly behavior.

Good / Better / Best

Good: A list of common questions.
Better: Grouped questions with concise answers.
Best: FAQ content placed exactly where it removes hesitation.

guidance

Error / Warning / Alert

Page-level or section-level feedback for errors, warnings, unavailable states, and important notices.

Purpose: Make urgent or corrective information visible without creating confusion.
Source: Pattern guidance
Components: Alert, Callout, Button, List
Recommended Pages: Forms, Account, Support, Billing, Dashboard
Recommended Image Roles: none
Image Density: Zero images.

Use / Avoid

Use When

The user needs to correct something.
A system or page state requires attention.
An important notice must be seen before action.

Avoid When

The message is normal instructional copy.
The page already has too many competing alerts.

Image Guidance

Instructional Mode: No image; use structure, iconography, border, color, and text.
Public Mode: No image in most cases; keep feedback clear and immediate.
Avoid Roles: hero, banner, background, card images
Best Placement: Near the affected form, section, or page header.
Mobile Behavior: Message appears before the controls or content it affects.
Accessibility: Use clear text and ARIA status/alert behavior when dynamic.

Good / Better / Best

Good: An alert message appears.
Better: The alert explains what happened and how to fix it.
Best: The feedback appears in the right place, is accessible, and helps the user recover quickly.

guidance

Confirmation / Success

Post-action confirmation that tells the visitor what happened and what comes next.

Purpose: Close a form or transactional moment with confidence.
Source: Pattern guidance
Components: Alert, Card, Button, List
Recommended Pages: Contact Us, Register, Support, Newsletter, Orders
Recommended Image Roles: none, square, logo-light
Image Density: Zero or one small identity/symbolic image.

Use / Avoid

Use When

A form was submitted.
A request was received.
The user needs next steps.

Avoid When

No user action has occurred.
A page-level status message would be misleading.

Image Guidance

Instructional Mode: No image; grayscale icon-like square optional.
Public Mode: No image or small color symbolic square/logo moment.
Avoid Roles: hero, banner, large background
Best Placement: Small accent above or beside the message.
Mobile Behavior: Message and next actions first.
Accessibility: Use aria-live when feedback appears dynamically.

Good / Better / Best

Good: Success message appears.
Better: Success message includes timeline or next step.
Best: Confirmation leaves no doubt about what happened and what the user should do next.

guidance

Empty State / No Results

Helpful state when there is no content, no result, or no current activity.

Purpose: Turn absence into guidance.
Source: Pattern guidance
Components: Empty State, Button, Search, Image Frame
Recommended Pages: Search Results, Dashboard, Orders, Account, Support
Recommended Image Roles: square, logo-light, none
Image Density: Zero or one small image.

Use / Avoid

Use When

No results were found.
An account/dashboard is empty.
A workflow has not started.

Avoid When

The absence is an error that needs warning treatment.
Content is still loading.

Image Guidance

Instructional Mode: Grayscale square/logo or no image.
Public Mode: Color square or logo only if it adds warmth; keep it secondary.
Avoid Roles: hero, banner, portrait
Best Placement: Above message as a quiet symbol, not a decorative hero.
Mobile Behavior: Actions remain immediately visible.
Accessibility: Empty-state text must explain the condition and available action.

Good / Better / Best

Good: No-results message.
Better: Message with search/edit action.
Best: Empty state that teaches the user how to recover or continue.

Foundation Patterns

stable

Section Shell

Reusable section shell for composed page blocks.

Purpose: Give sections consistent spacing, containment, and flow rhythm.
Source: patterns/section.php
Components: Typography, Flow, Container
Recommended Pages: All pages
Recommended Image Roles: none
Image Density: The shell does not decide image density.

Use / Avoid

Use When

A page needs a distinct content block.
Spacing and structure should remain consistent.

Avoid When

Inside very small components.
Where a pattern already provides the needed section shell.

Image Guidance

Instructional Mode: No image by default.
Public Mode: No image by default; image decision belongs to the specific pattern inside the section.
Avoid Roles: all images by default
Best Placement: Managed by child pattern.
Mobile Behavior: Preserve rhythm without excessive desktop spacing.
Accessibility: Use headings and aria-labelledby when section identity is important.

Good / Better / Best

Good: Consistent section spacing.
Better: Section spacing matched to content density.
Best: Section rhythm that supports the whole page without drawing attention to itself.

Hero Patterns

stable

Hero

Introductory page or section opener that establishes the main promise, hierarchy, and first action.

Purpose: Create the first dominant moment of a page.
Source: patterns/hero.php
Components: Hero, Button, Typography, Image Frame
Recommended Pages: Home, Landing Page, About Us, Service Detail
Recommended Image Roles: hero, landscape
Image Density: One dominant image maximum.

Use / Avoid

Use When

The page needs a clear first impression.
The visitor needs an immediate promise and action.
One dominant visual or typographic moment is appropriate.

Avoid When

The content is purely utility or legal.
The page needs speed and compact access more than visual impact.
Another hero already appears nearby.

Image Guidance

Instructional Mode: Grayscale hero or landscape to teach hierarchy and crop behavior.
Public Mode: Color hero or landscape for Kaleidoscope public identity and wonder.
Avoid Roles: avatar, logo-light, logo-dark, repeated card images
Best Placement: Full-width background, split hero media column, or large feature frame.
Mobile Behavior: Image stacks below or above text and should preserve focal area with object-fit cover.
Accessibility: Use meaningful alt when the image communicates identity; use empty alt when purely atmospheric.

Good / Better / Best

Good: A hero with a clear heading, lead, and one supporting image.
Better: A split hero where image scale and text hierarchy are balanced.
Best: A dominant hero that sets page purpose while leaving room for quieter sections below.

stable

Page Header

Standard page title area with optional eyebrow, lead, actions, and breadcrumbs.

Purpose: Orient visitors at the start of non-home pages without overbuilding a full hero.
Source: patterns/page-header.php
Components: Label, Heading, Button, Breadcrumb
Recommended Pages: All public pages, Documentation, Legal Pages
Recommended Image Roles: banner, none
Image Density: Zero to one image.

Use / Avoid

Use When

The page needs orientation more than drama.
A consistent heading system is required.
The page sits within a larger navigation set.

Avoid When

A full landing page hero is needed.
The page is a compact transactional screen with no intro required.

Image Guidance

Instructional Mode: Usually no image or a grayscale banner when demonstrating layout options.
Public Mode: Color banner or no image depending on page weight.
Avoid Roles: avatar, card, repeated images
Best Placement: Background strip or separate media row only when it clarifies page identity.
Mobile Behavior: Keep title and lead first; image may collapse below.
Accessibility: Breadcrumbs need clear labels and current page state.

Good / Better / Best

Good: A clear title and short lead.
Better: Title, lead, and useful breadcrumb or action.
Best: A compact header that creates context without stealing visual energy from the content.

Image Patterns

guidance

Media Gallery

Gallery, image collection, or visual archive with consistent image handling.

Purpose: Let visual content be the primary object.
Source: Pattern guidance
Components: Image Frame, Card, Caption, Grid
Recommended Pages: Gallery, Portfolio, Products, Resources
Recommended Image Roles: square, card, landscape
Image Density: Many images allowed only because images are the content.

Use / Avoid

Use When

The page is about visual browsing.
Images are content, not decoration.

Avoid When

Images are only placeholders.
Text/actions are more important than images.

Image Guidance

Instructional Mode: Grayscale square/card/landscape to teach ratio and grid rhythm.
Public Mode: Color square/card/landscape for finished visual browsing.
Avoid Roles: hero repeated in grid, banner as grid item, logo as content image
Best Placement: Consistent grid with captions/metadata as needed.
Mobile Behavior: Grid collapses without awkward crop jumps.
Accessibility: Each informative image needs meaningful alt or nearby caption.

Good / Better / Best

Good: A consistent image grid.
Better: Images with captions and predictable crop behavior.
Best: A gallery where image choice, ratio, and rhythm feel intentional.

Listing Patterns

stable

Article / Resource List

Grouped article, resource, or news cards.

Purpose: Preview a collection of content entries.
Source: patterns/article-list.php
Components: Card, Badge, Pagination, Image Frame
Recommended Pages: Blog, News, Resources, Search Results
Recommended Image Roles: card, landscape
Image Density: One image per item only when images help scanning; otherwise text-led cards are valid.

Use / Avoid

Use When

Several content items need scanning.
Users need to compare titles, dates, categories, or summaries.

Avoid When

There are fewer than two entries.
The page needs a detail view instead.

Image Guidance

Instructional Mode: Grayscale card/landscape images or no images to show layout choices.
Public Mode: Color card or landscape images for finished Kaleidoscope content previews.
Avoid Roles: hero per item, banner in each card, avatar unless author list
Best Placement: Top or side of preview card.
Mobile Behavior: Cards stack; image crop stays consistent.
Accessibility: Alt should describe meaningful preview imagery; decorative repeated placeholders use empty alt.

Good / Better / Best

Good: Cards with title and summary.
Better: Cards with metadata and consistent visual treatment.
Best: A listing that lets users scan quickly without visual monotony.

guidance

Pagination / Load More

Controls for moving through long lists or loading additional items.

Purpose: Let visitors continue through a collection without losing orientation.
Source: Pattern guidance
Components: Button, Navigation, Label
Recommended Pages: Blog, Search Results, Products, Resources, Gallery
Recommended Image Roles: none
Image Density: Zero images.

Use / Avoid

Use When

A collection spans multiple pages or loads more content.
Users need position within a list.

Avoid When

All items fit comfortably on one page.
The list is filtered to a small set.

Image Guidance

Instructional Mode: No image.
Public Mode: No image.
Avoid Roles: all images
Best Placement: Below the list, after content items.
Mobile Behavior: Controls must be tap-friendly and not too many links wide.
Accessibility: Use navigation landmarks/labels and current page indication.

Good / Better / Best

Good: Previous and next controls.
Better: Accessible page list with current state.
Best: Navigation that supports long collections without adding visual clutter.

stable

Site Header

Primary header and navigation system.

Purpose: Provide identity, route-finding, current location, and responsive navigation.
Source: patterns/site-header.php
Components: Navbar, Branding, Button
Recommended Pages: All public pages, Monarch Admin
Recommended Image Roles: logo-light, logo-dark
Image Density: Logo/brand mark only.

Use / Avoid

Use When

Every full page needs persistent navigation.
Brand identity and page access are needed.

Avoid When

Embedded previews or isolated components where shell is provided externally.

Image Guidance

Instructional Mode: Logo/icon only if demonstrating identity.
Public Mode: Kaleidoscope logo/mark only; no decorative imagery.
Avoid Roles: hero, banner, background behind nav links
Best Placement: Brand area.
Mobile Behavior: Navigation collapses into accessible menu.
Accessibility: Use aria-current, aria-expanded, aria-controls, and visible focus.

Good / Better / Best

Good: Header with brand and links.
Better: Responsive header with active states and accessible menu.
Best: Navigation that stays clear without adding visual clutter or hover-only behavior.

stable

Site Footer

Footer navigation and identity area.

Purpose: Provide secondary navigation, legal access, support paths, and final orientation.
Source: patterns/site-footer.php
Components: Navigation, Typography, Button, Logo
Recommended Pages: All public pages, Monarch Admin
Recommended Image Roles: logo-light, logo-dark, none
Image Density: Zero or one brand image.

Use / Avoid

Use When

Every full page needs closure and secondary navigation.
Legal/support/organization routes should remain reachable.

Avoid When

Isolated embeds or previews with no page shell.

Image Guidance

Instructional Mode: Logo-only if demonstrating brand/footer layout.
Public Mode: Logo mark or no image; avoid decorative footer images.
Avoid Roles: hero, banner, gallery imagery
Best Placement: Footer brand area.
Mobile Behavior: Navigation groups stack cleanly.
Accessibility: Footer nav needs labels and current states where appropriate.

Good / Better / Best

Good: Footer with legal links.
Better: Grouped footer navigation.
Best: Footer that acts as the final navigational safety net for the page.

Trust / Proof Patterns

stable

Statistics

Metric summary row for proof, scale, or status.

Purpose: Communicate credibility through concise numbers.
Source: patterns/statistics.php
Components: Statistic, Card, Label
Recommended Pages: Home, Dashboard, About Us, Pricing
Recommended Image Roles: none, background
Image Density: Zero images in most cases.

Use / Avoid

Use When

Numbers support trust or progress.
Metrics are comparable and credible.
The page needs a proof strip.

Avoid When

Numbers are invented without context.
The section would interrupt a form or reading flow.

Image Guidance

Instructional Mode: No image; grayscale background optional for layout demonstration.
Public Mode: Usually no image; color background only if very subtle.
Avoid Roles: card image per metric, hero, avatar
Best Placement: Let numbers and labels lead.
Mobile Behavior: Metrics stack or wrap without losing labels.
Accessibility: Do not communicate meaning by number size alone.

Good / Better / Best

Good: Numbers in cards.
Better: Numbers with clear labels and context.
Best: Metrics that reinforce the page claim and preserve rhythm.

guidance

Testimonial Row

Quote-based proof from people, partners, visitors, or fictional example voices.

Purpose: Add human confirmation and trust.
Source: Pattern guidance
Components: Quote, Avatar, Card
Recommended Pages: Home, About Us, Services, Product Detail
Recommended Image Roles: avatar, portrait, none
Image Density: One avatar per quote or one portrait for a featured testimonial.

Use / Avoid

Use When

A claim benefits from human endorsement.
The page needs warmth or proof.
The quote content is specific enough to help.

Avoid When

Quotes are generic filler.
The page is legal or utility-focused.

Image Guidance

Instructional Mode: Grayscale avatar or no image.
Public Mode: Color avatar or portrait only when it supports human presence.
Avoid Roles: hero, banner, card images unrelated to people
Best Placement: Beside attribution or as small identity marker.
Mobile Behavior: Quote remains first; attribution follows clearly.
Accessibility: Do not use decorative avatar alt that repeats the person name unnecessarily.

Good / Better / Best

Good: A quote with attribution.
Better: A quote that supports a nearby claim.
Best: A testimonial pattern that adds credibility without becoming visual clutter.

stable

Team / People Preview

People/profile card grid for team, leadership, contributors, or author previews.

Purpose: Humanize an organization or content area.
Source: patterns/team-grid.php
Components: Avatar, Card, Label
Recommended Pages: Team, About Us, Leadership, Organization
Recommended Image Roles: avatar, portrait, square
Image Density: One image per person/card.

Use / Avoid

Use When

People are part of the trust story.
Leadership, team, or contributors need preview.

Avoid When

No people should be implied.
The page is not about identity or credibility.

Image Guidance

Instructional Mode: Grayscale avatar, square, or portrait to teach people-card structure.
Public Mode: Color avatar/portrait for public identity and warmth.
Avoid Roles: hero, banner, logo as person image
Best Placement: Avatar near name or portrait at top of card.
Mobile Behavior: Cards stack; name and role remain close to image.
Accessibility: Alt should not duplicate adjacent visible name unless image itself adds information.

Good / Better / Best

Good: People cards with names.
Better: Names, roles, short bios, and consistent image treatment.
Best: People preview that adds trust without turning the page into a directory.