Design System

A Modern board is styled through a public contract: CSS variables, class hooks and data attributes. Everything on this page is public API. Anything not listed here is internal and can change in any release.

The contract applies to Modern boards only. Classic boards keep their flowforge-* classes and are not affected by anything below.

Layering

Flowforge ships plain CSS. It contains no Tailwind utilities and no @apply, so your app needs no @source line and a Tailwind prefix() cannot break it.

The stylesheet opens with the layer order Filament uses, and puts every rule in one sublayer:

@layer properties, theme, base, components, utilities;

@layer components.flowforge {
    /* every rule */
}

Your unlayered CSS always beats flowforge's. Your layered CSS wins when it sits in components itself or in a later layer such as utilities.

Filament's own component styles sit in components, which outranks the components.flowforge sublayer. Flowforge uses !important in the few places it must beat them. See Properties set with !important.

Filament panels get the stylesheet in the page head. A standalone board links it in its own markup. You do not register or import it.

Variables

Flowforge never sets a public --ff-* variable. Each rule reads the variable through a private alias with a default, so a value you set at any scope wins. That scope can be :root, .ff-board or one card.

The dark column shows where the default changes under Filament's .dark class. A single value applies to both modes.

Flowforge also reads the Filament palette: --gray-*, --primary-*, --danger-* and --warning-*. It never sets them.

Notes that apply to several variables:

• The shadow variables take a shadow list. Use 0 0 #0000 for no shadow, never none. Flowforge combines the value with a ring, and none makes the whole declaration invalid.
• --ff-surface paints the sticky lane-header strip behind the column headers. Set it to the background your page uses, so cards scroll under the strip without showing through.
• --ff-card-shadow sets the resting shadow and the hover shadow together.
• The dragged card is a clone on body. Flowforge copies the variables above from the card you picked up, so a value set at any scope reaches the clone.

Hooks

Hooks are class names. Modern markup carries ff-* hooks only. The flowforge-* classes of classic boards never appear in Modern views, so a rule written for one board does not reach the other.

Other ff-* classes exist for layout. They are internal.

States

Flowforge reports state through data attributes. SortableJS toggles classes only, so flowforge-modern.js mirrors its states into these attributes.

The dragged clone sits on body, outside .ff-board. A rule that must reach it starts at .ff-card[data-dragging], and the visible card is its .ff-card-body child.

Customizing

Set variables in your theme and add hook rules beside them:

:root { --ff-accent: var(--primary-600); --ff-radius: .5rem; --ff-drag-tilt: 1.5deg; }
.dark { --ff-card-bg: var(--gray-900); }
.ff-column[data-drop="blocked"] .ff-tray { outline: 2px dashed var(--ff-danger); }

The first line sets three variables for every board. The second sets a dark mode value. The third is a hook rule: it outlines a column that refuses the card you are dragging.

A variable set on .ff-board applies to that board only. A variable set on one card applies to that card only.

Tailwind apps

Tailwind v4 apps can map variables to utilities with @theme inline:

@theme inline {
    --color-ff-surface: var(--ff-surface, var(--gray-50));
    --color-ff-accent: var(--ff-accent, var(--primary-500));
}

Flowforge never sets --ff-* variables, so each mapped variable needs the fallback shown, which matches the light default in the variable table. Set the variable under .dark for a dark value. inline keeps each utility reading the variable at use time, so your overrides still apply.

Card components

CardTitle, CardTag, CardMeta and CardAvatar are styled by the Modern stylesheet and designed for Modern boards. On a classic board they render ff-card-* markup, and their look is not guaranteed: after a wire:navigate visit to a Modern board the Modern stylesheet stays in the page head and can style them. See Card Components.

Properties set with !important

Flowforge sets these properties with !important, to beat Filament component styles that outrank its sublayer. To override one, put your own !important rule in an earlier layer, because cascade layers reverse the order for !important. An unlayered or later-layer !important rule loses to flowforge's layered one.

@layer base {
    .ff-card-meta .fi-badge { color: red !important; }
}

The .ff-filters* classes are internal. They are listed because they carry !important, and they can change in any release.

Versioning

• Adding a variable, hook or state is a minor release.
• Renaming or removing one happens in a major release only. The old name keeps working for that major through a fallback, var(--ff-new, var(--ff-old)), and this page marks it deprecated.

The Since column in the variable table records the release that added each variable.