FDIC Design System

Appearance

Prose ​

Prose is the FDIC design system's authored-content layer. Apply the .prose container to long-form content when you need readable defaults, consistent vertical rhythm, and specialized patterns for references, navigation, supporting content, and technical examples.

Authored-content topic

Typography defines the underlying type system. Prose documents how that system is applied to real content: article layouts, semantic HTML, editorial utilities, and the specialized classes that only make sense inside long-form documents.

Relationship to Typography ​

  • Typography in Foundations owns the baseline rules: type scale, line heights, heading hierarchy, inline semantics, link principles, and reading measure.
  • Prose in Components owns the opt-in content container: .prose, lead, container-scoped spacing behavior, rendered semantic HTML specimens, and document patterns such as callouts, table wrappers, TOCs, footnotes, and copy-enabled code blocks.
  • If guidance still matters outside a .prose container, it probably belongs in Typography. If it exists because content is wrapped in .prose, it belongs here.

When to use ​

  • Long-form editorial or policy content such as guidance pages, procedures, explainers, and technical references.
  • Mixed semantic HTML content where headings, lists, blockquotes, tables, inline code, and citations need to work together without page-by-page custom styling.
  • Documents with supporting patterns such as callouts, TOCs, footnotes, details/summary, and code specimens.

When not to use ​

  • Dense application UI where layouts are component-driven rather than article-driven.
  • Single-purpose interface elements like buttons, menus, or cards that should be documented as standalone components.
  • Pages that need bespoke layout rules incompatible with the default reading measure or vertical rhythm.

Basic usage ​

html
<article class="prose">
  <p class="lead">This introductory paragraph summarizes the content.</p>
  <h2>Coverage overview</h2>
  <p>Body content inherits the prose type and spacing defaults.</p>
</article>

Prose specimen ​

Use the prose container for content that should read clearly, scan predictably, and hold together across headings, lists, quotations, references, and supporting patterns.

Headings and body text

Within .prose, headings, paragraphs, lists, and inline elements work together with a consistent reading measure and spacing rhythm. Links remain descriptive and visible, inline code is distinct without relying on color alone, and semantic elements such as FDIC, Tab, and highlighted findings remain readable inside running text.

Typography provides the baseline. Prose turns those decisions into a usable authored-content system.

FDIC design system documentation principle

Supporting patterns

Specialized patterns such as callouts, code blocks, disclosure widgets, and pull quotes should be used when they improve comprehension, not just to create visual variety.

  • Use callouts for short, high-signal supporting messages.
  • Use <details> when readers should opt in to additional material.
  • Use asides for supplementary content that still reads on its own.

References and navigation

Long documents often need structured navigation and citation support. Prose includes patterns for tables of contents, footnotes, scrollable tables, and technical code examples so those needs can be met without inventing page-specific styling every time.

Semantic HTML specimens ​

Use these specimens to see how baseline semantic HTML renders inside .prose. Typography documents the rules; this section shows how those rules behave in running content.

Inline semantics ​

The FDIC may ask applicants to press Tab to move between fields, review highlighted requirements, and confirm that all account details are accurate before submission.

Supporting notes can appear in reduced text. If guidance changes, outdated wording may be shown as deleted: previous language and replaced with inserted: updated language.

A routing number is a bank identifier. In technical examples, accountStatus might produce verified, and the calculated result can appear in approved.

Payment is due by , and reference markers such as H2O or x2 should not distort the line height.

html
<article class="prose">
  <p>
    The <abbr title="Federal Deposit Insurance Corporation">FDIC</abbr>
    may ask applicants to press <kbd>Tab</kbd> to move between fields,
    review <mark>highlighted requirements</mark>, and confirm that
    <q>all account details are accurate</q> before submission.
  </p>
  <p>
    <small>Supporting notes can appear in reduced text.</small>
    If guidance changes, outdated wording may be shown as
    <del><span class="sr-only">deleted: </span>previous language</del>
    and replaced with
    <ins><span class="sr-only">inserted: </span>updated language</ins>.
  </p>
  <p>
    A <dfn>routing number</dfn> is a bank identifier. In technical
    examples, <var>accountStatus</var> might produce <samp>verified</samp>,
    and the calculated result can appear in
    <output for="example-status">approved</output>.
  </p>
</article>

Quoted content ​

Clear language and predictable structure reduce mistakes in high-stakes public-service workflows.

FDIC content principle

Inline quotations such as review before you submit should stay inside running text and not be styled like pulled-out content.

html
<article class="prose">
  <blockquote>
    <p>
      Clear language and predictable structure reduce mistakes in
      high-stakes public-service workflows.
    </p>
    <footer><cite>FDIC content principle</cite></footer>
  </blockquote>

  <p>
    Inline quotations such as <q>review before you submit</q> should stay
    inside running text and not be styled like pulled-out content.
  </p>
</article>

Authoring guidance ​

  • Use <blockquote> only for actual quoted material, not for visual indentation.
  • Use <footer><cite> for attribution when a quotation needs a source.
  • Use <q> for short inline quotations that belong inside a paragraph.
  • Do not rely on <mark> color alone to communicate importance; the surrounding sentence should explain why the text matters.
  • Use <del> and <ins> only when the change itself is meaningful to the reader.

Horizontal rules ​

Use <hr> to mark a thematic break between sections of content. Inside .prose, horizontal rules receive extra vertical spacing (--fdic-spacing-3xl / 3rem above and below) to clearly separate major content groups.

html
<article class="prose">
  <p>End of one topic.</p>
  <hr />
  <p>Beginning of a new topic.</p>
</article>

Horizontal rules signal a shift in topic or scope. They carry more visual weight than a heading alone, so use them sparingly — typically between major thematic sections rather than between every heading.

After the rule, the reader understands they are entering a distinct part of the document.

When to use ​

  • Between major thematic sections that are conceptually independent.
  • Before a footnotes section (the footnotes component includes its own narrower <hr>).

When not to use ​

  • Between every heading — headings already create visual separation.
  • As a decorative element — use only when there is a genuine shift in topic.

Prose topic map ​

Status and emphasis

Callouts

Admonitions and supplementary messages with clear severity and accessibility guidance.

Data in content

Tables

Scrollable data tables with captions, numeric alignment, and preserved semantics.

Technical specimens

Code blocks

Inline code, fenced blocks, copy affordances, and wrapping options for exact text.

Supporting content

Details / Accordion and Aside / Pull Quote

Patterns for optional reading, supplementary context, and pull-out content.

References and navigation

Table of contents and Footnotes

Document-level navigation and bidirectional citation patterns for long-form pages.

Measurement

Progress and meter

Native progress indicators and gauges for authored technical and reporting content.

Authoring rules ​

  • Keep long-form pages structurally simple: one h1, sequential headings, clear section boundaries.
  • Prefer semantic HTML over utility-heavy wrappers whenever the native element already communicates the meaning.
  • Use Prose patterns to improve comprehension or navigation, not to decorate otherwise plain content.
  • Keep print, reduced motion, keyboard use, and screen-reader behavior in scope for every specialized pattern.
  • Typography for the foundational type rules and reading principles
  • Accessibility for container-wide accessibility requirements that apply inside .prose