IndigoUI Style Guide

From Scribus Wiki
Jump to navigation Jump to search


UI Spacing

Grid

The UI spacing grid follows a rule of 4, 8, 16, 24, 32 etc. In example, button group spacing is 4, widget margin is 8, icon size is 16.

Rules

The standard spacing between layout blocks within a container is 8px.

The inner spacing of a container is always 8px (Qt default is 9). The spacing can either be set in the layout of the container, or in the layout of the widget that is added to the container.

The spacing of widgets within a FormWidget (button group) is 4px.

The spacing between two FormWidget is 16px. There are several ways to define the spacing. If the two FormWidget are within a layout, you can set the layoutSpacing property to 16. If that is not possible, you can set a horizontal spacer with a fixed width between the two FormWidget. The width of the spacer depends on the layoutSpacing of the parent layout. With a layoutSpacing of 4, a horizontal spacer of 12px is required (4 + 12 = 16). Set sizeType = Fixed and set a width of 12.

The vertical spacing between two SectionContainer should always be 0 to avoid unwanted spacing when the container is collapsed.

widget spacing inside a container widget
Widget spacing inside a container widget
General UI spacing
General UI spacing
Widget group spacing
Widget group spacing

Colors

Scribus IndigoUI Color Palette

Icons

The 1.7.0 icons are scalable vector files, but are still based on a grid. Each icon is based on a 16x16 grid. All shapes should use whole "pixels" if possible to avoid unwanted color values ​​during rasterization.

Icon with 16px grid
Icon with 16px grid

An icon normally has a margin of one pixel. Depending on the basic shape of the icon, this space can also be used. The line thickness of shapes is 1 or 2 pixels. In exceptional cases, the value can also be 1.5, e.g. for diagonal lines.

  • Rotated shapes should have a 45° angle.
  • Distances and sizes should be shown with a distance marker (red "H")
  • Directions or movement should be shown with a red arrow
Icon - examples
Icon - examples

If icons should contain letters or text, then use Roboto Slab. The font weight depends on the font size. The line thickness should be about 2 pixels. For a font size of 14px, the font weight is semi-bold.

Icon - text
Icon - text

There are a number of additional symbols that can give a basic icon a certain meaning. The additional symbols should always be placed at the bottom right of the icon and should not be larger than 1/4 (8x8) of the icon.

  • Gear: Use for settings or properties
  • Minus: Use for remove action
  • Plus: Use for add action
  • Double arrow: Use for split or separate
  • Chain: Use for link or merge
  • Magnet: Use for snap
  • Lock (closed): Use for locked
  • Lock (open): Use for unlocked
  • Rotated left arrow: Use for reset
  • Cross arrow: Use for move
  • Magnifying glass: Use for search
  • Left arrow: Use for import
  • Right arrow: Use for export
  • Pen: Use for edit
  • Brush: Used for style
  • Eye: Use for visibility
  • Checkmark: Use for on or verify
  • X: Use for off or unchecked
Icon - extension
Icon - extension

Cursor icons are larger and based on a 32x32 grid. The symbol color is always black, possibly with color accents. To ensure readability on all surfaces, the cursor shape must have a 1px thick border.

Icon - cursor
Icon - cursor