← Coda Blocks home
BRAND IDENTITY & UI KIT · FORGED VOXEL · V1
01

Logotype

Heavy condensed caps, skewed 4° for speed, with a chamfered 3D extrusion — machined metal for CODA, lit volt for STRIKE. The signature detail: the I of STRIKE is the energy bolt, running the full volt→ember→magenta heat ramp. A specular sweep crosses the face once every ~6 seconds. Magenta underglow pools beneath.

PRIMARY · FULL COLOR ON OBSIDIAN
MONO · ONE COLOR, NO FX
SMALL LOCKUP · MIN 20PX CAP HEIGHT
DROP THE UNDERGLOW BELOW 32PX
½ CAP
CLEAR SPACE · ½ CAP HEIGHT ALL SIDES
NOTHING ENTERS THE DASHED ZONE
02

Mark / Icon

The emblem: a chamfered cube pierced by the bolt-blade at 45°. The cube is the Coda block, machined from the metal ramp; the bolt carries the strike energy through it. Use as favicon, app icon, and the footer signature. Survives to 24px.

96
48
24 · FLAT FILLS, FATTER BOLT
03

Color System

Deep charcoal-navy world; volt is the single hero energy and is always lit. Magenta and cyan are the two dueling identities — never decoration, always allegiance.

Obsidian
#0B0C16
GROUND · THE WORLD ITSELF
Gunmetal
#14162A / #1C1F3B
PANELS · PLATES · CARDS
Volt
#FFD01F
HERO · SCARCE · ALWAYS GLOWING
Ember
#FF9D1F
HEAT RAMP · DAMAGE · LAVA
Striker Magenta
#FF3D8A
YOU · ALERTS · UNDERGLOW
Arc Cyan
#35E0FF
OPPONENT · INFO · FROST
Signal Lime
#7CFF4F
SUCCESS · UNLOCKED · HEALTH
Metal Ramp
#4A4E68 → #B7BECD
MACHINED EDGES · SPECULARS
OBSIDIAN 58
GUNMETAL 24
METAL 8
VOLT 5
2.5
2.5
Volt is scarce, and always litNever place flat volt: every volt surface carries a specular gradient and an outer glow. One volt hero element per view.
Magenta = youStriker Magenta marks the player's energy, alerts, and the logotype underglow. Never used for opponent state.
Cyan = the other sideArc Cyan is the opponent and neutral info. Magenta vs cyan only meet across a VS divide.
04

Type System

System stacks only — no webfonts. Display is weight 900, condensed (font-stretch, scaleX where needed), tight tracking, skewed 4° for velocity. Labels are wide-tracked small caps. Numerals are tabular so scores never jitter.

DISPLAY
900 · cond · skew 4°
clamp 42–76px
DUEL AT DAWN
H1 · 900 · 34px
CHOOSE YOUR FIGHTER
H2 · 900 · 22px
MATCH SETTINGS
LABEL · 900 · 12px
tracking +34%
BLOCKY ARENA FPS · 1V1 DUELS
NUMERIC · 800
tabular-nums
10 — 04   137,208 XP
BODY · 400–600 · 14px
Body copy is quiet and unskewed. It never competes with the forged display layer above it.
05

Components

Every control is a forged plate: chamfered corners (12px cut), a 2px inner bevel highlight, dark under-bevel, hard drop edge, soft cast shadow. Hover lifts and lights the underglow; pressed sinks into the socket. All demos below are live.

BUTTONS · PRIMARY / SECONDARY / DUELING / GHOST
MAP CARD · 16:9 KEYART + NAMEPLATE · CLICK TO SELECT
PROGRESS · ANGLED VOLT STRIPES   /   STAT CHIPS
VETERAN BRONZE7 / 10
CENTURY42 / 100
DEADEYEDONE
WINS 23 K/D 2.41 STREAK 7
VS DIVIDER · DUELING ENERGIES MEET ONLY HERE
VS
06

Motion Rules

  • Transforms: 150–250ms, ease-out. Lifts, sinks and card selection use cubic-bezier(.2,.9,.3,1.2) — a machined snap, never a bounce fest.
  • Glow pulses ≤ 2s, sine. Underglows and selected-state halos breathe on a 2-second ease-in-out loop at low amplitude. Nothing strobes.
  • One hero sweep. The logotype specular sweep fires once every ~6s. It is the only looping highlight on screen; buttons sweep only on hover.
  • Pressed is physical. Active states translate down 3–4px and shorten the drop edge — the plate sinks into its socket.
  • Respect prefers-reduced-motion. All loops and transitions collapse to instant states. This page already does.
  • Nothing animates off-screen. Menu backdrops pause the moment the menu hides.