← Design Preview  /  Brand Guide
Haklo · Iconography System · v1.0
10 core concepts.
One visual language.
Warm, organic, hand-drawn quality. Letterpress aesthetic. Timeless not trendy. Works at 24px and 512px. Each icon is a visual metaphor for a Haklo concept — not a generic app icon.
Master Midjourney Prompt (append individual concept after “--”)
Minimal icon design, single concept, warm organic line art, hand-drawn quality, letterpress aesthetic, warm ivory background, deep walnut ink, clean negative space, works at 24px and 512px, no gradients, no shadows, no text, flat illustration style, consistent 2pt stroke weight throughout, rounded line caps, family warmth, timeless not trendy --ar 1:1 --style raw --v 6
Core Concepts
The Icon System
01
Gathering
Core · Tier 1
A round table seen from above with chairs arranged in a circle — waiting, not empty. The fundamental unit of family time.
The table circle becomes Haklo’s primary brand shape. It will recur as a container element throughout the design system.
02
Voice
Core · Tier 1
A single open hand with palm facing up — simple and dignified. One member’s contribution, an expression of presence.
Voice icons will be personalized per family member using color fills within the same base shape.
03
Mark
Core · Tier 1
A thumbprint impression — organic swirling lines suggesting uniqueness and presence. “I was here and this mattered.”
Needs filled (active) and outline (passive) variants. Simplify to 3 lines at very small sizes.
04
Thread
Core · Tier 1
A single thread that begins at the top, loops gently suggesting passage of time, and exits the frame — a topic that continues beyond the Gathering.
Animation-ready — a subtle loop in the app works beautifully here. Keep the static version simple enough to animate.
05
Commitment
Core · Tier 1–2
Two branches intertwining and knotting at center — something two things made together that now holds. A decision or agreement the family made.
Key action state — needs a strong filled/active variant. The intertwining moment should be the visual center.
06
Echo
Core · Tier 1
Three concentric ripple rings on still water, slightly irregular — something was said and still moves. A moment worth preserving.
The ripple center point can hold a small dot or glyph in marketing uses. Completion animation candidate.
07
Pulse
Core · Tier 1
A single heartbeat waveform — one clean beat, organic and slightly imperfect. The emotional register of a Gathering. Alive and warm, not clinical.
Five states: light / neutral / heavy / celebratory / tense — same shape with different amplitude and color fill. Build base once, variant it.
08
Grain
Culture · Tier 3
Cross-section of a tree trunk showing growth rings — 4–5 rings, organic and slightly irregular. The pattern forming across time, never entered only observed.
Tier 3 concept — slightly more premium feel. May warrant heavier line weight or warmer color. Visual pair with Roots.
09
Roots
Culture · Tier 3
Tree roots spreading outward and downward — anchoring and foundational. The mirror of Grain. One looks up at growth, one looks down at foundation.
Grain and Roots are a natural diptych. Present together in marketing. The cross-section and root system tell the same story from above and below.
10
Listeners
System · Developer
A stylized ear or seashell curve — gentle reception, quiet attentiveness. Background workers that process a Gathering after it closes.
Primarily a developer/backend concept. The seashell variant works better for public-facing uses. Needs an icon for the dashboard and documentation.
Production Notes
Surface Guidance
Mobile App
SVG → PNG @1x, 2x, 3x. Sizes: 24px (tab bar), 32px (list), 48px (feature). Outline only at small sizes; filled for active states.
Web / Marketing
SVG inline or React components. 48px (features grid), 80px (hero), 120px+ (landing). Color fills and texture OK at larger sizes.
Social
PNG @4x min. Grain + Roots as diptych. Gathering as hero. Echo for launch announcement. 1080×1080 Instagram, 1200×630 OG.
File Naming
icon-gathering-outline-24.svg
icon-echo-filled-48.svg
icon-commitment-filled-32.svg