We updated our Terms of Service on 14 October 2026. See what changes

For web tools · ff-kit 1.1

Make it look like it belongs here

Our colors, font, buttons, fields and 85 icons, ready for your web tool. One line, nothing to download, and it follows every visitor’s FileFortress theme.

See the pieces Starter page Icons For your AI Web Tool Guide
Scroll

Get started

Three lines and you’re in

Everything starts with ff- and does nothing until you use it, so your own CSS keeps working. ff-kit/ isn’t in your zip and doesn’t count toward its size.

1

Add the kit

At the top of your index.html.

2

Use the classes

Our background and font on the whole page, then any piece below.

3

Follow the theme

Optional: your tool turns Glow, Glass or Glass 2 with the visitor’s site theme, our background included.

Built to last

We only ever add to the kit. A tool you make with it today keeps looking right, whatever we change on our site.

Works on your computer

ff-dev.js from your web tool project loads the kit from FileFortress while you test. Put its line first.

Starter page: a whole index.html to begin with
index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My web tool</title>
  <link rel="stylesheet" href="ff-kit/kit.css">
  <script src="ff-kit/kit.js"></script>
</head>
<body class="ff-page">
  <main class="ff-container ff-stack" style="padding: 48px 0">
    <p class="ff-eyebrow">Web tool</p>
    <h1 class="ff-title">My web tool</h1>
    <div class="ff-card ff-card-body ff-stack">
      <label class="ff-field"><span class="ff-label">Your text</span><input class="ff-input"></label>
      <div class="ff-row"><button class="ff-btn ff-btn-accent"><span class="ff-icon ff-i-sparkles"></span>Make it</button></div>
    </div>
  </main>
</body>
</html>

Building with an AI?

Give your AI the whole picture

One file with everything it needs to build a web tool for FileFortress: what web tools can do, the rules, the limits, ff-media/, testing with ff-dev.js and every piece of this kit with its code. Attach it to your chat with ChatGPT, Claude, Gemini or any other AI, then describe your tool.

A text file (Markdown), always up to date with this page.

Made it with an AI? Tick “Made with AI” when you upload (step 3, More details). It adds a small badge to your tool’s page, so people know how it was made. Our rules apply all the same: you’re responsible for what your tool does, so read through what your AI wrote.

Colors

Our palette, yours to use

CSS variables that change with the theme: color: var(--ff-brand). Click one to copy it.

Make it yours

Change any part, keep the rest

Every piece reads its own variables. Turn the knobs: everything on this page changes with you, and the CSS to put in your tool writes itself.

your CSS
/* change something on the left */

Put it in a <style> block or your own CSS file, after the kit. For one element only, set the variables on that element: style="--ff-btn-radius: 999px".

The pieces

Everything from our style guide

Each piece live, next to its code. The code is yours to edit: type in it and the piece changes. Switch the theme at the bottom of the screen to see it the way your visitors might.

Versioned cards

Cards carry a version in their name: ff-res-v1, ff-res-v2. A version never changes. When our cards get a new look, it becomes the next number, and your tool keeps the one you picked.

Buttons

ff-btn

Accent for the main action, secondary for the rest.

ff-btn.html · editable

Good to know

  • One accent button per screen: it’s what people should press.
  • Sizes: ff-btn-sm and ff-btn-lg. ff-btn-block fills the width.
  • Icon-only buttons need aria-label, so screen readers can say what they do.
  • Works on <button> and <a>.

Change it

Resource card v2

ff-res-v2

Our current card: a big picture with the numbers on it, Like / Copy link / Share on its edge, and the creator next to the title.

ff-res-v2.html · editable

Good to know

  • The title’s link covers the whole card; the three buttons stay clickable above it.
  • The buttons show on hover, and always on touch screens. What they do is up to your code (is-on marks a liked heart).
  • Versioned on purpose: ff-res-v2 always looks like this. When our cards change again, the new look becomes ff-res-v3 and your tool keeps v2.

Change it

Cards and glass

ff-card

ff-card is a panel, ff-card-body gives it room. ff-glass blurs what’s behind it.

Card

Island Loot Map

A panel for anything: settings, results, a list.

Glass

See-through panel

Looks best over a picture or the Glow background.

ff-card.html · editable

Good to know

  • Cards follow the theme: solid normally, see-through in Glow and Glass.
  • Glass only shows its blur when something colorful is behind it.

Change it

Our background

ff-backdrop

The Fortress Glow background from our site: drifting pink and purple glows, a slowly moving grid and light bars.

Our background

Looks like the site around it

Glass panels show it best.

ff-backdrop.html · editable

Good to know

  • The easy way: add kit.js. When a visitor uses Fortress Glow, Glass or Glass 2, our background appears behind your page by itself, so your tool matches the site around it.
  • Always want it? <html data-ff-backdrop="always">. Never? data-ff-backdrop="off".
  • In one box only, like here: <div class="ff-backdrop ff-backdrop-box"> inside an element with position: relative.
  • Added with your own code later? Call ffKit.fillBackdrops() after adding it.
  • It stands still for visitors who ask their system for less motion.

Top bar

ff-topbar

A bar like ours at the top of the site: your tool’s name, a divider, its own links and buttons on the right. Click the links: each one shows its own part.

Texture tools
v1.0
Turn a height map into a normal map.
ff-topbar.html · editable

Good to know

  • On FileFortress our own bar is already above your tool (its name, Like, Share, Fullscreen), so keep yours for your tool’s own parts. Don’t copy our links (Home, Explore...): a tool can’t open pages of the site.
  • data-ff-show="#id" on a link shows that part and hides the others (needs kit.js), like tabs and the sidebar. Give the other parts hidden at the start.
  • is-on (or aria-current="page") marks the open link; in Fortress Glow it gets our pink-purple glow.
  • ff-safe-corner keeps the right end free of our Exit button while your tool is fullscreen.
  • Narrow screens: the links scroll sideways, the name and the right end stay.

Change it

Fullscreen

ff-safe-corner

Visitors can show any web tool fullscreen. Our round Exit button then stays in the top-right corner, so keep that corner free.

Normal map maker
The top bar keeps its buttons out of the corner.
ff-safe-corner.html · editable

Good to know

  • The Fullscreen button is on every web tool’s page. In fullscreen, our Exit button (40 px, round) sits 12 px from the top and right edges: keep the top-right 64 × 64 px free of buttons and important text. Esc works too.
  • With kit.js your page gets html.ff-fullscreen while it’s fullscreen, and --ff-safe-corner is 64px then (0px otherwise).
  • Put ff-safe-corner on a top bar that reaches the right edge: while fullscreen it moves the bar’s content out of the corner (at least 64 px right padding); the rest of the time the bar keeps its own padding.
  • Your own code can listen too: document.addEventListener('ff-fullscreen', e => e.detail.on).

Change it

Roadmap

ff-road

Done, now, next: where a project stands. On wide screens one line runs through all steps, green to yellow to gray.

  1. Done

    Height map in

    Drop a picture, see it right away.

  2. Now

    Normal maps

    Strength, flip green, preview.

  3. Next

    Packing

    Put masks in one texture.

  4. Later

    Presets

    Save your settings.

ff-road.html · editable

Good to know

  • is-done steps are green, the is-now step yellow, the rest gray.
  • The line under the steps follows by itself with kit.js. Without it, set style="--ff-road-steps: 4; --ff-road-now: 2" on the list.
  • Any number of steps works; on narrow screens they wrap into rows.

Change it

Our promise

ff-promises

A few short promises, each with an icon and a line. Good for rules, features or what people can count on.

  • Nothing leaves

    Your pictures stay on your computer.

  • Fast

    Everything happens right here, no waiting.

  • Yours to keep

    Download every result as PNG.

ff-promises.html · editable

Good to know

  • Green by default. Another color: style="--ff-promise: var(--ff-brand)" on the list.
  • Keep each line short: one idea per promise.

Change it

Code window

ff-win

A window with the three dots and a name, for code, numbers or a preview.

settings.json 
// your settings
{ "strength": 2.5, "flipGreen": true }
ff-win.html · editable

Good to know

  • Color the code yourself with ff-c-tag, ff-c-attr, ff-c-str and ff-c-com.
  • A button in the bar moves to its right end by itself.
  • Not only for code: put a picture or a preview under the bar instead.

Change it

Numbers and empty states

ff-stat

A number with a label, and what to show when there’s nothing yet.

Downloads
12,480
+320 this week

No textures yet

Drop a picture to start.

ff-stat.html · editable

Good to know

  • An empty state says what’s missing and what to do next. Add a button if there is one.

Change it

Text

ff-title

Headings, small labels, muted text, links, code and keys.

Texture tools

Normal map maker

Drop a height map. Press Space to compare. Files use ff-media/. Read more

strength = 2.5
ff-title.html · editable

Good to know

  • One ff-title per page, then ff-h2 and ff-h3 under it.
  • ff-muted for less important text, ff-faint for the least.

Change it

Forms

ff-input

Fields, a menu, a text box, tick boxes, a switch and a slider, with labels and hints.

ff-input.html · editable

Good to know

  • Wrap a field in <label class="ff-field">, so clicking the label focuses it.
  • ff-input works on <input>, <select> and <textarea>.
  • ff-toggle is a normal checkbox: read it with .checked.

Change it

Badges, chips, tabs and alerts

ff-badge

Small labels, filter chips, a tab row, messages and a tip on hover.

DefaultNew DoneBeta
Saved as normal_map.png
ff-badge.html · editable

Good to know

  • Badges are labels; chips are buttons people press (is-on for the chosen one).
  • Tabs: is-on (or aria-selected="true") marks the open one. Switching what shows is up to your code.
  • data-ff-tip works on anything, also without kit.js.

Change it

Lists, fold-outs and progress

ff-list

Rows of things, a section that opens on click, a progress bar and loading blocks.

  • rock_albedo.pngDone
  • rock_normal.pngWaiting
How does it work?

It reads the height and turns slopes into colors.

ff-list.html · editable

Good to know

  • Progress: set --ff-progress on the inner span from your code, like el.style.setProperty('--ff-progress', '40%').
  • ff-skeleton is a shimmering block to show while something loads. Size it with style.

Change it

Drop zone and dialog

ff-dialog

A place to drop files, and a dialog that opens without writing any code.

Start over?

Your settings go back to the start.

ff-dialog.html · editable

Good to know

  • The drop zone is a <label> around a file input, so clicking it opens the file picker. Dropping files needs a few lines of your own code.
  • data-ff-open and data-ff-close need kit.js. Esc closes a dialog by itself.
  • Add class="is-over" to the drop zone while a file is dragged over it.

Change it

Layout

ff-grid

ff-container centers the page, ff-stack stacks, ff-row puts things side by side, ff-grid makes columns that wrap.

ff-rowside by side ff-spacer pushes right
ff-grid
wraps
by itself
ff-grid.html · editable

Good to know

  • Nest them: an ff-stack of ff-rows covers most tool layouts.
  • ff-grid columns are at least 14rem wide and fill the space.

Icons

85 icons, any color

They take the text color and size of where you put them. Click one to copy its code.

We only use cookies the site needs to work. No tracking, no ads, no analytics. Privacy policy