Skip to content

Brand

Brand kit

The mark, the wordmark, the hook, the loader, the colours, the type and the icons. Every piece here is drawn by the same code the app draws it with.

Mark

Hookr mark

SVG
  • 16 px
  • 24 px
  • 32 px
  • 48 px
  • 96 px

Source: src/components/brand/LogoMark.tsx

Wordmark

Hookr wordmark

SVG

The 404 shows the H and builds HOOKR once on arrival; the button below plays the same flight.

Source: src/components/brand/CubeWordmark.tsx

Mark

Hook mark

SVG
  • 16 px
  • 22 px
  • 32 px
  • 64 px

It takes the colour of the text around it, so it follows the accent.

Source: src/components/brand/HookMark.tsx

Motion

Loader

Reading the poolReading the pool

The cubes fly in and settle into the hook, then fly out. With reduced motion the hook stays drawn and still.

Source: src/components/brand/HookLoader.tsx

Tokens

Colours

Each swatch paints its token, and the value is the one this screen is showing.

Cube palette

The three tones every brand cube is drawn in: front, lit top, shadowed side.

  • --cube-front
  • --cube-top
  • --cube-side

Accent

One accent for actions, selection and focus. Accent text takes the ink.

  • --accent
  • --accent-hover
  • --accent-wash
  • --accent-ink
  • --on-accent

Ground and text

The ground and its surfaces, the hairlines, and the greys of text.

  • --bg
  • --surface
  • --surface-raised
  • --well
  • --border
  • --border-strong
  • --text
  • --text-muted
  • --text-faint
  • --tone

Tones

Fills and marks in the tone, washes behind notices, and the ink for tone text.

  • --good
  • --good-wash
  • --good-ink
  • --warn
  • --warn-wash
  • --warn-ink
  • --danger
  • --danger-wash
  • --danger-ink
  • --crown
  • --arb-side

Source: src/app/tokens.css

Tokens

Type

Geist, for every word

Geist Mono, for 1,234.5678 and 0.25%

  • Hook Blocks for every pool--text-titlePage titles
  • Hook Blocks for every pool--text-3xlLanding section heads
  • Hook Blocks for every pool--text-2xlLanding section heads on a phone
  • Hook Blocks for every pool--text-xlFeature card titles
  • Hook Blocks for every pool--text-lgLanding card titles
  • Hook Blocks for every pool--text-baseSection heads
  • Hook Blocks for every pool--text-mdBody
  • Hook Blocks for every pool--text-smDense UI and tables
  • Hook Blocks for every pool--text-xsLabels and eyebrows, the floor

Source: src/app/tokens.css

Icons

Interface

A 24 grid, one 1.5 px round line in the current colour, at every size.

  • external
  • arrow
  • arrow-left
  • arrow-up
  • arrow-down
  • trend-up
  • trend-down
  • sort
  • chevron
  • chevron-down
  • chevron-left
  • swap
  • share
  • search
  • copy
  • refresh
  • close
  • plus
  • minus
  • code
  • check
  • dot
  • info
  • alert
  • warning
  • star
  • star-filled
  • lock
  • clock
  • wallet
  • wallet-connected
  • globe
  • flame
  • droplet
  • pool
  • list
  • gauge
  • activity
  • fork
  • bookmark
  • document
  • notes
  • rocket
  • bank
  • surge
  • tax-route
  • bars
  • plug
  • shield
  • percent
  • person
  • people
  • browse
  • blocks
  • catalog
  • scan
  • analyze
  • book
  • robot
  • coin
  • coin-new
  • coin-join
  • more
  • gavel
  • sliders
  • check-circle
  • chart
  • basket
  • layers
  • wheel
  • sparkle
  • inbound
  • terminal
  • square
  • x
  • pause
  • play

Source: src/components/hookrscan/ScanIcons.tsx

Icons

Hook Blocks

One glyph per block, in the block's own colour, the only place that colour is used.

  • Anti-Snipe
  • Dynamic fees
  • Auto Burn
  • LP Rewards
  • Nth-buy Pot
  • Tax + Conversion
  • Arb recaptureby What The Hook
  • Buy/Sell Block
  • Market Guard
  • Zap Relay source
  • Zap Relay target
  • Swap Reward Mint
  • Pay Later

Source: src/components/HookArt.tsx

Icons

HookrScan mechanics

What a hook does, one drawing per mechanic, in the interface line.

  • dynamic-fees
  • trade-guards
  • swap-deltas
  • liquidity-controls
  • burns
  • lp-rewards
  • scheduled-payouts
  • conditional-payouts
  • randomness
  • maturity
  • rewards
  • custom-hook-data
  • revenue-routing
  • eligibility
  • pool-state
  • arbitrage
  • signatures
  • settlement
  • pausing
  • custom-math
  • token-custody
  • external-liquidity
  • external-dependencies
  • autonomous-updates
  • cross-chain

Source: src/components/hookrscan/ScanIcons.tsx

Files

Brand files

  • Hookr markThe cube H on a clear 512 px square. Use it where the mark stands alone./brand/hookr-mark.svg
  • Hookr wordmarkHOOKR in the same cubes, on a clear ground. Use it where the name is drawn./brand/hookr-wordmark.svg
  • Hook markThe hooked leg of the H in the cube magenta. Use it for hooks, at icon size./brand/hookr-hook.svg
  • FaviconThe mark on its dark tile, as the browser tab shows it./icon.svg
  • App icon, 512 pxThe home-screen icon, raster./icon-512.png
  • App icon, 192 pxThe small home-screen icon, raster./icon-192.png
  • Apple touch iconThe icon iOS saves to the home screen./apple-icon.png
  • $HOOKR token logoThe token's own logo, as wallets and pool pages show it./logo.svg

Source: src/components/brand/assets.ts