DOM ENGINEV0.21.3FIZLET
Start

BRAND · MARKS · COLOUR · THE BOARD

Fizlet™ marks.
Used one way.

Fizlet™ is the micro animation and game engine for the DOM, by Chris Cooley ↗. Its short mark is fzlt™, also its npm scope. Every mark on this page is drawn live from the site's own tokens, and every one downloads as an SVG made from the same source.

Fizlet and fzlt are trademarks of Chris Cooley.

01 THE MARKS

One name.
Two marks.

Six letters and four, owned equally, each with the mark. FIZLET is the large logo: heavy caps, the mark's frame closed by the F. fzlt is the small logo: the mark's pixels and fzlt, always lowercase; the developer and npm mark, never a name in prose. Both in --ink, the pop in --k-attack on either ground.

  • FIZLET logo

    The mark in its square frame; the frame's right side is the F's stem. Six heavy caps, drawn as outlines so they hold in any font. Titles, the hero, covers.

    AT MINIMUM · 24PX CAP HEIGHT
    ON DARK · 322 × 88 Dark SVG of the FIZLET logo
    AT MINIMUM · 24PX CAP HEIGHT
    ON LIGHT · 322 × 88 Light SVG of the FIZLET logo

  • fzlt logo

    The mark's pixels without the frame, the pop above, then fzlt in bold lowercase. npm, code, badges, stickers and tight spaces.

    AT MINIMUM · 24PX TALL
    ON DARK · 176 × 96 Dark SVG of the fzlt logo
    AT MINIMUM · 24PX TALL
    ON LIGHT · 176 × 96 Light SVG of the fzlt logo

The mark and the header lockup

The mark: pixel squares fizzing up a square frame, one popping. Frame and squares in --ink, the pop in --k-attack, on no tile: the logos' mark, 40px in the header, 34px at 380px and under. The version is a sticker, the site's sticker recipe in --k-sys. The header, the footer and fzlt.dev draw this one lockup. The favicon is the same mark: icon.svg.

DOM ENGINEV0.21.3FIZLET
DOM ENGINEV0.21.3FIZLET

02 WHY FZLT

Four letters.
No vowels.

Why fzlt. We picked fzlt on purpose, as Fizlet's developer and npm mark, so nobody mixes it up with anything else. It reads well as npm i fzlt. It has no vowels, so it is not a real word and not a misspelling of one. It has a “z”, one of the least-used letters in English. It won't autocorrect into anything, and nobody types it by accident. It is unique by design and it matches the brand: the @fzlt npm scope, github.com/fizlet ↗, Fizlet™ / fzlt™, and fzlt.dev and fzlt.app (planned redirects to fizlet.com). Today the install line is npm i @fzlt/core; plain fzlt is requested from npm, not ours yet, and the alias npm i fzlt@npm:@fzlt/core works now.

03 TWO VOICES

Fizlet tells it.
fzlt runs it.

Fizlet

The brand: the name people remember. Confident, plain, arcade swagger. Headlines, pages, posts, the README title. It says the why, the mechanism, the proof.

  • README TITLE

    Fizlet™

  • HEADLINE

    Tiny physics for your page.

  • HEADLINE

    Recall gives the page back.

  • STICKER
    RECALLRESTORED

fzlt

The developer and npm mark. Short, dev-first, lowercase, code-shaped. npm, badges, CLI output, code comments, stickers. It says the what: the command, the brick, the number.

  • NPM DESCRIPTION
    fzlt™: Fizlet's micro animation and game engine for the DOM, by Chris Cooley. One loop, bounded everything, the page always comes back.
  • README BADGE LINE
    npm i @fzlt/core · kernel 3,372 B gzip · 0 runtime deps · MIT
  • SNIPPET COMMENT
    // fzlt/fx: sparks from the event ring. destroy() gives the page back.
  • STICKERS
    fzltRESTORED
    @fzlt/coreREADY

fzlt stays lowercase, even on a sticker; keep it out of kit labels that force capitals. The kernel size is measured on this build.

04 STICKER SET

Stick it on.
Both marks.

Fizlet™ and fzlt™ in the kit's two sticker styles: the overlay sticker and the sticker key. Each is live below and downloads as an SVG made from the same list.

05 LOCKUPS

Side by side.
Never squeezed.

The header lockup above, and three more. Only these; ™ never goes on code or a domain.

06 ™ AND CASING

Say it right.
Spell it right.

  • Fizlet™ and fzlt™ carry ™ on the first prominent use on a surface: the hero, the footer, the README title, the npm description. Plain after that.
  • No ®. Nothing is registered.
  • The note: “Fizlet and fzlt are trademarks of Chris Cooley.”
  • Fizlet in prose and titles.
  • FIZLET as the wordmark only.
  • fizlet in URLs and code: fizlet.com.
  • fzlt always lowercase: the short mark and @fzlt/core.
  • Never FizLet.

07 CLEAR SPACE · MINIMUM SIZE

Give it room.
Keep it legible.

XXXX
X is the width of the mark's outlined square: 26 of the mark's 64 units, about 0.4 × the logo's cap height. The same X goes round the fzlt logo. Nothing enters it: no text, key edge or grid line. The downloads carry it.

  • Logos: FIZLET at a 24px cap height, fzlt at 24px tall: the pop's smallest pixel stays about 1px.

  • FIZLET

    Header wordmark: 16px, the smallest it ships (the header at 380px wide and under).

  • Mark: 34px in page chrome; the favicon at the browser's size.

  • fzlt

    fzlt: 12px, the arcade key label size.

08 DON'TS

Not like this.
Not ever.

  • DON'T Stretched

    Never stretch, squash, slant or rotate a mark.

  • DON'T Off-palette

    The tokens only: --ink, --muted, the tile's own colours.

  • DON'T FizLet

    Fizlet in prose, FIZLET as the mark. Never FizLet or FIZlet.

  • DON'T ®

    Nothing is registered. ™ only, never “registered”.

  • DON'T FZLT

    fzlt is always lowercase.

  • DON'T ™ in code

    No ™ in package names, imports or URLs.

09 COLOUR · FROM src/ui/tokens.json

Colour is a job.
Not decoration.

Flat faces, solid hex, no gradients. Every swatch here is the kit's own variable, so it follows the theme switch in the header. The source is tokens.json ↗; the build fails if board-ui.css drifts from it.

Roles: one colour per job

  • sys --k-sys dark #19f0ffnavigation: menu, camera, pager, pickers, tips, focus ring, comms edge
  • cmd --k-cmd dark #9a63ffcommand and planning, cards, every LOCKED order
  • fire --k-fire dark #ff2b4ethe main action (the gun)
  • aim --k-aim dark #ff7389aim modes; fire's lighter twin; dim when off
  • attack --k-attack dark #ff2e88offensive order; door pink
  • advance --k-advance dark #ff8a1fpush to objective
  • fallin --k-fallin dark #a8ff3eform up on the player
  • flag --k-flag dark #f6f3ffwhite flag: pause / surrender; overlay sticker face
  • go --k-go dark #39ffb0start and confirm; comms LED
  • teamA --team-a dark #39ffb0side A: retreat key, badges, platoon keys
  • teamB --team-b dark #ff5c8fside B
  • hurt --hurt dark #ffc21ahealth 30-60%
  • critical --critical dark #f0506ehealth under 30%; alert

Surfaces and ink

  • bg --bg dark #07060flight #eef0fb
  • surface --surface dark #110d22light #ffffff
  • raised --raised dark #1d1738light #e6e4f8
  • card --card dark #120f26light #ffffff
  • ink --ink dark #f6f3fflight #1b1636
  • muted --muted dark #aea4d6light #5d5684
  • line --line dark #3b3170light #b9b2e3
  • rim --rim dark #07060fsame in both themes: every key, sticker and card sits on an ink rim

Ink twins: thin text on light

  • sysInk --k-sys-ink dark #19f0fflight #006e91
  • cmdInk --k-cmd-ink dark #b48cfflight #6a3ae6
  • fireInk --k-fire-ink dark #ff2b4elight #c01033

10 THE BOARD · BOARD UI KIT

Fizlet wears
the board.

Neon faces on an ink rim, hard bases straight below, a gridded field, mono caps labels. Everything below is the live kit (@fzlt/core/ui), lifted from DOM Battlefield. The Board UI spec ↗ has every rule.

The arcade key

One key family, one role each. Press one: the face drops onto its base. These only press.

Sticker keys

The big launch keys: a dark face, a white rim and base, a pixel icon tile.

Stickers

A kicker and one or two words, tilted −4°, on the rim: RECALL / RESTORED on the home demo, ERROR 404 / NO PAGE on the 404. Slam one: the kit's own drop, hit and press, then it settles.

ERROR 404NO PAGE

10 SECTION STICKER COMING SOON

The grid

1px lines, the board under every hero. Four sizes only.

  • 44PX · HERO
  • 30PX
  • 22PX
  • 20PX

The arcade brick

@fzlt/core/arcade: the shell every page arcade game reuses, the overlay, scoreboard, keys and icons in this kit. It takes over the page, so it plays on its own pages, not this one.

Play it liveThe arcade brick

Game props

From DOM Battlefield's board: platoon keys with size pips, a round step key with its badge, the pager, a readout, a label and the comms toast.

ELAPSED00:00
SIDEA
SIDEB
RADIO · GROUP LABEL
ROGER · GRID 0412

FIZLET · V0.21.3 · MIT

By Chris Cooley.

Fizlet is its own brand, made by Chris Cooley ↗. Fizlet and fzlt are trademarks of Chris Cooley; the code is MIT.

The marks Source on GitHub ↗