Standard Section Design
1. Section Purpose
Every section should answer ONE question only.
Never mix two different purposes into one section.
2. Background
Choose only one background.
✔ base-2 (Most sections)
✔ base-3 (White)
✔ global-color-11 (Soft grey)
✔ badge / Dark section (CTA only)
Avoid using gradients except Hero or CTA.
3. Section Width
Container Width
1200px
Content Width
1100–1150px
Alignment
Center
4. Section Padding
Desktop
Top : 90px
Bottom : 90px
Left : 30px
Right : 30px
Tablet
Top : 70px
Bottom : 70px
Mobile
Top : 60px
Bottom : 60px
Never use random spacing.
5. Section Structure
Container
↓
Grid (2 Columns)
↓
Left Container
↓
Right Container
↓
Cards / Buttons / Lists
Always build from outside to inside.
6. Grid Layout
Image Left
Content Right
Desktop
45% | 55%
or
5fr | 7fr
Image Right
55% | 45%
Never use 50/50 unless both sides contain equal content.
7. Mobile Order
Desktop
Image
↓
Content
Mobile
Content
↓
Image
GenerateBlocks
Desktop
Order = Default
Mobile
Content Order = 1
Image Order = 2
8. Image Settings
Illustration Width
380–520px
Maximum Width
100%
Height
Auto
Alignment
Center
Never stretch image.
Never use fixed height.
Transparent background only.
9. Section Heading
Width
650–700px maximum
Alignment
Left (inside section)
Center (if full width)
H2
42px
Weight
700
Line Height
1.2
Color
contrast
10. Description
Maximum Width
550px
Font
18px
Line Height
1.7
Color
contrast-3
11. Feature List
Gap
18–22px
Icon Size
22–26px
Icon Color
accent
Text
16px
Weight
500
12. Cards
Padding
26–30px
Radius
16px
Background
base-3
Border
1px global-color-12
Gap
20px
13. Card Hover
Move Up
-6px
Shadow
0 18px 45px rgba(17,24,39,.08)
Border
accent
Transition
0.35s
Do not use large shadows.
14. Buttons
Primary
accent
Hover
accent-2
Height
48–52px
Radius
8px
Padding
16 × 28
Gap Between Buttons
16px
15. Statistics Cards
Equal Height
YES
Icon
Top Center
Number
Largest
Label
Below
Padding
22px
16. Alignment Checklist
✓ Heading aligned
✓ Description aligned
✓ Image centered
✓ Cards equal height
✓ Cards equal spacing
✓ Icons aligned
✓ Buttons aligned
✓ Section centered
✓ No empty spaces
17. Responsive Checklist
Desktop
✔ Looks balanced
Tablet
✔ No overlapping
✔ Cards wrap properly
Mobile
✔ Content first
✔ Image second
✔ Buttons full width if needed
✔ Cards single column
✔ Proper padding
18. Professional Box Effects
Normal State
Background
base-3
Border
1px solid global-color-12
Radius
16px
Shadow
0 6px 18px rgba(15,23,42,.05)
Hover
Border
accent
Shadow
0 18px 45px rgba(17,24,39,.10)
Transform
translateY(-6px)
Transition
0.35s ease
19. Before Publishing Checklist
□ Section purpose is clear
□ Background matches previous section
□ Heading size consistent
□ Padding is correct
□ Grid aligned
□ Images centered
□ Cards equal height
□ Buttons aligned
□ Mobile order checked
□ Tablet checked
□ Desktop checked
□ SEO heading structure verified
□ Final visual balance approved
If every checkbox is complete, the section is ready to publish.
