Elements & Styling

The building blocks you place on a component layout, and the controls for making them look right.

The element types

Open Elements in the left rail and click Text, Image, Line or Icon set to add it to the active component face. Below them are Shapes, Lines (dashed, dotted and arrows) and Frames, which are image slots already cut to a circle, hexagon or another shape. Click a tile to drop it in the middle, or drag it to place it exactly. The search box at the top looks through all of them and the icon library at once, and the shapes, lines, frames and icons you added last are kept under Recently used.

Plus one more that isn't in the tile grid: clicking any symbol in the icon browser at the foot of the panel adds a single icon element, which binds an Icon property and a per-card tint colour.

Shapes and lines carry no content, but they are not inert: their fill and stroke both bind, so a faction-coloured card, a board region, or a token face can share one layout rather than needing a design per value. A colour can also follow an icon column, painting with the colour of the icon in each card's cell, so one column can set a card's icon and the badge behind it. Everything on this list can be bound in some way.

Text elements

Select one and a type toolbar appears at the top of the canvas:

Left to right: the binding pill, font family, a size stepper (minus / value / +), text colour, B / I / U / S, letter case, alignment, Spacing (letter spacing, line spacing and where the text sits in the box), Text box, Flip, Transparency, then the Align, Effects and Position groups, and finally the copy-style brush, duplicate and delete. While you are typing in the box, a highlighter and Insert an icon join the toolbar; with some words highlighted, the style controls apply to just those words.

What each control holds:

• Font: Default, then Your fonts (fonts you uploaded), then the built-in fonts grouped as Sans-serif, Serif, Display, Handwriting and Monospace. Upload a font… at the bottom opens Your fonts, where you drop in .ttf, .otf, .woff or .woff2 files and remove ones you no longer use.
• Letter case: Default, UPPERCASE, lowercase or Capitalize Each Word. It changes how the text prints, not what you typed.
• Text alignment: Align left, Align center or Align right.
• Spacing: Letter spacing and Line spacing, each a slider with a number field, and Anchor text box, which keeps the text at the top, middle or bottom of the box.
• Text box: Box size (Auto, Fit or Fixed, below), Min size for Fit, Overflow (Wrap, Truncate or Visible) for Fit and Fixed, then Background, Border colour, border Style (Solid, Dashed or Dotted), Thickness, Corner radius and Padding. Clear box removes the background, border and padding in one go.

Text box decides what the box does when its text changes. Auto grows the box with the text, Fit shrinks the text to fit the box (never below its Min size), and Fixed keeps both, with Overflow deciding what shows. A box connected to a column can't use Auto, because the box has to be the same height on every card; the panel says so, and disconnecting the column brings Auto back. The same box popover adds a background, border, corners and padding, so a text panel doesn't need a separate rectangle behind it. With Auto, the height field in Position reads as set by the text.

Double-click a text box to type in it. While you type, the toolbar adds a highlighter, which draws a coloured pill behind the highlighted words (on connected text it covers the whole field), and Insert an icon, which drops a symbol into the line at the cursor. See Design Editor Shortcuts for the keys that work while typing.

Sizing text for real data

The single most common layout mistake is sizing type against the placeholder. Card name is short; Whispering Woods of Whis'par is not.

Turn on Preview mode, step to the longest value in your set, and size for that. If the longest name can't fit at a readable size, widen the text box or shorten the name before you reach for a smaller font. Fit helps with the odd long value, but check that its minimum size is still readable in print.

Image elements

Bind an Image element to an Image property and each item renders its own artwork.

Worth knowing: an artwork element is often the full card size, with the text panel drawn over its lower half. That's why the Layers order matters. The art isn't cropped; it's covered.

An image you placed on the layout itself (a logo, a texture) has its own Crop, Replace (or Choose image while it is empty), BG Remover and Eraser buttons in the toolbar. Crop, or a double-click on the picture, opens a crop window: drag the picture to reposition it, scroll or use Scale to zoom, or use Move horizontally and Move vertically for exact values. BG Remover cuts out the subject; Touch up in its window lets you brush back what it cut off or erase what it left. Eraser is a brush with three modes: Erase makes what you paint over transparent, Remove object fills it in from what surrounds it, and Restore brings back the original. Both tools run in your browser and are free to use. On the Free plan, the first result you save (a cut-out or an erased picture) is free, and saving another asks you to upgrade. A connected image shows each item's own picture, so its framing is set on the item, not the layout: in Data, use the image cell's menu → Adjust framing…. See Properties & Columns.

Every image also has these in the toolbar:

• Frame: cut the picture to a circle, hexagon or another shape, or No frame.
• Corners: one Radius for every corner, or each corner on its own.
• Fit: Fit (the whole picture, no crop), Fill (fill the box and crop the rest) or Stretch. Dragging a side handle of a Fit image switches it to Fill, so the edges crop as the box changes shape.
• Flip: Flip horizontal or Flip vertical.
• Transparency: a slider with a number field.
• Adjust: Filters (Vivid, Warm, Soft, Faded, Dramatic, Vintage, Mono and Noir, with an Intensity slider), sliders for Brightness, Contrast, Saturation, Hue, Sepia and Blur with a Reset, and a Shadow preset (None, Drop, Glow, Outline or Page lift).
• More image: separate radii for Top-left, Top-right, Bottom-right and Bottom-left.

Shapes and lines

Select a shape and the toolbar shows:

• Edit: the Shape itself (swap a rectangle for a hexagon without redrawing it), Fill Type (Solid, Linear gradient or Radial gradient, with an Angle and Color Stops you can add to), corner radii on a rectangle, and Convert to vector path on the polygon shapes. A vector path looks the same but exports as real vector artwork, and its Edit panel adds Overlaps: Solid or Holes.
• Fill color for a solid fill.
• Border: colour, Solid, Dashed or Dotted, and Thickness.
• Corners on a rectangle.
• On a line, Start and End caps: None, Arrow, Dot, Square or Bar.
• Crop on every shape except a line, and on a vector path: Left, Top, Right and Bottom sliders trim each edge in. Trim to lists the layers it overlaps; pick one and the shape is cut to stay inside it, such as a round badge on the corner of an art frame. Remove crop puts the edges back. The crop holds when you resize the shape.
• Flip and Transparency.

Pin Edit with its pin button to keep it open on the right while you work on several shapes.

Icons

The icon browser is the Icons & game art section at the foot of the Elements panel. A strip of swatches picks the source, and the search field at the top of the panel runs across whichever one is active:

• This project: the icons this project's cards and layouts already use. It appears once there are some.
• Your icons: SVGs and pictures you add with the Upload icon button, reusable across the project. A PNG or JPG opens Crop your icon first, where you frame it to a square and can remove its background.
• Game art: a library of game-oriented symbols (swords, shields, elements).
• Emoji: after the divider, eight swatches for the same emoji in different styles (Noto, Twemoji, Fluent, OpenMoji and more). Switching between them changes the look, not which symbols are on offer.

With nothing typed, each source lists everything it has, with game-relevant symbols first, and a category menu beside Upload icon narrows Game art or an emoji set (All categories, then groups such as Weapons, Magic, Creatures or Arrows for Game art). Search filters the whole source.

There are two different ways icons reach a card, and it's worth being clear about which you want:

Fixed icons: placed directly on the layout. Identical on every card that uses it. Good for a set symbol or a decorative flourish. Give one an Icon binding and it can vary per card too, along with a bound tint colour.

Data-driven icons: an Icon set bound to an Icon-list property. Each card supplies its own symbols from the spreadsheet, and the box arranges however many there are. This is what you want for costs, keywords and power strips.

When designing an icon set, size it for the maximum number of icons any card carries, then check with Preview mode. An eight-icon card on a three-icon strip is a classic proof-stage surprise. Its toolbar holds Icons (called Sample icons once the set is connected, since each card then brings its own), colour, icon size, Arrange (direction, alignment, spacing and whether to wrap onto more lines) and Fit, whose Trim each icon's padding switch makes icons from different sets come out the same size.

A single icon's toolbar has Swap icon, Trim to icon (shrinks the box to the icon's edges; Untrim puts the padding back), Fit (Fit, Fill or Stretch within its box), a tint colour, Flip and Transparency.

A single icon also has Crop, the same as on a shape: edge sliders, Trim to a layer and Remove crop.

In detail, an Icon set's controls are:

• Icons: the icons it shows on the canvas. Add them from the icon picker under the list; each one has a count (- / +), Move left / Move right, its own colour and Remove icon. Once the set is connected, these are only stand-ins until you preview a card.
• Colour: One color paints every icon, Each icon's own keeps their colours and fills in only for icons with none.
• Icon size: - and + around the size. Left on Auto, the icons shrink to fit the box; type a size to fix it.
• Arrange: Direction (Row or Column), alignment along and across the row (with Spread out along it), Spacing between icons, Wrap onto more lines, and When an icon repeats: Draw it again or a ×N badge.
• Crop, Fit, Flip and Transparency, as for a single icon.

Library

The Library panel holds your image library: logos, frames, textures and the pictures you've generated, reusable across every layout. Upload once and place many times. Click an image to place it in the middle of the canvas, or drag it to a spot. Hover a picture for its background-removal button and, in its top-left corner, the Eraser.

Alignment and position

Align aligns the selected element (or several) against the canvas or each other. Use it rather than eyeballing: text that's one pixel off centre is invisible on screen and obvious in a printed row of cards.

• One element selected: Align in its toolbar opens Top, Left, Middle, Center, Bottom and Right, which line it up with the card.
• Two or more: the toolbar shows six align buttons instead (Align left, Align center horizontally, Align right, Align top, Align center vertically and Align bottom), which line them up with each other. Align to the page switches them to the card, and Tidy up (⌥⇧T) evens out a row, column or grid.
• Three or more: Distribute horizontally and Distribute vertically even out the gaps.

Position exposes numeric X / Y / W / H and Rotation (a typed value applies when you press Enter or leave the field), a proportions lock (Proportions locked or Proportions free), and the Arrange buttons: Bring to Front, Move Up, Move Down and Send to Back. Use it when you want two elements to match exactly, or to place something at a precise offset from the card edge, especially for bleed-sensitive work. Turn on the rulers from the zoom cluster and switch their unit to in or mm when you're working to a physical measurement.

Effects and appearance

Effects covers per-element treatments. For text it opens a row of presets (None, Shadow, Glow, Outline, Hollow, Splice, Neon and Background). Pick one and its settings appear under it: offset and direction, blur, transparency, colour, thickness, spread or roundness, depending on the effect. Below the presets are the rest of the text settings (Static Text, Line Height, Letter Sp., First-line Indent and Vertical position) and a box shadow. For everything else Effects opens the shadow settings: Color, X Offset, Y Offset, Blur and Spread.

Opacity and Blend mode (Multiply, Screen and the rest) sit at the bottom of the Position popover. Blend modes show in the editor, the previews and every export, but a blend over a busy background can make text harder to read, so proof it.

The brush beside duplicate copies the selected element's style. Click it, then click another element to paint the same look onto it; double-click it to keep painting until you press Escape.

Two cautions for physical cards:

• Soft shadows and glows read very differently in print than on screen. Proof before committing.
• Thin strokes can disappear at print resolution. Test at 100% on paper.

Neither applies to digital/VTT output, where you can be freer.

Canvas size

Canvas size is the size shown in the header, after the design's name (for example 750 × 1050 px). Click it to set the active component's dimensions and orientation. It begins with the size selected in the component catalog: Poker, a board, a token, a die face, a screen, a box, or a custom size.

Fit the design to the new size, on by default, redraws the design when you pick a new size: boxes stretch with the card, icons and badges keep their shape and stay by their edge or corner, and font sizes and strokes scale with it. Untick it to change only the card. Turning the orientation swaps width and height without fitting, so the elements stay where they were. Even with fitting, it's best to set the size before you build. If the cards are destined for print, choose the size that matches your intended stock before you start; see Print & Ship.

Zoom

Bottom-right, under the canvas: minus, the current percentage, +, fit-to-canvas, and a rulers toggle with a px / in / cm / mm unit picker. ⌘minus, ⌘+ and ⌘0 do zoom out, zoom in and fit from the keyboard. Click the percentage for preset levels, Fill the view and Zoom to selection (⌘2); ⇧⌘0 jumps to 100%. This is a view setting only. None of it changes the card.

Work zoomed-in for detail, then zoom to fit before judging balance. A layout that looks right at 200% is often top-heavy at actual size.

Undo and redo

In the header, after the canvas size (⌘Z, and ⌘⇧Z or ⌘Y to redo). They cover element edits within the layout you're working on.

They are not a substitute for version snapshots. Take one before restructuring a layout or reordering condition priorities, because those changes ripple across every card.