f-ui

Use sentence case for in-app titles, labels, and buttons — Title Case is for docs and registry titles only.

Use this page when writing or reviewing in-app text for cards, sections, toolbars, buttons, and alerts. f-ui follows Ant Design Copywriting and Microsoft sentence-style capitalization: sentence case for UI chrome.

Sentence case means capitalize only the first word (plus proper nouns and acronyms) — Shipping label, not Shipping Label. Title Case capitalizes major words — reserved for documentation pages and registry display titles, not app chrome.

Locked Rule

Surface	Capitalization
Card / section titles (`GroupHeading`, region toolbar titles, FormPanel titles)	Sentence case — `Line items`, `Shipping label`, `Extracted fields`
Buttons, menus, labels, Alert titles, dialog titles	Sentence case — `Submit for approval`, `Create order`
Product / brand / trademark names	Keep the official form — `Microsoft Word`, product full names
Acronyms	Keep established form — `API`, `USD`, `SKU`, `PO`
Status / enum values in tags or tables	Domain spelling — `Approved`, `Pending finance` (data, not chrome titles)
Docs MDX front matter / registry display titles	Title Case — documentation / registry only (not app chrome)
CSS `text-transform: uppercase` on section titles	Forbidden

Do not mix sentence case and Title Case for section titles on the same page (e.g. Line items next to Shipping Label).

Examples

Card Title And Buttons

Left side uses Title Case chrome and CSS uppercase. Right side is what f-ui ships: sentence case titles and buttons, no ALL CAPS section chips.

Wrong

Shipping Label

Title Case chrome + ALL CAPS section title

Right

Shipping label

Sentence case title and buttons — no CSS uppercase

import { Button } from "@/components/ui/button";
import { DesignCompare } from "@/demos/_design/design-compare";

export function SentenceCaseDemo() {
  return (
    <DesignCompare
      wrong={
        <div className="space-y-3">
          <h3 className="text-sm font-semibold tracking-wide text-muted-foreground uppercase">
            Shipping Label
          </h3>
          <div className="flex flex-wrap gap-2">
            <Button>Submit For Approval</Button>
            <Button variant="outline">Lock The Period</Button>
          </div>
          <p className="text-xs text-muted-foreground">
            Title Case chrome + ALL CAPS section title
          </p>
        </div>
      }
      right={
        <div className="space-y-3">
          <h3 className="text-sm font-medium text-muted-foreground">
            Shipping label
          </h3>
          <div className="flex flex-wrap gap-2">
            <Button>Submit for approval</Button>
            <Button variant="outline">Lock the period</Button>
          </div>
          <p className="text-xs text-muted-foreground">
            Sentence case title and buttons — no CSS uppercase
          </p>
        </div>
      }
    />
  );
}

Nav Group Labels

Sidebar and filter group labels follow the same rule as section titles. Left side shouts with CSS uppercase; right side uses muted sentence case.

Wrong

CSS uppercase nav group chips

Right

Sentence case group labels — no uppercase tracking

import { DesignCompare } from "@/demos/_design/design-compare";

export function SentenceCaseNavGroupDemo() {
  return (
    <DesignCompare
      wrong={
        <div className="space-y-3">
          <nav className="space-y-3 rounded-lg border bg-muted/20 p-3">
            <div>
              <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                Catalog
              </p>
              <ul className="mt-1.5 space-y-1 text-sm">
                <li>Orders</li>
                <li>Invoices</li>
              </ul>
            </div>
            <div>
              <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                Settings
              </p>
              <ul className="mt-1.5 space-y-1 text-sm">
                <li>Users</li>
                <li>Preferences</li>
              </ul>
            </div>
          </nav>
          <p className="text-xs text-muted-foreground">
            CSS uppercase nav group chips
          </p>
        </div>
      }
      right={
        <div className="space-y-3">
          <nav className="space-y-3 rounded-lg border bg-muted/20 p-3">
            <div>
              <p className="text-sm font-medium text-muted-foreground">
                Catalog
              </p>
              <ul className="mt-1.5 space-y-1 text-sm">
                <li>Orders</li>
                <li>Invoices</li>
              </ul>
            </div>
            <div>
              <p className="text-sm font-medium text-muted-foreground">
                Settings
              </p>
              <ul className="mt-1.5 space-y-1 text-sm">
                <li>Users</li>
                <li>Preferences</li>
              </ul>
            </div>
          </nav>
          <p className="text-xs text-muted-foreground">
            Sentence case group labels — no uppercase tracking
          </p>
        </div>
      }
    />
  );
}

Button Labels

Button copy is verb-first sentence case — not Title Case. Left side capitalizes every word; right side capitalizes only the first word (plus proper nouns / acronyms).

Wrong

Purchase request

Title Case on every button label

Right

Purchase request

Verb-first sentence case — capitalize first word only

import { Button } from "@/components/ui/button";
import { DesignCompare } from "@/demos/_design/design-compare";

export function SentenceCaseButtonLabelsDemo() {
  return (
    <DesignCompare
      wrong={
        <div className="space-y-3">
          <p className="text-sm font-medium text-muted-foreground">
            Purchase request
          </p>
          <div className="flex flex-wrap gap-2">
            <Button>Create Order</Button>
            <Button variant="outline">Submit For Approval</Button>
            <Button variant="ghost">Lock The Period</Button>
          </div>
          <p className="text-xs text-muted-foreground">
            Title Case on every button label
          </p>
        </div>
      }
      right={
        <div className="space-y-3">
          <p className="text-sm font-medium text-muted-foreground">
            Purchase request
          </p>
          <div className="flex flex-wrap gap-2">
            <Button>Create order</Button>
            <Button variant="outline">Submit for approval</Button>
            <Button variant="ghost">Lock the period</Button>
          </div>
          <p className="text-xs text-muted-foreground">
            Verb-first sentence case — capitalize first word only
          </p>
        </div>
      }
    />
  );
}

More Examples

Wrong (Title Case chrome)	Right (sentence case)
Shipping Label	Shipping label
Order Context	Order context
Link Lines	Link lines
Submit For Approval	Submit for approval
Optional: Lock The Period	Optional: lock the period

Single-word titles (Invoices, Orders, Period, Validation) look the same in either convention — still treat them as sentence case strings (first letter capital only because they start the title).

Proper Nouns Inside Sentence Case

Keep capitalized proper nouns and role names:

Order context (Finance) — Finance is the persona name
Synced from Salesforce — product name

Document-type phrases (shipping label, line items) are not trademarks → lowercase after the first word.

Why Not SAP Title Case?

SAP Fiori often uses title case for short labels and headings. f-ui’s interaction north star is Ant Design / Fluent-class enterprise UI, which standardizes on sentence case. Do not flip card titles to Title Case to “match SAP.”

Checklist

New GroupHeading / region title is sentence case in source.
No CSS uppercase on section titles.
Buttons and Alert titles match sentence case.
Docs/registry titles remain Title Case (do not “fix” them to match app chrome).
Same Object Page does not mix Line items with Shipping Label.

Locked Rule

Surface	Capitalization
Card / section titles (`GroupHeading`, region toolbar titles, FormPanel titles)	Sentence case — `Line items`, `Shipping label`, `Extracted fields`
Buttons, menus, labels, Alert titles, dialog titles	Sentence case — `Submit for approval`, `Create order`
Product / brand / trademark names	Keep the official form — `Microsoft Word`, product full names
Acronyms	Keep established form — `API`, `USD`, `SKU`, `PO`
Status / enum values in tags or tables	Domain spelling — `Approved`, `Pending finance` (data, not chrome titles)
Docs MDX front matter / registry display titles	Title Case — documentation / registry only (not app chrome)
CSS `text-transform: uppercase` on section titles	Forbidden

Do not mix sentence case and Title Case for section titles on the same page (e.g. Line items next to Shipping Label).

Examples

Card Title And Buttons

Left side uses Title Case chrome and CSS uppercase. Right side is what f-ui ships: sentence case titles and buttons, no ALL CAPS section chips.

Wrong

Shipping Label

Title Case chrome + ALL CAPS section title

Right

Shipping label

Sentence case title and buttons — no CSS uppercase

import { Button } from "@/components/ui/button";
import { DesignCompare } from "@/demos/_design/design-compare";

export function SentenceCaseDemo() {
  return (
    <DesignCompare
      wrong={
        <div className="space-y-3">
          <h3 className="text-sm font-semibold tracking-wide text-muted-foreground uppercase">
            Shipping Label
          </h3>
          <div className="flex flex-wrap gap-2">
            <Button>Submit For Approval</Button>
            <Button variant="outline">Lock The Period</Button>
          </div>
          <p className="text-xs text-muted-foreground">
            Title Case chrome + ALL CAPS section title
          </p>
        </div>
      }
      right={
        <div className="space-y-3">
          <h3 className="text-sm font-medium text-muted-foreground">
            Shipping label
          </h3>
          <div className="flex flex-wrap gap-2">
            <Button>Submit for approval</Button>
            <Button variant="outline">Lock the period</Button>
          </div>
          <p className="text-xs text-muted-foreground">
            Sentence case title and buttons — no CSS uppercase
          </p>
        </div>
      }
    />
  );
}

Nav Group Labels

Sidebar and filter group labels follow the same rule as section titles. Left side shouts with CSS uppercase; right side uses muted sentence case.

Wrong

CSS uppercase nav group chips

Right

Sentence case group labels — no uppercase tracking

import { DesignCompare } from "@/demos/_design/design-compare";

export function SentenceCaseNavGroupDemo() {
  return (
    <DesignCompare
      wrong={
        <div className="space-y-3">
          <nav className="space-y-3 rounded-lg border bg-muted/20 p-3">
            <div>
              <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                Catalog
              </p>
              <ul className="mt-1.5 space-y-1 text-sm">
                <li>Orders</li>
                <li>Invoices</li>
              </ul>
            </div>
            <div>
              <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                Settings
              </p>
              <ul className="mt-1.5 space-y-1 text-sm">
                <li>Users</li>
                <li>Preferences</li>
              </ul>
            </div>
          </nav>
          <p className="text-xs text-muted-foreground">
            CSS uppercase nav group chips
          </p>
        </div>
      }
      right={
        <div className="space-y-3">
          <nav className="space-y-3 rounded-lg border bg-muted/20 p-3">
            <div>
              <p className="text-sm font-medium text-muted-foreground">
                Catalog
              </p>
              <ul className="mt-1.5 space-y-1 text-sm">
                <li>Orders</li>
                <li>Invoices</li>
              </ul>
            </div>
            <div>
              <p className="text-sm font-medium text-muted-foreground">
                Settings
              </p>
              <ul className="mt-1.5 space-y-1 text-sm">
                <li>Users</li>
                <li>Preferences</li>
              </ul>
            </div>
          </nav>
          <p className="text-xs text-muted-foreground">
            Sentence case group labels — no uppercase tracking
          </p>
        </div>
      }
    />
  );
}

Button Labels

Button copy is verb-first sentence case — not Title Case. Left side capitalizes every word; right side capitalizes only the first word (plus proper nouns / acronyms).

Wrong

Purchase request

Title Case on every button label

Right

Purchase request

Verb-first sentence case — capitalize first word only

import { Button } from "@/components/ui/button";
import { DesignCompare } from "@/demos/_design/design-compare";

export function SentenceCaseButtonLabelsDemo() {
  return (
    <DesignCompare
      wrong={
        <div className="space-y-3">
          <p className="text-sm font-medium text-muted-foreground">
            Purchase request
          </p>
          <div className="flex flex-wrap gap-2">
            <Button>Create Order</Button>
            <Button variant="outline">Submit For Approval</Button>
            <Button variant="ghost">Lock The Period</Button>
          </div>
          <p className="text-xs text-muted-foreground">
            Title Case on every button label
          </p>
        </div>
      }
      right={
        <div className="space-y-3">
          <p className="text-sm font-medium text-muted-foreground">
            Purchase request
          </p>
          <div className="flex flex-wrap gap-2">
            <Button>Create order</Button>
            <Button variant="outline">Submit for approval</Button>
            <Button variant="ghost">Lock the period</Button>
          </div>
          <p className="text-xs text-muted-foreground">
            Verb-first sentence case — capitalize first word only
          </p>
        </div>
      }
    />
  );
}

More Examples

Wrong (Title Case chrome)	Right (sentence case)
Shipping Label	Shipping label
Order Context	Order context
Link Lines	Link lines
Submit For Approval	Submit for approval
Optional: Lock The Period	Optional: lock the period

Proper Nouns Inside Sentence Case

Keep capitalized proper nouns and role names:

Order context (Finance) — Finance is the persona name
Synced from Salesforce — product name

Document-type phrases (shipping label, line items) are not trademarks → lowercase after the first word.

Why Not SAP Title Case?

Checklist

New GroupHeading / region title is sentence case in source.
No CSS uppercase on section titles.
Buttons and Alert titles match sentence case.
Docs/registry titles remain Title Case (do not “fix” them to match app chrome).
Same Object Page does not mix Line items with Shipping Label.

Sentence Case

Locked Rule

Examples

Card Title And Buttons

Shipping Label

Shipping label

Nav Group Labels

Button Labels

More Examples

Proper Nouns Inside Sentence Case

Why Not SAP Title Case?

Checklist

See Also

On this page

Sentence Case

Locked Rule

Examples

Card Title And Buttons

Shipping Label

Shipping label

Nav Group Labels

Button Labels

More Examples

Proper Nouns Inside Sentence Case

Why Not SAP Title Case?

Checklist

See Also

On this page