Getting started
Every page should use the shared Haketi font setup, core color tokens, and a single primary action. Adapt the content to the project but preserve the component hierarchy.
<link rel="stylesheet" href="system-nav.css">
<script defer src="system-nav.js"></script>
Cards
Cards group comparable items: projects, resources, plans, testimonials, or features. Give each card one clear interaction target.
Use
Use cards in grids when items have equal importance and visitors need to scan or compare them.
Avoid
Do not put every paragraph in a card. Long stories and sequential processes should stay open on the page.
Hero sections
Choose a hero by the page’s job: product/service pages need a specific promise; campaigns can use stronger expression; conversion pages should be direct.
| PAGE GOAL | USE | AVOID |
|---|---|---|
| Service offer | Specific capability + outcome | Abstract visual with no service |
| Case study | Customer and measurable outcome | Generic brand claim |
| Waitlist | Centered conversion hero | Multiple competing CTAs |
FAQ & content
Use
Use FAQs for specific buyer objections and resource cards for self-guided learning paths.
Avoid
Do not hide essential selling information inside an accordion or use it instead of a clear page structure.
Forms
Use
Ask only for details required for the next conversation. Confirm completion on the page and state what happens next.
Avoid
Do not require a long project form for a newsletter, or offer a submit button that gives no visible confirmation.
Iconography
Haketi uses Phosphor Icons Regular for controls and utility actions. Use 20–24px in navigation and buttons; reserve tinted containers for feature icons.
Use
Use icon + text for unfamiliar actions and provide an accessible name for every icon-only button.
Avoid
Do not mix icon families or use decorative icons where a label, whitespace, or stronger hierarchy would solve the problem.