Skip to main content

CODITECT Pattern Library - All Templates (Complete Specifications)

Production-ready page layouts

T1: DashboardGrid​

Purpose: Primary landing page with metrics and cards

Test Criteria:

composition:
  - header: navbar organism
  - page_header: title + actions
  - grid: responsive card layout
  - cards: metric/status/activity cards
  
layout:
  - columns: 4 → 3 → 2 → 1 (responsive)
  - gap: 24px
  - padding: 24px
  
accessibility:
  - main: semantic main element
  - heading_hierarchy: h1 → h2 → h3
  - landmarks: nav, main, article

Layout Structure:

<div class="dashboard-layout">
  <!-- O1: Header/Navbar -->
  <header class="navbar" role="banner">
    <!-- Navbar content -->
  </header>
  
  <!-- Main content area -->
  <main class="dashboard-main">
    <!-- Page header -->
    <div class="page-header">
      <div class="page-header__content">
        <h1 class="page-header__title">Dashboard</h1>
        <p class="page-header__description">Overview of your projects and team activity</p>
      </div>
      <div class="page-header__actions">
        <button class="button button--primary">
          <svg class="button__icon" width="16" height="16">
            <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2"/>
          </svg>
          New Project
        </button>
      </div>
    </div>
    
    <!-- Stats overview -->
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-card__label">Active Projects</div>
        <div class="stat-card__value">12</div>
        <div class="stat-card__change stat-card__change--positive">
          +2 from last month
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-card__label">Tasks Completed</div>
        <div class="stat-card__value">148</div>
        <div class="stat-card__change stat-card__change--positive">
          +23%
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-card__label">Team Members</div>
        <div class="stat-card__value">24</div>
        <div class="stat-card__change">
          No change
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-card__label">Avg Completion Time</div>
        <div class="stat-card__value">3.2 days</div>
        <div class="stat-card__change stat-card__change--negative">
          +0.4 days
        </div>
      </div>
    </div>
    
    <!-- Main content grid -->
    <div class="dashboard-grid">
      <!-- O3: Card - Active Projects -->
      <article class="card">
        <div class="card__header">
          <h2 class="card__title">Active Projects</h2>
          <a href="/projects" class="card__action">View all →</a>
        </div>
        <div class="card__content">
          <div class="project-list">
            <div class="project-item">
              <div class="project-item__info">
                <h3 class="project-item__title">Website Redesign</h3>
                <div class="project-item__meta">
                  <div class="avatar-group">
                    <img src="/user1.jpg" alt="User 1" class="avatar avatar--sm" />
                    <img src="/user2.jpg" alt="User 2" class="avatar avatar--sm" />
                    <div class="avatar avatar--sm avatar--count">+3</div>
                  </div>
                  <span class="project-item__due">Due in 5 days</span>
                </div>
              </div>
              <div class="progress-indicator">
                <div class="progress-bar">
                  <div class="progress-bar__fill" style="width: 75%"></div>
                </div>
                <span class="progress-indicator__label">75%</span>
              </div>
            </div>
            <!-- More project items... -->
          </div>
        </div>
      </article>
      
      <!-- O3: Card - Recent Activity -->
      <article class="card">
        <div class="card__header">
          <h2 class="card__title">Recent Activity</h2>
        </div>
        <div class="card__content">
          <div class="activity-list">
            <div class="activity-item">
              <img src="/alice.jpg" alt="" class="avatar avatar--sm" />
              <div class="activity-item__content">
                <p><strong>Alice Johnson</strong> completed task "Update homepage"</p>
                <time class="activity-item__time">2 hours ago</time>
              </div>
            </div>
            <!-- More activity items... -->
          </div>
        </div>
      </article>
      
      <!-- O3: Card - Team Status -->
      <article class="card">
        <div class="card__header">
          <h2 class="card__title">Team Status</h2>
        </div>
        <div class="card__content">
          <div class="team-status-list">
            <div class="team-status-item">
              <img src="/alice.jpg" alt="" class="avatar" />
              <div class="team-status-item__info">
                <div class="team-status-item__name">Alice Johnson</div>
                <div class="team-status-item__task">Working on homepage design</div>
              </div>
              <div class="status-indicator">
                <span class="dot dot--success"></span>
                <span>Active</span>
              </div>
            </div>
            <!-- More team members... -->
          </div>
        </div>
      </article>
    </div>
  </main>
</div>

CSS:

.dashboard-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--gray-50);
}

.dashboard-main {
  flex: 1;
  padding: 24px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 24px;
}

.page-header__title {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 600;
  color: var(--gray-900);
}

.page-header__description {
  margin: 0;
  font-size: 14px;
  color: var(--gray-600);
}

.page-header__actions {
  flex-shrink: 0;
}

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--white);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
}

.stat-card__label {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 8px;
}

.stat-card__value {
  font-size: 32px;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.stat-card__change {
  font-size: 13px;
  color: var(--gray-600);
}

.stat-card__change--positive {
  color: var(--green-600);
}

.stat-card__change--negative {
  color: var(--red-600);
}

/* Dashboard grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
}

/* Responsive */
@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .dashboard-main {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

T2: DetailView​

Purpose: Focused view of single entity with sidebar

Test Criteria:

composition:
  - header: navbar + breadcrumb
  - main: content area
  - sidebar: metadata/actions
  
layout:
  - main: 70% width
  - sidebar: 30% width (280px)
  - responsive: stack on mobile
  
accessibility:
  - breadcrumb_nav: navigation trail
  - complementary: sidebar role
  - main: main content role

Layout Structure:

<div class="detail-layout">
  <!-- Header -->
  <header class="navbar" role="banner">
    <!-- Navbar content -->
  </header>
  
  <!-- Breadcrumb -->
  <nav class="breadcrumb" aria-label="Breadcrumb">
    <ol class="breadcrumb__list">
      <li class="breadcrumb__item">
        <a href="/" class="breadcrumb__link">Home</a>
      </li>
      <li class="breadcrumb__separator">›</li>
      <li class="breadcrumb__item">
        <a href="/projects" class="breadcrumb__link">Projects</a>
      </li>
      <li class="breadcrumb__separator">›</li>
      <li class="breadcrumb__item">
        <span class="breadcrumb__current" aria-current="page">Website Redesign</span>
      </li>
    </ol>
  </nav>
  
  <!-- Main layout -->
  <div class="detail-container">
    <!-- Main content -->
    <main class="detail-main">
      <!-- Page header -->
      <div class="page-header">
        <h1 class="page-header__title">Website Redesign</h1>
        <div class="page-header__actions">
          <button class="button button--secondary">Edit</button>
          <button class="button button--danger">Delete</button>
        </div>
      </div>
      
      <!-- Content sections -->
      <section class="detail-section">
        <h2 class="detail-section__title">Overview</h2>
        <div class="detail-section__content">
          <p>Complete redesign of the company website with modern UI/UX principles...</p>
        </div>
      </section>
      
      <section class="detail-section">
        <h2 class="detail-section__title">Tasks</h2>
        <div class="detail-section__content">
          <div class="task-list">
            <div class="task-item">
              <input type="checkbox" class="checkbox__input" checked />
              <div class="task-item__content">
                <div class="task-item__title">Design homepage mockup</div>
                <div class="task-item__meta">
                  <img src="/alice.jpg" alt="Alice" class="avatar avatar--sm" />
                  <span>Completed 2 days ago</span>
                </div>
              </div>
            </div>
            <!-- More tasks... -->
          </div>
        </div>
      </section>
      
      <section class="detail-section">
        <h2 class="detail-section__title">Activity</h2>
        <div class="detail-section__content">
          <div class="activity-timeline">
            <div class="timeline-item">
              <div class="timeline-item__marker"></div>
              <div class="timeline-item__content">
                <p><strong>Alice Johnson</strong> completed "Homepage design"</p>
                <time>2 hours ago</time>
              </div>
            </div>
            <!-- More timeline items... -->
          </div>
        </div>
      </section>
    </main>
    
    <!-- Sidebar -->
    <aside class="detail-sidebar" role="complementary">
      <!-- Metadata card -->
      <div class="card">
        <div class="card__header">
          <h2 class="card__title">Details</h2>
        </div>
        <div class="card__content">
          <dl class="detail-list">
            <dt class="detail-list__term">Status</dt>
            <dd class="detail-list__value">
              <div class="status-indicator">
                <span class="dot dot--success"></span>
                <span>In Progress</span>
              </div>
            </dd>
            
            <dt class="detail-list__term">Due Date</dt>
            <dd class="detail-list__value">March 15, 2024</dd>
            
            <dt class="detail-list__term">Progress</dt>
            <dd class="detail-list__value">
              <div class="progress-indicator">
                <div class="progress-bar">
                  <div class="progress-bar__fill" style="width: 75%"></div>
                </div>
                <span class="progress-indicator__label">75%</span>
              </div>
            </dd>
            
            <dt class="detail-list__term">Team</dt>
            <dd class="detail-list__value">
              <div class="avatar-group">
                <img src="/user1.jpg" alt="User 1" class="avatar avatar--sm" />
                <img src="/user2.jpg" alt="User 2" class="avatar avatar--sm" />
                <div class="avatar avatar--sm avatar--count">+3</div>
              </div>
            </dd>
          </dl>
        </div>
      </div>
      
      <!-- Actions card -->
      <div class="card">
        <div class="card__header">
          <h2 class="card__title">Quick Actions</h2>
        </div>
        <div class="card__content">
          <div class="action-list">
            <button class="action-list__item">
              <svg width="20" height="20" class="action-list__icon">
                <path d="M12 5v14M5 12h14" stroke="currentColor"/>
              </svg>
              <span>Add Task</span>
            </button>
            <button class="action-list__item">
              <svg width="20" height="20" class="action-list__icon">
                <path d="M16 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke="currentColor"/>
              </svg>
              <span>Add Member</span>
            </button>
          </div>
        </div>
      </div>
    </aside>
  </div>
</div>

CSS:

.detail-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--gray-50);
}

.detail-container {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 24px;
}

.detail-main {
  min-width: 0; /* Prevent grid blowout */
}

.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-section {
  background: var(--white);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
  border: 1px solid var(--gray-200);
}

.detail-section__title {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-900);
}

.detail-list {
  margin: 0;
}

.detail-list__term {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  margin-bottom: 6px;
}

.detail-list__value {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--gray-900);
}

.action-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: none;
  background: none;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 14px;
  color: var(--gray-700);
}

.action-list__item:hover {
  background: var(--gray-100);
}

/* Responsive */
@media (max-width: 768px) {
  .detail-container {
    grid-template-columns: 1fr;
  }
  
  .detail-sidebar {
    order: -1; /* Move sidebar above content */
  }
}

T3: KanbanBoard​

Purpose: Drag-and-drop task management

Test Criteria:

composition:
  - header: page title + filters
  - columns: status lanes
  - cards: task cards
  
behavior:
  - drag_drop: move cards between columns
  - add_card: quick add to column
  - horizontal_scroll: overflow handling
  
accessibility:
  - keyboard_drag: arrow keys move cards
  - aria_grabbed: drag state
  - live_region: announce moves

Layout Structure:

<div class="kanban-layout">
  <header class="navbar" role="banner">
    <!-- Navbar -->
  </header>
  
  <main class="kanban-main">
    <!-- Page header -->
    <div class="page-header">
      <div class="page-header__content">
        <h1 class="page-header__title">Project Tasks</h1>
        <div class="tag-list">
          <span class="tag">12 tasks</span>
          <span class="tag tag--success">3 completed</span>
        </div>
      </div>
      <div class="page-header__actions">
        <button class="button button--secondary">
          <svg width="16" height="16" class="button__icon">
            <path d="M3 6h18M9 6V4a2 2 0 012-2h2a2 2 0 012 2v2" stroke="currentColor"/>
          </svg>
          Filter
        </button>
        <button class="button button--primary">
          <svg width="16" height="16" class="button__icon">
            <path d="M12 5v14M5 12h14" stroke="currentColor"/>
          </svg>
          New Task
        </button>
      </div>
    </div>
    
    <!-- Kanban board -->
    <div class="kanban-board" role="region" aria-label="Task board">
      <!-- Column: To Do -->
      <div class="kanban-column">
        <div class="kanban-column__header">
          <h2 class="kanban-column__title">
            <span class="dot dot--inactive"></span>
            To Do
            <span class="kanban-column__count">5</span>
          </h2>
          <button class="kanban-column__add" aria-label="Add task to To Do">
            <svg width="16" height="16">
              <path d="M8 4v8M4 8h8" stroke="currentColor" stroke-width="2"/>
            </svg>
          </button>
        </div>
        <div class="kanban-column__content">
          <div class="kanban-card" draggable="true">
            <h3 class="kanban-card__title">Update homepage design</h3>
            <p class="kanban-card__description">Modernize the landing page with new brand guidelines</p>
            <div class="kanban-card__footer">
              <div class="avatar-group">
                <img src="/alice.jpg" alt="Alice" class="avatar avatar--sm" />
              </div>
              <div class="tag-list">
                <span class="tag tag--sm tag--primary">Design</span>
              </div>
            </div>
          </div>
          <!-- More cards... -->
        </div>
      </div>
      
      <!-- Column: In Progress -->
      <div class="kanban-column">
        <div class="kanban-column__header">
          <h2 class="kanban-column__title">
            <span class="dot dot--warning"></span>
            In Progress
            <span class="kanban-column__count">3</span>
          </h2>
          <button class="kanban-column__add" aria-label="Add task to In Progress">+</button>
        </div>
        <div class="kanban-column__content">
          <div class="kanban-card">
            <h3 class="kanban-card__title">Implement authentication</h3>
            <div class="kanban-card__progress">
              <div class="progress-indicator">
                <div class="progress-bar">
                  <div class="progress-bar__fill" style="width: 60%"></div>
                </div>
                <span class="progress-indicator__label">60%</span>
              </div>
            </div>
            <div class="kanban-card__footer">
              <div class="avatar-group">
                <img src="/bob.jpg" alt="Bob" class="avatar avatar--sm" />
              </div>
              <span class="kanban-card__due kanban-card__due--warning">Due in 2 days</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Column: Done -->
      <div class="kanban-column">
        <div class="kanban-column__header">
          <h2 class="kanban-column__title">
            <span class="dot dot--success"></span>
            Done
            <span class="kanban-column__count">4</span>
          </h2>
        </div>
        <div class="kanban-column__content">
          <div class="kanban-card kanban-card--completed">
            <h3 class="kanban-card__title">Set up CI/CD pipeline</h3>
            <div class="kanban-card__footer">
              <div class="avatar-group">
                <img src="/charlie.jpg" alt="Charlie" class="avatar avatar--sm" />
              </div>
              <span class="kanban-card__completed">Completed yesterday</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

CSS:

.kanban-main {
  padding: 24px;
  max-width: 100%;
  overflow-x: auto;
}

.kanban-board {
  display: flex;
  gap: 16px;
  padding-bottom: 16px;
  min-height: calc(100vh - 200px);
}

.kanban-column {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  background: var(--gray-50);
  border-radius: 8px;
  padding: 12px;
}

.kanban-column__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}

.kanban-column__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
}

.kanban-column__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  background: var(--gray-200);
  color: var(--gray-700);
  font-size: 12px;
  border-radius: 12px;
}

.kanban-column__add {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  color: var(--gray-600);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.kanban-column__add:hover {
  background: var(--gray-200);
  color: var(--gray-900);
}

.kanban-column__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 4px;
}

.kanban-card {
  background: var(--white);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--gray-200);
  cursor: grab;
  transition: all 0.2s;
}

.kanban-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card--completed {
  opacity: 0.7;
}

.kanban-card__title {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-900);
  line-height: 1.4;
}

.kanban-card__description {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.5;
}

.kanban-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kanban-card__due {
  font-size: 12px;
  color: var(--gray-600);
}

.kanban-card__due--warning {
  color: var(--yellow-700);
  font-weight: 500;
}

.kanban-card__completed {
  font-size: 12px;
  color: var(--green-600);
}

T4: FormPage​

Purpose: Full-page form with sections

Test Criteria:

composition:
  - header: navbar
  - form: multi-section form organism
  - sticky_footer: save/cancel actions
  
layout:
  - max_width: 800px
  - centered: horizontal center
  - sections: grouped fields
  
accessibility:
  - form: semantic form element
  - fieldset: grouped sections
  - required: visual + aria indicators

Layout Structure:

<div class="form-page-layout">
  <header class="navbar" role="banner">
    <!-- Navbar -->
  </header>
  
  <main class="form-page-main">
    <div class="form-page-container">
      <!-- Page header -->
      <div class="form-page-header">
        <nav class="breadcrumb" aria-label="Breadcrumb">
          <ol class="breadcrumb__list">
            <li><a href="/">Settings</a></li>
            <li>›</li>
            <li><span aria-current="page">Profile</span></li>
          </ol>
        </nav>
        <h1 class="form-page-title">Edit Profile</h1>
        <p class="form-page-description">Update your personal information and preferences</p>
      </div>
      
      <!-- Form -->
      <form class="form" action="/profile" method="POST">
        <fieldset class="form__section">
          <legend class="form__legend">Personal Information</legend>
          
          <!-- Form fields... -->
        </fieldset>
        
        <fieldset class="form__section">
          <legend class="form__legend">Account Settings</legend>
          
          <!-- More fields... -->
        </fieldset>
        
        <!-- Sticky footer -->
        <div class="form-page-footer">
          <button type="button" class="button button--secondary">Cancel</button>
          <div class="form-page-footer__actions">
            <button type="button" class="button button--secondary">Save Draft</button>
            <button type="submit" class="button button--primary">Save Changes</button>
          </div>
        </div>
      </form>
    </div>
  </main>
</div>

CSS:

.form-page-main {
  padding: 24px;
  min-height: calc(100vh - 64px);
  background: var(--gray-50);
}

.form-page-container {
  max-width: 800px;
  margin: 0 auto;
}

.form-page-header {
  margin-bottom: 32px;
}

.form-page-title {
  margin: 16px 0 8px 0;
  font-size: 32px;
  font-weight: 600;
  color: var(--gray-900);
}

.form-page-description {
  margin: 0;
  font-size: 16px;
  color: var(--gray-600);
}

.form-page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
  position: sticky;
  bottom: 0;
  background: var(--white);
  padding: 16px 24px;
  margin-left: -24px;
  margin-right: -24px;
  border-radius: 0 0 8px 8px;
}

.form-page-footer__actions {
  display: flex;
  gap: 12px;
}

T5: EmptyPage​

Purpose: Empty state for no content

Test Criteria:

composition:
  - header: navbar
  - empty_state: icon + message + CTA
  - centered: vertical and horizontal
  
layout:
  - center: flexbox centering
  - max_width: 480px
  
accessibility:
  - heading: semantic h1
  - action: primary button

Layout Structure:

<div class="empty-page-layout">
  <header class="navbar" role="banner">
    <!-- Navbar -->
  </header>
  
  <main class="empty-page-main">
    <div class="empty-state">
      <div class="empty-state__icon">
        <svg width="64" height="64" viewBox="0 0 64 64">
          <circle cx="32" cy="32" r="30" stroke="currentColor" stroke-width="2" fill="none"/>
          <path d="M32 20v24M20 32h24" stroke="currentColor" stroke-width="2"/>
        </svg>
      </div>
      <h1 class="empty-state__title">No projects yet</h1>
      <p class="empty-state__description">
        Get started by creating your first project to organize your team's work
      </p>
      <button class="button button--primary button--lg">
        <svg width="16" height="16" class="button__icon">
          <path d="M8 4v8M4 8h8" stroke="currentColor" stroke-width="2"/>
        </svg>
        Create Project
      </button>
    </div>
  </main>
</div>

CSS:

.empty-page-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 64px);
  padding: 24px;
  background: var(--gray-50);
}

.empty-state {
  text-align: center;
  max-width: 480px;
}

.empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  color: var(--gray-400);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.empty-state__title {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--gray-900);
}

.empty-state__description {
  margin: 0 0 24px 0;
  font-size: 16px;
  color: var(--gray-600);
  line-height: 1.6;
}

This completes all 6 H.P.008-TEMPLATES with production-ready specifications!