Blocks, called to life.
One orange, black, white and greys. A mark that rests exact and moves loose. Mono labels, hairline panels.
A0 / Assets
Every file the product ships, at a glance. Click one to open it.
Mark, moving/brand/hark-mark.svg
Mark, at rest/brand/hark-mark-still.svg
Wordmark on dark/brand/hark-wordmark.svg
Wordmark on light/brand/hark-wordmark-on-light.svg
Favicon/icons/favicon.svg
Favicon, 32 px/icons/favicon-32.png
Apple touch icon/icons/apple-touch-icon.png
App icon 192/icons/icon-192.png
App icon 512/icons/icon-512.png
Maskable icon/icons/maskable-512.png
Social card/brand/hark-social.png
Sign-in astronaut/brand/astronaut-peek.webp
Field art/brand/hark-field.jpg
Cloudflare cloud/brand/cloudflare-cloud.svg
Cloudflare logo on dark/brand/cloudflare-logo.svg
Cloudflare logo on light/brand/cloudflare-logo-on-light.svg
01 / Principles
Four rules. If a new screen breaks one, change the screen.
Voice first, screen second
The ear is the product. Anything else on screen must show what words cannot carry.
One orange thing
Each screen gets one signal orange action. Orange means: do this now.
Gallery, not dashboard
Objects sit in numbered tiles with room around them. Panels are flat and hairline.
Say the real number
Latency and state are shown as measured, in mono. Never as adjectives.
02 / Mark
Eight blocks. Seven grey, one orange. At rest the orange block waits over its slot. When you call hark the blocks flow apart, listen, melt, roll and stack to speak, then pour back. In motion it may be loose and imperfect. At rest it is exact.
Exact. Favicon, app icon, anything 32 px or less, and reduced motion.
Rest, listen, melt, wave, speak, rest. 11 s, pure SVG.
- G1 · Summon
- G1 · Liquid
03 / Color
One orange, then black, white and greys. The orange is darker in light mode so white text on it still passes AA.
- Signal
signaldark #ff5200 · light #d93d00
Actions, the live dot, the ear. Nothing else.
- Ink
inkdark #0b0b0b · light #ffffff
The page.
- Layer
layerdark #151515 · light #f4f4f4
Tiles and panels.
- Text
textdark #f2f2f2 · light #111111
Headings and body.
- Muted
muteddark #9a9a9a · light #6b6b6b
Labels, captions, machine state.
04 / Type
Four packs on the same five lines. Pick one. The arrows and the dots switch packs, no script.
05 / Parts
Numbered tiles from the gallery. Flat rows with a hairline leader and a quiet notice with plain actions from good tools.
- Listeningyes
- Timers2
- Memories14
- Asleep in2 min
The thinking model returned a 5xx twice. This turn used the fallback brain.
bun run ship -- deploy/mine.conf
06 / Motion
The ember swarm is the one big motion on a screen. It looks the same in both themes. Everything else is quiet.
The swarm leads
Thousands of embers, additive glow on night. Shapes form, hold and fall back to the ear.
Panels arrive
Tiles fade and lift 6 px over about 300 ms. No bounces, no springs.
The live dot breathes
One orange dot pulses while hark is awake. It is the only looping UI motion.
Reduced motion means still
With reduced motion on, the swarm does not start and nothing loops.
07 / Voice
Short sentences. Active voice. Plain words. Say what it does and the number it did it in.
| Tap the ear and talk. | Unlock frictionless conversational AI. |
| It runs on your own Cloudflare account. | Enterprise-grade, privacy-first infrastructure. |
| First audio in 1,269 ms, live on Workers AI. | Blazing fast. |
| It asks before it changes anything. | Safe and secure by design. |