Layout & Design

The Layout & Design tab provides ready-to-use visual combinations.

• Display layout: Choose Compact List, Modern Cards, or Radial Circles.
• Desktop columns: Select one to four columns for Cards and Radial layouts. Columns automatically adapt for tablets and phones.
• Theme: Choose Light, Dark, Soft, or Brand.
• Bar style: Choose Solid, Gradient, or Striped for horizontal layouts.
• Value position: Display the value beside the title, inside the bar, or after the bar.
• Show value: Hide or display the numeric value.
• Track colour: Set the unfilled background colour.
• Accent colour: Set the shared interface accent used by the selected design.
• Corner radius: Adjust rounding from square corners to pill-shaped bars and cards.
• Item gap: Control the spacing between progress items.

Inside values remain sharp during animation because the fill animates by width rather than scaling its text. Radial layouts use responsive SVG circles and do not require a bar-style setting.