Kaizendex HelpOpen the app

Customizing the card

Control how a Type's feed card looks — field order, width, labels, icons, fonts, colors, sizes, and spacing — with a live preview, without changing the data you track.

Every Type and Routine has a card — the little block you see for each entry in your feed. You decide how that card looks: which fields show, in what order, how wide, with what labels and icons. This is pure presentation — changing the card never changes the data you've logged.

You edit the card from the Properties tab of a Type (or the Types tab of a Routine), right where you define the fields. A live preview sits at the bottom and updates as you tweak.

What you can change per field

Each Property row has a set of controls on its right side:

  • Show / hide (the eye) — toggle whether this field appears on the card at all. Hidden fields still store data; they just don't clutter the card.
  • Label style — how the field is labelled on the card:
    • Label — the field's name (e.g. "Calories"). The default.
    • Emoji — the Property's emoji instead of the name.
    • Icon — the Property's icon (see Field icons below).
    • No label — just the value, no label at all. Great for compact cards.
  • Position — where that label sits relative to the value: Above it, Before it, or After it. (Hidden when Label style is No label — there's nothing to place.)
  • Width — how many of the card's 12 columns the field spans, from 1/12 (narrow) to 12/12 (full row). auto lets Kaizendex pick a sensible width.

Drag the handle on the left of any row to reorder fields — the card follows the same order.

Field icons

Every Property shows a small icon in its row. Click it to change it: a picker opens with two tabs — Emoji and Icons (the full icon library, searchable by name). Pick a 🔥 or a flame icon for calories, a 🏃 for distance.

A custom icon is remembered for this Type only. To show it on the card, set that field's Label style to Icon. Choose Remove in the picker to go back to the default icon for the field's kind.

The Title

The Title row is the headline of the card. It behaves like any other field — drag to reorder it, set its width, change its label style and position, hide it — but you can't remove it (every card has a title).

By default the Title leads with its icon sitting Before the entry name. Switch its label style to No label for a clean text-only headline, Above to stack the icon over the name, or Label to show a small "Title" caption beside it — exactly the controls a Text field has.

Its icon defaults to the Type's icon but you can give the title its own — click the icon on the Title row and pick a different one. That doesn't change the Type's icon. See Properties and the Title for how the title's text works.

Finer control with Edit JSON

The visual controls cover the everyday cases. For full control over how the card looks, click Edit JSON (top of the Properties list) to open the card's complete layout as a document. Paste a layout, hit Apply, and it validates instantly — invalid values are rejected with a clear message pointing at exactly what's wrong. This is also how the AI assistant designs cards for you: just describe the card you want.

For the whole card (card), you can set:

  • background, foreground (text), accent, and border colors.
  • font — any of the app's fonts (e.g. geist, geist-mono, inter, space-grotesk, lora, jetbrains-mono).
  • fontSize — a base text size for the card.
  • padding, gap (space between fields), radius (corner rounding), borderWidth, and dividers (false hides the thin lines between every field at once).

For each field (under fields, by field name), you can set its font, fontSize, fontWeight, color, labelSize, labelColor, iconSize, align (left / center / right), padding, checkboxColor (for a True/false field), and divider (false removes the thin line before it) — each overrides the card-wide setting just for that field.

Two rules keep cards tidy and safe:

  • Sizes use names, not pixels. Font sizes are xs, sm, base, lg, xl, 2xl; spacing/radius are none, xs, sm, md, lg (and xl for radius); borders are none, thin, medium, thick. You can't accidentally make text 500px tall.
  • Colors are a hex code or a theme color. Use a fixed color like #16a34a, or a theme name like role:accent / role:muted-foreground so the card automatically follows your theme (and light/dark mode). A per-card color overrides your theme for that one card.
{
  "version": 1,
  "card": {
    "background": "#1a0b2e",
    "foreground": "#f5e6ff",
    "accent": "#c026d3",
    "font": "geist-mono",
    "radius": "xl",
    "borderWidth": "thick"
  },
  "fields": {
    "title": { "fontSize": "2xl", "align": "center" },
    "calories_1": { "fontSize": "xl", "color": "#22d3ee", "labelColor": "role:accent" }
  }
}

Routines too

A Routine's card works the same way from its Types tab — plus you can override how each child Type renders inside the routine log, and toggle the routine's header. The same live preview shows one log of the whole routine.

Next