Improvise. Organize. Customize.
Get Formulize GitHub

Tokens

Tokens are the CSS custom properties that hold the design's values. Use them in your own CSS and style attributes instead of fixed values, so your styles follow the theme, the Appearance page and the density: color: var(--fz-color-text-muted). Sizes are given at the default settings; they are in rem, so they grow with the Appearance page's Text and interface size setting.

Colour

The theme's palette, including any colours set on the Appearance page.

TokenValue
--fz-color-pageThe page background.
--fz-color-surfaceCards, tables and other raised areas.
--fz-color-surface-2A slightly darker surface, for headers and hover.
--fz-color-surface-3A darker surface still, for inset areas and stripes.
--fz-color-overlayThe dimming behind a dialog or the drawer.
--fz-color-borderBorders and dividers.
--fz-color-border-strongThe borders of controls.
--fz-color-focusThe border of a focused control.
--fz-color-textBody text.
--fz-color-text-mutedSecondary text.
--fz-color-text-subtleTertiary text, such as placeholders.
--fz-color-accentThe main colour: primary buttons, links, selection.
--fz-color-accent-hoverThe accent, on hover.
--fz-color-accent-softA pale tint of the accent, for backgrounds.
--fz-color-accent-soft-2A slightly stronger tint of the accent.
--fz-color-accent-textAccent-coloured text, such as links.
--fz-color-on-accentText on an accent background.
--fz-color-successSuccess. With --fz-color-success-soft, a pale tint.
--fz-color-success-softA pale tint of success.
--fz-color-warningWarning.
--fz-color-warning-softA pale tint of warning.
--fz-color-dangerDanger, errors.
--fz-color-danger-softA pale tint of danger.
--fz-color-infoInformation.
--fz-color-info-softA pale tint of information.

Type

Fonts, text sizes (each with a line height), weights and line heights. The sizes are Tailwind's, plus xs-plus.

TokenValue
--fz-font-sansThe main font.
--fz-font-headingThe secondary font, for headings and labels. The main font unless the Appearance page sets another.
--fz-font-monoA monospaced font.
--fz-text-xs0.75rem (12px)
--fz-text-xs-plus0.8125rem (13px). Formulize's own step; Lyris's content text.
--fz-text-sm0.875rem (14px)
--fz-text-base1rem (16px)
--fz-text-lg1.125rem (18px)
--fz-text-xl1.25rem (20px)
--fz-text-2xl1.5rem (24px)
--fz-text-3xl1.875rem (30px)
--fz-text-{xs,xs-plus,sm,base,lg,xl,2xl,3xl}--line-heightThe line height that goes with each size, as in Tailwind: 1rem for xs, 1.25rem for xs-plus and sm, 1.5rem for base, and so on.
--fz-font-weight-normal400
--fz-font-weight-medium500
--fz-font-weight-semibold600
--fz-font-weight-bold700
--fz-leading-tight1.25
--fz-leading-snug1.375
--fz-leading-normal1.5

Spacing and sizes

One step that every space and size is a multiple of, as in Tailwind: calc(var(--fz-spacing) * 4) is 1rem, 16px. The density changes the step, so everything built on it follows.

TokenValue
--fz-spacing0.25rem (4px) at standard density; 3.5px at tight, 4.5px at comfortable.
--fz-control-heightButtons: 8 steps, 32px.
--fz-field-heightForm fields: 9.5 steps, 38px.
--fz-row-heightTable rows: 10 steps, 40px.
--fz-container-2xl42rem, the narrow container.
--fz-container-6xl72rem, the container.
--fz-container-7xl80rem, the wide container.

Shape, depth and motion

Corner radii, shadows, the focus ring, and the timing of transitions.

TokenValue
--fz-radius-sm0.25rem (4px)
--fz-radius-md0.375rem (6px)
--fz-radius-lg0.5rem (8px)
--fz-radius-xl0.75rem (12px)
--fz-radius-fullFully round.
--fz-shadow-xsA hairline shadow.
--fz-shadow-smResting cards.
--fz-shadow-mdHovered cards.
--fz-shadow-lgFloating panels.
--fz-focus-ringThe keyboard focus ring, as a box-shadow.
--fz-ease-outThe easing curve for transitions.
--fz-duration-fast120ms, for small changes such as hover.
--fz-duration200ms.

Tuning properties

Custom properties you can set on an element, in a style attribute, to adjust a layout class or component.

TokenValue
--fz-auto-grid-minOn fz-auto-grid or fz-grid-list: the narrowest a column can be. 10rem.
--fz-sidebar-widthOn fz-with-sidebar: the width of the side. 16rem.
--fz-switcher-thresholdOn fz-switcher: the width below which its children stack. 32rem.
--fz-field-label-widthOn fz-field--horizontal: the width of the label. 12rem.

Set by the classes

Custom properties the classes set for their own use. Don't set these yourself: use the classes that set them.

TokenValue
--fz-gapSet by the layout classes and the fz-gap-* utilities.
--fz-gap-xSet by the fz-gap-x-* utilities.
--fz-gap-ySet by the fz-gap-y-* utilities.
--fz-auto-grid-maxSet by the --max-N modifiers of fz-auto-grid and fz-grid-list.
--fz-toneSet by the tone modifiers of fz-badge and fz-callout.
--fz-tone-softSet by the tone modifiers of fz-badge and fz-callout.

Density

How much space there is, and how tall buttons, form fields and table rows are. The Appearance page sets it for the whole site; these classes set it for one part of a page.

ClassWhat it does
fz-density-tightLess space and shorter controls: fits more on the screen.
fz-density-standardThe default.
fz-density-comfortableMore space and taller controls: easier to read and to tap.

Example

<div class="fz-auto-grid fz-auto-grid--max-3">
  <div class="fz-card fz-density-tight">
    <p class="fz-card__title">Tight</p>
    <div class="fz-cluster"><button type="button" class="fz-btn fz-btn--primary">Save</button><button type="button" class="fz-btn">Cancel</button></div>
  </div>
  <div class="fz-card fz-density-standard">
    <p class="fz-card__title">Standard</p>
    <div class="fz-cluster"><button type="button" class="fz-btn fz-btn--primary">Save</button><button type="button" class="fz-btn">Cancel</button></div>
  </div>
  <div class="fz-card fz-density-comfortable">
    <p class="fz-card__title">Comfortable</p>
    <div class="fz-cluster"><button type="button" class="fz-btn fz-btn--primary">Save</button><button type="button" class="fz-btn">Cancel</button></div>
  </div>
</div>