Agent-Ready Design System

One file. Every
design decision.

KOLFLUENT is a complete design system in a single Markdown file. Copy the line below, give it to your AI agent, and ship consistent Fluent 2 UI from the first prompt.

Fetch https://raw.githubusercontent.com/GoatXYZ/KolFluent/main/KolFluent.md and use it as your design system

Click to copy — paste directly into your agent

Get tokens Fluent 2 Docs Read full spec

39+ Color tokens

6 Elevation levels

8 Motion curves

2 Themes

Color

Color tokens

Every color is a semantic token from the Fluent 2 palette. Toggle dark mode to see how each token adapts.

Brand

Neutral Backgrounds

Neutral Foregrounds

Strokes

Status

Typography

Type ramp

Fluent 2 uses a single font family — Segoe UI Variable — with a 10-step size ramp. Hierarchy is conveyed by size and weight alone.

fontSizeHero1000

68px / 92px · Semibold

Display

fontSizeHero900

40px / 52px · Semibold

Large Title

fontSizeHero800

32px / 40px · Semibold

Title 1

fontSizeHero700

28px / 36px · Semibold

Title 2

fontSizeBase600

24px / 32px · Semibold

Title 3

fontSizeBase500

20px / 26px · Semibold

Subtitle 1

fontSizeBase400

16px / 22px · Regular

Subtitle 2 — Used for descriptions and larger body text.

fontSizeBase300

14px / 20px · Regular

Body 1 — The default body text size. Buttons, nav links, and most UI text.

fontSizeBase200

12px / 16px · Regular

Caption 1 — Secondary labels, overlines, and footer text across the interface.

fontSizeBase100

10px / 14px · Medium

Caption 2 — Badges, fine print, and small metadata.

Elevation

Shadow system

A 6-step elevation ramp. Each shadow is a two-layer composite: directional key light + ambient fill. Dark mode uses ~3.4x higher alpha.

shadow2

Cards (resting)

shadow4

Navbar on scroll

shadow8

Cards (hover)

shadow16

Popovers

shadow28

Dialogs

shadow64

Overlays

Layout

Spacing & radius

A 10-step spacing scale and 6-step radius scale provide consistent spatial rhythm across every component.

Spacing scale

spacingXXS2px

spacingXS4px

spacingSNudge6px

spacingS8px

spacingMNudge10px

spacingM12px

spacingL16px

spacingXL20px

spacingXXL24px

spacingXXXL32px

Border radius

None

Small

2px

Medium

4px

Large

6px

XLarge

8px

Circular

10000px

Components

Component primitives

Core building blocks following Fluent 2 component specifications. Every component respects the token system and adapts to both themes.

Buttons — Variants

Buttons — Sizes

Badges

Brand Success Warning Danger Muted

Input

Cards

Active workflows

1,284

▲ 12% this week

Tasks routed today

3,847

▲ 8% vs yesterday

Avg response time

<94ms

99.97% uptime SLA

Form Controls

Inputs & selections

Form primitives built on Fluent 2 input patterns. Every control shares the same focus ring, disabled state, and theme adaptation.

Label + Input

Workflow name

Select

Environment

Textarea

Description

Disabled states

Switch

Auto-deploy on push Email notifications Disabled switch

Checkboxes

Run tests before deploy Enable caching Generate source maps

Radio group

US East EU West Asia Pacific

Feedback & Display

Progress, avatars & dividers

Visual feedback components and layout helpers. Progress tracks completion, avatars represent people, dividers separate content.

Progress

Build progress25%

Tests passing68%

Deploy complete100%

Avatars — Sizes

S AB CD EF

Dividers

Default

Brand

Subtle

Vertical: Item AItem BItem C

Skeleton Loading

Navigation

Tabs & menus

Compound navigation components for organizing content and actions. Built with ARIA roles for accessibility.

Tabs

Workflow Overview

Your workflow is running smoothly. 1,284 active instances across 3 regions with 99.97% uptime.

Dialog

Accent Stripe

Note

The accent stripe utility adds a branded left border to any block element, ideal for callouts and important notices.

Depth

Elevation in practice

Fluent 2 uses elevation to convey the layered nature of the UI. Higher elements cast deeper shadows and demand more attention.

Surface

shadow2

Cards, list items — resting content surfaces.

Raised

shadow8

Hovered cards, dropdowns, floating toolbars.

Floating

shadow16

Popovers, tooltips, teaching callouts.

Dialog

shadow28

Modal dialogs, command bars, side panels.

Materials

Acrylic & Mica

Fluent 2 materials use translucency and blur to create depth and context. Acrylic for in-app surfaces, Mica for background tinting.

Acrylic Light

rgba(255,255,255,0.45)

Acrylic Dark

rgba(0,0,0,0.35)

Navbar material example

LIGHT MODE

rgba(255,255,255,0.72)

saturate(180%) blur(20px)

DARK MODE

rgba(41,41,41,0.72)

saturate(180%) blur(20px)

Motion

Duration & easing

Eight duration tokens and eight easing curves. Hover each card to see the timing in action.

Duration tokens

UltraFast

50ms

Faster

100ms

Fast

150ms

Normal

200ms

Gentle

250ms

Slow

300ms

Slower

400ms

UltraSlow

500ms

Easing curves

DecelerateMax

cubic-bezier(0.1, 0.9, 0.2, 1)

DecelerateMid

cubic-bezier(0, 0, 0, 1)

AccelerateMax

cubic-bezier(1, 0, 1, 1)

EasyEase

cubic-bezier(0.33, 0, 0.67, 1)

Get Started

Quick-start tokens

Copy this CSS block into any project to bootstrap the KolFluent design system. All tokens included.

Light theme — :root

:root {
  --colorBrandBackground: #0f6cbd;
  --colorBrandBackgroundHover: #115ea3;
  --colorBrandBackgroundPressed: #0c3b5e;
  --colorBrandBackground2: #ebf3fc;
  --colorBrandForeground1: #0f6cbd;
  --colorBrandForeground2: #115ea3;
  --colorBrandForegroundLink: #115ea3;
  --colorBrandStroke1: #0f6cbd;
  --colorNeutralBackground1: #ffffff;
  --colorNeutralBackground2: #fafafa;
  --colorNeutralBackground3: #f5f5f5;
  --colorNeutralForeground1: #242424;
  --colorNeutralForeground2: #424242;
  --colorNeutralForeground3: #616161;
  --colorNeutralStroke1: #d1d1d1;
  --colorNeutralStroke2: #e0e0e0;
  --fontFamilyBase: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  --fontSizeBase300: 14px;
  --fontSizeBase400: 16px;
  --fontSizeBase600: 24px;
  --borderRadiusMedium: 4px;
  --borderRadiusXLarge: 8px;
  --shadow2: 0px 1px 2px rgba(0,0,0,0.14), 0px 0px 2px rgba(0,0,0,0.12);
  --shadow8: 0px 4px 8px rgba(0,0,0,0.14), 0px 0px 2px rgba(0,0,0,0.12);
  /* See KolFluent.md for the complete token set */
}

Dark theme override

[data-theme="dark"] {
  --colorBrandBackground: #115ea3;
  --colorBrandBackgroundHover: #0f6cbd;
  --colorBrandBackground2: #0a2e4a;
  --colorBrandForeground1: #479ef5;
  --colorBrandForeground2: #62abf5;
  --colorBrandForegroundLink: #479ef5;
  --colorBrandStroke1: #479ef5;
  --colorNeutralBackground1: #292929;
  --colorNeutralBackground2: #1f1f1f;
  --colorNeutralBackground3: #141414;
  --colorNeutralForeground1: #ffffff;
  --colorNeutralForeground2: #d6d6d6;
  --colorNeutralForeground3: #adadad;
  --colorNeutralStroke1: #666666;
  --colorNeutralStroke2: #525252;
  --shadow2: 0px 1px 2px rgba(0,0,0,0.48), 0px 0px 2px rgba(0,0,0,0.24);
  --shadow8: 0px 4px 8px rgba(0,0,0,0.48), 0px 0px 2px rgba(0,0,0,0.24);
  /* See KolFluent.md for the complete token set */
}

For the complete token set with all 39+ color tokens, 10 font sizes, 8 durations, 8 curves, and full dark theme — see the specification.

Read KolFluent.md

One file. Everydesign decision.

Color tokens

Brand

Neutral Backgrounds

Neutral Foregrounds

Strokes

Status

Type ramp

Shadow system

Spacing & radius

Spacing scale

Border radius

Component primitives

Inputs & selections

Progress, avatars & dividers

Tabs & menus

Elevation in practice

Acrylic & Mica

Navbar material example

Duration & easing

Duration tokens

Easing curves

Quick-start tokens

One file. Every
design decision.