Components · Navigation
Product Logos
The lockups identifying each product in the suite, and the category icons that group them. Nineteen products across nine categories.
Figma source: Product Logos ↗Figma properties
| Property | Values | Notes |
|---|---|---|
Product | Sponsored Projects · Repository · Outside Interests · Costing · PhD Manager · Vivarium Operations · Admin · Fund Manager · GEM · Ethics Monitor · Inventions · Proposals · Platform · Animal Procurement · Human Ethics · Home · Data Management · My Profile · Agreements | One variant per product. |
Logo Icon | Platform · Pre-Award · Post-Award · Researcher Success · Risk Management · Resource Management · Sponsored Products · Research Outcomes · Data Management · Repository only | Category icons. |
Usage
When to use it
- Use the product logo in the Suite Header and the product switcher.
- Use the category icon when grouping products, as on the home view.
- Keep the lockup at its supplied proportions.
- Pair the logo with the product name in text where the logo alone might not be recognised.
When not to use it
- Do not recolour a product logo.
- Do not build a new product lockup outside this set — add a variant to the Figma component instead.
- Do not use a category icon as though it were a product logo.
- Do not scale a lockup below the point where its wordmark stops being legible.
Note the naming collision
The category list contains “Sponsored Products”, while the product list contains “Sponsored Projects”. Given this is research administration software, “Sponsored Products” is almost certainly a typo for “Projects”. Worth confirming and correcting in the Figma variant set — a mislabelled category is the kind of thing that gets copied into production strings.
Accessibility
- A product logo used as the sole identifier needs alt text naming the product.
- Where the product name appears beside the logo as text, mark the logo
alt=""so it is not announced twice. - Category icons are decorative when a text heading names the category.