Hex Throne

hex-throne-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Hex Throne is a pixel-art tactics game client — a full-screen campaign cockpit dressed in deep "shadow" charcoals (#0d0d0c page, #101010 rails, #161614 cards) with a warm bone foreground (#E3DAC9). Three faction voltages drive the whole interface: ember orange #E25822 (the primary accent — your turn, CTAs, action points), moss green #4F7942 (health, healing), and sea blue #2072AF (voice activity, movement, your own chat bubbles). The signature moves are unapologetically retro: terrain tiles are painted with layered dithered gradients and image-rendering: pixelated, a CRT scanline overlay sits on the board, faction buttons are chunky 3D inset-bevel slabs that physically squish on press, and player units are tiny hand-built pixel SVG sprites. The type story pairs VT323, a blocky bitmap display face used for every name and number, with Inter for readable UI body and JetBrains Mono for uppercase micro-tags. Geometry is near-brutalist — radii top out at 6px, most corners are perfectly square, and even the rounded avatars feel pixel-snapped. The one dramatic inversion is the rulebook modal: it flips to a parchment surface (#E3DAC9 ground, #1B1B1B ink) like an in-world manual page.

Colors

Brand / Faction voltages. ember #E25822 is the dominant accent — turn indicators, the primary btn-ember CTA, action-point pips, "EMBER PHASE" labels, and the active timeline node. moss #4F7942 carries health pips, the heal action, and positive HP deltas. sea #2072AF signals voice/active state (the glow-sea ring), the move action, and the player's own chat bubble. Supporting ember tones include ember-deep #8a3416 (tile/sprite shadow) and ember-glow #ffae5e (gradient shine, progress fill).

Surface (the shadow stack). A tight ladder of charcoals: page #0d0d0c (app bg), board-bg #0a0a09 (board frame), topbar #111110, rail #101010 (both sidebars), card #161614 (chrome-card), input #1b1b1a, inset #1a1a18 (wells, progress track, kbd), and spent #2a2a26 (dimmed pips, timeline dots, scrollbar). The rulebook inverts to parchment #E3DAC9 / parchment-dim #d6cab3.

Text. bone #E3DAC9 is primary foreground and all VT323 headings; bone-dim #a39e90 is secondary body; muted #7a7468 is tertiary tags and captions. On parchment: ink #1B1B1B, ink-soft #2a2a26, and parchment-label #7a6a4a.

Hairlines. Dividers and card borders are translucent bone: hairline rgba(227,218,201,.08); the dock uses a slightly brighter hairline-12 rgba(227,218,201,.12). Many bevels also use pure-black rgba(0,0,0,.35) insets.

Gradient / Glow. Faction buttons use vertical two-stop gradients (ember-grad, moss-grad, sea-grad). Status glows are colored box-shadows (glow-sea, ember turn markers). The board background is a faint radial wash of ember + sea over near-black.

Typography

Three faces, all from Google Fonts. VT323 is the bitmap display face — a single-weight monospace pixel font used for every name, stat number, and headline, with letter-spacing:.02em. It scales from ~14px in lists up to 42px in the rulebook title. Inter (300–700) is the clean UI body. JetBrains Mono (400/500) serves the .tag micro-label style (10px, letter-spacing:.08em, uppercase) and the .mono timecodes. If VT323 is unavailable, substitute another bitmap face such as "Silkscreen" or "Pixelify Sans".

Layout

Base unit is 4px (Tailwind scale). The page is a fixed cockpit: a 48px top bar over a three-column CSS grid 300px 1fr 340px filling calc(100vh - 48px). Left rail — chat/voice/table tabs, a compact voice roster, a scrolling chat log, and an input row. Center — a board-wrap holding a 12×8 board-grid (2px gaps, aspect-ratio:1 tiles) inside a framed, scanlined container with decorative pixel corner brackets, plus absolutely positioned overlays (turn banner top-center, coordinate chip top-left, minimap top-right, legend below). Right rail — active-player banner, HP/shard/gold and action-economy pips, a vertical initiative timeline, and a selected-unit card with action grid and tile-effect note. A floating 640px replay dock is fixed bottom-center, and a full-screen rulebook modal overlays everything. Whitespace is dense and information-rich, befitting a game HUD.

Elevation & Depth

Depth is built from inset pixel bevels, not soft shadows. Tiles, pips, and buttons all use paired inset shadows — a light top edge inset 0 1px 0 rgba(255,255,255,.x) and a dark bottom edge inset 0 -2px/-3px 0 rgba(0,0,0,.x) — to read as raised pixel blocks. Buttons add a hard offset drop 0 2px 0 <dark> that collapses on :active (the slab "presses down"). The board floats on a big soft shadow 0 30px 80px rgba(0,0,0,.6) plus a bone halo. The dock is the one glass element: rgba(22,22,20,.92) + backdrop-filter: blur(10px). Glows are colored box-shadows — glow-sea (active speaker), ember turn nodes, status dots.

Shapes

Aggressively hard-edged. The radius scale is none (0), sm (3px, rounded-sm cards, buttons, kbd, scrollbar), md (6px, only the dock), and full (9999px, avatars, status dots, timeline dots, progress bar/handle). Everything structural — tiles, pips, panels, banners, the rulebook — is square or barely-softened, reinforcing the pixel-grid aesthetic.

Components

• buttonPrimary (btn-ember) — ember vertical gradient, white VT323/tag text, 3px radius, 8px 12px pad, dark border #2a0e04, inset bevel + 0 2px 0 #5a1e08 drop. Labels: "END TURN", "ATTACK".
• buttonMoss / buttonSea — same slab construction in moss and sea gradients; "HEAL", "MOVE".
• chromeCard — #161614 (with faint top-light gradient), 1px bone-.08 border, 3px radius, 12px pad. Used for panels, secondary buttons ("SAVE", "SETTINGS", "GUARD"), info cards.
• tile — square dithered terrain (moss/sea/ember/stone/sand/fog variants), 1px black border, inset bevel, image-rendering: pixelated; carries pieces, move-dots, target-dots, sel-rings.
• dock — glass replay bar, 6px radius, blur(10px), deep drop shadow; holds transport buttons, a gradient progress track with colored turn markers and a bone handle, and a speed <select>.
• hpPip / apPip — small beveled squares (10px moss health, 14px ember action); dim variant #2a2a26.
• chatInput — #1b1b1a fill, bone-.1 border, sea focus border, 3px radius, 36px tall.
• bubbleMe / bubbleThem — chat bubbles: sea fill (you) vs #1f1f1d bordered (others).
• kbd — inset key cap #1a1a18, double-bottom border #2a2a26, mono 10px (/roll, SPACE, E).
• rulebookModal — palette-inverted parchment panel, split illustration/text, dark overlay + blur.

Motion

Driven by anime.js and GSAP (with Tailwind v4 browser build). Board tiles stagger in on load (fade + 12px rise, 500ms out(3), delay computed per row/column). Faction buttons squish to scale 0.94 on pointerdown and spring back (anime.js), reinforced by a CSS :active translateY(2px) bevel flatten. Continuous CSS loops: blink selection ring (1.4s steps), pulse target dot (1s), vol voice bars (1s, staggered). The rulebook fades in with a panel scale 0.92→1 (280ms). On entry, GSAP fades the dock up (y 24→0, delay 0.5s) and drops the header in.

Iconography

Mixed, fitting a game client. Tabler icons-webfont (<i class="ti ...">, outline, ~14–20px) for all UI affordances — help, mic, send, transport controls, refresh, shield, flame, info. game-icons (lorc sword-hilt, delapouite magic-potion) as white-filtered SVGs on action buttons. Inline pixel SVGs (shape-rendering: crispEdges) hand-draw unit sprites and the rulebook illustration. OpenMoji color SVGs supply the otter creature avatar. Default UI icon color is bone #E3DAC9, dimming to #7a7468 for idle states, tinting ember/sea/moss for status.

Do's and Don'ts

• Do keep every name and number in VT323 and every uppercase micro-label in JetBrains Mono.
• Do build depth from inset pixel bevels and hard offset shadows, not blur.
• Do reserve ember for "now/yours/action", moss for health/heal, sea for movement/voice.
• Do keep image-rendering: pixelated on tiles, sprites, and any scaled pixel art.
• Don't introduce large radii or soft floating cards — corners stay sharp (≤6px).
• Don't add full-color photographic surfaces to the dark UI; the only "warm" surface is the parchment rulebook.
• Don't let body text drift off the bone/bone-dim/muted ladder, or mix faction colors arbitrarily.

Known Gaps

• VT323 display sizes vary contextually (14px in rosters up to 42px rulebook title); the token records a representative 20px and notes the range.
• Terrain tile fills are layered dithered gradients (multiple linear/radial stacks); the spec names base colors and the technique rather than reproducing every gradient stop.
• Button gradient end-stops (#b53e12, #3a5d2f, #1a578a) and bevel shadow colors are read directly from CSS and recorded on the component, not promoted to standalone color tokens.
• Unit/illustration colors inside inline pixel SVGs reuse the faction/bone palette and are not separately tokenized.