diff --git a/Abstract-layout-template.md b/Abstract-layout-template.md
index 867c04e..758a671 100644
--- a/Abstract-layout-template.md
+++ b/Abstract-layout-template.md
@@ -13,6 +13,12 @@ This document explains the abstract page layout shown in the image above. It foc
 - **Main Content Area**: Body section of the page, include all the contents and component we using to show user.
 - **Footer**: links, legal, contact, newsletter, social — consistent across pages.
 
+## Core Design 
+- Decide layout per section: use **CSS Grid** for multi-column card grids (categories, products) and **Flexbox** for linear strips (USPs, toolbars, navs, promo bands).
+- Mobile-first: stack blocks in one column; scale to 2/3/4 columns at breakpoints while maintaining consistent gutters and container widths.
+- Keep blocks modular: each block is a MedusaJS component with a simple, predictable prop shape.
+- Drive rendering from a **JSON config**: a `blocks` array declares the page; each item has a `type` (e.g., `hero`, `features`, `categories`, `collection`, `promo`, `story`, `testimonials`) and optional `media`, `content`, `actions`, and `layout` fields.
+
 ## Core Sections (Blocks)
 Each block uses a simple “media + content + actions” pattern and can be repeated.