
Preview image. Unlock full-res
Crisp White Blueprint
The Microsoft design system exudes a balanced composition, pairing clear-cut information presentation with a foundational blue accent. It leverages a strong neutral palette dominated by white and deep grays, providing high contrast and visual clarity. The consistent use of 2px radius on interactive elements like buttons subtly softens the otherwise sharp edges dictated by the 0px default. Bold imagery and product showcases are integrated seamlessly, often against a vibrant brand blue that contrasts with the clean, primarily white UI. Prioritize Ocean Blue (#0067b8) for primary calls to action and interactive elements to maintain brand consistency. Use Charcoal Black (#000000) for all main headings and body text to ensure maximum readability and contrast. Apply Cloud White (#ffffff) as the default background for content cards and elevated surfaces. Employ Fog Gray (#f2f2f2) for subtle background differentiation between page sections. Maintain a 2px border radius for all interactive buttons to introduce a subtle softness to actions. Always use Segoe UI with a 400 or 600 weight for all typographic elements. Apply 48px padding around content within Feature Cards to create a spacious internal layout. Avoid using background colors other than Cloud White (#ffffff) or Fog Gray (#f2f2f2) for primary content areas. Do not introduce sharp corners on primary action buttons; always use the specified 2px border radius. Refrain from using heavily saturated colors outside of the defined brand blue (#0067b8) for UI elements. Do not deviate from Segoe UI for text; avoid decorative or script fonts. Avoid using box shadows on elements other than Feature Cards. Do not use generic gray values; stick to the defined neutral palette (Charcoal Black, Graphite Gray, Dark Slate, Deep Ash). Do not apply padding or margins inconsistent with the 8px base unit system.









