Design beautiful and performant sites, pages, and web parts with SharePoint in Microsoft 365.

Get inspired. Discover the modern experiences you can build with SharePoint in Microsoft 365.

View SharePoint Look Book
SharePoint design principles

SharePoint builds on the design principles that shape the Office and Microsoft product families. These principles help the design stay true to our product goals and user needs.

    Optimistic and fast

    SharePoint is encouraging and supports fast and agile product experiences that work seamlessly on all platforms and devices.

    Dynamic and alive

    SharePoint experiences are dynamic and adapt to the creator. Allowing for customization to express your brand and meet the needs of your audience.

    Authentic and useful

    SharePoint stays relevant and useful providing tool, systems and capabilities to design and build sites that help people and business achieve more.

    Forward-thinking

    SharePoint experiences search for what's possible beyond todays way of getting things done. We care about the needs of people not only today, but tomorrow — what and how they'll create and how technology can make their content have impact.

    Accessible and optimized

    Accessibility is developing an equal experience for all users that enables individuals to adjust their user experience to meet their unique visual, hearing, dexterity, cognitive, and speech needs. SharePoint believes strongly in providing accessible experiences for everyone, everywhere, and in optimizing our experiences to reflect the needs of all of our customers.

Create beautiful sites and pages

Looking for how to get the most out of your SharePoint sites and pages? Follow the key topics to learn about customization and setting up sites for success.

Brand your siteLearn how to effectively express your brand on SharePoint, including logos, site name, description and leveraging brand colors.See branding guidance
Get inspiredDiscover and get inspiration for the modern experiences you can build with SharePoint in Microsoft 365.View SharePoint Look Book
Create custom themesCreate a theme and use them to customize your site.Get guidance
NavigationGuidance on navigation options, configuration, and best practices for organizing navigational IA.Get guidance
Use News effectivelyLearn about News layouts and how to feature news on your site.See more
Sections and columnsLearn how to leverage columns within a section to achieve different page layouts.Learn more
    Brand your siteLearn how to effectively express your brand on SharePoint, including logos, site name, description and leveraging brand colors.See branding guidance
    Get inspiredDiscover and get inspiration for the modern experiences you can build with SharePoint in Microsoft 365.View SharePoint Look Book
    Create custom themesCreate a theme and use them to customize your site.Get guidance
    NavigationGuidance on navigation options, configuration, and best practices for organizing navigational IA.Get guidance
    Use News effectivelyLearn about News layouts and how to feature news on your site.See more
    Sections and columnsLearn how to leverage columns within a section to achieve different page layouts.Learn more
    Design great web parts

    The SharePoint design system leverages the power of Fluent UI and the SharePoint Framework to make it easy to get started quickly in creating your next web part.

    Web part basicsLeverage the basic building blocks of a modern web part to work great on any page.Get guidance
    Theme a web partLearn how to build a web part to adjust for various site themes.Get guidance
    Responsive designOptimize your web part to reflow to fit and page layout and screen size.Get guidance
    CommandingConsistency in actions and navigation across web parts is essential in making them easy to use.Learn about commanding
    AccessibilityDesign an experience that meets all users' unique visual, hearing, dexterity, cognitive and speech needs.See our accessibility guidance
    Titles and descriptionsFollow patterns to make your web part customizable for users unique content.See our patterns
    LayoutsLeverage a variety of web part layouts to make your web part reflow across columns.See our layout guidelines
    ExamplesHere are a few example web parts to get you started designing a web part.Show me
      Web part basicsLeverage the basic building blocks of a modern web part to work great on any page.Get guidance
      Theme a web partLearn how to build a web part to adjust for various site themes.Get guidance
      Responsive designOptimize your web part to reflow to fit and page layout and screen size.Get guidance
      CommandingConsistency in actions and navigation across web parts is essential in making them easy to use.Learn about commanding
      AccessibilityDesign an experience that meets all users' unique visual, hearing, dexterity, cognitive and speech needs.See our accessibility guidance
      Titles and descriptionsFollow patterns to make your web part customizable for users unique content.See our patterns
      LayoutsLeverage a variety of web part layouts to make your web part reflow across columns.See our layout guidelines
      ExamplesHere are a few example web parts to get you started designing a web part.Show me
      Fits all sizes and devices

      SharePoint web parts are designed to work seamlessly on any page layout, screen size and to work great on mobile phones.

      Learn more about responsive design

      Download the SharePoint mobile app.

      iOSAndroid
      Toolkits & resources
      SharePoint Web UI toolkitSharePoint design language toolkitFluent toolkitsFontsFluent UI Theme DesignerAccessibility
      SharePoint Web UI toolkitThe UI kit provides templates, components, and detailed guidance for designing a SharePoint site including the header and footer, sections, and web parts.Access UI Kit
      SharePoint design language toolkitThe SharePoint design toolkit provides everything you need to design your web parts.Download
      Fluent toolkitsThe Fluent design toolkits are built with Figma and Sketch and provide styles, controls, and layout templates that enable you to create beautiful and coherent Microsoft experiences.Download
      FontsToolkits leverage Segoe UI and MDL2 icon fonts. To get the most out of the toolkits download the fonts, you can replace with a custom font if needed for your specific project.Download
      Fluent UI Theme DesignerThis tool helps you easily create a theme for your sites.Give it a try
      AccessibilityLearn more about accessibility and designing for inclusivity with these great resources.Learn more
      Fluent UI

      The official front-end framework for building experiences that fit seamlessly into Office and Microsoft 365. SharePoint experiences are designed and built with Fluent UI.

      Learn more
      SharePoint Framework (SPFx)

      With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build web parts and apps that are responsive and mobile-ready from day one.

      Learn more
      SharePoint on GitHub

      Join our community of passionate builders.

      View projects