```
---
## 6. DESIGN SYSTEM — PANDUAN DESAIN
### 6.1 Prinsip Desain Template Ini
- **Clean & readable** — konten adalah raja, UI tidak boleh mengalihkan perhatian
- **Editorial feel** — terasa seperti majalah/publikasi profesional, bukan blog biasa
- **Performa tinggi** — tidak ada library besar, CSS ringan, lazy load gambar
- **Customizable** — warna utama dan font bisa diubah via Blogger Theme Designer
- **Mobile-first** — desain dimulai dari mobile, bukan di-shrink dari desktop
### 6.2 Typography System
```scss
// Heading menggunakan font serif untuk editorial feel
h1, h2, h3 {
font-family: var(--font-family-serif);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-text);
}
// Body text pakai sans-serif untuk readability
body {
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-text);
}
// Ukuran heading
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }
```
### 6.3 Post Card Anatomy (Komponen Kritis)
Setiap post card HARUS mengandung elemen ini (berurutan dari atas):
1. **Thumbnail** — aspect-ratio 16/9, object-fit cover, lazy loading
2. **Category/Label** — pill kecil di atas judul
3. **Judul** — clickable, max 2 baris (line-clamp: 2)
4. **Excerpt** — max 3 baris (line-clamp: 3)
5. **Meta** — author + tanggal + reading time (jika ada)
```scss
.post-card {
background: var(--color-surface);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-normal),
transform var(--transition-normal);
&:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
&__thumbnail {
aspect-ratio: 16 / 9;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
&:hover img {
transform: scale(1.04);
}
}
&__body {
padding: var(--space-5) var(--space-6);
}
&__label {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-3);
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
text-decoration: none;
margin-bottom: var(--space-3);
}
&__title {
font-size: var(--font-size-xl);
font-family: var(--font-family-serif);
line-height: var(--line-height-snug);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: var(--space-3);
a {
color: var(--color-text);
text-decoration: none;
&:hover { color: var(--color-primary); }
}
}
&__excerpt {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
line-height: var(--line-height-relaxed);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: var(--space-4);
}
&__meta {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
}
```
### 6.4 Komponen Wajib untuk Template Distribusi
Urutan prioritas pengerjaan:
1. ☐ **Head** (meta tags SEO, Open Graph, Google Fonts link)
2. ☐ **Header** (logo + nav + search + dark mode toggle)
3. ☐ **Hero/Featured Post** (post terbaru, full-width, eye-catching)
4. ☐ **Post Grid** (grid responsif 1→2→3 kolom)
5. ☐ **Post Card** (lihat anatomi di atas)
6. ☐ **Single Post Page** (typography, related posts, share buttons)
7. ☐ **Sidebar** (about widget, popular posts, labels, ads slot)
8. ☐ **Pagination** (prev/next + numbered)
9. ☐ **Footer** (links, copyright, back to top)
10. ☐ **404 Page**
11. ☐ **Search Results Page**
---
## 7. SEO & PERFORMA (WAJIB)
### 7.1 Meta Tags di ``
```xml
<data:post.title/> - <data:blog.title/>
<data:blog.title/>
```
### 7.2 Image Lazy Loading
```xml
{# Selalu pakai loading='lazy' dan aspect ratio yang jelas #}
```
### 7.3 Structured Data (JSON-LD)
```xml
```
---
## 8. DARK MODE IMPLEMENTATION
### 8.1 Pendekatan: CSS Custom Properties + `data-theme` attribute
```scss
// Semua warna via custom properties (sudah di _tokens.scss)
// Dark mode: dua cara — auto (system) + manual toggle
// Auto via prefers-color-scheme
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #1a1a1a;
// dst...
}
}
// Manual via data-theme attribute
[data-theme="dark"] {
--color-bg: #1a1a1a;
// dst...
}
[data-theme="light"] {
--color-bg: #ffffff;
// dst...
}
```
```javascript
// Dark mode toggle
//
```
---
## 9. ATURAN UNTUK AI — CHECKLIST SEBELUM GENERATE
Sebelum AI generate kode apapun untuk project ini, pastikan:
### Blogger XML
- [ ] Semua attribute dinamis pakai `expr:` prefix
- [ ] Conditional pakai `
`, ``, ``, ``
*(Note: `` bukan `
`)*
- [ ] Loop pakai ``
- [ ] JavaScript selalu dibungkus ``
- [ ] CSS di `` selalu dibungkus `` di ``
### Bloggerpack
- [ ] Pakai `{% template %}` bukan `{% include %}`
- [ ] Setiap file punya `` wrapper
- [ ] Asset inline pakai `{% asset %}` wrapper
- [ ] Data dari `theme-config.json` diakses via `{{ data.keyName }}`
### CSS
- [ ] Semua nilai warna pakai `var(--color-*)` — tidak ada hardcoded hex
- [ ] Semua nilai spacing pakai `var(--space-*)` — tidak ada hardcoded px arbitrary
- [ ] Font size pakai `var(--font-size-*)` — tidak ada hardcoded rem/px
- [ ] Responsive pakai CSS Grid dengan `auto-fill`/`auto-fit` dulu sebelum media query
- [ ] Gambar selalu punya `loading='lazy'` dan `aspect-ratio`
- [ ] Dark mode bekerja via `[data-theme]` attribute
### Design Quality
- [ ] Post card punya thumbnail, label, title (max 2 baris), excerpt (max 3 baris), meta
- [ ] Hover states smooth dengan `transition` pada semua elemen interaktif
- [ ] Typography hierarchy jelas: serif untuk heading, sans untuk body
- [ ] Mobile-first: komponen bekerja di lebar 320px
- [ ] Warna accessible: contrast ratio ≥ 4.5:1 untuk teks normal
---
## 10. COMMON MISTAKES — JANGAN DILAKUKAN
```xml
judul
link
link
{% include "components/header.xml" %}
{% template "src/template/components/header.xml" %}
.btn { background: #1a73e8; }
.btn { background: var(--color-primary); }
![]()
```
---
## 11. PREMIUM vs FREE — FITUR BREAKDOWN
| Fitur | Free | Premium |
|-------|------|---------|
| Responsive layout | ✅ | ✅ |
| Dark mode | ✅ | ✅ |
| Basic SEO meta tags | ✅ | ✅ |
| 1 color scheme | ✅ | ✅ (10+ scheme) |
| Post grid layout | ✅ | ✅ |
| Magazine layout | ❌ | ✅ |
| Custom widgets (popular posts, related) | ❌ | ✅ |
| Mega menu | ❌ | ✅ |
| Ads placement (ready slot) | Basic | Advanced |
| Footer credit removal | ❌ | ✅ |
| Custom CSS via Theme Designer | Basic | Full |
| Priority support | ❌ | ✅ |
| Future updates | Limited | ✅ |
---
*File ini digunakan sebagai AI context untuk development Blogger template.
Update file ini setiap ada perubahan konvensi atau penambahan fitur.*