Components

Live FG UI component catalogue.

The complete reference for shared controls, states and product patterns. Everything on this page is rendered by FG UI itself.

Foundation

Brand tokens and typography

One visual base for every FG Tools product.

Manrope everywhere

Core colours

FG Blue
#0F79CC
Soft Blue
#eaf6ff
Strong Text
#172b3a
Page
#f5f8fb
Surface
#ffffff
Border
#dce5ec
Success
#19eea5
Warning
#ffcd19
Danger
#ff4352
Info
#197cc3

Typography

Display

Build for good.

Heading 2

Consistent product design

Heading 3

Reusable interface pattern

Body

All interface text uses the Manrope webfont bundled inside FG UI, including buttons, controls, labels, tables and status badges.

Small
Supporting text and quiet metadata remain easy to scan.

Radius system

10px
14px
18px
22px
Buttons use their own fixed 15px radius.

Shadow system

Small
Medium
Large
Consistency contract

One FG UI across frontend and backend

The surface can change, but the component never becomes a different design language.

Shared by default

Buttons and status

Administrator
Ready
Frontend
Ready

Fields and cards

Administrator
Shared card

Same border, radius, spacing and type.

Frontend
Shared card

Same component, different content.

Tabs and alerts

Administrator
i
Shared information message.
Frontend
i
Shared information message.

Rules that prevent drift

Manrope is the FG UI typeface everywhere.
#0F79CC is the primary action colour everywhere.
15px is the standard action-button radius everywhere.
Shared jobs use shared classes. Area-specific classes are only for genuinely different structures.
No forced overrides rules are allowed anywhere in FG UI.
Actions

Buttons

Every button variant owns its foreground and background across default, hover, active and disabled states.

Core actions

Surface contrast test

Use this specimen to hover every variant on light, blue and dark surfaces.

Sizes and states

Icon and grouped

Same buttons everywhere

Administrator and frontend screens use the exact same button component and tokens.
Input

Forms and settings

All fields use the same rounded control language.

Standard fields

Validation

Search and input groups

https://

Checkboxes and switches

Settings rows

Use FG UI
Apply the ForGoodTools design system.
Default view
Choose the first screen shown to users.
Items per page
Used by tables and lists.

File upload

Drop a package here

or choose a file from your computer

Choice controls

Modern FG UI dropdowns

Our custom dropdown is fully styled by FG UI, including the open options panel. Native selects remain available only when a browser-native control is specifically wanted.

Own CSS + JS

Rich dropdown

Views

Searchable dropdown

Native fallback

System feedback

Status, messages and loading

Clear states with compact FG UI status styling.

Status pills

DefaultEnabledAttentionErrorNewTag

Source badges

Local databaseWEB
White on dark

Alerts

i
Information
Useful information that needs attention.
Completed
Your changes were saved successfully.
!
Check this
One setting still needs attention.
Something failed
Review the error and try again.

Quiet note

?
Helpful context
This is explanatory text and should not look like a warning.

Progress

Downloading68%
Installing package
Please keep this page open.

Skeleton loading

Empty state

No items yet

Create the first item to get started.

Toast, tooltip and menu

Helpful tooltip text
Content and data

Cards, lists and tables

Reusable surfaces that feel like the same product.

Cards

Standard card
General content surface
Ready

Cards use restrained borders, white surfaces and subtle shadows.

Soft card

For quieter secondary information.

Metrics

31,102
Local verses
Healthy
2
Translations
Ready
99.9%
Availability
Stable

List

FG
FG Bible
Component · Version 1.0.0
Enabled
FS
FG Social
Component · In development
New

Key / value details

Product
FG Bible
Version
1.0.0
UI library
FG UI
Font
Manrope

Administrator table

Designed as FG UI, not a raw Joomla table.
NameTypeStatusUpdatedActions
World English BibleTranslationReadyToday
King James VersionTranslationReadyYesterday
Example providerPluginCheck3 days ago

Comparison table

FeatureLocalManual RemoteAutomatic
Uses local data first
Remote requestNeverManualWhen needed
Recommended defaultYes
Interactive surfaces

Accordion, modal and drawer

Accordion

Products load the shared FG UI library and use neutral reusable classes.
No. This visual reference is completely self-styled.

Modal and drawer

Extended library

More things we may need to build anything

Reusable patterns for software tools, communities, content, workflows and data-heavy products.

Shared components

Application shell

FG
ProductWorkspace
CT
Main workspace

The same shell can hold admin or product interfaces.

Filters and chips

3 selected

Command palette

Create new itemN
Open settingsS
View activityA

Tree navigation

▾ Components
Cards
Forms
Navigation
▸ Assets
▸ Integrations

Timeline

Package installed
Today, 10:32
↻
Data synchronized
Today, 10:35
User invited
Today, 11:04

Kanban workflow

To do2
Review settingsFG Bible
Write documentationFG UI
Doing1
Build componentFG Social
Done1
Design tokensComplete

Calendar

September 2026
M
T
W
T
F
S
S
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Files and media

FG
Preview image
1200 × 800
ZIP
package.zip
2.4 MB
PDF
guide.pdf
840 KB

Presence and people

CT
Christopher
Online now
3
5.0 rating

Meters and quotas

Storage72%
Monthly usage45%

Popover and shortcuts

Quick actions

Use a compact floating surface for contextual actions and help.

Esc

Date, time and native values

Date Our own calendar popup, styled and controlled entirely by FG UI.
Time Modern 24-hour picker using only our own CSS and JavaScript.
Colour
Website building blocks

Complete website sections

Reusable FG UI blocks for public sites, landing pages, product sites and app frontends.

FGForGoodTools
HomeFeaturesPricingDocs
Build consistently

One UI system for every FG Tools product.

Admin tools, public websites, social products and apps can all share the same visual language without relying on an outside framework.

FG
01

Own styling

Every visual comes from FG UI.

02

Shared components

Frontend and backend use the same design language.

03

Reusable products

FG Bible, Social, Chat and future products stay aligned.

“The interface feels like one product even when the features are completely different.”

FG
Product user
Example testimonial layout

Newsletter block

Useful for updates, communities and product announcements.

Ready to build with FG UI?

Use the same system in every ForGoodTools product.

FGForGoodTools

Independent tools built with one consistent UI.

Reusable content containers

Module and widget layouts

Consistent chrome for Joomla modules, dashboards, sidebars and reusable blocks without using Joomla styling.

Standard module

Live

Normal content module with header and footer.

View details

Accent module

1,248

Active items this month.

Soft module

For helpful secondary information.

Compact list

Updates3
Messages12
Warnings1

Dark promotional module

Useful for a strong CTA inside a light page.

96%Health score
Accounts and access

Login, registration and verification

Authentication boxes use the exact same form, button and feedback components as the rest of FG UI.

FG

Welcome back.

Sign in to continue to your ForGoodTools account.

FG UI

Local, independent and consistent.

Sign in

Enter your account details below.

Forgot password?
or

Forgot password

Enter your email and we will send reset instructions.

Verification code

Enter the six-digit code.

Plans and payments

Pricing boxes

Reusable plan cards for products, memberships, subscriptions and service tiers.

Free

For getting started.

£0/ month
  • Core features
  • Community support
  • Local FG UI
Popular

Plus

For active products.

£19/ month
  • Everything in Free
  • Advanced features
  • Priority support

Business

For teams and organisations.

£49/ month
  • Everything in Plus
  • Team controls
  • Business support
Listings and transactions

Products, cards and order layouts

General-purpose patterns that also work for directories, extension stores and paid features.

FG
Component

FG Example

A reusable product card.

£29
UI
Library

FG UI

Consistent interface building blocks.

Included

Order summary

FG
FG Product
Single licence
£29
Subtotal£29
Tax£0
Total£29
Popups and interruptions

Popup patterns

Confirmation, forms, success states, notices and consent layouts all use our own overlay system.

Modal types

New

Small anchored popup

Useful for tips, updates or quick contextual actions.

Privacy preferences

Example consent/banner pattern using the same FG UI controls.

FG UI update availableSee what changed
Common app content

Search, articles, profiles and special states

General patterns that appear repeatedly across sites, templates and applications.

Search results

A

Administrator settings

A result with title, description and context.

Page
D

Dashboard overview

Another matching result layout.

View

Article card

FG
Guide

How to build with FG UI

Article, blog and documentation preview layout.

Read article

Profile header

CT

Christopher Taylor

Product owner12 projectsOnline
404

Page not found

The page may have moved or no longer exists.

Create item

New FG UI record

Changes saved

Your updates have been saved successfully.

!

Delete this item?

This action cannot be undone.

Advanced input

Advanced forms, dates and media

Patterns for richer workflows without depending on external form or media libraries.

Shared everywhere

Password and secure entry

Verification code

Date and time

Date
Time
Month

Tags, mentions and inline edit

Joomla UI
CT
Christopher Taylor@christopher
AB
Abigail@abigail
Editable value

Media and upload queue

Image preview
ZIP
fg-component.zip
72%
PNG
preview.png
Upload complete
Done
Structure

Layouts, cards and data visualisation

Reusable structures for websites, applications, dashboards and content-heavy tools.

Page layout patterns

Card variants

A
Clickable card

For destinations and choices.

Selected cardSelected

For selectable plans or options.

Media
Horizontal card

Useful in lists and search results.

Disabled card

Unavailable but still readable.

Charts without a chart library

Usage74%
72%Healthy
12.4%

Master/detail and split view

General

Product settings

Master/detail layouts use the same shared components inside.

Identity and onboarding

Account, security and onboarding

Complete flows for registration, verification, sessions and first-run setup.

Registration

FG

Create your account

Use one account across this product.

Two-factor authentication

2FA
Authenticator app

Add an extra layer of account security.

Enabled
FG4A-82PL7Q9M-X2KP5VTR-1JNF9CWA-P88L

Sessions and devices

PC
Windows · ChromeCurrent session · Southport
Current
M
Mobile browserLast active yesterday

Onboarding checklist

3 of 5 completeFinish setup to get the most from the product.
System states

Errors, offline states, permissions and maintenance

Products need consistent states when things go wrong, not just when everything succeeds.

System state cards

403
Access denied

You do not have permission to view this area.

500
Something went wrong

The request could not be completed.

Connectivity

You are offlineChanges will sync when your connection returns.
ReconnectingTrying to restore your connection.
Scheduled maintenanceExpected to finish shortly.

Permission matrix

PermissionAdminEditorViewer
View
Edit—
Delete——

Unsaved changes

Unsaved changesYour edits have not been saved yet.
⌛
Session expired

Sign in again to continue without losing your work.

Technical products

Developer, help and documentation UI

Patterns for APIs, logs, webhooks, documentation, support and technical administration.

Code and logs

example.php
<button class="fgui-btn fgui-btn--primary">Save</button>
20:41:02INFO

FG UI assets loaded successfully.

20:41:04OK

No external framework dependency detected.

API key and webhook

API keyfg_live_••••••••••••P9K2
user.createdhttps://example.test/hooks/users
Active

Help and documentation

?
DocumentationGuides and component examples
⌨
Keyboard shortcutsWork faster with FG UI
✉
Contact supportGet help with a product

Rating and review

4.8
128 reviews
5
78%
4
16%
3
6%
Production workflows

Search, publishing, settings and advanced data

Patterns that repeatedly appear in real templates, applications and administrator tools.

Built from shared components

Advanced search and filters

Status
Active filters
Type: Component Owner: Me

Advanced table controls

2 selected
Name ↕StatusUpdated
FG BiblePublishedToday
FG SocialDraftYesterday

Rich content editor shell

Article heading

This editor shell provides our own toolbar and content surface. A product can connect the actions to its own editing logic.

Content styles remain part of FG UI.
248 charactersAutosaved just now

Comments and replies

CT
Christopher5m

This comment uses the same card, type and action language as the rest of FG UI.

AB
Abigail

And nested replies stay visually connected.

Settings with dependencies

Enable notificationsAllow this product to send in-app notifications.
Email summariesSend a daily digest when notifications are enabled.
Advanced modeShow additional expert settings.

Notification centre

Notifications3 unread
FG
Update completed
FG Bible is now up to date.
Now
AB
New reply
Abigail replied to your discussion.
1h

Responsive product navigation

FGProduct
HomeExploreAccount
HomeSearchCreateProfile

International and RTL-safe direction

EnglishDashboard
RTL previewواجهة المستخدم
Layout primitives use logical spacing/alignment where possible so RTL products can mirror naturally.
Media, motion and utility patterns

Carousel, gallery, countdown and content tools

Original FG UI patterns added to cover common website and app needs that were not represented elsewhere in the system.

FG UI original
Carousel / featured content
01
Featured

One component for slides, products and stories

Use the same carousel shell for marketing panels, featured extensions, community highlights or media.

02
Flexible

Content changes, FG UI stays consistent

Navigation, spacing, typography and focus states stay the same across every product.

03
Independent

No external slider dependency

The interaction is handled by our own lightweight FG UI JavaScript.

Countdown
02Days
03Hours
04Minutes
05Seconds

Useful for launches, maintenance windows, events and timed campaigns.

Responsive media frame
▶16:9 mediaVideo, embed or responsive image
16:94:3Square
Image markers / hotspots
Interactive image or diagram
Hotspot detailAttach information to a precise point.
Second markerUseful for diagrams, tours and product images.
Thumbnail gallery + lightbox
FG UI media
Sortable / reorder
DashboardMain product overview
1
SettingsProduct configuration
2
MaintenanceHealth and tools
3

Drag items with a mouse, or use the arrow buttons for keyboard and touch reordering.

Full article/content typography
FG Tools8 min readUpdated today

Content should look like FG UI too

Long-form documentation, blog posts, help pages and release notes need the same typographic discipline as the application interface.

FG UI provides readable paragraph widths, heading rhythm, links, lists, quotes, inline code and content tables without relying on a template framework.

A design system is only consistent when ordinary content is included too.

Useful for

  • Documentation
  • Help centres
  • Release notes

Also works for

  1. Articles
  2. Guides
  3. Policies
Complete product view

Administrator UI

A full FG Tools administrator direction using the same system.

ForGoodTools

FG Bible Dashboard

Manage local Bible data, health, translations and integration settings from one consistent administrator interface.

FG
2
Translations
Ready
31k
Verses
Local
0
Errors
Healthy
1.0
FG UI
Active
Local Bible Status
Core data health
Healthy
Ready translations
2 / 2
Reader source
Local database
Quick actions
Common administrator tasks
Translations

Manage translations

Ordinary administrator pages use the lighter standard hero.

Setup and maintenance

Install, update and uninstall

FG
FG Tools Installer

FG Bible installed successfully

Install, update and uninstall screens use the same standard administrator page hero, with lifecycle-specific content inside it.

24Files checked
4Database updates
0Errors

Uninstall impact

Component files
Removed during uninstall
Remove
User notes
Preserved unless explicitly selected
Keep
Local Bible data
Optional cleanup
Optional

Danger zone

Only destructive actions belong here.

Public product UI

Frontend

The same FG UI family with lighter page surfaces and compact controls.

Current content

Matthew 5

World English Bible

Local database
18Saved
7Notes
4Tags
Matthew 5:14

Example reader content

WEB

The frontend remains content-first. Controls are small, consistent and easy to understand.

FG UI supports the content without overpowering it.
Matthew 5
Community products

Social UI

Patterns for FG Social and future community components.

User cards

CT
Christopher Taylor
12 shared interests
CommunityDeveloper
AB
Abigail
4 shared groups

Post composer

CT

Post card

AB
Abigail
5 minutes ago · Friends
The same FG UI system can support a complete social/community product.
Media preview

Notifications and activity

JS
Jamie replied to your post
2 minutes ago
New
Profile completed
Today at 10:30
Joined a group
Yesterday
Messaging products

Chat UI

Reusable messaging patterns for FG Chat.

Conversation

AB
Abigail
Online
AB
Hi! The new FG UI looks much more consistent.
20:31
CT
Great. Now every product can use the same system.
20:32
AB

Conversation list

AB
Abigail
20:32
Great. Now every product can use the same system...
2
JS
Jamie
Yesterday
Thanks for the message.
MP
Mark
Monday
See you in the group later.
Responsive

Mobile direction

FG UI collapses cleanly without creating a second mobile theme.

Reader

Matthew 5

WEB

Controls remain compact and content stays easy to scan.

Matthew 5

Accessibility and states

Keyboard focus uses a consistent blue focus ring.
Reduced-motion preferences disable unnecessary animation.
Primary buttons always define their own white foreground text.
Form labels, help text, error text and disabled states are included.
Responsive layouts move from four or three columns to two and then one.