Reference
Filing Fees
Use explicit eyebrow labels only when they add scan value.
CFIUS Design System
CFIUS/USWDS Style Guide
USWDS components and utility classes are required first. Homepage pattern classes can be reused where needed.
This page is the live visual reference for CFIUS USWDS patterns.
Use it when updating landing pages so component structure, spacing rhythm, and interaction states stay consistent across the site.
The style guide runs in a dedicated shell with its own header/footer and an expanded review container for component examples.
Pattern A: Official Government Banner
Shell-level component. Keep `grid-container` alignment on both banner header and expanded content so it tracks with site layout.
Official websites use .gov
A .gov website belongs to an official government organization in the United States.
Secure .gov websites use HTTPS
A lock () or https:// means you’ve safely connected to the .gov website.
Pattern 0: Section Page Header
Use the shared section header wrapper and utility class stack. It now carries a subtle neutral gradient band to improve hierarchy against white content sections, and breadcrumb chrome stays transparent so the band reads cleanly.
Section Title
One sentence summary for section orientation.
Color Tokens
Current token set used by homepage and shared USWDS shell styles.
Primary Navy
#162e51
Action Blue
#005ea2
Focus Gold
#ffbe2e
Canvas White
#ffffff
Border Neutral
#dfe1e2
Text Neutral
#3d4551
Pattern 1: Hero With CTA + Seal
Section
Section Landing Title
One sentence that establishes purpose and user context.
Pattern 2: Informational Card Variations
Use shared USWDS card structures for primary tiles and a summary-box variant for supporting side-card treatment.
Variation A: At a Glance (Eyebrow + Text Link)
At a Glance
Scope
Coverage area
Short summary that helps users scan the section quickly.
Guidance
Reference material
Use equivalent structure for equivalent content intent.
Program
Operational stream
Keep card heading, body, and footer spacing consistent.
Variation B: Related Pages (Optional Eyebrow + Mixed CTA)
Explore Related Pages
Submission Instructions
Default state omits eyebrow labels for cleaner card headers.
Guidance
Frequently Asked Questions
Use mixed CTA verbs per card rather than repeating one generic label.
Variation C: Summary Box Card (Stay Informed)
Stay Informed
Use this variant for supporting guidance and feed-level CTA actions.
View All Recent ActionsFrontmatter hooks for landing child cards: card_eyebrow (optional label), card_cta (custom link text).
Pattern 3: Treasury Accent Card Band
Use the OFAC `treas-accent-card` treatment directly for high-priority task links: solid accent fill, Treasury seal background image, Merriweather headline, and the arrow-circle action link while keeping the four-card horizontal layout.
Get Started
Use this for task-first pages where users need a clear next step.
Pattern 4: Narrative + Summary Split
Our Mission
Use the primary column for long-form narrative and program context. Keep measure readable and avoid over-boxing narrative text when flow readability is the priority.
Policy Callout
Use the summary column for concise policy points or key references.
- Point one
- Point two
- Point three
Pattern 5: Recent Actions Feed + Side Summary
Use cfius-home-updates__meta on the metadata row so date and tag stay aligned on a single line.
Recent Actions
Use for dated actions, releases, and notices. Show the latest 3 by default, with compact category tags for fast scanability.
Pattern 6: Feed Cards (Press/Speeches)
Pattern 7: Accordion Stack
Use for dense policy or guidance content where progressive disclosure improves scanability.
Use this panel for concise process expectations and key timing notes.
- Keep heading labels clear and action-oriented.
- Use plain language and short support bullets.
Use this panel for checklist-style requirements, linked references, and supporting notes.
Pattern 8: Footer Link Groups (Accordion)
Use USWDS accordion markup for grouped footer links on mobile/tablet with chevrons, then switch to a simple top-level footer link row on desktop (`1024px+`).
