Internal CMS Design System

A reusable component framework built for scalable CMS website production, AI-assisted workflows, and rapid content deployment. This system standardizes layouts, modifiers, utilities, and section structures across all projects.

Core Principles

Reusable Components

Every major section is built from reusable systems instead of custom page-specific layouts.

Modifier-Based Styling

Layouts are customized by stacking modifiers instead of writing new CSS every time.

CMS Safe Structure

Simple, predictable HTML structures prevent editor conflicts and layout instability.

Core Tokens & Utilities

Layout

is-2col is-3col is-4col maxwidth bg-full

Spacing

has-space pad-y pad-y-sm pad-x

Surfaces

accent-lite1 accent-lite2 accent-lite3 surface-brand

Typography

text-center is-text-white is-h3-lg has-h3-italic

Feature Cards System

Core Component: feature-cards1

<div class="feature-cards1 is-3col has-card-image-top has-shadow accent-lite3 maxwidth pad-y">

Orthodontics

Reusable card layout using image-top media structure.

Learn More

Family Dentistry

Modifier-driven card system with reusable layout tokens.

Learn More

Header & Toolbar System

Modifier	Purpose
`has-header-overlay`	Overlay navigation styling
`has-topbar`	Enables toolbar region
`is-lines-light`	Light navigation line styling
`has-nav-invert`	Inverse nav colors

FAQ Accordion Pattern

<ul class="accordion-list">
  <li>
    <h3>Question goes here?</h3>

    <div class="answer">
      <p>Answer content goes here.</p>
    </div>
  </li>
</ul>

Recommended Workflow

1. Select Component

Choose a reusable layout system like feature cards, banners, testimonials, or comparison lists.

2. Stack Modifiers

Apply spacing, surface, layout, and typography modifiers to customize the section.

3. Insert Content

Add CMS-safe content without restructuring layouts or writing excessive CSS.

Copy Utility Examples These utility structures are intended for fast copy/paste workflows inside the CMS. --- ## Basic Intro Block ```html

Page Heading

Short supporting intro content explaining the section, services, office philosophy, or patient experience.

Book Appointment

``` --- ## Basic CTA Strip ```html

Ready to schedule your visit?

Request Appointment

``` --- ## Split Content Section ```html

Comfortable Care

Our team focuses on creating a welcoming, modern experience for every patient.

Learn More

``` --- ## Service Grid Example ```html

Preventive Care

Restorative Dentistry

Cosmetic Treatments

Emergency Care

``` --- ## Team Cards Example ```html

Team Member

Office Position

Team Member

Office Position

Team Member

Office Position

``` --- ## FAQ Example ```html

Do you accept new patients?

Yes, we welcome new patients and look forward to helping you achieve a healthier smile.

``` --- ## Inline CTA Group ```html
Book Appointment Call Office
``` --- # Sample HTML Patterns

<div class="has-space pad-y-sm maxwidth accent-lite3 bg-img">
  <h1>Dental Services</h1>

  <h3>Somewhere, CA</h3>

  <p>
    Reusable banner structure with spacing,
    typography, and background modifiers.
  </p>

  <a class="btn btn-default" href="#">
    Book Appointment
  </a>
</div>

Website Design & Marketing by Optima