jamkit — brutal UI pack

design tokens

css variables power theming. change --jam-accent or call applyAccent('#3b82f6') from theme.js.

token	purpose
`--jam-accent`	primary brand color (buttons, active nav, badges)
`--jam-accent-border`	darker border on accent surfaces
`--jam-accent-rgb`	for translucent highlights (leaderboard row)
`--jam-bg`	page background
`--jam-raised`	cards, inputs, inactive buttons
`--jam-border`	3px brutal outlines
`--jam-shadow`	offset shadow color (not blur)
`--jam-muted`	secondary text

:root {
  --jam-accent: #a855f7;
  --jam-accent-border: #9333ea;
  --jam-accent-rgb: 168, 85, 247;
}
/* dark mode flips surfaces via html.dark { ... } */

typography

fredoka one, always lowercase. use .display-hero for landing headlines.

display hero

display large

display medium

muted body copy for descriptions and hints.

wobble

buttons

thick borders, hard offset shadows, press-in on hover. classes: .btn + variant.

<button class="btn btn-primary">primary</button>
<button class="btn btn-white">secondary</button>
<button class="btn btn-dark">dark</button>
<button class="btn btn-primary btn-play">big play button</button>

forms

inputs match boxes — same border weight and radius.

nickname bio

example field error — username already taken

<input class="input-field" type="text" placeholder="..." />
<textarea class="input-field"></textarea>
<p class="field-error">error message</p>

surfaces & cards

.box is the building block. stack content inside it.

plain box

default raised surface

set card click me

or me toggle selected

<div class="box" style="padding:1.25rem">...</div>
<div class="box set-card">clickable set</div>
<div class="box set-card set-card-selected">selected</div>

feedback

alerts for page-level messages. field-error sits under inputs.

something went wrong — try again.

saved successfully!

<div class="alert-error">...</div>
<div class="alert-success">...</div>

navigation

sidebar and tab patterns from jammit. active state uses accent.

<button class="nav-btn nav-btn-active">play</button>
<button class="nav-btn nav-btn-inactive nav-btn-badge">friends <span class="badge badge-corner">3</span></button>

toggles & checkboxes

pill toggles for settings. brutal checkboxes for forms.

✓ email notifications show on leaderboard

avatars & badges

initials on a colored square. border + shadow match the system.

dk

ja

jm

5 99+

<div class="avatar avatar-md" style="background:#3b82f6">ja</div>
<span class="badge">3</span>

game ui

trivia answer colors, timer, player rows, leaderboard — straight from jammit games.

answer buttons

timer

8

players & leaderboard

al

alex

sa

sam

#1

al

alex

1200

#2

sa

sam

980

modal

backdrop + box. confirm/cancel button row.

<div class="modal-backdrop">
  <div class="box modal-panel">
    <h2 class="display-md">delete game?</h2>
    <div class="page-divider" style="width:4rem;margin:1rem 0"></div>
    <p>all players will be removed.</p>
    <div class="flex gap-3 mt-6">
      <button class="btn btn-white flex-1">cancel</button>
      <button class="btn btn-primary flex-1">delete</button>
    </div>
  </div>
</div>

layout shell

you're inside it right now — .app-shell + sticky sidebar + .page-container.

<div class="app-shell">
  <aside class="app-sidebar">...nav...</aside>
  <main class="flex-1">
    <div class="page-container">...content...</div>
  </main>
</div>

drop the whole ui-kit/ folder on cloudflare pages, netlify, or github pages — no build step.

your jammit ui,any accent color