HA HARDIPA ASYIFA · CONTENT DESIGN SYSTEM
UI Components &
Typography.
Panduan visual untuk membuat artikel, project case study, dan halaman konten yang konsisten dengan tema Blogger Mint Dimension. Gunakan snippet di bawah melalui Blogger Post → HTML view.
Prinsip desain
Clean, readable, professional, mint-accented. Gunakan heading untuk hierarki, card/callout untuk menonjolkan informasi, dan tabel hanya ketika membandingkan data.
01 / Typography system
Theme menggunakan DM Sans untuk teks utama, Space Grotesk untuk heading, dan IBM Plex Mono untuk kode serta nilai teknis.
H1 · Article titleClear project outcomes.32–44 px
H2 · Main sectionProject overview26–33 px
H3 · SubsectionScope of work21–25 px
H4 · Minor sectionKey responsibilities18 px
BodyBody text for comfortable long-form reading.15–16 px
LeadA concise opening summary before the article body.18 px
CaptionImage caption · Source · Supporting detail12–13 px
Codefunction updateStatus() { ... }13 px
02 / Color palette
Mint 0
#F7FFFB
#F7FFFB
Mint 50
#ECFDF5
#ECFDF5
Mint 100
#D5F7E7
#D5F7E7
Mint 300
#82DFB8
#82DFB8
Mint 600
#159D70
#159D70
Forest
#123D31
#123D31
03 / Reusable UI components
Setiap contoh menampilkan preview dan HTML yang dapat disalin. Jangan tempel ulang tag <html>, <head>, atau <body> ke dalam posting; hanya tempel snippet komponennya.
Lead paragraph
A concise opening paragraph that explains the main point of this article.
<p class="ha-ui-lead">A concise opening paragraph that explains the main point of this article.</p>Section kicker
PROJECT OVERVIEW
<p class="ha-ui-kicker">PROJECT OVERVIEW</p>Badge / label
DOCUMENT CONTROL PROJECT SUPPORT
<span class="ha-ui-badge">DOCUMENT CONTROL</span> <span class="ha-ui-badge">PROJECT SUPPORT</span>Information callout
Key information
Use this box for a definition, context, or important note that supports the paragraph.
<div class="ha-ui-callout"><strong class="ha-ui-callout__title">Key information</strong><p>Use this box for a definition, context, or important note that supports the paragraph.</p></div>Success callout
Result
Summarise a confirmed outcome or completed milestone.
<div class="ha-ui-callout ha-ui-callout--success"><strong class="ha-ui-callout__title">Result</strong><p>Summarise a confirmed outcome or completed milestone.</p></div>Warning callout
Important note
Explain a limitation, dependency, or item that needs attention.
<div class="ha-ui-callout ha-ui-callout--warning"><strong class="ha-ui-callout__title">Important note</strong><p>Explain a limitation, dependency, or item that needs attention.</p></div>Two-column cards
Scope
Describe the project scope or content area.
Contribution
Describe the role, responsibility, or outcome.
<div class="ha-ui-card-grid">
<div class="ha-ui-card"><strong class="ha-ui-card__title">Scope</strong><p>Describe the project scope or content area.</p></div>
<div class="ha-ui-card"><strong class="ha-ui-card__title">Contribution</strong><p>Describe the role, responsibility, or outcome.</p></div>
</div>Action buttons
<a class="ha-ui-button ha-ui-button--primary" href="https://example.com">View document ↗</a> <a class="ha-ui-button" href="/p/contact.html">Contact</a>Data table
| Item | Description | Status |
|---|---|---|
| Document register | Revision and distribution records | Active |
| Project report | Weekly progress summary | Issued |
<div class="ha-ui-table-wrap">
<table class="ha-ui-table">
<thead><tr><th>Item</th><th>Description</th><th>Status</th></tr></thead>
<tbody><tr><td>Document register</td><td>Revision and distribution records</td><td>Active</td></tr><tr><td>Project report</td><td>Weekly progress summary</td><td>Issued</td></tr></tbody>
</table>
</div>Numbered process
- Prepare. Confirm inputs and requirements.
- Review. Check information and approvals.
- Issue. Distribute the approved output.
<ol class="ha-ui-steps">
<li><strong>Prepare.</strong> Confirm inputs and requirements.</li>
<li><strong>Review.</strong> Check information and approvals.</li>
<li><strong>Issue.</strong> Distribute the approved output.</li>
</ol>Checklist
- Verify the latest revision.
- Check document references.
- Record the transmittal.
<ul class="ha-ui-checklist">
<li>Verify the latest revision.</li>
<li>Check document references.</li>
<li>Record the transmittal.</li>
</ul>Quote
A clear statement or short quotation that supports the main discussion.Source or attribution
<blockquote class="ha-ui-quote">A clear statement or short quotation that supports the main discussion.<cite>Source or attribution</cite></blockquote>Code block
function example() {
return "Keep examples readable";
}<pre class="ha-ui-code"><code>function example() {
return "Keep examples readable";
}</code></pre>Image with caption
<figure>
<img src="PUBLIC_IMAGE_URL" alt="Describe what the image shows" loading="lazy"/>
<figcaption>Figure 1. Short description of the image and its relevance.</figcaption>
</figure>FAQ disclosure
What does this term mean?
Write a short and direct answer here.
<details class="ha-ui-faq"><summary>What does this term mean?</summary><div><p>Write a short and direct answer here.</p></div></details>Statistics
12Documents
04Work areas
100%Reviewed
<div class="ha-ui-stat-grid">
<div class="ha-ui-stat"><strong>12</strong><span>Documents</span></div>
<div class="ha-ui-stat"><strong>04</strong><span>Work areas</span></div>
<div class="ha-ui-stat"><strong>100%</strong><span>Reviewed</span></div>
</div>04 / Publishing workflow
Artikel biasa
- Isi judul posting dengan ringkas dan spesifik.
- Tambahkan Search Description yang merangkum isi artikel.
- Pilih Featured Image/thumbnail.
- Gunakan Labels sesuai topik, misalnya Document Control, Engineering, Technology.
- Tulis isi di Compose, lalu gunakan HTML view untuk memasukkan komponen visual.
- Gunakan H2 untuk bagian utama, H3 untuk subbagian, dan H4 jika diperlukan.
- Pratinjau tampilan desktop dan mobile sebelum publish.
Project case study
- Gunakan label wajib Projects agar muncul pada halaman Selected Work.
- Tambahkan label kategori tambahan, misalnya Construction, Electrical, Document Control, atau Digital Workflow.
- Isi project overview, scope, role/responsibilities, deliverables, dan outcomes yang dapat dipublikasikan.
- Jangan memasukkan data kontrak, gambar, atau informasi proyek yang bersifat rahasia.
- Gunakan thumbnail landscape yang konsisten dan caption pada gambar teknis.
Recommended article structure
Title → Opening / Lead → H2: Context → H2: Main discussion → H2: Practical example → H2: Key takeaways → References / sources (when applicable).
Recommended project structure
Project title → Project overview → Project information → Scope of work → Role and responsibilities → Deliverables / coordination → Outcome → Gallery.
Important HTML rules
- Gunakan satu H1 saja: judul posting Blogger sudah menjadi H1 tema.
- Mulai isi artikel dengan paragraf lead atau H2, bukan H1 kedua.
- Setiap gambar harus memiliki alt text yang menjelaskan isi gambar.
- Untuk tabel lebar, selalu bungkus dengan
ha-ui-table-wrap. - Hindari inline JavaScript dan CSS besar pada posting.
- Jangan menyalin seluruh CSS guide ke setiap artikel. CSS sudah dipasang pada theme v15.