Design
Guide

1. Text Inputs

• Default placeholder: “Type here”
• Optional enhancement: For specific fields where a format or example is helpful, append an example after “Type here”:
• Ensure placeholder text has sufficient color contrast while remaining visually distinct from actual input
  • Type here (e.g., John Doe)
  • Type here (e.g., johndoe@email.com)

2. Dropdowns / Selection Inputs

• Default placeholder: “Select”
• Optional enhancement : Add context if necessary:
  • Select department
  • Select country

3. Consistency Rules

• Always use sentence case for placeholders:
  • Select department
  • Select country
• Avoid using placeholders as labels , labels must always be visible.
• For optional fields, you can add (optional) in the label, not in the placeholder.

4. Accessibility

• Ensure placeholder text is visibly distinguishable from entered text (color contrast).
• Do not rely on placeholders as the only guidance.

Primary Identifier Column Click = Page Navigation / Separate Screen
Show users the expected format for inputs like dates, phone numbers, or email addresses

Column Ordering Standard
In tables/lists, it is better to place the primary identifier (name, title, topic) in the first column, and make it the only clickable column for navigation. This ensures consistent ordering, easy scanning, and predictable navigation behavior.

How It Applies to Our Cases
Assets → Asset Name clickable (instead of ID or serial number).
Brands → Brand Name clickable.
Categories → Category Name clickable.
Vendors → Vendor Name clickable.
Documents → Document Topic/Title clickable.

Benefits of Identifier-Based Standard
Future-proof - if you reorder columns, rule still applies.
Consistent mental model - users always know “the name/title is the link.”
Cleaner design - avoids random multiple columns being clickable.
Matches common web patterns - (Google Drive, Jira, GitHub - all use “name/title” as the entry point).

Expected Behaviour
Clicking the identifier should always take the user to a detail view or separate screen.
This establishes a predictable rule: identifier = go inside, view more.

Interaction Behavior

• Hover State: Show underline, link color change, or cursor pointer only on the clickable column.
• Action Icons (edit/delete): Always visible or appear on hover; must be clearly separated from navigation click.
• Keyboard Accessibility: Ensure clickable column is focusable (tab index).

• Editing must always be triggered by a dedicated icon or action (“Edit” button).
• Never reuse the primary identifier click for editing (to avoid confusion).
• Edit action can be:
  • Inline edit modal (quick edit), or
  • Separate edit page (depending on use case).
• But in both cases - the trigger should be an explicit action icon/button, not the identifier.