Color

Visual hierarchy with neutrals

Use lighter neutrals for surfaces that need attention. The eye goes to the most important area without any added color.

Shared colors are the same across Microsoft 365. High-value components (avatar, calendar, badge) use them so people recognize a function from one product to the next. Use them sparingly, only to highlight important areas.

Shared colors in dark mode

In dark mode, shared colors shift in saturation and lightness to reduce eye strain and keep enough contrast. They are not simply inverted.

Semantic colors

Some shared colors are reserved for feedback, status or urgency, based on real-world associations: red = danger, yellow/orange = caution, green = positive. Always pair them with an icon or text to reduce cognitive load.

The brand color makes a product recognizable at a glance. Apply it to specific areas to add emphasis and help people find their way. Each brand is a 16-step ramp; switching brands only takes data-brand.

The default Yugen UI brand is Sakura 桜 #C2347A, a deep cherry blossom pink. It reaches 5.16:1 with white text, and its hue sits about 30° away from danger red, so a primary button is never mistaken for a destructive action. The light steps 130–160 are the petal tones (#FFA7C9 → #FDEDF3).

// index.html: change the brand for the whole app
<html data-brand="web">

// One region only (also set data-theme if it sits inside a different theme)
<section data-theme="light" data-brand="teams">...</section>

On the web, components get darker as you interact: lightest at rest, darker on hover, darkest when pressed or selected. (Windows does the opposite: controls get lighter as you interact.)

Focus state

With keyboard focus, the control color stays the same. Instead the control gets a thicker outline (2px colorStrokeFocus2), so keyboard interaction looks different from mouse interaction. Press Tab to try it.

In Fluent 2, gradients are expressive: they appear in illustrations, heroes and landing pages to suggest light and movement. Gradients are not functional colors, so never use them for controls or states.

import { GradientText, WavyUnderline, BloomArt } from "@/components/ui";

<h1 className="relative inline-block font-display text-display">
  <GradientText gradient="sakura">Yugen UI</GradientText>
  <WavyUnderline gradient="sakura" className="absolute inset-x-0 -bottom-4 h-5" />
</h1>

<div className="h-28 rounded-2xlarge bg-gradient-dusk" />

1. Keep enough contrast for people with low vision or color blindness: text ≥ 4.5:1 (large text ≥ 3:1), UI components ≥ 3:1.
2. Where you can, let people pick the color scheme that suits them (light / dark / brand).
3. Don't use color as the only way to convey meaning. Always add text, an icon or a shape.

The table below is computed live from the current tokens. Switch the theme at the top to check dark mode.