Read the source
None of these pages contain a single line of custom CSS or JavaScript. Everything you see is a pf- class from one of the eleven modules.
SaaS landing page
Announcement bar, split hero, feature grid, three-tier pricing, FAQ, CTA band, column footer. The full kit.
Core · Headers · Content · Footers · Utilities
Documentation page
Sticky sidebar navigation built from Core primitives, prose body, code blocks, parameter tables, alerts and an accordion.
Core · Headers · Content · Utilities
Article
Page header with byline, long-form prose at a fixed measure, pull quote, code sample, related reading, slim footer.
Core · Headers · Content · Footers · Utilities
Application shell
Static top bar, stat row, data table with status cells, side panel form. No hero, so no hero styles are downloaded.
Core · Headers · Content · Utilities
Sign-in screen
One centred card on a mesh background. The smallest useful load: two files, no navigation, no footer.
Core · Content
Designer portfolio
Warm dusk theme: serif display face, squared corners, no mesh, generous section rhythm. Fourteen lines of token overrides.
Theme: warm dusk · all five files
Conference
Electric theme: near-black, one loud accent, 30px facet cuts. Schedule tables, speaker grid, three ticket tiers.
Theme: electric · all five files
Restaurant
Cream theme, proving the framework isn't tied to a dark palette. Set menu, hours table and a reservation form.
Theme: cream, light · all five files
Product changelog
Monochrome slate with a monospace display face. Version pills, release entries, deprecation notices and a support-window table.
Theme: slate · all five files
Corporate
A professional services firm: split hero, credibility stats, practice grid, sortable sector table, partner cards and a briefing form with a live character counter.
Real-world layout · all modules
Product page
E-commerce: snap-scrolling gallery, option cards, quantity input group, spec tabs, review breakdown and a mobile bottom bar. No inline styles anywhere.
Real-world layout · all modules
Right to left
The same components under dir="rtl" with Arabic copy. No separate stylesheet and no overrides — every module uses logical properties, so the layout mirrors itself.
dir=rtl · the bundle