Fluent 2

https://fluent2.microsoft.design/
Admin
Fluent 2 is Microsoft's comprehensive design system providing design principles, UI kits,...
Tokens:40,094
Snippets:818
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install with NPM

Source: https://fluent2.microsoft.design/get-started/develop

Add the Fluent UI Web Components package to your project using NPM.

```bash
npm i @fluentui/web-components
```

--------------------------------

### Install with pnpm

Source: https://fluent2.microsoft.design/get-started/develop

Add the Fluent UI Web Components package to your project using pnpm.

```bash
pnpm add @fluentui/web-components
```

--------------------------------

### Install with Yarn

Source: https://fluent2.microsoft.design/get-started/develop

Add the Fluent UI Web Components package to your project using Yarn.

```bash
yarn add @fluentui/web-components
```

--------------------------------

### Install Fluent UI Apple with CocoaPods

Source: https://fluent2.microsoft.design/get-started/develop

Specify Fluent UI in your Podfile to install Fluent UI Apple using CocoaPods.

```ruby
pod 'MicrosoftFluentUI', '~> X.X.X'
```

--------------------------------

### Install Fluent UI React v9

Source: https://fluent2.microsoft.design/get-started/develop

Use npm or yarn to add Fluent UI React v9 as a project dependency. This is the first step to using v9 components.

```bash
npm install @fluentui/react-components
```

```bash
yarn add @fluentui/react-components
```

--------------------------------

### Task-Oriented Agent Example

Source: https://fluent2.microsoft.design/content-engineering

Example of a minimal and functional tone for a task-oriented AI agent, prioritizing efficiency.

```text
"Working on your infographic. This’ll take a few minutes."
```

--------------------------------

### Engagement-Oriented Agent Example

Source: https://fluent2.microsoft.design/content-engineering

Example of a warm, direct, and action-oriented tone for an engagement-oriented AI agent.

```text
"Hi, all. I’m here to help with the meeting. Here’s what I’ll do."
```

--------------------------------

### Install Fluent UI Apple with Swift Package Manager

Source: https://fluent2.microsoft.design/get-started/develop

Add fluentui-apple as a dependency in your Xcode project or Package.swift file to use with SwiftUI.

```swift
dependencies: [
          .package(url: "https://github.com/microsoft/fluentui-apple.git",
          .upToNextMinor(from: "X.X.X"))
]
```

--------------------------------

### Use AvatarView in XML Layout

Source: https://fluent2.microsoft.design/get-started/develop

Example of how to declare and configure an AvatarView component within an Android XML layout file.

```xml
<com.microsoft.fluentui.persona.AvatarView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:name="Mona Kane" />
```

--------------------------------

### Define AI System Role

Source: https://fluent2.microsoft.design/content-engineering

Establishes the AI's persona, purpose, and boundaries. Use this to set expectations and guide the AI's focus.

```plaintext
Your name is Facilitator, an AI teammate that handles various tasks for people in the meeting so everyone can focus on the conversation. You make meetings more efficient and productive by being helpful and proactive.
```

--------------------------------

### Low Elevation Shadow Tokens

Source: https://fluent2.microsoft.design/elevation

Examples of shadow tokens used for low elevation scenarios in both light and dark themes. These tokens define blur, axis, and opacity for consistent shadow effects.

```css
$shadow2
```

```css
$shadow4
```

```css
$shadow8
```

```css
$shadow16
```

--------------------------------

### High Elevation Shadow Tokens

Source: https://fluent2.microsoft.design/elevation

Examples of shadow tokens used for high elevation scenarios in both light and dark themes. These tokens are applied to elements like bottom sheets, side navigation, and pop-up dialogs.

```css
$shadow28
```

```css
$shadow64
```

--------------------------------

### Using Text Presets

Source: https://fluent2.microsoft.design/components/web/react/core/text/usage

Demonstrates how to use preset text components for easy implementation of standard Fluent 2 text styles. Presets do not allow for altering font family, size, or weight.

```jsx
<Caption2>This is caption 2 text.</Caption2>
<Caption1>This is caption 1 text.</Caption1>
<Body1>This is body 1 text.</Body1>
<Subtitle2>This is subtitle 2 text.</Subtitle2>
<Subtitle1>This is subtitle 1 text.</Subtitle1>
<Title3>This is title 3 text.</Title3>
<Title2>This is title 2 text.</Title2>
<Title1>This is title 1 text.</Title1>
<LargeTitle>This is large title text.</LargeTitle>
<Display>This is display text.</Display>
```

--------------------------------

### System Prompt Template

Source: https://fluent2.microsoft.design/content-engineering

Use this template when drafting a system prompt for an AI product or feature. It includes guidance for each component based on Fluent guidelines. Fill in the placeholders, adapt the pre-populated rules to your product, and delete the comment blocks before sharing with engineering.

```markdown
# System Prompt Template

Use this template when drafting a system prompt for an AI product or feature. It includes guidance for each component based on Fluent guidelines. Fill in the placeholders, adapt the pre-populated rules to your product, and delete the comment blocks before sharing with engineering.

---

## How to use this template

- **Required:** Role, Task, Rules, Example output
- Keep language precise and literal. Avoid figurative expressions or terms with multiple meanings.
- Write rules in complete sentences. Assume every instruction could be taken literally.
- Test your prompt and iterate. You'll likely revise it several times before output is consistent.

---

## System prompt

---

# ROLE

<!--
Define what the AI system is and what it's there to do. Include:
  - The AI system's name, if applicable
  - Its function and high-level purpose
  - What it's optimized for, or the value it delivers to people
  - What it's not (scope boundaries that prevent drift into unintended behaviors)

Note: Some out-of-scope behaviors also raise responsible AI (RAI) concerns.
Address those in the Rules section under Safety and responsible AI.

Example:
  Your name is Facilitator, an AI teammate that handles various tasks for people
  in the meeting so everyone can focus on the conversation. You make meetings more
  efficient and productive by being helpful and proactive.
-->

Your name is [Name], an AI [assistant / teammate / agent] that [describe function].
You [describe the value this AI system delivers to people].
You do not [describe scope boundaries].

---

# TASK

<!--
Define the specific action the AI system performs. Be precise and literal.
One clear task is better than several vague ones.

Specificity: Name the trigger and the output. Avoid open-ended direction.
  Do:   "After the meeting ends, generate a summary that includes key decisions
         made, action items, and assigned owners."
  Don't: "Help with meetings."

Steps and sequences: If the task involves multiple steps, write them in order.
  Do:   "When someone shares a report: 1) identify the 3 highest-risk findings,
         2) explain why each is high risk, 3) recommend one action for each finding."
  Don't: "Analyze the report and share what you find."

Response shape: Specify what the output should look like, not just what it contains.
  Do:   "Summarize in 3 bullet points. Keep each bullet under 15 words."
  Don't: "Summarize this."
-->

[Describe the specific action the AI system performs, including the trigger,
the steps if applicable, and what the output should look like.]

---

# RULES

<!--
Rules tell the AI system how to perform the task and what to do when it can't.
Organize rules into the categories below. Keep language precise and literal.
Define any terms that could be interpreted multiple ways.

Tips:
  - Name the exact condition, not a general situation ("if the report is empty"
    not "if something goes wrong")
  - Give the model an exact response or action, not a direction ("respond with:
    I don't have enough information" not "be transparent about limitations")
  - Repeat the most critical rules at the end of your prompt to reduce recency bias
-->

## Safety and responsible AI

<!--
These rules apply to all AI systems. Review each one and adapt the
product-specific placeholders to your context. Add rules as needed.
-->

- Do not present as having emotions, beliefs, intentions, or a social identity.
  Use machine-appropriate verbs: "analyze," "generate," "identify." Avoid
  "think," "feel," "know," or "understand."
- Describe what the system does and where it works best. Do not overstate
  reliability or present outputs as complete, authoritative, or error-free.
- Do not praise or validate. Avoid phrases like "Great question" or "Nice work."
- Do not use persuasive framing, urgency, emotional priming, or rhetorical
  questions to influence responses.
- [Add harm avoidance rule specific to your product, e.g., "Do not provide
  advice on medical, legal, or financial matters. If someone asks, acknowledge
  the limitation and direct them to an appropriate resource."]
- [If your product may encounter high-stakes situations, define an escalation
  path, e.g., "If someone expresses distress or urgency that the system cannot
  address, acknowledge the limitation and direct them to [resource]."]

## Scope and task boundaries

<!--
Define what is and isn't in scope. Be specific about how the system should
respond to out-of-scope requests.
-->

```

--------------------------------

### System Prompt Instructions for Voice and Tone

Source: https://fluent2.microsoft.design/content-engineering

Specific, actionable instructions for encoding voice and tone directly in system prompts.

```text
"Use contractions. Speak in first person. Keep responses brief and to the point."
```

--------------------------------

### Set up FluentProvider in React App

Source: https://fluent2.microsoft.design/get-started/develop

Import and configure FluentProvider with a theme at the root of your React application. This sets up app-level settings and allows rendering of v9 components.

```tsx
import {
      FluentProvider,
      webLightTheme,
      Button
} from "@fluentui/react-components";

export default function App() {
      return (
          <FluentProvider theme={webLightTheme}>
              <Button appearance="primary">Hello Fluent UI React</Button>
          </FluentProvider>
      );
}
```

--------------------------------

### Set Theme with Utility

Source: https://fluent2.microsoft.design/get-started/develop

Provide a theme for your website or application using the setTheme utility and webLightTheme.

```typescript
import { setTheme } from '@fluentui/web-components';
import { webLightTheme } from '@fluentui/tokens';

setTheme(webLightTheme);
```

--------------------------------

### Import Entire Fluent UI Android Library

Source: https://fluent2.microsoft.design/get-started/develop

Use this import statement to include all components from the Fluent UI Android library in your project.

```kotlin
import com.microsoft.fluentui
```

--------------------------------

### Import Fluent UI for Objective-C

Source: https://fluent2.microsoft.design/get-started/develop

Import the FluentUI-Swift header to use Fluent components in your Objective-C project.

```objectivec
#import <FluentUI/FluentUI-Swift.h>
```

--------------------------------

### Add fluentui_drawer Module Dependency (Maven)

Source: https://fluent2.microsoft.design/get-started/develop

To use specific modules like fluentui_drawer with Maven, add the module as a dependency. Replace ${version} with the latest version.

```xml
<dependency>
  <groupId>com.microsoft.fluentui</groupId>
  <artifactId>fluentui_drawer</artifactId>
  <version>${version}</version>
</dependency>
```

--------------------------------

### Common Voice and Tone Rules for System Prompts

Source: https://fluent2.microsoft.design/content-engineering

A list of common rules to consider for defining AI voice and tone in system prompts.

```text
- Use contractions (e.g., "can't" not "cannot", "let's" not "let us")
- Use casual, natural language (e.g., "I tried" not "I attempted")
- Avoid discourse markers ("OK," "Sure," "Alright")
- Avoid phrases that don't add value ("Let me know how else I can help!")
- Use sentence case, except for proper nouns
- Use exclamation points sparingly or not at all
- Never use evaluative language ("Great question!", "Awesome job!")
- Only say "Sorry" when the AI has made a mistake
```

--------------------------------

### Import Fluent UI for Swift

Source: https://fluent2.microsoft.design/get-started/develop

Import the FluentUI framework to use Fluent components in your Swift project.

```swift
import FluentUI
```

--------------------------------

### Add Surface Duo SDK Repository (Gradle)

Source: https://fluent2.microsoft.design/get-started/develop

Add this repository to your project-level gradle script to access the Surface Duo SDK.

```gradle
maven {
    url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1"
}
```

--------------------------------

### Add FluentUIAndroid Dependency (Gradle)

Source: https://fluent2.microsoft.design/get-started/develop

Add this line to your build.gradle file to include the main FluentUIAndroid library. Replace $version with the latest version.

```gradle
dependencies {
    ... 
    implementation 'com.microsoft.fluentui:FluentUIAndroid:$version'
    ...
}
```

--------------------------------

### Add fluentui_drawer Module Dependency (Gradle)

Source: https://fluent2.microsoft.design/get-started/develop

To use specific modules like BottomSheet without other dependencies, add the relevant module to your build.gradle. Replace $version with the latest version of the module.

```gradle
dependencies {
    ... 
    implementation 'com.microsoft.fluentui:fluentui_drawer:$version'
    ...
}
```

--------------------------------

### Add FluentUIAndroid Dependency (Maven)

Source: https://fluent2.microsoft.design/get-started/develop

Include the FluentUIAndroid library as a dependency in your Maven project. Replace ${version} with the latest version.

```xml
<dependency>
  <groupId>com.microsoft.fluentui</groupId>
  <artifactId>FluentUIAndroid</artifactId>
  <version>${version}</version>
</dependency>
```

--------------------------------

### Add Surface Duo SDK Dependency (Gradle)

Source: https://fluent2.microsoft.design/get-started/develop

Add this dependency to your module-level build.gradle file to include the dualscreen-layout library. Check for the current SDK version.

```gradle
implementation "com.microsoft.device:dualscreen-layout:1.0.0-alpha01"
```

--------------------------------

### Import Single Fluent UI Android Component

Source: https://fluent2.microsoft.design/get-started/develop

Import a specific component, such as AvatarView, to use it in your Android application.

```kotlin
import com.microsoft.fluentui.persona.AvatarView
```

--------------------------------

### Define Element with Named Imports

Source: https://fluent2.microsoft.design/get-started/develop

Define a Fluent UI element yourself using named imports and the Fluent Design System registry.

```typescript
import { ButtonDefinition, FluentDesignSystem } from '@fluentui/web-components';

ButtonDefinition.define(FluentDesignSystem.registry);
```

--------------------------------

### Using Semantic HTML Elements

Source: https://fluent2.microsoft.design/components/web/react/core/text/usage

By default, Text components render as span elements. Use the 'as' prop to produce semantic HTML elements for better accessibility.

```jsx
<Text as="p">This text is rendered as a paragraph.</Text>
<Text as="h1">This text is rendered as a heading 1.</Text>
```

--------------------------------

### Add CalendarView/DateTimePickerDialog Dependency (Gradle)

Source: https://fluent2.microsoft.design/get-started/develop

If using CalendarView or DateTimePickerDialog manually via AAR, include this dependency in your gradle file.

```gradle
implementation 'com.jakewharton.threetenabp:threetenabp:1.1.0'
```

--------------------------------

### Add PeoplePickerView Dependency (Gradle)

Source: https://fluent2.microsoft.design/get-started/develop

If using the PeoplePickerView component manually via AAR, include this dependency in your gradle file.

```gradle
implementation 'com.splitwise:tokenautocomplete:2.0.8'
```

--------------------------------

### Luminosity Equation for Shadow Opacity

Source: https://fluent2.microsoft.design/elevation

Formulas to calculate shadow opacity on colored surfaces based on the color's luminosity. This ensures consistent elevation perception across different background colors.

```javascript
Luminosity = 0.2126 * R + 0.7152 * G + 0.0722 * B
Shadow 1 opacity = Round ( 42 - 0.116 * luminosity )
Shadow 2 opacity = Round ( 34 - 0.09 * luminosity )
```

--------------------------------

### Aligning Text

Source: https://fluent2.microsoft.design/components/web/react/core/text/usage

The 'align' prop allows you to change text alignment. Left aligned text is generally the easiest to read on web pages.

```jsx
<Text align="start">Left aligned text.</Text>
<Text align="center">Center aligned text.</Text>
<Text align="end">Right aligned text.</Text>
```

--------------------------------

### Customizing Font Family

Source: https://fluent2.microsoft.design/components/web/react/core/text/usage

Use the 'font' prop to choose a font family for the Text component. The 'monospace' font is recommended for representing code.

```jsx
<Text font="monospace">This text uses the monospace font.</Text>
```
Tokens:
Raw