COMPONENT LIBRARY
Components and page blocks
A practical reference for the Oatmeal pieces available in Forward. Open any component for its live preview, import, and main API.
Elements
16
AnnouncementBadge
A compact linked announcement label.
Button
Rounded actions for buttons and links.
Container
The shared responsive content width wrapper.
Document
Typography primitives for legal and long-form content.
EmailSignupForm
An email capture form with an example action.
Eyebrow
Small contextual label above a heading.
Heading
Mona Sans display heading with responsive scale.
InstallCommand
A compact terminal-style installation command.
Link
Styled inline and standalone text links.
LogoGrid
A flexible grid for partner logos.
Main
The semantic site-main wrapper.
Screenshot
An image frame for product visuals.
Section
Section spacing and layout primitive.
Subheading
Supporting heading treatment.
Text
Body copy with the Forward reading scale.
Wallpaper
Decorative background surface.
Heroes
8
HeroCenteredWithDemo
Centered launch message with an embedded product preview.
HeroCenteredWithPhoto
Centered introduction paired with a photo.
HeroLeftAlignedWithDemo
Editorial left-aligned hero and product demo.
HeroLeftAlignedWithPhoto
Left-aligned message with image media.
HeroSimpleCentered
Focused centered hero for concise pages.
HeroSimpleLeftAligned
Focused left-aligned hero for concise pages.
HeroTwoColumnWithPhoto
Two-column launch hero with photo.
HeroWithDemoOnBackground
Hero with a demo placed on a colored surface.
Features
6
BrandsCardsMultiColumn
A proof-point card grid for familiar brands.
FeaturesStackedAlternatingWithDemos
Alternating feature stories with screenshots.
FeaturesThreeColumn
Three concise feature explanations.
FeaturesThreeColumnWithDemos
Three feature cards with product previews.
FeaturesTwoColumnWithDemos
Two feature stories with demos.
FeaturesWithLargeDemo
Feature introduction anchored by one large demo.
Pricing
4
Testimonials
3
Stats
3
Teams
2
Documents
4
Calls to action
2
Forward additions
3
Icons
112
AlertTriangleIcon
ArchiveBoxIcon
ArchiveBoxXIcon
ArrowDownArrowUpIcon
ArrowLeftArrowRightIcon
ArrowNarrowDownIcon
ArrowNarrowLeftIcon
ArrowNarrowRightIcon
ArrowNarrowUpIcon
AtSymbolIcon
BanknotesIcon
BeakerIcon
BellIcon
BookOpenIcon
BriefcaseIcon
Building2Icon
BuildingIcon
BuildingLibraryIcon
BuildingStorefrontIcon
CalendarIcon
CameraIcon
CameraVideoIcon
ChartBarIcon
ChartLineIcon
ChartPieCircleIcon
ChatBubbleCircleEllipsisIcon
ChatBubbleCircleIcon
ChatBubbleCircleStackedIcon
ChatBubbleRectangleEllipsisIcon
ChatBubbleRectangleIcon
CheckmarkIcon
ChevronIcon
ClipboardIcon
ClockIcon
CloudArrowDownIcon
CloudArrowUpIcon
CloudIcon
CodeSquareIcon
CogIcon
CompassIcon
CpuIcon
Document2StackedIcon
DocumentIcon
EducationCapIcon
FilterIcon
FingerprintIcon
FlagIcon
FolderArrowLeftIcon
FolderArrowRightIcon
FolderIcon
FolderMinusIcon
FolderPlusIcon
GitBranchIcon
GitDiffIcon
GitMergeIcon
GitPullIcon
HardDriveIcon
HeartIcon
HeartPulseIcon
HomeIcon
InboxIcon
InformationCircleIcon
KeyIcon
LanguageIcon
LifebuoyIcon
LightBulbIcon
LightingBoltIcon
LockIcon
LockOpenIcon
MagnifyingGlassIcon
MailIcon
MapIcon
MapPinIcon
MicrophoneIcon
MinusCircleIcon
MinusIcon
MoonIcon
NewspaperIcon
PaperclipIcon
PencilOnSquareIcon
PhotoIcon
PlusCircleIcon
PlusIcon
QuestionCircleIcon
RepeatIcon
RocketIcon
ShieldExclamationIcon
ShoppingBagIcon
ShoppingCartIcon
SlidersIcon
FacebookIcon
GitHubIcon
InstagramIcon
XIcon
YouTubeIcon
SparklesIcon
Square3Stack3dIcon
Squares2StackedIcon
StarIcon
SunIcon
TagIcon
TargetIcon
TerminalIcon
TicketIcon
TrashIcon
UiLayoutIcon
UnorderedListIcon
User2Icon
UserArrowLeftIcon
UserArrowRightIcon
UserCircleDottedIcon
UserCircleIcon
PAGE RECIPES
Original Oatmeal compositions
404 01
A simple recovery page.
HeroSimpleCentered → Heading → Text → Button
404 02
A visual recovery page.
HeroCenteredWithPhoto → Heading → Button
About 01
A company narrative and social proof.
HeroCenteredWithPhoto → StatsFourColumns → TeamThreeColumnGrid
About 02
A people-led company introduction.
HeroLeftAlignedWithPhoto → TestimonialsThreeColumnGrid → TeamFourColumnGrid
About 03
An editorial company story.
HeroSimpleLeftAligned → StatsThreeColumnWithDescription → CallToActionSimple
Homepage 01
A product-led landing page.
HeroCenteredWithDemo → FeaturesThreeColumn → PricingMultiTier
Homepage 02
A visual product landing page.
HeroWithDemoOnBackground → FeaturesWithLargeDemo → TestimonialsThreeColumnGrid
Homepage 03
Forward’s original starting composition.
HeroCenteredWithDemo → FeaturesStackedAlternatingWithDemos → CallToActionSimpleCentered
Pricing 01
A clear single-plan offer.
PricingSingleTierTwoColumn → FAQsAccordion → CallToActionSimple
Pricing 02
A multi-tier pricing page.
PricingHeroMultiTier → PricingMultiTier → PlanComparisonTable
Privacy policy 01
A calm, readable legal page.
DocumentCentered → Heading → Text → Document → SiteHeader → Breadcrumbs
Sign in 01
A focused account entry page.
HeroSimpleCentered → EmailSignupForm → FooterWithLinksAndSocialIcons
Sign up 01
A focused account creation page.
HeroSimpleCentered → EmailSignupForm → FooterWithLinksAndSocialIcons
Prompt a new page
Create a new Forward page. Reference Oatmeal composition: [composition name] Reuse components: [component names] New route: [/your-route] Breadcrumb hierarchy: [Forward / …] Content changes: [describe copy, imagery, and calls to action] Retain Forward’s Mauve palette, Mona Sans for display type, Inter for UI/body copy, rounded surfaces, responsive behavior, dark mode, shared header/footer, and larger type scale. Do not copy another brand’s visual system.