Skip to content

User interface

Intended audience

This guide is intended for developers of InvenioRDM.

Scope

The guide covers general style guidelines.

User experience

Colors

  • Standard:
    • The default color used by Semantic UI for components (this is defined per component).
  • Brand:
    • The color used for theming your InvenioRDM.

Dos and don'ts:

  • ✅ Do style components with logical class names (like <div class="ui brand segment">).
  • ❌ Don't style components with color names (e.g. <div class="ui blue segment">).

Color emphasis

Semantic UI allows you to change the emphasis of certain components. For instance, a button can have the following emphasis:

  • Primary - Used for making an element more noticable (e.g. for highlighting the primary action).
  • Secondary - Used for making an element less noticeable.
  • Positive - Used for creating of big new things (example New upload, New community).
  • Negative - Used for dangerously destructive operations (example deleting a community).

IMPORTANT: When changing the color of a component, always think about the logic of the emphasis rather than a specific color. Always use logical names, rather than specific color names. Colors change from instance to instance, emphasis doesn't!

Button colors and order

Style

  • ✅ Do use compact or different sizes (mini, small, ...) buttons.
  • ❌ Don't use basic style buttons.

Order

Order buttons correctly:

  • ✅ Cancel (standard) | Save (primary)
  • ✅ Delete (negative) | ... (space) | Save (standard) | Publish (primary)
  • ❌ Save (primary) | Cancel (standard)
  • ❌ Cancel (negative) | Save (positive)

Capitalization

Form labels:

  • ✅ Resource type
  • ❌ Resource Type