Here are some quick tips to align with the portal color themes, color pallette and type ramp that resonate with customers and meets accessibility requirements.
- Style guide Azure Portal Toolkit Style Section in Figma
- Segoe UI is the standard typeface of the Azure portal
- Use sentence case for headers and labels. DO NOT USE ALL UPPERCASE, IT IS HARD TO READ
- Use 13px as body-text size
- Wrap text at 75 characters per line
- All the line style icons align with the monoline icon style from Full MDL Icon font.
- We use 4px grid system. The smallest padding/margin is 4px.
Ensure that your designs work well at all P0 resolutions. Based on telemetry data (see below), resolution priorities are:
- P0 - experience needs to be great
- 1366 - portal team uses 1366 × 786 as a baseline. This is often the resolutions at events (Ignite, Build, etc)
- 1920
- P1 - experience needs to work
- >1920
- P3 – experience needs to work
- 1024
Designing for 1366 forces a focus on the most important information.
Reports showing portal usage by screen resolution Screen resolution telemetry
Links that open in new browser instances should follow this styling
- Design guidelines top-design.md
Developers can use the following information to get started implementing this pattern
The portal includes a built in list of CSS classes that may be used inside of your templates.
- Style for extensions portalfx-extensions-style.md