Style System in AEM Templates

Content Objective

• What is the Style System?
• Why use Style System instead of creating multiple components?
• Page-Level Style System
• Component-Level Style System
• Combination of Page and Component Styles
• Real production examples
• Why architects care about Style System

The Journey So Far

In the previous chapters, you've learned:

• Chapter 8: How templates define page blueprints
• Chapter 9: How Layout Containers make pages responsive

You now understand how pages are created and structured.

But how do authors apply different visual styles to components without developers creating duplicate components?

The answer is the Style System.

The Style System enables reusable styles applied at runtime without code duplication.

What is the Style System?

The Style System in AEM templates enables applying reusable styles to components and pages without creating duplicate components.

Purpose:

Avoid creating or modifying components for different UI needs.

Example Problem (Without Style System):

Marketing needs a button component in three colors:

• Blue button
• Green button
• Red button

Bad Solution: Create 3 separate components (ButtonBlue, ButtonGreen, ButtonRed)

• Wasteful
• Difficult to maintain
• Hard to update

Good Solution (With Style System): Create 1 button component with 3 style options

• Authors select "Blue," "Green," or "Red" style
• Single component
• Easy to maintain and update

Who Uses Style System?

• Template Authors — Define available styles
• Page Authors — Apply styles to components
• Developers — Create CSS classes for each style

Workflow:

Developer creates CSS classes
         ↓
Template Author defines Style System
         ↓
Page Author applies styles to components
         ↓
Component renders with selected style

Page-Level Style System

Page-Level Style System applies styles to the entire page, affecting all content.

How to Set Up Page-Level Styles

Step 1: Open Template Editor

Navigate to your template and open the Template Editor.

Step 2: Access Page Policy

Click the three-dot menu on the page structure.

Step 3: Define Style Groups

Access the "Styles" tab and define style groups:

• Style Group Name: "Font Color"
• Options:
  • Red → CSS class: text-red
  • Blue → CSS class: text-blue
  • Green → CSS class: text-green

Step 4: Add CSS Classes

In your component's CSS file, add styles:

.text-red {
  color: #ff0000;
}

.text-blue {
  color: #0000ff;
}

.text-green {
  color: #00aa00;
}

Step 5: Authors Apply Styles

When page authors create pages, they can select styles:

Page Properties → Styles → Font Color → Select "Red"

The entire page gets the text-red CSS class applied.

Page-Level Style Use Cases

• Background colors for different categories (Tech = Blue, Lifestyle = Green)
• Font families for branding (Serif vs Sans-Serif)
• Page layout themes (Dark mode vs Light mode)
• Spacing preferences (Compact vs Spacious)

Component-Level Style System

Component-Level Style System applies styles to individual components, giving authors fine-grained control.

How to Set Up Component-Level Styles

Step 1: Open Template Editor

Navigate to your template and open the Template Editor.

Step 2: Select the Component

Click on a component in the template (e.g., Title component).

Step 3: Click Policy Icon

Click the Policy icon for the component.

Step 4: Define Component Styles

Define styles specific to that component:

• Style Group Name: "Title Alignment"
• Options:
  • Left → CSS class: title-left
  • Center → CSS class: title-center
  • Right → CSS class: title-right

Step 5: Add CSS for Styles

In your component's CSS:

.title-left {
  text-align: left;
}

.title-center {
  text-align: center;
}

.title-right {
  text-align: right;
}

Step 6: Authors Apply Component Styles

When editing a page, authors can apply styles to individual components:

Click Title Component → Styles → Title Alignment → Select "Center"

The title component gets the title-center CSS class applied.

Component-Level Style Examples

Title Component:

• Alignment: Left, Center, Right
• Font Size: Small, Medium, Large
• Color: Primary, Secondary, Tertiary

Button Component:

• Style: Primary, Secondary, Ghost
• Size: Small, Medium, Large
• Color: Blue, Green, Red

Image Component:

• Border: None, Subtle, Bold
• Shadow: None, Light, Dark
• Rounded Corners: None, Light, Full

Combination of Page and Component Policies

Sometimes you need both page-level and component-level styles together for advanced designs.

Scenario

You're building a blog platform where:

• Page background changes based on the category (Technology = Blue, Lifestyle = Green)
• Individual article titles need font size customization (Small, Medium, Large)
• Call-to-action buttons need color variations

Solution

Page Policy: Define background colors for categories

Style Group: "Category Background"
- Technology → CSS class: `category-tech` (blue background)
- Lifestyle → CSS class: `category-lifestyle` (green background)

Component Policy (Title): Add font size options

Style Group: "Title Font Size"
- Small → CSS class: `font-small`
- Medium → CSS class: `font-medium`
- Large → CSS class: `font-large`

Component Policy (Button): Add color options

Style Group: "Button Color"
- Blue → CSS class: `btn-blue`
- Green → CSS class: `btn-green`
- Red → CSS class: `btn-red`

Result

Authors can now:

1. Create a page from the Article template
2. Select "Technology" as the category (page gets blue background)
3. Add a title and set it to "Large" (title is large)
4. Add a CTA button and set it to "Red" (button is red)

Final Result: Fully customized page with consistent design ✅

CSS Implementation

/* Page-level styles */
.category-tech {
  background-color: #0066cc;
}

.category-lifestyle {
  background-color: #009900;
}

/* Component styles - Title */
.font-small {
  font-size: 18px;
}

.font-medium {
  font-size: 28px;
}

.font-large {
  font-size: 36px;
}

/* Component styles - Button */
.btn-blue {
  background-color: #0066cc;
}

.btn-green {
  background-color: #009900;
}

.btn-red {
  background-color: #cc0000;
}

Real Production Example

Situation:

A news organization wants article templates for:

• Tech articles (Blue theme)
• Sports articles (Red theme)
• Entertainment articles (Purple theme)

Each article needs customizable:

• Title size
• Button colors
• Heading styles

Without Style System: Create 9 components (3 themes × 3 variations)

With Style System: Create 3 components with style options

Result: 66% fewer components to maintain ✅

Key Takeaways

• Style System eliminates component duplication by applying CSS classes based on selections
• Page-Level Styles apply to entire pages (background, layout theme)
• Component-Level Styles apply to individual components (text alignment, colors)
• Style System enables authors to customize designs without developer help
• CSS is the foundation — Style System just applies CSS classes dynamically
• Maintainability improves — Update CSS once, affects all instances
• Governance scales — Architects control available styles through policies
• Designer and author collaboration — Designers define styles, authors apply them

Why Architects Care About Style System

From an architecture perspective, Style System is powerful because:

1. Prevents Component Explosion — Don't create 20 button variants; create 1 button with 6 style options
2. Enables Governance — Architects define what styles are available; authors can't deviate
3. Scales to Large Teams — Designers define styles once; authors use them 1000 times
4. Reduces Technical Debt — Single component to maintain instead of multiple
5. Improves Performance — Fewer components to load and maintain
6. Enables Brand Consistency — Architects control all available colors, sizes, and styles

What Happens Next?

In this chapter, we learned how Style System enables design consistency without creating duplicate components.

You now have complete knowledge of how templates, layouts, and styles work together to create enterprise-scale content management:

• Chapter 8: Templates define page blueprints
• Chapter 9: Layout Containers enable responsive layouts
• Chapter 10: Style System enables design consistency

The next advanced topics explore template governance at scale:

• Chapter 11: Editable Template Architecture Deep Dive — Policies, structure, and advanced governance patterns

You now understand how enterprise AEM systems maintain consistency, scale design, and enable rapid content creation without code duplication.