System Foundation

Monarch Principles

Monarch is governed by single-source-of-truth, token-first, declarative architecture.

Branding

Favicon identity is configured once in design/branding.php. Pages inside /monarch automatically use Monarch branding; website pages use the site brand.

Monarch

monarch/assets/favicon/

Website / Application

assets/favicon/

Semantic Site Colors

Labels and HEX values are rendered from design/palette.php and design/theme.php.

Primary Colors

Secondary Colors

Tertiary Colors

Typography

Flow — Responsive Document Rhythm

Layout organizes space. Flow organizes rhythm. Semantic presets control relationships between direct siblings without placing exterior spacing on the elements themselves.

<article class="flow-reading">...</article>

Design Tokens

A concise visual reference for Monarch's core spacing, radius, and shadow values. Numeric values are highlighted in code green.

Buttons

Cards

Cards use the increased 3px outer stroke throughout the framework.

Default Card

A flexible content container built from reusable tokens.

Featured Card

A highlighted variant with accent emphasis and elevation.

Image Card

Cards may include responsive media and optional footer content.

Forms

Tables

Token-Driven Layout System

Monarch preserves familiar .container > .row > .col-* markup while generating dimensions, gutters, and responsive behavior from design/layouts.php.

Containers

Traditional Twelve-Column Grid

Responsive Sidebar

Layout Tokens

<div class="container">
    <div class="row">
        <div class="col-12 col-md-8">Main content</div>
        <div class="col-12 col-md-4">Sidebar</div>
    </div>
</div>

Hero, Alert & Badge Patterns

Pattern Library

Patterns coordinate Layout, Flow, and Components into reusable content compositions.

Templates & Page Archetypes

Templates establish reusable page skeletons. The project root contains the Universal Website reference pages, including Home, About Us, Services, Contact, FAQ, Blog, Article, and 404.

Utility Classes

d-block d-inline d-inline-block d-flex d-grid d-none

flex-row flex-column flex-wrap justify-center justify-between align-center

grid-2 grid-3 grid-4 grid-auto gap-sm gap-md gap-lg

container container-narrow container-wide container-fluid

m-0 m-sm m-md mt-md mb-md p-sm p-md p-lg

w-25 w-50 w-75 w-100 max-400 max-600 max-800

text-left text-center text-right text-uppercase text-primary text-muted

bg-primary bg-secondary bg-accent bg-light bg-dark

border border-top border-primary rounded-sm rounded-md rounded-lg rounded-pill rounded-circle

shadow-none shadow-sm shadow shadow-md shadow-lg shadow-xl

relative absolute fixed sticky overflow-hidden overflow-auto overflow-scroll

visible invisible opacity-0 opacity-25 opacity-50 opacity-75 opacity-100

cursor-pointer cursor-help cursor-wait cursor-not-allowed

transition transition-fast transition-slow hover-shadow hover-grow hover-primary hover-accent

sr-only visually-hidden focus-ring

no-print print-only

Animation Utilities

Reusable motion is configured in design/animations.php. View-triggered examples begin only when they enter the viewport and can be replayed for testing.

data-monarch-animation="fade-up" data-monarch-trigger="view"

data-monarch-animation="pop" data-monarch-trigger="view"

animate-spinner animate-skeleton hover-lift hover-grow hover-shadow

Label Utilities

The identifier styles originally demonstrated in Lists are now reusable utility classes for any module.

<span class="label label-primary">Primary</span>

Debug Utilities

debug debug-card

debug-grid

debug-flex debug-spacing

Standards & Version

Hero Gallery

Page Header

patterns/page-header.php

Shared Pattern Inventory

Theme Demonstrations

Semantic Status Colors

Meaning-driven colors remain consistent across every brand theme.

Universal Website Showcase

All Universal Website sample pages are listed from the centralized sample-page inventory.